/* ==========================================================================
   Construindo KIDS — painel de TV (PWA)
   Escala: TUDO é medido em --u, 1% da menor dimensão do PAINEL.
   Numa TV 1080p o painel mede 960px de lado menor nas DUAS orientações,
   então a página fica idêntica em pé e deitada. Sem media query de tamanho.
   ========================================================================== */

@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------- tokens -------------------------------- */
:root{
  --red:#FF5A5F;
  --blue:#4CA8FF;
  --amber:#FFC53D;
  --green:#4ADE80;

  --bg:#0A0D16;
  --bg-2:#111726;
  --ink:#F4F7FF;
  --muted:rgb(244 247 255 / .60);
  --hair:rgb(244 247 255 / .10);

  --ease:cubic-bezier(.16,1,.3,1);

  /* lado menor do painel — a régua de tudo */
  --pu:min(50vw,100vh);
  --u:calc(var(--pu) / 100);
  --pad:calc(6 * var(--u));
}
@media (orientation:portrait){
  :root{ --pu:min(100vw,50vh); --pad:calc(5.5 * var(--u)); }
}

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

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  cursor:none;                       /* TV: nada de seta do mouse na tela */
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* ---------------------------------- palco -------------------------------- */
.stage{
  position:relative;
  display:grid;
  width:100vw;
  height:100vh;
  height:100dvh;
  grid-template-columns:1fr 1fr;
  grid-template-rows:100%;
}
@media (orientation:portrait){
  .stage{ grid-template-columns:100%; grid-template-rows:1fr 1fr; }
}

/* ============================ METADE 1 · VÍDEO ============================ */
.film{
  position:relative;
  overflow:hidden;
  background:#05070C;
  isolation:isolate;
}
.film__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* leve sobrescala + deriva lenta: respira e evita marca fixa no painel */
  transform:scale(1.045);
  animation:filmDrift 180s ease-in-out infinite alternate;
  will-change:transform;
}
/* textura sutil — tira o "liso demais" do render 3D */
.film__grain{
  position:absolute; inset:-50%;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:radial-gradient(rgb(255 255 255 / .9) .5px,transparent .6px);
  background-size:3px 3px;
  animation:grainShift 6s steps(6) infinite;
}
.film__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 42%,rgb(5 7 12 / .55) 100%);
}
/* a emenda: o vídeo derrete dentro do painel */
.film__fade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent 62%,rgb(10 13 22 / .55) 88%,var(--bg) 100%);
}
@media (orientation:portrait){
  .film__fade{ background:linear-gradient(180deg,transparent 62%,rgb(10 13 22 / .55) 88%,var(--bg) 100%); }
}

.film__tag{
  position:absolute;
  top:var(--pad); left:var(--pad);
  display:inline-flex; align-items:center; gap:calc(1.4 * var(--u));
  padding:calc(1.1 * var(--u)) calc(2.4 * var(--u));
  border-radius:999px;
  border:1px solid rgb(255 255 255 / .16);
  background:rgb(10 13 22 / .42);
  backdrop-filter:blur(calc(1.2 * var(--u)));
  -webkit-backdrop-filter:blur(calc(1.2 * var(--u)));
  font-size:calc(1.85 * var(--u));
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgb(244 247 255 / .88);
}
.film__dot{
  width:calc(1.15 * var(--u)); height:calc(1.15 * var(--u));
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 0 rgb(255 197 61 / .65);
  animation:dotPulse 2.4s ease-out infinite;
}

