/* ═══════════════════════════════════════════════════════════════════════
   ENTRADA — Dois Caminhos / duas portas
   Fundo unificado (céu noturno das 4 imagens); porta FECHADA por padrão,
   ABRE no hover/toque revelando o mundo roxo. Lado ativo cresce e escurece
   o outro. Mobile empilha (2 painéis) e abre no toque.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --graphite:#1A1A1A; --ice:#F9FAFB; --gray:#D4D4D4; --purple:#9E23B2;
  --font-title:'Anton', Impact, sans-serif;
  --font-sub:'Antonio', sans-serif;
  --font-body:'News Cycle', sans-serif;
  --font-accent:'Unica One', cursive;
  --void:#07070c;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--void); color:var(--ice); font-family:var(--font-body); overflow:hidden; }

.entry{
  position:relative; display:flex; width:100%; height:100svh; overflow:hidden;
  background:var(--void); animation:entryIn 1s ease both;
}
@keyframes entryIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---- cada porta ---- */
.gate{
  position:relative; flex:1 1 50%; min-width:0; height:100%;
  display:flex; align-items:flex-end; justify-content:center;
  text-decoration:none; color:var(--ice); overflow:hidden; cursor:pointer;
  isolation:isolate;
  transition:flex-basis .6s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
/* vídeo da porta: pôster = frame 0 (porta fechada). O JS toca no hover/toque,
   e ao sair volta pro início. Se terminar com o mouse em cima, para no último
   frame (porta aberta) — sem loop. */
.gate__video{
  position:absolute; inset:0; z-index:0; display:block;
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  background:var(--void); pointer-events:none;
}

.gate__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,6,12,.94) 0%, rgba(6,6,12,.42) 36%, rgba(6,6,12,0) 64%);
  transition:background .5s ease;
}

.gate__content{
  position:relative; z-index:2; text-align:center; padding:0 6% 12svh;
  transform:translateY(16px); transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.gate__eyebrow{
  display:block; font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:.34em; font-size:.72rem; color:var(--gray); opacity:.8; margin-bottom:1rem;
}
.gate__title{
  display:block; margin:0; font-family:var(--font-title); text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5.4rem); line-height:.94; letter-spacing:.012em;
  text-shadow:0 8px 40px rgba(0,0,0,.55);
}
.gate__tag{
  display:block; margin:1rem 0 0; font-family:var(--font-sub); font-weight:400;
  font-size:clamp(1rem,1.5vw,1.4rem); color:var(--gray);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease .05s, transform .5s ease .05s;
}
.gate__enter{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.7rem;
  font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.2em; font-size:.82rem;
  color:var(--ice); opacity:0; transform:translateY(10px);
  transition:opacity .5s ease .1s, transform .5s ease .1s;
}
.gate__enter svg{ width:18px; height:18px; }
.gate__enter--soon{ color:var(--gray); }

/* ---- estado ABERTO: hover (desktop) · foco · .is-open (toque) ---- */
.gate:hover .gate__content,
.gate:focus-visible .gate__content,
.gate.is-open .gate__content{ transform:translateY(0); }

.gate:hover .gate__tag,   .gate:hover .gate__enter,
.gate:focus-visible .gate__tag, .gate:focus-visible .gate__enter,
.gate.is-open .gate__tag, .gate.is-open .gate__enter{ opacity:1; transform:translateY(0); }

.gate:hover .gate__scrim,
.gate:focus-visible .gate__scrim,
.gate.is-open .gate__scrim{
  background:linear-gradient(to top, rgba(22,4,30,.94) 0%, rgba(22,4,30,.34) 40%, rgba(158,35,178,.08) 70%, transparent 100%);
}

/* crescer o lado ativo e escurecer o outro (desktop com hover real) */
@media (hover:hover) and (min-width:761px){
  .entry:has(.gate--mkt:hover) .gate--mkt,
  .entry:has(.gate--ia:hover)  .gate--ia{ flex-basis:57%; }
  .entry:has(.gate:hover) .gate:not(:hover){ filter:brightness(.4) saturate(.75); }
}

/* feedback "em breve" */
@keyframes soonShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.gate.is-soon .gate__enter{ animation:soonShake .38s ease; color:var(--purple); }

/* ---- seam central ---- */
.entry__seam{
  position:absolute; z-index:5; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(to bottom, transparent, rgba(158,35,178,.55), rgba(249,250,251,.28), rgba(158,35,178,.55), transparent);
  box-shadow:0 0 26px 5px rgba(158,35,178,.32); pointer-events:none;
}

/* ---- topo: marca + prompt ---- */
.entry__top{
  position:absolute; z-index:6; top:clamp(20px,4svh,46px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; pointer-events:none;
}
.entry__brand{
  font-family:var(--font-title); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1rem,1.6vw,1.45rem); text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.entry__prompt{
  font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.36em;
  font-size:.7rem; color:var(--gray); opacity:.82;
}

/* ═══════════════ MOBILE — empilha os 2 painéis ═══════════════ */
@media (max-width:760px){
  .entry{ flex-direction:column; }
  .gate{ flex:1 1 50%; }
  .gate__video{ object-position:center 34%; }
  .gate__content{ padding:0 8% 6svh; transform:translateY(10px); }
  .gate__title{ font-size:clamp(2.1rem,10vw,3.4rem); }
  .gate__eyebrow{ margin-bottom:.6rem; }
  /* no toque, a tag/entrar já aparecem levemente pra indicar interação */
  body.is-touch .gate__enter{ opacity:.9; transform:none; }
  .entry__seam{
    top:50%; bottom:auto; left:0; right:0; width:auto; height:2px; transform:translateY(-50%);
    background:linear-gradient(to right, transparent, rgba(158,35,178,.55), rgba(249,250,251,.28), rgba(158,35,178,.55), transparent);
    box-shadow:0 0 22px 4px rgba(158,35,178,.3);
  }
}

/* acessibilidade — menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  /* sem movimento: o vídeo não toca (JS respeita), fica no pôster/porta fechada */
}