/* backend>static>dogs>css>landing.css */

/* Variabili e reset minimi, limitati al body della landing */
.landing-body {
  --ctl-h: 36px;
  --ctl-pad-y: 8px;
  --ctl-pad-x: 14px;

  margin: 0;
  background: #0b0b0b;
  color: #111;
  overflow: hidden;            /* niente scroll pagina */
  font-family: Arial, sans-serif;
}

/* Layout due colonne a tutta altezza */
.landing-body .landing-wrap {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;          /* per badge/divider centrali */
}

/* Colonne */
.landing-body .landing-left,
.landing-body .landing-right {
  flex: 1 1 50%;
  padding-block: 32px;
}

/* Colonna sinistra: teaser video full-bleed */
.landing-body .landing-left {
  background: #0f0f10;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: block;
}

.landing-body .left-content { display: contents; }

.landing-body .teaser-box{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  background: #000;            /* evita flash */
}
.landing-body .teaser-box video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0 !important;
}

/* Colonna destra: card di login */
.landing-body .landing-right {
  background:#0f0f10; color:#e7e7e7;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
}
.landing-body .auth-card {
  width: min(520px, 92%);
  padding: 24px;
  border:1px solid #2a2a2a;
  border-radius:12px;
  background:#0f0f10;
}

/* Titolo */
.landing-body .welcome-title {
  text-align: center;
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: .2px;
}
.landing-body .welcome-title strong {
  font-size: 1.25em;
  letter-spacing: .3px;
}

/* Pulsanti OAuth / Guest (altezza uniforme) */
.landing-body .oauth-btn,
.landing-body .guest-btn {
  display:flex; align-items:center; justify-content:center; gap:.65rem;
  width:94%; margin-top:10px;
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
  min-height: var(--ctl-h);
  border-radius:12px;
  text-decoration:none;
  border:1px solid transparent;
  font-weight:500;
  transition: transform .06s ease, background .2s ease, border .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Base scura uniforme per i provider */
.landing-body .oauth-btn {
  background: linear-gradient(180deg, #111, #0d0d0e);
  border-color:#2a2a2a; color:#e9eef4;
}
.landing-body .oauth-btn:hover { transform: translateY(-1px); border-color:#3a3a3a; }
.landing-body .oauth-btn:active { transform: translateY(0); }

/* Icona a sinistra nel pulsante */
.landing-body .oauth-btn .ico {
  width:22px; height:22px; display:inline-grid; place-items:center;
  border-radius:5px; background:transparent; line-height:0;
}
.landing-body .icon-img { width:22px; height:22px; display:block; object-fit:contain; }

/* Wallet accent */
.landing-body .oauth-btn.wallet .ico { background:#f6851b; color:#fff; }

/* Stato disabled (Instagram placeholder) */
.landing-body .oauth-btn.disabled {
  opacity: .6; pointer-events: none; cursor: not-allowed;
}

/* Ospite */
.landing-body .guest-btn {
  margin-top:16px;
  background:#0f1530; color:#d6e2ff; border-color:#1a2350;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.landing-body .guest-btn:hover { filter: brightness(1.05); }

/* Zampette bianche */
.landing-body .paws-white {
  filter: invert(1) brightness(1.2) contrast(1.05);
  font-size:30px; line-height:0;
}

/* Separatore “oppure” */
.landing-body .sep {
  display:flex; align-items:center; gap:12px; margin:18px 0; color:#888;
}
.landing-body .sep::before,
.landing-body .sep::after {
  content:""; flex:1; height:1px; background:#2a2a2a;
}

/* Badge store (Google Play / App Store) */
.landing-body .store-badges {
  display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap;
  margin:14px 0 18px;
}
.landing-body .store-badges .badge {
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; padding:0;
  border:1px solid #8b9098;         /* argentato scuro */
  border-radius:5px; background:#fff;
  overflow:hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.06s ease;
}
.landing-body .store-badges .badge:active { transform: translateY(1px); }
.landing-body .store-badges .badge img {
  display:block; height:28px; width:auto; object-fit:contain;
}
@media (min-width: 768px)  { .landing-body .store-badges .badge img { height:30px; } }
@media (min-width: 1024px) { .landing-body .store-badges .badge img { height:32px; } }

/* Spazio tra “ospite” e note legali */
.landing-body #btn-guest { margin-bottom: 20px; }
@media (max-width: 480px) { .landing-body #btn-guest { margin-bottom: 16px; } }

/* Testo legale */
.landing-body .legal { margin-top: 0; color:#6f6f6f; font-size:.82em; line-height:1.3; }
.landing-body .legal a.legal-link { color:#fff; text-decoration: underline; text-underline-offset: 2px; }
.landing-body .legal a.legal-link:hover { opacity:.85; }

/* Divider e badge centrali */
.landing-body { --badge-shift: 32px; } /* nudge verso destra per bilanciare la card */

.landing-body .center-divider {
  position:absolute; top:0; bottom:0; left: calc(50% + var(--badge-shift));
  width:1px; transform: translateX(-0.5px);
  background: linear-gradient(180deg, transparent, #2a2a2a 12%, #2a2a2a 88%, transparent);
  opacity:.8; pointer-events:none; z-index:2;
}
.landing-body .center-badge{
  position:absolute; left: calc(50% + var(--badge-shift)); top:50%;
  transform: translate(-50%, -50%);
  width:72px; height:72px; display:grid; place-items:center;
  border-radius:50%;
  background: rgba(18,18,20,.75);
  backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px #2a2a2a, 0 8px 24px rgba(0,0,0,.35);
  pointer-events:none; z-index:3;
}
.landing-body .center-badge img{ width:68%; height:68%; object-fit:contain; }

@media (max-width: 1200px){
  .landing-body { --badge-shift: 18px; }
  .landing-body .center-badge{ width:64px; height:64px; }
}
@media (max-width: 1024px){
  .landing-body { --badge-shift: 14px; }
}
@media (max-width: 900px){
  .landing-body .center-badge,
  .landing-body .center-divider { display:none; }
}

/* Watermark impronte sopra al video */
.landing-body .teaser-box { position: relative; }
.landing-body .teaser-mark{
  position: absolute; right: 28px; bottom: 23px;
  display: flex; gap: 4px; padding: 6px 10px;
  border-radius: 10px; background: transparent; border: 0;
  color: #fff; font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.landing-body .teaser-mark span{
  display: inline-block;
  animation: paw-breathe 2.2s ease-in-out infinite;
}
.landing-body .teaser-mark span:nth-child(2){ animation-delay: .25s; }
@keyframes paw-breathe{
  0%, 100% { transform: translateY(0) scale(1); opacity: .95; }
  50%      { transform: translateY(-1px) scale(1.02); opacity: 1; }
}
@media (max-width: 480px){
  .landing-body .teaser-mark{ right: 10px; bottom: 10px; padding: 5px 8px; font-size: 18px; }
}
#teaserBox, #teaserVideo { width:100%; height:100%; }
#teaserVideo { object-fit: cover; }

/* Stage: contiene sia video che img sovrapposti */
.landing-body .teaser-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* entrambi full-bleed */
#teaserVideo, #teaserImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform: scale(1.05);            /* micro-zoom come facevi inline */
  transform-origin:center;

  opacity:0;
  transition: opacity .25s ease;
}

/* quello attivo */
#teaserVideo.is-on,
#teaserImage.is-on{
  opacity:1;
}