/* ============================== a costura ================================ */
.seam{
  position:absolute; z-index:3; pointer-events:none;
  top:0; bottom:0; left:50%;
  width:calc(.38 * var(--u)); min-width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgb(255 255 255 / .09) 18%,rgb(255 255 255 / .09) 82%,transparent);
  overflow:hidden;
}
.seam__glow{
  position:absolute; left:0; right:0;
  height:34%;
  background:linear-gradient(180deg,transparent,var(--blue),var(--green),var(--amber),var(--red),transparent);
  filter:blur(1px);
  opacity:.9;
  animation:seamRun 9s cubic-bezier(.45,0,.55,1) infinite;
}
@media (orientation:portrait){
  .seam{
    top:50%; bottom:auto; left:0; right:0;
    width:auto; height:calc(.38 * var(--u)); min-width:0; min-height:2px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,rgb(255 255 255 / .09) 18%,rgb(255 255 255 / .09) 82%,transparent);
  }
  .seam__glow{
    inset:0 auto 0 0; height:auto; width:34%;
    background:linear-gradient(90deg,transparent,var(--blue),var(--green),var(--amber),var(--red),transparent);
    animation-name:seamRunX;
  }
}

/* ============================ METADE 2 · PAINEL =========================== */
.panel{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(90% 70% at 88% 6%,rgb(76 168 255 / .10),transparent 60%),
    linear-gradient(200deg,var(--bg-2),var(--bg) 58%);
}

/* aurora de fundo — três manchas que derivam devagar */
.aurora{position:absolute; inset:calc(-20 * var(--u)); pointer-events:none; filter:blur(calc(9 * var(--u)))}
.aurora__blob{position:absolute; border-radius:50%; opacity:.30; mix-blend-mode:screen}
.aurora__blob--a{
  width:calc(62 * var(--u)); height:calc(62 * var(--u));
  top:4%; left:-6%; background:radial-gradient(circle,var(--blue),transparent 66%);
  animation:blobA 46s ease-in-out infinite alternate;
}
.aurora__blob--b{
  width:calc(54 * var(--u)); height:calc(54 * var(--u));
  bottom:2%; right:-8%; background:radial-gradient(circle,var(--green),transparent 66%);
  animation:blobB 58s ease-in-out infinite alternate;
}
.aurora__blob--c{
  width:calc(44 * var(--u)); height:calc(44 * var(--u));
  top:44%; right:24%; background:radial-gradient(circle,var(--amber),transparent 66%);
  opacity:.18;
  animation:blobC 70s ease-in-out infinite alternate;
}

.panel__inner{
  position:relative; z-index:2;
  width:100%;
  max-width:calc(92 * var(--u));
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  gap:calc(3.5 * var(--u));
  /* deriva imperceptível: a tela fica ligada o dia inteiro */
  animation:pixelShift 420s ease-in-out infinite alternate;
}

/* ---------------------------------- marca -------------------------------- */
.brand{display:flex; align-items:center; gap:calc(1.9 * var(--u))}
.brand__blocks{
  display:grid;
  grid-template-columns:repeat(2,calc(1.45 * var(--u)));
  gap:calc(.45 * var(--u));
}
.brand__blocks i{
  display:block; width:calc(1.45 * var(--u)); height:calc(1.45 * var(--u));
  border-radius:calc(.38 * var(--u));
  animation:blockBreath 5.2s ease-in-out infinite;
}
.brand__blocks i:nth-child(1){background:var(--red);   animation-delay:0s}
.brand__blocks i:nth-child(2){background:var(--blue);  animation-delay:.32s}
.brand__blocks i:nth-child(3){background:var(--amber); animation-delay:.64s}
.brand__blocks i:nth-child(4){background:var(--green); animation-delay:.96s}
.brand__name{
  font-size:calc(2 * var(--u));
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand__sep{color:rgb(244 247 255 / .32); margin:0 .12em}

/* --------------------------------- título -------------------------------- */
.title{margin:0; font-family:'Outfit',sans-serif; line-height:.92}
.title__top{
  display:block;
  font-size:calc(6.6 * var(--u));
  font-weight:400;
  letter-spacing:.015em;
  color:rgb(244 247 255 / .80);
}
.title__word{
  display:flex;
  font-size:calc(13.4 * var(--u));
  font-weight:900;
  letter-spacing:-.012em;
  margin-top:calc(.4 * var(--u));
  animation:wordGlow 7s ease-in-out infinite;
}
.title__letter{display:inline-block}
.title__letter:nth-child(1){color:var(--red)}
.title__letter:nth-child(2){color:var(--blue)}
.title__letter:nth-child(3){color:var(--amber)}
.title__letter:nth-child(4){color:var(--green)}

/* --------------------------------- frase --------------------------------- */
.lede{
  margin:0;
  font-size:calc(2.85 * var(--u));
  line-height:1.46;
  color:var(--muted);
  max-width:calc(72 * var(--u));
  text-wrap:pretty;
}
.lede strong{color:var(--ink); font-weight:600}

/* --------------------------------- chamada ------------------------------- */
.cta{
  display:flex;
  align-items:center;
  gap:calc(4 * var(--u));
  flex-wrap:wrap;
  padding:calc(3 * var(--u));
  border-radius:calc(3.4 * var(--u));
  border:1px solid var(--hair);
  background:linear-gradient(145deg,rgb(255 255 255 / .055),rgb(255 255 255 / .012));
  backdrop-filter:blur(calc(1.4 * var(--u)));
  -webkit-backdrop-filter:blur(calc(1.4 * var(--u)));
  box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / .32);
}

