/* SECRET — duas cenas sobre um vídeo de câmera.

   O palco é a caixa do design (1440 × 810) escalada por `--s`, que vem do JS:
   o MENOR fator entre largura e altura, para nada de interface ser cortado.
   A sobra da janela vira `--dx`/`--dy` (em px do design), e cada grupo se
   ancora no canto que ocupa no Figma: cabeçalho no topo, rodapé, musgo e
   "Secret" no pé, cartões no canto de baixo à direita. O fundo cobre tudo.
   Toda coordenada abaixo é um pixel literal do Figma.

   No celular (retrato) o palco vira uma coluna de 390 de largura — ver o fim.
*/

:root {
  --ink: #e4ffef;
  --night: #011416;
  --s: 1;
  --dx: 0px;
  --dy: 0px;
  --H: 810px;

  --out: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.76, 0, .24, 1);
  --in: cubic-bezier(.7, 0, .84, 0);
  --sink: cubic-bezier(.5, 0, .75, 0);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { background: var(--night); color: var(--ink); overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; font-family: Onest, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 810px;
  translate: -50% -50%;
  scale: var(--s);
}

/* ================================================================= fundo */

.bg {
  position: absolute;
  left: calc(-1 * var(--dx));
  top: calc(-1 * var(--dy));
  width: calc(1440px + 2 * var(--dx));
  height: calc(810px + 2 * var(--dy));
  overflow: hidden;
  background: var(--night);
}
.bg > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bgx, 50%) 50%;
}
.bg__video { opacity: 0; transition: opacity .35s linear; }
.bg.is-v .bg__video:not(.bg__video--back),
.bg.is-vb .bg__video--back { opacity: 1; }
.bg__img--2 { opacity: 0; transition: opacity 1.2s var(--io) .1s; }
.bg.is-2 .bg__img--2 { opacity: 1; transition: opacity .5s linear; }
.bg.is-2.is-slow .bg__img--2 { transition: opacity 1.6s var(--io) .2s; }
.bg.is-quick .bg__img--2 { transition: opacity .25s linear; }
.bg__img--1 { transition: opacity 1.8s linear, scale 2.8s var(--out); }

/* Fora do 16:9 o "cover" do fundo leva o céu claro para trás da interface:
   no ultrawide ele sobe até o menu, no 4:3 ele se alarga até o título.
   Um véu escuro só nesses casos — o 16:9 do design fica intocado. */
.bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (min-aspect-ratio: 19/9) {
  html:not(.m) .bg::after { background: linear-gradient(rgba(1, 20, 22, .75), rgba(1, 20, 22, 0) 22%); }
}
@media (max-aspect-ratio: 8/5) {
  html:not(.m) .bg::after { background: linear-gradient(90deg, rgba(1, 20, 22, .72), rgba(1, 20, 22, .35) 26%, rgba(1, 20, 22, 0) 44%); }
}
.is-pre .bg__img--1 { opacity: 0; scale: 1.08; transition: none; }

/* ================================================================= cena 1 */

.scene { position: absolute; inset: 0; }
/* As entradas da cena 1 servem à abertura da página e à volta da cena 2.
   Na volta elas esperam o giro de câmera de trás para frente (`--lag`). */
.stage { --lag: .5s; }
.is-intro .stage { --lag: 0s; }
[data-scene="1"] .scene--2,
[data-scene="2"] .scene--1 { pointer-events: none; }

/* "Secret" — Lexend Giga no lugar da ABC Ginto Nord, letra a letra */
.word {
  position: absolute;
  left: 0;
  top: calc(440px + var(--dy));
  width: 1440px;
  height: 370px;
}
.ch {
  position: absolute;
  top: 0;
  height: 370px;
  overflow: visible;
  font: 400 475.71px "Lexend Giga", "Archivo", sans-serif;
  transition: translate 1.3s var(--out) calc(var(--lag) + .55s + var(--i) * 60ms);
}
[data-scene="2"] .ch,
.is-pre .ch { translate: 0 calc(430px + var(--dy)); }
/* as letras afundam ANTES do musgo descer: todas somem atrás dele até 0,9s */
[data-scene="2"] .ch { transition: translate .7s var(--sink) calc(var(--i) * 40ms); }
.is-pre .ch { transition: none; }

