/* =============================================================
   RENATA D'AGUIAR — Landing Page
   Arte original: fundo1.webp · renata.webp · fundo2.webp · video.mp4
   Canvas da arte: 3240 × 1920 (1.6875)
   ============================================================= */

/* ---------- 1. TOKENS ---------------------------------------- */
:root{
  --black:        #1d1d1b;
  --purple-dark:  #5d256d;
  --purple-main:  #75247f;
  --purple-light: #8e4996;
  --cyan:         #83d0f3;
  --white:        #ffffff;

  --ink-deep:  #3d0f4a;
  --indigo:    #4d4a9f;

  /* razão da arte + limite da área principal */
  --art-ar:    1.6875;
  --stage-max: 2400px;

  /* intensidade do padrão Onda Roxa atrás da Renata (fidelidade à referência) */
  --dare-op:   .36;

  --ease-out:  cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.33,.02,.2,1);

  --font: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- 2. RESET ----------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  overflow-x:hidden;
  background:var(--ink-deep);           /* nunca um flash branco */
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font);
  color:var(--white);
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 12% 0%,  #6b2278 0%, transparent 60%),
    radial-gradient(110% 80% at 92% 8%,  #3f3f8f 0%, transparent 58%),
    linear-gradient(170deg, #4a1758 0%, #5d256d 45%, #3b1046 100%);
  background-attachment:fixed;
}

img,svg,video{ display:block; max-width:100%; }
picture{ display:contents; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }   /* precisa vencer os display: grid abaixo */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.page{ position:relative; isolation:isolate; }

/* ---------- 3. MOTION BACKGROUND ------------------------------ */
.bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:scale(1.06);
}