.qr{margin:0; display:flex; flex-direction:column; align-items:center; gap:calc(1.6 * var(--u))}
.qr__card{
  position:relative;
  width:calc(29 * var(--u));
  aspect-ratio:1;
  padding:calc(1.5 * var(--u));
  border-radius:calc(2.2 * var(--u));
  background:#fff;
  overflow:hidden;
  animation:qrFloat 8s ease-in-out infinite, qrHalo 5.6s ease-in-out infinite;
}
.qr__svg{display:block; width:100%; height:100%}

/* cantos de "mira" que pulsam — dizem 'me escaneia' sem uma palavra */
.qr__corner{
  position:absolute; width:calc(3.1 * var(--u)); height:calc(3.1 * var(--u));
  border:calc(.42 * var(--u)) solid var(--blue);
  animation:cornerPulse 2.8s ease-in-out infinite;
}
.qr__corner--tl{top:calc(.9*var(--u)); left:calc(.9*var(--u));  border-right:0; border-bottom:0; border-top-left-radius:calc(.9*var(--u)); border-color:var(--red);   animation-delay:0s}
.qr__corner--tr{top:calc(.9*var(--u)); right:calc(.9*var(--u)); border-left:0;  border-bottom:0; border-top-right-radius:calc(.9*var(--u)); border-color:var(--blue); animation-delay:.2s}
.qr__corner--bl{bottom:calc(.9*var(--u)); left:calc(.9*var(--u));  border-right:0; border-top:0; border-bottom-left-radius:calc(.9*var(--u)); border-color:var(--amber); animation-delay:.6s}
.qr__corner--br{bottom:calc(.9*var(--u)); right:calc(.9*var(--u)); border-left:0;  border-top:0; border-bottom-right-radius:calc(.9*var(--u)); border-color:var(--green); animation-delay:.4s}

/* varredura de leitura */
.qr__beam{
  position:absolute; left:0; right:0; height:38%;
  background:linear-gradient(180deg,transparent,rgb(76 168 255 / .05),rgb(76 168 255 / .09),transparent);
  animation:beamSweep 5.6s cubic-bezier(.65,0,.35,1) infinite;
}

.qr__hint{
  display:flex; align-items:center; gap:calc(1.1 * var(--u));
  font-size:calc(1.95 * var(--u));
  font-weight:600;
  letter-spacing:.04em;
  color:rgb(244 247 255 / .82);
  white-space:nowrap;
}
.qr__icon{width:calc(2.6 * var(--u)); height:calc(2.6 * var(--u)); flex:none; color:var(--blue)}

