/* ==========================================================================
   ÁUREA — VSL
   Sistema visual espelhado de aureaclube.com
   ========================================================================== */

:root{
  /* superfícies */
  --bg:            #0B0B0A;
  --bg-deep:       #070809;
  --bg-raise:      #101010;

  /* tipografia */
  --ink:           #FFFFFF;
  --ink-2:         rgba(226,229,234,.66);
  --ink-3:         rgba(214,219,227,.42);

  /* traços */
  --line:          rgba(255,255,255,.16);
  --line-soft:     rgba(255,255,255,.08);
  --line-faint:    rgba(255,255,255,.06);

  /* famílias */
  --f-display:     "Playfair Display", Georgia, serif;
  --f-brand:       "Cinzel", "Playfair Display", serif;
  --f-mono:        "Roboto Mono", ui-monospace, monospace;
  --f-cond:        "Roboto Condensed", Arial, sans-serif;

  /* métrica */
  --pill:          1280px;
  --wrap:          1120px;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-cond);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
svg{ width:1em; height:1em; }

::selection{ background:rgba(255,255,255,.16); }

:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

/* --------------------------------------------------------------------------
   texto metálico (assinatura visual do site de referência)
   -------------------------------------------------------------------------- */
.metal{
  background:linear-gradient(180deg,#FFF 0%,#EEF0F3 42%,#B9BEC7 78%,#D7DAE0 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  position:relative;
}

/* --------------------------------------------------------------------------
   ticker
   -------------------------------------------------------------------------- */
.ticker{
  border-bottom:1px solid var(--line-faint);
  background:var(--bg-deep);
  overflow:hidden;
  padding:9px 0;
}
.ticker__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker__group{ display:flex; align-items:center; gap:22px; padding-right:22px; }
.ticker em{
  font-family:var(--f-mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-3);
  white-space:nowrap;
}
.ticker i{ font-style:normal; font-size:9px; color:rgba(255,255,255,.24); }

@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */
.head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  max-width:var(--wrap);
  margin:0 auto;
  padding:22px 24px 6px;
}
.brand{
  font-family:var(--f-brand);
  font-weight:600;
  font-size:19px;
  letter-spacing:.34em;
  padding-left:.34em; /* compensa o tracking à direita */
}
.head__meta{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   palco
   -------------------------------------------------------------------------- */
.stage{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px 72px;
}
/* o glow fica fora do fluxo — por isso o :not() abaixo não pode alcançá-lo */
.stage > :not(.glow){ position:relative; z-index:1; }

.glow{
  position:absolute;
  top:-120px; left:50%;
  width:min(1000px,140vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(226,231,238,.16),rgba(220,226,235,.045) 50%,transparent 72%);
  pointer-events:none;
  z-index:0;
}

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.hero{ text-align:center; padding:34px 0 30px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px;
  padding:7px 15px;
  border:1px solid var(--line);
  border-radius:var(--pill);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ink-2);
  background:rgba(255,255,255,.02);
}
.dot{
  width:5px; height:5px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
  70%{ box-shadow:0 0 0 9px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

.hero__title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(27px,5.1vw,53px);
  line-height:1.06;
  letter-spacing:.01em;
  margin:0 0 18px;
}
.hero__sub{
  max-width:52ch;
  margin:0 auto;
  font-family:var(--f-cond);
  font-size:clamp(14px,1.6vw,17px);
  font-weight:300;
  line-height:1.62;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   player
   -------------------------------------------------------------------------- */
.player{ margin:6px auto 0; max-width:900px; }

.player__frame{
  position:relative;
  padding:8px;
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(35,38,43,.34),rgba(7,8,9,.72));
  box-shadow:
    0 40px 120px -40px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.corner{
  position:absolute; width:13px; height:13px;
  border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
}
.corner--tl{ top:-1px; left:-1px;  border-right:0; border-bottom:0; }
.corner--tr{ top:-1px; right:-1px; border-left:0;  border-bottom:0; }
.corner--bl{ bottom:-1px; left:-1px;  border-right:0; border-top:0; }
.corner--br{ bottom:-1px; right:-1px; border-left:0;  border-top:0; }

.player__ratio{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.player__ratio > video,
.player__embed{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.player__ratio > video{ object-fit:cover; }
.player__embed iframe,
.player__embed video{ width:100%; height:100%; border:0; }

/* vertical (9:16) — ative com data-ratio="vertical" no .player */
.player[data-ratio="vertical"]{ max-width:420px; }
.player[data-ratio="vertical"] .player__ratio{ aspect-ratio:9/16; }

/* --------------------------------------------------------------------------
   barra de andamento decorativa
   Sobe até o fim assim que o vídeo começa. Não é arrastável, não tem relógio.
   -------------------------------------------------------------------------- */
.fakebar{
  position:absolute;
  left:0; right:0; bottom:0;
  height:34px;
  display:flex; align-items:center;
  padding:0 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  pointer-events:none;   /* nada aqui responde a clique ou arrasto */
  opacity:0;
  transition:opacity .5s var(--ease);
  z-index:3;
}
.fakebar[hidden]{ display:none; }
.fakebar.is-in{ opacity:1; }

.fakebar__track{
  position:relative;
  flex:1;
  height:3px;
  border-radius:var(--pill);
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.fakebar__fill{
  display:block; height:100%; width:0%;
  border-radius:var(--pill);
  background:linear-gradient(90deg,rgba(255,255,255,.75),#FFF);
}
.fakebar__knob{
  position:absolute;
  top:50%; left:14px;
  width:9px; height:9px;
  margin-top:-4.5px; margin-left:-4.5px;
  border-radius:50%;
  background:#FFF;
  box-shadow:0 0 0 3px rgba(0,0,0,.28);
}

/* --------------------------------------------------------------------------
   cortina anti-inspeção
   -------------------------------------------------------------------------- */
.shield{
  position:absolute; inset:0;
  z-index:9;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  padding:24px;
  text-align:center;
  background:rgba(4,4,5,.97);
  backdrop-filter:blur(16px);
}
.shield[hidden]{ display:none; }
.shield__icon{
  display:grid; place-items:center;
  width:48px; height:48px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:22px;
  color:var(--ink-2);
}
.shield strong{
  font-family:var(--f-mono);
  font-weight:500; font-size:12px;
  letter-spacing:.2em;
}
.shield small{
  max-width:34ch;
  font-family:var(--f-cond);
  font-size:13px; font-weight:300;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   travas de cópia (ativadas por body.is-protected)
   -------------------------------------------------------------------------- */
body.is-protected{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  -webkit-touch-callout:none;
}
/* o rodapé legal continua selecionável */
body.is-protected .foot__legal{
  -webkit-user-select:text;
     -moz-user-select:text;
          user-select:text;
}
body.is-protected video,
body.is-protected .player__ratio{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}

/* overlay de som */
.unmute{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:14px;
  border:0;
  background:rgba(6,6,6,.5);
  backdrop-filter:blur(2px);
  color:#fff;
  cursor:pointer;
  z-index:5;
  transition:opacity .4s var(--ease), visibility .4s;
}
.unmute[hidden]{ display:none; }
.unmute.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
.unmute__icon{
  display:grid; place-items:center;
  width:50px; height:50px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:21px;
  background:rgba(255,255,255,.06);
}
.unmute__txt{ text-align:left; }
.unmute__txt strong{
  display:block;
  font-family:var(--f-mono); font-weight:500;
  font-size:12px; letter-spacing:.18em;
}
.unmute__txt small{
  display:block; margin-top:4px;
  font-family:var(--f-cond); font-size:13px; font-weight:300;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   gate (barra de progresso + contagem)
   -------------------------------------------------------------------------- */
/* Linha única, alinhada à moldura do player. Enche conforme o vídeo é
   assistido. Sem relógio, sem porcentagem: nada que denuncie o tempo. */
.gate{
  margin:0 auto 14px;          /* fica ACIMA do player */
  max-width:900px;
  padding:0 9px;               /* mesma moldura do .player__frame */
  opacity:0;
  transition:opacity .6s var(--ease), transform .45s var(--ease);
}
.gate__label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 11px;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.26em;
  color:var(--ink);
  text-shadow:0 0 20px rgba(255,255,255,.28);
}
.gate__label[hidden]{ display:none; }

/* ponto pulsante: sinaliza "acontecendo agora" e puxa o olho */
.gate__pulse{
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:#FFF;
  animation:pulse 2.4s var(--ease) infinite;
}

/* respiração leve enquanto a linha corre */
.gate.is-running .gate__label{ animation:breathe 2.8s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
.gate.is-in{ opacity:1; }
.gate.is-done{ opacity:0; transform:translateY(-6px); pointer-events:none; }
.gate[hidden]{ display:none; }

.gate__bar{
  position:relative;
  height:3px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

/* brilho que atravessa o trilho — só corre com o vídeo tocando */
.gate__bar::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-100%);
  opacity:0;
}
.gate.is-running .gate__bar::after{
  opacity:1;
  animation:gatesweep 2.6s linear infinite;
}
@keyframes gatesweep{ to{ transform:translateX(100%); } }

.gate__fill{
  position:relative;
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.9));
  transition:width .45s linear;
}

/* ponta luminosa, para ler como "carregando" e não como barra estática */
.gate__fill::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:28px; height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#FFF);
  box-shadow:0 0 10px 1px rgba(255,255,255,.5);
}

/* --------------------------------------------------------------------------
   botões
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px;
  border:1px solid var(--ink);
  border-radius:var(--pill);
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-decoration:none;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ font-size:16px; }
.btn--solid{ background:#FFF; color:var(--bg-deep); }
.btn--solid:hover{ transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:11px; letter-spacing:.14em; }

/* varredura de brilho */
.btn--solid::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:sweep 3.4s var(--ease) infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes sweep{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(120%); } }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta{
  margin:40px auto 0;
  max-width:640px;
  text-align:center;
  padding:36px 24px 34px;
  border:1px solid var(--line-soft);
  border-radius:2px;
  background:
    radial-gradient(closest-side,rgba(201,205,212,.10),transparent 70%),
    linear-gradient(180deg,rgba(35,38,43,.28),rgba(7,8,9,.6));
}
.cta[hidden]{ display:none; }

/* revelação */
.cta.is-in{ animation:reveal .8s var(--ease) both; }
@keyframes reveal{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to  { opacity:1; transform:none;            filter:blur(0);   }
}

.cta__eyebrow{
  margin:0 0 14px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.28em;
  color:var(--ink-3);
}
.cta__title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(21px,3.4vw,32px);
  line-height:1.14;
  margin:0 0 26px;
}
.cta__note{
  margin:18px 0 0;
  font-family:var(--f-cond);
  font-size:13px;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   marcas
   -------------------------------------------------------------------------- */
.marks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:56px auto 0;
  max-width:760px;
  background:var(--line-faint);
  border:1px solid var(--line-faint);
}
.mark{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px;
  background:var(--bg);
}
.mark__n{
  font-family:var(--f-cond);
  font-size:26px; font-weight:300;
  color:rgba(255,255,255,.22);
  line-height:1;
}
.mark__t{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   rodapé
   -------------------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--line-faint);
  background:var(--bg-deep);
  padding:28px 24px 40px;
  text-align:center;
}
.foot__c{
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.2em;
  color:var(--ink-3);
}
.foot__nav{ display:flex; justify-content:center; gap:22px; margin:14px 0 16px; }
.foot__nav a{
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.2em;
  color:var(--ink-3);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.foot__nav a:hover{ color:var(--ink); }
.foot__legal{
  max-width:58ch; margin:0 auto;
  font-size:12px; font-weight:300; line-height:1.6;
  color:rgba(214,219,227,.3);
}

/* --------------------------------------------------------------------------
   CTA fixo
   -------------------------------------------------------------------------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0;
  z-index:40;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
  background:rgba(7,8,9,.92);
  backdrop-filter:blur(10px);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.sticky[hidden]{ display:none; }
.sticky.is-in{ transform:none; }
.sticky__txt{
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.22em;
  color:var(--ink-3);
}
.sticky .btn--solid::after{ animation:none; }

/* --------------------------------------------------------------------------
   estados globais
   -------------------------------------------------------------------------- */
body.is-unlocked .gate{ display:none; }

/* --------------------------------------------------------------------------
   responsivo
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .head{ padding:18px 20px 4px; }
  .head__meta{ display:none; }
  .stage{ padding:0 16px 64px; }
  .hero{ padding:26px 0 24px; }
  .player__frame{ padding:5px; }
  .marks{ grid-template-columns:1fr; max-width:420px; }
  .unmute{ flex-direction:column; gap:12px; }
  .unmute__txt{ text-align:center; }
  .cta{ padding:30px 18px 28px; }
  .btn{ width:100%; padding:16px 22px; }
  .sticky{ gap:12px; }
  .sticky__txt{ display:none; }
  .sticky .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}