.bg__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
  transform:translate3d(0,0,0);
}
.bg__blob--a{
  width:62vmax; height:62vmax; left:-16vmax; top:-22vmax;
  background:radial-gradient(circle at 40% 40%, #8e4996 0%, rgba(142,73,150,0) 68%);
  opacity:.85;
  animation:drift-a 44s var(--ease-soft) infinite alternate;
}
.bg__blob--b{
  width:70vmax; height:70vmax; right:-24vmax; top:-18vmax;
  background:radial-gradient(circle at 50% 50%, #4d4a9f 0%, rgba(77,74,159,0) 66%);
  opacity:.7;
  animation:drift-b 52s var(--ease-soft) infinite alternate;
}
.bg__blob--c{
  width:48vmax; height:48vmax; left:26vmax; bottom:-26vmax;
  background:radial-gradient(circle at 50% 50%, #75247f 0%, rgba(117,36,127,0) 70%);
  opacity:.9;
  animation:drift-c 38s var(--ease-soft) infinite alternate;
}
.bg__blob--d{
  width:34vmax; height:34vmax; right:2vmax; top:14vmax;
  background:radial-gradient(circle at 50% 50%, rgba(131,208,243,.55) 0%, rgba(131,208,243,0) 68%);
  opacity:.42;
  animation:drift-d 34s var(--ease-soft) infinite alternate;
}

/* feixe de luz diagonal, lentíssimo */
.bg__beam{
  position:absolute; top:-40%; left:-20%;
  width:70%; height:190%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(206,168,224,.16) 45%, rgba(255,255,255,0) 100%);
  transform:rotate(-18deg);
  filter:blur(50px);
  animation:beam 30s var(--ease-soft) infinite alternate;
}

/* grão sutil — textura, nunca ruído visível */
.bg__grain{
  position:absolute; inset:-50%;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

@keyframes drift-a{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(7vmax,5vmax,0) scale(1.12); }
}
@keyframes drift-b{
  0%  { transform:translate3d(0,0,0) scale(1.06); }
  100%{ transform:translate3d(-6vmax,7vmax,0) scale(.94); }
}
@keyframes drift-c{
  0%  { transform:translate3d(0,0,0) scale(.96); }
  100%{ transform:translate3d(-8vmax,-6vmax,0) scale(1.1); }
}
@keyframes drift-d{
  0%  { transform:translate3d(0,0,0) scale(1); opacity:.28; }
  100%{ transform:translate3d(-5vmax,8vmax,0) scale(1.25); opacity:.5; }
}
@keyframes beam{
  0%  { transform:rotate(-18deg) translateX(0);    opacity:.5; }
  100%{ transform:rotate(-18deg) translateX(46vw); opacity:.9; }
}

/* ---------- 4. HERO / STAGE ---------------------------------- */
.hero{
  position:relative;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;

  /* geometria da composição -------------------------------------
     largura ideal = "cover" da viewport, com dois limites:
     nunca mais de 1.35× a largura visível e nunca acima de --stage-max */
  --stage-w: min(max(100vw, 100svh * var(--art-ar)), 100vw * 1.35, var(--stage-max));
  --stage-h: calc(var(--stage-w) / var(--art-ar));

  /* área do vídeo (9:16 real do arquivo), sempre dentro da tela */
  --vid-h: min(calc(var(--stage-h) * .819792), calc(100svh - var(--stage-h) * .148958 - 3svh));
  --vid-w: calc(var(--vid-h) * .5625);
}

.stage,
.skeleton{
  position:absolute;
  top:0; left:50%;
  width:var(--stage-w);
  height:var(--stage-h);
  margin-left:calc(var(--stage-w) / -2);
}
.stage{ z-index:1; }

/* --- camadas da arte (coordenadas reais do canvas 3240×1920) --- */
.layer{
  position:absolute;
  opacity:0;
  will-change:transform,opacity;
}
.layer--f1{
  inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:10;
  translate:calc(var(--px,0) * 10px) calc(var(--py,0) * 8px);
}
.figure{ display:contents; }

/* padrão Onda Roxa — mesma região e escala da referência:
   começa em x=1426/3240 e cobre até a borda direita           */
.layer--dare{
  z-index:14;
  left:44.0123%;
  top:0;
  width:55.9877%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  translate:calc(var(--px,0) * 6px) calc(var(--py,0) * 5px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 1.4%);
          mask-image:linear-gradient(90deg, transparent 0, #000 1.4%);
}

.figure__glow{
  position:absolute;
  z-index:15;
  left:41%; top:2%;
  width:64%; height:96%;
  background:
    radial-gradient(46% 42% at 52% 34%, rgba(131,208,243,.34) 0%, rgba(131,208,243,0) 70%),
    radial-gradient(60% 58% at 46% 60%, rgba(142,73,150,.55) 0%, rgba(142,73,150,0) 72%);
  filter:blur(26px);
  opacity:0;
  pointer-events:none;
  translate:calc(var(--px,0) * 20px) calc(var(--py,0) * 14px);
}

.pos-renata{
  position:absolute;
  left:42.963%;
  top:7.3958%;
  width:60.2469%;
  height:auto;
}
.layer--renata{
  z-index:30;
  translate:calc(var(--px,0) * 26px) calc(var(--py,0) * 18px);
  filter:drop-shadow(0 34px 60px rgba(29,29,27,.34));
}
.layer--f2{
  inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:40;
  translate:calc(var(--px,0) * 14px) calc(var(--py,0) * 10px);
}

/* utilitários de posição compartilhados com o skeleton */
.pos-logo{
  position:absolute;
  left:17.716%; top:1.1458%;
  width:12.963%; height:11.7708%;
}
.pos-slogan{
  position:absolute;
  left:46.4198%; top:3.9583%;
  width:18.9815%; height:21.0417%;
}
.pos-video{
  position:absolute;
  top:calc(var(--stage-h) * .148958);
  /* posição da referência, mas nunca deixando o player sair da tela
     quando o stage é mais largo que a viewport                      */
  left:max(23.3488%, calc(16px + var(--vid-w) / 2 + (var(--stage-w) - 100vw) / 2));
  width:var(--vid-w);
  height:var(--vid-h);
  margin-left:calc(var(--vid-w) / -2);
}

/* ---------- 5. PLAYER ---------------------------------------- */
.videowrap{
  z-index:50;
  clip-path:inset(100% 0 0 0);
  opacity:0;
  translate:calc(var(--px,0) * 16px) calc(var(--py,0) * 12px);
}

.player{
  position:relative;
  width:100%; height:100%;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2231 0%, #101014 62%, #08080a 100%);
  border-radius:clamp(8px,1.1vw,18px);
  border:1px solid rgba(131,208,243,.22);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 30px 70px -18px rgba(9,4,14,.75),
    0 0 0 1px rgba(29,29,27,.4);
  overflow:hidden;
}
.player__video{
  width:100%; height:100%;
  object-fit:contain;             /* 9:16 exato — nunca distorce */
  background:#08080a;
}

/* botão central */
.player__big{
  position:absolute; inset:0;
  display:grid; place-items:center;
  width:100%; height:100%;
  background:transparent;
  border:0; cursor:pointer;
  padding:0;
  transition:opacity .35s var(--ease-out), visibility .35s;
}
.player__cta{
  display:none;
  position:absolute;
  left:0; right:0; top:11%;
  padding-inline:12px;
  font-size:clamp(15px,4.6vw,22px);
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.player__big svg{
  position:relative;
  width:clamp(38px,4.4vw,64px);
  height:clamp(38px,4.4vw,64px);
  fill:var(--white);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition:transform .35s var(--ease-out);
}
.player__ring{
  position:absolute;
  width:clamp(74px,8.6vw,124px);
  height:clamp(74px,8.6vw,124px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(131,208,243,.3) 0%, rgba(93,37,109,.34) 62%, transparent 73%);
  border:2px solid rgba(131,208,243,.85);
  box-shadow:0 0 34px -6px rgba(131,208,243,.55), 0 0 0 1px rgba(29,29,27,.35) inset;
  transition:transform .4s var(--ease-out), border-color .4s, background .4s, box-shadow .4s;
}
.player__ring::after{
  content:'';
  position:absolute; inset:-1.5px;
  border-radius:50%;
  border:1.5px solid rgba(131,208,243,.45);
  animation:pulse 3.2s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.42); opacity:0; }
  100% { transform:scale(1.42); opacity:0; }
}
.player__big:hover .player__ring,
.player__big:focus-visible .player__ring{
  transform:scale(1.07);
  border-color:var(--cyan);
  background:radial-gradient(circle, rgba(131,208,243,.45) 0%, rgba(117,36,127,.4) 62%, transparent 73%);
  box-shadow:0 0 46px -4px rgba(131,208,243,.75), 0 0 0 1px rgba(29,29,27,.35) inset;
}
.player__big:hover svg{ transform:scale(1.08); }

.player[data-state="playing"] .player__big,
.player[data-state="waiting"] .player__big{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* botão de fechar — aparece assim que o vídeo começa */
.player__close{
  position:absolute;
  top:clamp(8px,1.2vw,16px);
  right:clamp(8px,1.2vw,16px);
  z-index:9;
  display:grid; place-items:center;
  width:clamp(34px,3.4vw,44px);
  height:clamp(34px,3.4vw,44px);
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(10,6,14,.55);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  cursor:pointer;
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-out), visibility .28s, background .25s, transform .25s var(--ease-out);
}
.player__close svg{
  width:46%; height:46%;
  fill:none; stroke:var(--white);
  stroke-width:2.2; stroke-linecap:round;
}
.player__close:hover{ background:rgba(131,208,243,.28); transform:scale(1.08); }

.player[data-state="playing"] .player__close,
.player[data-state="waiting"] .player__close,
.player[data-state="paused"] .player__close{ opacity:1; visibility:visible; }

.player:fullscreen .player__close,
.player:-webkit-full-screen .player__close{
  top:max(14px, env(safe-area-inset-top, 0px));
  right:14px;
  width:46px; height:46px;
}

/* spinner discreto */
.player__spinner{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.player__spinner i{
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid rgba(131,208,243,.22);
  border-top-color:var(--cyan);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* fallback elegante — o container nunca some */
.player__fallback{
  position:absolute; inset:0; z-index:6;
  display:grid; place-content:center; gap:14px; justify-items:center;
  padding:24px;
  text-align:center;
  background:linear-gradient(160deg, #2b1236 0%, #17091d 100%);
}
.player__fallback p{
  margin:0;
  font-size:clamp(12px,1.1vw,15px);
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.82);
}
.player__retry{
  border:1px solid rgba(131,208,243,.5);
  background:rgba(131,208,243,.1);
  color:var(--white);
  font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px;
  cursor:pointer;
  transition:background .25s, transform .25s var(--ease-out);
}
.player__retry:hover{ background:rgba(131,208,243,.22); transform:translateY(-2px); }

/* barra de controles */
.player__ui{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:clamp(26px,3vw,40px) clamp(9px,1vw,16px) clamp(9px,.9vw,14px);
  display:flex; flex-direction:column; gap:clamp(5px,.6vw,9px);
  background:linear-gradient(to top, rgba(6,3,10,.88) 0%, rgba(6,3,10,.55) 46%, transparent 100%);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.player:hover .player__ui,
.player.is-ui-on .player__ui,
.player:focus-within .player__ui,
.player[data-state="paused"] .player__ui{
  opacity:1; transform:translateY(0);
}
.player[data-state="idle"] .player__ui,
.player.has-error .player__ui{ opacity:0; pointer-events:none; }

.player__row{
  display:flex; align-items:center;
  gap:clamp(3px,.5vw,8px);
}

.pbtn{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:clamp(28px,2.5vw,36px); height:clamp(28px,2.5vw,36px);
  padding:0;
  background:transparent; border:0; border-radius:8px;
  cursor:pointer;
  transition:background .2s, transform .2s var(--ease-out);
}
.pbtn:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.pbtn svg{
  width:56%; height:56%;
  fill:var(--white);
  stroke:var(--white);
  stroke-width:0;
}
.pbtn .ico-vol .w1,.pbtn .ico-vol .w2,
.pbtn .ico-mute .w1,
.pbtn .ico-fs path,.pbtn .ico-fsx path{
  fill:none; stroke:var(--white); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.pbtn .ico-fs,.pbtn .ico-fsx{ width:52%; height:52%; }

.ico-pause,.ico-mute,.ico-fsx{ display:none; }
.player[data-state="playing"] #playBtn .ico-play,
.player[data-state="waiting"] #playBtn .ico-play{ display:none; }
.player[data-state="playing"] #playBtn .ico-pause,
.player[data-state="waiting"] #playBtn .ico-pause{ display:block; }
.player.is-muted #muteBtn .ico-vol{ display:none; }
.player.is-muted #muteBtn .ico-mute{ display:block; }
.player.is-fs #fsBtn .ico-fs{ display:none; }
.player.is-fs #fsBtn .ico-fsx{ display:block; }

.player__time{
  flex:0 0 auto;
  display:flex; align-items:center; gap:4px;
  font-size:clamp(10px,.85vw,12.5px);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  color:rgba(255,255,255,.86);
  padding-inline:2px;
}
.player__time i{ opacity:.45; font-style:normal; }

.player__vol{
  margin-left:auto;
  display:flex; align-items:center;
  gap:2px;
}
.player__volrange{
  width:0; opacity:0;
  transition:width .3s var(--ease-out), opacity .3s;
}
.player__vol:hover .player__volrange,
.player__volrange:focus-visible{ width:clamp(46px,5vw,74px); opacity:1; }

/* sliders */
.player__seek,.player__volrange{
  -webkit-appearance:none; appearance:none;
  height:14px; margin:0; padding:0;
  background:transparent;
  cursor:pointer;
}
.player__seek{ width:100%; }
.player__seek::-webkit-slider-runnable-track,
.player__volrange::-webkit-slider-runnable-track{
  height:3.5px; border-radius:999px;
  background:linear-gradient(to right, var(--cyan) var(--fill,0%), rgba(255,255,255,.26) var(--fill,0%));
}
.player__seek::-moz-range-track,
.player__volrange::-moz-range-track{
  height:3.5px; border-radius:999px;
  background:linear-gradient(to right, var(--cyan) var(--fill,0%), rgba(255,255,255,.26) var(--fill,0%));
}
.player__seek::-webkit-slider-thumb,
.player__volrange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-3.75px;
  border-radius:50%; border:0;
  background:var(--white);
  box-shadow:0 0 0 4px rgba(131,208,243,.18);
  transition:transform .18s var(--ease-out);
}
.player__seek::-moz-range-thumb,
.player__volrange::-moz-range-thumb{
  width:11px; height:11px;
  border-radius:50%; border:0;
  background:var(--white);
  box-shadow:0 0 0 4px rgba(131,208,243,.18);
}
.player__seek:hover::-webkit-slider-thumb{ transform:scale(1.25); }

/* ---------- 6. SKELETON -------------------------------------- */
.skeleton{
  z-index:60;
  pointer-events:none;
  transition:opacity .55s var(--ease-out), visibility .55s;
}
.sk{
  display:block;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(115deg,
      rgba(93,37,109,.85) 0%,
      rgba(142,73,150,.6) 42%,
      rgba(93,37,109,.85) 100%);
  background-size:260% 100%;
  animation:shimmer 2.1s var(--ease-soft) infinite;
}
.sk--art{
  aspect-ratio:1952 / 2616;      /* o <span> não tem proporção intrínseca */
  border-radius:46% 46% 12% 12% / 34% 34% 8% 8%;
  opacity:.5;
  animation-delay:.16s;
}
.sk--video{
  border-radius:clamp(8px,1.1vw,18px);
  background:linear-gradient(115deg, rgba(24,16,30,.95) 0%, rgba(72,36,86,.8) 44%, rgba(24,16,30,.95) 100%);
  background-size:260% 100%;
  animation-delay:.08s;
}
.sk--logo{ border-radius:6px; opacity:.72; }
.sk--slogan{ border-radius:14px; opacity:.55; animation-delay:.24s; }

@keyframes shimmer{
  0%   { background-position:120% 0; }
  100% { background-position:-60% 0; }
}

.is-ready .skeleton{ opacity:0; visibility:hidden; }

/* ---------- 7. RODAPÉ SOCIAL --------------------------------- */
.social{
  position:relative; z-index:2;
  background:linear-gradient(90deg, var(--purple-dark) 0%, var(--purple-main) 100%);
  border-top:1px solid rgba(131,208,243,.25);
  box-shadow:0 -22px 60px -30px rgba(6,2,10,.9);
}
.social::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(70% 200% at 50% 0%, rgba(131,208,243,.14) 0%, transparent 70%);
  pointer-events:none;
}
.social__inner{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:clamp(20px,3.2vw,34px) clamp(16px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,3vw,44px);
  flex-wrap:wrap;
}
.social__title{
  margin:0;
  font-size:clamp(11px,1.05vw,14px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3em;
  color:var(--white);
  white-space:nowrap;
}
.social__list{
  display:flex; align-items:center;
  gap:clamp(4px,1.4vw,22px);
  flex-wrap:wrap;
}

.slink{
  display:flex; align-items:center; gap:9px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--white);
  opacity:0;
  transition:background .3s var(--ease-out), transform .3s var(--ease-out), color .3s;
  -webkit-tap-highlight-color:transparent;
}
.slink__ico{
  display:grid; place-items:center;
  width:26px; height:26px;
  flex:0 0 auto;
}
.slink svg{ width:100%; height:100%; overflow:visible; }
.slink svg .s{
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.slink svg .f{ fill:currentColor; stroke:none; }
.slink__txt{
  font-size:clamp(11px,.95vw,13.5px);
  font-weight:600;
  letter-spacing:.06em;
}

@media (hover:hover){
  .slink:hover{
    color:var(--cyan);
    background:rgba(131,208,243,.1);
    transform:translateY(-3px) scale(1.08);
    filter:drop-shadow(0 6px 16px rgba(131,208,243,.35));
  }
}
.slink:active{ transform:translateY(-1px) scale(1.02); }

/* ---------- 8. SEQUÊNCIA DE ENTRADA -------------------------- */
/*  skeleton → background → fundo1 → renata → fundo2 → vídeo → redes  */
.is-ready .bg          { animation:in-bg    .70s var(--ease-out)  both; }
.is-ready .layer--f1   { animation:in-f1    .75s var(--ease-out)  .20s both; }
.is-ready .layer--dare { animation:in-dare  .80s var(--ease-out)  .38s both; }
.is-ready .figure__glow{ animation:in-glow  .95s var(--ease-out)  .46s both; }
.is-ready .layer--renata{animation:in-star  .95s var(--ease-out)  .52s both; }
.is-ready .layer--f2   { animation:in-f2    .90s var(--ease-out)  .82s both; }
.is-ready .videowrap   { animation:in-video .85s var(--ease-out)  1.15s both; }
.is-ready .slink       { animation:in-link  .60s var(--ease-out)  calc(1.34s + var(--i,0) * .07s) both; }

@keyframes in-bg{
  from{ opacity:0; transform:scale(1.06); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes in-f1{
  from{ opacity:0; transform:scale(1.035) translateY(10px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes in-dare{
  from{ opacity:0; transform:scale(1.04); }
  to  { opacity:var(--dare-op); transform:scale(1); }
}
@keyframes in-glow{
  from{ opacity:0; transform:scale(.9); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes in-star{
  from{ opacity:0; transform:translateY(30px) scale(.978); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes in-f2{
  from{ opacity:0; clip-path:inset(0 100% 0 0); }
  40% { opacity:1; }
  to  { opacity:1; clip-path:inset(0 0 0 0); }
}
@keyframes in-video{
  from{ opacity:0; clip-path:inset(100% 0 0 0); transform:scale(.985); }
  to  { opacity:1; clip-path:inset(0 0 0 0);   transform:scale(1); }
}
@keyframes in-link{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- 9. LAYOUT VERTICAL (retrato / mobile / tablet) ----
   Em retrato a arte completa é o próprio fundomobile.webp:
   ele ocupa a primeira tela inteira e o vídeo entra logo abaixo.  */
@media (max-aspect-ratio: 11/10){

  /* uma tela só: nada de scroll no celular */
  html,body{ height:100%; overflow:hidden; }
  :root{ --bar-h:clamp(54px, 8.2svh, 70px); }

  .hero{
    height:100svh;
    min-height:100svh;
    overflow:hidden;
    --vid-w:min(88vw, 440px);
    --vid-h:min(27svh, calc(var(--vid-w) * .56));
    --vid-gap:clamp(8px, 1.6svh, 18px);
  }

  .stage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
  }

  /* arte completa preenchendo a tela inteira */
  .layer--f1{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 4%;
    -webkit-mask-image:none;
            mask-image:none;
    translate:none;
  }

  /* camadas exclusivas do desktop: não são exibidas nem baixadas */
  .layer--dare,
  .layer--renata,
  .layer--f2,
  .figure__glow{ display:none; }

  /* container preto do vídeo, logo acima da barra fixa */
  .videowrap{
    position:absolute;
    top:auto;
    left:50%;
    bottom:calc(var(--bar-h) + var(--vid-gap) + env(safe-area-inset-bottom, 0px));
    width:var(--vid-w);
    height:var(--vid-h);
    margin-left:calc(var(--vid-w) / -2);
    translate:none;
  }
  .player{
    background:#000;
    border-radius:clamp(10px, 2.8vw, 18px);
    border-color:rgba(131,208,243,.3);
  }
  .player__cta{ display:block; }
  .player[data-state="playing"] .player__cta,
  .player[data-state="waiting"] .player__cta{ display:none; }
  .player__ring{
    width:clamp(52px, 15vw, 76px);
    height:clamp(52px, 15vw, 76px);
  }
  .player__big svg{ width:clamp(24px, 7vw, 34px); height:clamp(24px, 7vw, 34px); }
  .player__big{ align-content:center; padding-top:6%; }
  .player__ui{ padding-top:clamp(30px,9vw,44px); }
  .player__volrange{ display:none; }   /* volume por hardware no celular */

  /* em tela cheia o vídeo ocupa tudo */
  .player:fullscreen,
  .player:-webkit-full-screen{
    border:0; border-radius:0; background:#000;
  }
  .player:fullscreen .player__video{ object-fit:contain; }

  /* skeleton reproduz a mesma organização */
  .skeleton{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    margin:0;
  }
  .sk--logo,
  .sk--slogan{ display:none; }
  .sk--art{
    left:0; top:0;
    width:100%; height:100%;
    aspect-ratio:auto;
    border-radius:0;
    opacity:.9;
  }
  .sk--video{
    top:auto;
    left:50%;
    bottom:calc(var(--bar-h) + var(--vid-gap) + env(safe-area-inset-bottom, 0px));
    width:var(--vid-w);
    height:var(--vid-h);
    aspect-ratio:auto;
    margin-left:calc(var(--vid-w) / -2);
  }

  /* a narrativa encurta: fundo → arte → vídeo → redes */
  .is-ready .videowrap{ animation-delay:.55s; }
  .is-ready .slink    { animation-delay:calc(.78s + var(--i,0) * .06s); }

  /* ---- barra de redes fixa, comportamento de app ---- */
  .social{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:80;
    height:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:linear-gradient(90deg, rgba(93,37,109,.97) 0%, rgba(117,36,127,.97) 100%);
    -webkit-backdrop-filter:blur(12px);
            backdrop-filter:blur(12px);
    box-shadow:0 -10px 30px -14px rgba(6,2,10,.9);
  }
  .social__inner{
    height:100%;
    max-width:none;
    padding:0 clamp(2px,1.5vw,14px);
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0;
  }
  .social__title{ display:none; }
  .social__list{
    width:100%;
    justify-content:space-around;
    gap:0;
    flex-wrap:nowrap;
  }
  .slink{
    flex-direction:column;
    gap:3px;
    padding:4px 2px;
    border-radius:12px;
    flex:1 1 0;
    min-width:0;
  }
  .slink__ico{ width:clamp(20px,5.8vw,26px); height:clamp(20px,5.8vw,26px); }
  .slink__txt{
    font-size:clamp(8.5px,2.4vw,11px);
    letter-spacing:.01em;
    white-space:nowrap;
  }
}

/* celulares mais altos que 9:16 — a arte encaixa pela largura, sem cortar
   nenhuma das chamadas; a faixa que sobra fica atrás do player e da barra */
@media (max-aspect-ratio: 9/16){
  .layer--f1{
    object-fit:contain;
    object-position:50% 0;
  }
}

/* telas muito estreitas */
@media (max-width: 360px){
  .slink{ padding:7px 3px; }
  .slink__txt{ font-size:9.5px; }
  .social__list{ gap:0; }
}

/* telas muito largas: a arte para de crescer, o fundo continua */
@media (min-width: 2100px){
  :root{ --stage-max: 2400px; }
}

/* ---------- 10. PERFORMANCE EM APARELHOS MODESTOS ------------- */
@media (max-width: 720px){
  .bg__blob{ filter:blur(58px); }
  .bg__blob--d{ display:none; }
  .bg__beam{ display:none; }
  .bg__grain{ opacity:.035; }
}

/* ---------- 11. PREFERS-REDUCED-MOTION ----------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .bg__blob,.bg__beam,.sk,.player__ring::after,.player__spinner i{
    animation:none !important;
  }
  .bg__blob{ opacity:.6; }

  .layer,.figure__glow,.videowrap,.slink,.bg{
    translate:none !important;
  }
  .is-ready .bg,
  .is-ready .layer--f1,
  .is-ready .layer--renata,
  .is-ready .layer--f2,
  .is-ready .figure__glow,
  .is-ready .videowrap,
  .is-ready .slink{
    animation:fade-only .35s linear both;
    animation-delay:0s;
    clip-path:none;
  }
  .is-ready .layer--dare{
    animation:fade-dare .35s linear both;
    animation-delay:0s;
  }
  @keyframes fade-only{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes fade-dare{ from{ opacity:0; } to{ opacity:var(--dare-op); } }

  .slink:hover{ transform:none; }
  .skeleton{ transition:opacity .2s linear; }
}

/* ---------- 12. SEM JAVASCRIPT ------------------------------- */
/* a classe .js é adicionada inline no <head>; sem ela a composição
   aparece imediatamente, sem skeleton e sem estados ocultos       */
html:not(.js) .bg,
html:not(.js) .layer,
html:not(.js) .figure__glow,
html:not(.js) .videowrap,
html:not(.js) .slink{
  opacity:1;
  clip-path:none;
  transform:none;
}
html:not(.js) .layer--dare{ opacity:var(--dare-op); }
html:not(.js) .skeleton{ display:none; }
html:not(.js) .player__ui,
html:not(.js) .player__big{ display:none; }

/* com JS os controles nativos dão lugar ao player customizado
   (o atributo `controls` é removido pelo script; a regra abaixo
   evita qualquer piscada antes disso) */
.js .player__video::-webkit-media-controls,
.js .player__video::-webkit-media-controls-enclosure{ display:none !important; }