.cta__text{flex:1 1 calc(36 * var(--u)); min-width:calc(26 * var(--u))}
.cta__kicker{
  margin:0 0 calc(1.1 * var(--u));
  font-size:calc(1.8 * var(--u));
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green);
}
.cta__line{
  margin:0 0 calc(2 * var(--u));
  font-family:'Outfit',sans-serif;
  font-size:calc(4.3 * var(--u));
  font-weight:600; line-height:1.12; letter-spacing:-.01em;
  color:var(--ink);
}
.cta__url{
  margin:0;
  font-size:calc(1.62 * var(--u));
  line-height:1.45;
  font-weight:500;
  color:rgb(244 247 255 / .56);
  word-break:break-word;
}
.cta__url-tail{display:block; color:rgb(244 247 255 / .40)}

/* --------------------------------- rodapé -------------------------------- */
.foot{display:flex; align-items:center; gap:calc(1.8 * var(--u))}
.foot__bar{
  width:calc(7 * var(--u)); height:calc(.42 * var(--u));
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--green),var(--blue));
  background-size:300% 100%;
  animation:barSlide 9s linear infinite;
}
.foot__text{
  font-size:calc(1.85 * var(--u));
  font-style:italic;
  color:rgb(244 247 255 / .46);
}

/* ------------------------- botão de resgate do autoplay ------------------- */
.tap{
  position:fixed; z-index:20; inset:auto 0 calc(5 * var(--u)) 0;
  margin:0 auto;
  width:max-content;
  display:flex; align-items:center; gap:calc(1.4 * var(--u));
  padding:calc(1.8 * var(--u)) calc(3.6 * var(--u));
  border:0; border-radius:999px;
  background:rgb(244 247 255 / .94);
  color:#0A0D16;
  font-family:inherit; font-size:calc(2 * var(--u)); font-weight:600;
  cursor:pointer;
  box-shadow:0 calc(1.4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .5);
  animation:reveal .8s var(--ease) both;
}
.tap[hidden]{display:none}
.tap__ring{
  width:calc(1.6 * var(--u)); height:calc(1.6 * var(--u));
  border-radius:50%; background:var(--red);
  animation:dotPulse 1.6s ease-out infinite;
}

/* ================================ entrada ================================ */
.reveal{animation:reveal 1.15s var(--ease) both; animation-delay:var(--d,0s)}
@keyframes reveal{
  from{opacity:0; transform:translateY(calc(2.2 * var(--u))); filter:blur(calc(.9 * var(--u)))}
  to  {opacity:1; transform:none; filter:blur(0)}
}