.moss {
  position: absolute;
  left: -237.27px;
  top: calc(535.43px + var(--dy));
  width: 1914.54px;
  height: 352.31px;
  max-width: none;
  transition: translate 1.3s var(--out) calc(var(--lag) + .3s), opacity .4s linear calc(var(--lag) + .3s);
}
[data-scene="2"] .moss {
  translate: 0 calc(340px + var(--dy));
  opacity: 0;
  transition: translate 1s var(--io) .65s, opacity .4s linear 1.25s;
}
.is-pre .moss { translate: 0 140px; transition: none; }

/* rodapé 01–04: Onest com corte de cap height; as margens negativas tiram a
   meia-entrelinha para que a caixa seja só a altura das maiúsculas, como no
   Figma (Onest: ascendente .970, descendente .305, cap .707). */
.steps {
  position: absolute;
  left: calc(41px - var(--dx));
  top: calc(776px + var(--dy));
  width: calc(1359px + 2 * var(--dx));
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.steps li {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  transition: opacity .9s var(--out) calc(var(--lag) + 1.1s + var(--i) * 80ms), translate .9s var(--out) calc(var(--lag) + 1.1s + var(--i) * 80ms);
}
.steps__n {
  font-weight: 100;
  font-size: 28px;
  line-height: 35.7px;
  margin: -7.364px 0 -8.54px;
}
.steps__t {
  font-size: 10px;
  line-height: 13px;
  margin: -2.755px 0 -3.175px;
  opacity: .5;
}
.steps li:nth-child(1) .steps__n { width: 28px; }
.steps li:nth-child(2) .steps__n { width: 34px; }
.steps li:nth-child(3) .steps__n,
.steps li:nth-child(4) .steps__n { width: 36px; }
.steps li:nth-child(1) .steps__t { width: 154px; }
.steps li:nth-child(2) .steps__t { width: 169px; }
.steps li:nth-child(3) .steps__t { width: 154px; }
.steps li:nth-child(4) .steps__t { width: 166px; }
[data-scene="2"] .steps li,
.is-pre .steps li { opacity: 0; translate: 0 16px; }
[data-scene="2"] .steps li { transition: opacity .4s linear calc(var(--i) * 40ms), translate .5s var(--in) calc(var(--i) * 40ms); }
.is-pre .steps li { transition: none; }

.vtext {
  position: absolute;
  left: calc(1400px + var(--dx));
  top: calc(97.645px - var(--dy));
  width: 10px;
  font: 400 10px/40.2px Onest, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  text-align: center;
  transition: opacity .8s linear calc(var(--lag) + 1.3s);
}
[data-scene="2"] .vtext,
.is-pre .vtext { opacity: 0; }
[data-scene="2"] .vtext { transition: opacity .4s linear; }
.is-pre .vtext { transition: none; }

/* títulos: cada linha sobe por dentro de uma máscara */
.ln { display: block; overflow: hidden; }
.ln > span { display: block; white-space: nowrap; }

.intro__title {
  position: absolute;
  left: calc(52px - var(--dx));
  top: calc(160px - var(--dy));
  width: 285px;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;              /* 35,7 no JSON; o Figma desenha 36 por linha */
  text-transform: uppercase;
}
.intro__title .ln > span { transition: translate 1s var(--out) calc(var(--lag) + .8s + var(--i) * 70ms); }
[data-scene="2"] .intro__title .ln > span {
  translate: 0 -105%;
  transition: translate .7s var(--io) calc(var(--i) * 60ms);
}
.is-pre .intro__title .ln > span { translate: 0 105%; transition: none; }

.intro__desc {
  position: absolute;
  left: calc(52px - var(--dx));
  top: calc(301px - var(--dy));
  width: 210px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;              /* 19,6 no JSON; o Figma desenha 20 por linha */
  overflow: hidden;
}
.intro__desc > span {
  display: block;
  opacity: .8;
  transition: translate 1s var(--out) calc(var(--lag) + 1s);
}
[data-scene="2"] .intro__desc > span {
  translate: 0 -105%;
  transition: translate .7s var(--io) .12s;
}
.is-pre .intro__desc > span { translate: 0 105%; transition: none; }

/* ================================================================= topo */

.top { position: absolute; inset: 0 auto auto 0; width: 1440px; z-index: 3; transition: opacity 1s linear .2s; }
.is-pre .top { opacity: 0; transition: none; }

.brand {
  position: absolute;
  left: calc(24px - var(--dx));
  top: calc(18px - var(--dy));
  width: 55px;
  height: 50px;
}
.brand img { width: 100%; height: 100%; }

.nav {
  position: absolute;
  left: 0;
  top: calc(37.345px - var(--dy));
  font-weight: 500;
  font-size: 10px;
  line-height: 12.8px;
  text-transform: uppercase;
}
.nav a { position: absolute; top: 0; white-space: nowrap; }
/* cada item na x do Figma (a largura da Onest no navegador difere em décimos) */
.nav a:nth-child(1) { left: 444.08px; }
.nav a:nth-child(2) { left: 558.08px; }
.nav a:nth-child(3) { left: 696.08px; }
.nav a:nth-child(4) { left: 825.08px; }
.nav a:nth-child(5) { left: 948.08px; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale .45s var(--out);
}
.nav a:hover::after { scale: 1 1; transform-origin: left; }

/* ícone de 31 × 13 (três traços de 1px) numa área de toque de 44 × 44 */
.burger {
  position: absolute;
  left: calc(1378.25px + var(--dx));
  top: calc(21.47px - var(--dy));
  width: 44px;
  height: 44px;
}
.burger i {
  position: absolute;
  height: 1px;
  background: var(--ink);
  transition: translate .45s var(--out), width .45s var(--out);
}
.burger i:nth-child(1) { left: 6.26px; top: 15.03px; width: 15.74px; }
.burger i:nth-child(2) { left: 6.26px; top: 21.5px; width: 31.49px; }
.burger i:nth-child(3) { left: 22px; top: 27.97px; width: 15.74px; }
.burger:hover i:nth-child(1) { translate: 15.74px 0; }
.burger:hover i:nth-child(3) { translate: -15.74px 0; }

/* ================================================================= cena 2 */

.scene--2 { z-index: 4; }

.temple__title {
  position: absolute;
  left: calc(82px - var(--dx));
  top: calc(141px - var(--dy));
  width: 263px;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;              /* 35,7 no JSON; o Figma desenha 36 por linha */
  text-transform: uppercase;
}
.temple__title .ln > span {
  translate: 0 105%;
  transition: translate .55s var(--in) calc(var(--i) * 40ms);
}
[data-scene="2"] .temple__title .ln > span {
  translate: 0 0;
  transition: translate 1.1s var(--out) calc(1s + var(--i) * 80ms);
}

.temple__desc {
  position: absolute;
  left: calc(393px - var(--dx));
  top: calc(213px - var(--dy));
  width: 233px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;              /* 19,6 no JSON; o Figma desenha 20 por linha */
  opacity: .8;
  clip-path: inset(0 0 100% 0);
  translate: 0 24px;
  transition: clip-path .5s var(--in), translate .5s var(--in);
}
[data-scene="2"] .temple__desc {
  clip-path: inset(0);
  translate: 0 0;
  transition: clip-path 1.3s var(--out) 1.25s, translate 1.3s var(--out) 1.25s;
}

.temple__go {
  position: absolute;
  left: calc(257px - var(--dx));
  top: calc(389px - var(--dy));
  width: 39px;
  height: 39px;
  opacity: 0;
  translate: -10px 10px;
  transition: opacity .3s linear, translate .3s var(--in);
}
[data-scene="2"] .temple__go {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s linear 1.6s, translate 1s var(--out) 1.6s;
}
.temple__go svg, .card__arrow { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1px; }
.temple__go:hover svg { translate: 3px -3px; }
.temple__go svg { transition: translate .4s var(--out); }

/* ================================================================= cartões
   Os três são o mesmo componente (235 × 280,2) em escalas diferentes, com
   o pé alinhado em y 762. `--x/--y/--k` vêm da posição; o 1º cartão, na
   cena 1, é a miniatura com o ▷ (240 × 128 em 1045, 246) e cresce até virar
   cartão — a imagem dentro dele troca de recorte junto. */

.cards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.card {
  position: absolute;
  left: calc(var(--x) + var(--dx));
  top: calc(var(--y) + var(--dy));
  width: 235px;
  height: 280.2px;
  scale: var(--k);
  transform-origin: 0 0;
  overflow: hidden;
  pointer-events: auto;
}
.card[data-slot="0"] { --x: 835px; --y: 482px; --k: 1; }
.card[data-slot="1"] { --x: 1090px; --y: 520px; --k: .86402; }
.card[data-slot="2"] { --x: 1313.044px; --y: 575px; --k: .66827; }
.card[data-slot="3"] { --x: 1520px; --y: 600px; --k: .55; }

.card__win { position: absolute; inset: 0; overflow: hidden; background: #dee9f0; }
.card__img {
  position: absolute;
  left: -189px;
  top: -30px;
  width: 601px;
  height: 337px;
  max-width: none;
  transition: scale .8s var(--out);
}
.card__shade {
  position: absolute;
  left: -1px;
  top: 116px;
  width: 237px;
  height: 164px;
  background: linear-gradient(rgba(0, 0, 0, 0), #000);
  opacity: .7;
}
.card__title {
  position: absolute;
  left: 15px;
  top: 234px;
  font-size: 20px;
  line-height: 25.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__arrow { position: absolute; left: 196px; top: 0; width: 39px; height: 39px; transition: translate .4s var(--out); }
.card__play { position: absolute; left: 101.5px; top: 36.5px; width: 38px; height: 51px; fill: #fff; opacity: 0; }
.card:hover .card__img { scale: 1.05; }
.card:hover .card__arrow { translate: 3px -3px; }

.card__shade, .card__title, .card__arrow { transition: opacity .6s linear 1.2s, translate .4s var(--out); }
[data-scene="1"] .card--1 :is(.card__shade, .card__title, .card__arrow) { opacity: 0; transition: opacity .3s linear; }

/* cena 2 e o carrossel */
.card {
  transition:
    left 1.3s var(--io) .25s, top 1.3s var(--io) .25s, scale 1.3s var(--io) .25s,
    width 1.3s var(--io) .25s, height 1.3s var(--io) .25s,
    opacity 1s linear calc(1s + var(--i, 0) * 120ms), translate 1.1s var(--out) calc(1s + var(--i, 0) * 120ms);
}
.card .card__img { transition: left 1.3s var(--io) .25s, top 1.3s var(--io) .25s, width 1.3s var(--io) .25s, height 1.3s var(--io) .25s, scale .8s var(--out); }
.is-settled .card { transition: left .9s var(--io), top .9s var(--io), scale .9s var(--io), opacity .5s linear, translate .9s var(--out); }
.card.is-out { opacity: 0; translate: -60px 0; transition: opacity .4s linear, translate .5s var(--in); }
.card.no-tr { transition: none !important; }

/* cena 1: a miniatura, e os outros dois escondidos à direita */
[data-scene="1"] .card--1 {
  left: 1045px;
  top: 246px;
  width: 240px;
  height: 128px;
  scale: 1;
  transition: left 1.2s var(--io) .3s, top 1.2s var(--io) .3s, scale 1.2s var(--io) .3s, width 1.2s var(--io) .3s, height 1.2s var(--io) .3s;
}
[data-scene="1"] .card--1 .card__img {
  left: -42px;
  top: -15px;
  width: 329px;
  height: 184.4px;
  transition: left 1.2s var(--io) .3s, top 1.2s var(--io) .3s, width 1.2s var(--io) .3s, height 1.2s var(--io) .3s, scale .8s var(--out);
}
[data-scene="1"] .card--1 .card__play { opacity: 1; transition: opacity .5s linear calc(var(--lag) + 1.2s), translate .4s var(--out); }
[data-scene="1"] .card--1:hover .card__play { translate: 4px 0; }
.card__play { transition: opacity .25s linear; }
[data-scene="1"] .card:not(.card--1) {
  opacity: 0;
  translate: 140px 0;
  pointer-events: none;
  transition: opacity .4s linear calc(var(--i) * 50ms), translate .6s var(--in) calc(var(--i) * 50ms);
}
/* entrada: a miniatura se abre da direita para a esquerda */
.card--1 .card__win { clip-path: inset(0); transition: clip-path 1.1s var(--out) .9s; }
.is-pre .card--1 .card__win { clip-path: inset(0 0 0 100%); transition: none; }

/* ================================================================= menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(1, 20, 22, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .45s linear;
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 6px; text-align: center; }
.menu nav a {
  font-weight: 100;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 24px;
  transition: opacity .6s linear calc(.1s + var(--i) * 60ms), translate .8s var(--out) calc(.1s + var(--i) * 60ms), color .3s;
}
.menu.is-open nav a { opacity: 1; translate: 0 0; }
.menu nav a:hover { color: #ff3b3b; }
.menu__close { position: absolute; right: 24px; top: 22px; width: 44px; height: 44px; }
.menu__close i { position: absolute; left: 6px; top: 21.5px; width: 32px; height: 1px; background: var(--ink); rotate: 45deg; }
.menu__close i + i { rotate: -45deg; }

/* ================================================================= celular
   Retrato: o palco vira uma coluna de `--W` × `--H` (390 de largura no
   celular; mais larga no tablet, em vez de só ampliar). O JS fornece as
   escalas que dependem da largura: `--ws` ("Secret"), `--ms` (musgo) e
   `--kc` (cartões). */

.m .stage { width: var(--W); height: var(--H); }
.m .bg { left: 0; top: 0; width: 100%; height: 100%; }

/* Em retrato só cabe ~¼ da largura do vídeo. A câmera leva o torii de 50% a
   73% do quadro; o recorte acompanha (50% → 80%) para ele não sair de cena. */
.m .bg { --bgx: 50%; --pan: object-position 1.4s cubic-bezier(.6, 0, .2, 1) .3s; }
.m [data-scene="2"] .bg { --bgx: 80%; --pan: object-position 1.7s cubic-bezier(.6, 0, .2, 1) .3s; }
.m .bg__video { transition: opacity .35s linear, var(--pan); }
.m .bg__img--1 { transition: opacity 1.8s linear, scale 2.8s var(--out), var(--pan); }
.m .bg__img--2 { transition: opacity 1.2s var(--io) .1s, var(--pan); }
.m .bg.is-2 .bg__img--2 { transition: opacity .5s linear, var(--pan); }
.m .bg.is-2.is-slow .bg__img--2 { transition: opacity 1.6s var(--io) .2s, var(--pan); }
.m .bg.is-quick .bg__img--2 { transition: opacity .25s linear, var(--pan); }
/* com o zoom do retrato, o céu claro do fundo cai atrás dos títulos */
.m .bg::after {
  background: linear-gradient(rgba(1, 20, 22, .82), rgba(1, 20, 22, .6) 30%, rgba(1, 20, 22, 0) 56%);
}

.m .nav, .m .vtext { display: none; }
.m .brand { left: 16px; top: 14px; width: 44px; height: 40px; }
.m .burger { left: calc(var(--W) - 60px); top: 12px; }

.m .intro__title, .m .temple__title { left: 20px; top: 92px; width: 330px; font-size: 26px; line-height: 33px; }
.m .intro__desc { left: 20px; top: 207px; width: 200px; }
.m .temple__desc { left: 20px; top: 244px; width: calc(var(--W) - 40px); max-width: 520px; }
.m .temple__go { left: calc(var(--W) - 59px); top: 92px; }

.m .word { top: calc(var(--H) - 760px * var(--ws)); scale: var(--ws); transform-origin: 0 0; }
.m [data-scene="2"] .ch, .m.is-pre .ch { translate: 0 820px; }
.m .moss { left: calc(var(--W) / 2 - 881px * var(--ms)); top: calc(var(--H) - 395px * var(--ms)); scale: var(--ms); transform-origin: 0 0; }
.m [data-scene="2"] .moss { translate: 0 400px; }
.m.is-pre .moss { translate: 0 200px; }

.m .steps {
  left: 20px;
  top: calc(var(--H) - 86px);
  width: calc(var(--W) - 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.m .steps li { gap: 12px; }
.m .steps__n { font-size: 22px; line-height: 28px; margin: -5.76px 0 -6.66px; width: auto !important; min-width: 26px; }
.m .steps__t { width: auto !important; flex: 1; }

/* cartões: a base 235 × 280,2 na escala `--kc`, lado a lado a partir de x 20,
   pé a 24 do fim da tela; o terceiro sai pela borda, como no design */
.m .card[data-slot="0"] { --x: 20px; --y: calc(var(--H) - 24px - 280.2px * var(--kc)); --k: var(--kc); }
.m .card[data-slot="1"] { --x: calc(32px + 235px * var(--kc)); --y: calc(var(--H) - 24px - 242.1px * var(--kc)); --k: calc(var(--kc) * .86402); }
.m .card[data-slot="2"] { --x: calc(44px + 438.04px * var(--kc)); --y: calc(var(--H) - 24px - 187.25px * var(--kc)); --k: calc(var(--kc) * .66827); }
.m .card[data-slot="3"] { --x: calc(var(--W) + 30px); --y: calc(var(--H) - 24px - 160px * var(--kc)); --k: calc(var(--kc) * .55); }
.m [data-scene="1"] .card--1 { left: calc(var(--W) - 152px); top: 205px; scale: .5667; }

/* ================================================================= sem movimento */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
}