/* ================================ laços ================================== */
@keyframes filmDrift{
  from{transform:scale(1.045) translate3d(calc(-.9 * var(--u)),calc(-.6 * var(--u)),0)}
  to  {transform:scale(1.075) translate3d(calc(.9 * var(--u)),calc(.6 * var(--u)),0)}
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)} 80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgb(255 197 61 / .6)}
  70%{box-shadow:0 0 0 calc(1.6 * var(--u)) rgb(255 197 61 / 0)}
  100%{box-shadow:0 0 0 0 rgb(255 197 61 / 0)}
}
@keyframes seamRun{
  0%{transform:translateY(-120%)} 100%{transform:translateY(420%)}
}
@keyframes seamRunX{
  0%{transform:translateX(-120%)} 100%{transform:translateX(420%)}
}
@keyframes blobA{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(14%,10%,0) scale(1.18)}
}
@keyframes blobB{
  from{transform:translate3d(0,0,0) scale(1.12)}
  to  {transform:translate3d(-16%,-12%,0) scale(.92)}
}
@keyframes blobC{
  from{transform:translate3d(0,0,0) scale(.9)}
  to  {transform:translate3d(-10%,16%,0) scale(1.25)}
}
@keyframes blockBreath{
  0%,100%{transform:scale(1);   opacity:.85}
  50%    {transform:scale(1.22); opacity:1}
}
@keyframes wordGlow{
  0%,100%{filter:drop-shadow(0 0 calc(1.2 * var(--u)) rgb(76 168 255 / .16))}
  50%    {filter:drop-shadow(0 0 calc(2.6 * var(--u)) rgb(76 168 255 / .34))}
}
@keyframes qrFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(calc(-.75 * var(--u)))}
}
/* o brilho pulsa FORA do cartão: chama o olho sem tirar contraste do código */
@keyframes qrHalo{
  0%,100%{box-shadow:
    0 0 0 calc(.55 * var(--u)) rgb(255 255 255 / .10),
    0 0 calc(3 * var(--u)) rgb(76 168 255 / .16),
    0 calc(1.6 * var(--u)) calc(4.5 * var(--u)) rgb(0 0 0 / .45)}
  50%    {box-shadow:
    0 0 0 calc(.55 * var(--u)) rgb(255 255 255 / .22),
    0 0 calc(7 * var(--u)) rgb(76 168 255 / .40),
    0 calc(1.6 * var(--u)) calc(4.5 * var(--u)) rgb(0 0 0 / .45)}
}
@keyframes cornerPulse{
  0%,100%{opacity:.35; transform:scale(.94)}
  50%    {opacity:1;   transform:scale(1)}
}
@keyframes beamSweep{
  0%    {transform:translateY(-110%); opacity:0}
  12%   {opacity:1}
  70%   {opacity:1}
  100%  {transform:translateY(300%); opacity:0}
}
@keyframes barSlide{
  from{background-position:0% 50%} to{background-position:300% 50%}
}
/* deriva anti-burn-in: ~1px por minuto, ninguém enxerga, o painel agradece */
@keyframes pixelShift{
  0%  {transform:translate3d(calc(-.6 * var(--u)),calc(-.6 * var(--u)),0)}
  100%{transform:translate3d(calc(.6 * var(--u)),calc(.6 * var(--u)),0)}
}

/* ================== em pé: o painel encurta, o conteúdo acompanha ==========
   Este bloco vem DEPOIS das regras base de propósito: mesma especificidade,
   quem vem por último manda. Subir ele quebra o layout em pé sem avisar.
   ========================================================================== */
@media (orientation:portrait){
  .panel__inner{ gap:calc(3.1 * var(--u)); max-width:calc(100 * var(--u)); }
  .title__top{ font-size:calc(6 * var(--u)); }
  .title__word{ font-size:calc(12.2 * var(--u)); }
  .lede{ max-width:calc(80 * var(--u)); }
  .cta{ gap:calc(3.4 * var(--u)); padding:calc(2.6 * var(--u)); }
  .qr__card{ width:calc(26 * var(--u)); }
  .cta__line{ font-size:calc(4 * var(--u)); }
}

/* painel agachado — celular na horizontal; a TV nunca chega aqui, mas
   6px de folga é ruído de medição, não margem */
@media (orientation:landscape) and (max-height:540px){
  .panel__inner{ gap:calc(2.7 * var(--u)); }
  .qr__card{ width:calc(26 * var(--u)); }
  .cta{ padding:calc(2.4 * var(--u)); }
}

/* ============================= acessibilidade ============================= */
@media (prefers-reduced-motion:reduce){
  .film__video,.film__grain,.film__dot,.seam__glow,.aurora__blob,
  .brand__blocks i,.title__word,.qr__card,.qr__corner,.qr__beam,
  .foot__bar,.panel__inner,.tap__ring{
    animation:none !important;
  }
  .film__video{transform:scale(1.02)}
  .qr__card{box-shadow:
    0 0 0 calc(.55 * var(--u)) rgb(255 255 255 / .16),
    0 calc(1.6 * var(--u)) calc(4.5 * var(--u)) rgb(0 0 0 / .45)}
  .qr__beam{display:none}
  .reveal{animation-duration:.35s; animation-delay:0s !important}
}