/* ==========================================================
   Euler Caldeira — "Primeira tragada"
   P&B é fumaça na pele: a página respira, derrete e pousa.
   ========================================================== */

@property --high {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* cor */
  --resina: #17131A;        /* fundo: preto-violeta queimado */
  --fumo: #241E27;          /* superfície: visor, ficha */
  --fumaca: #ECE6E0;        /* texto */
  --cinza: #A99FA6;         /* texto de apoio */
  --brasa: #E4432F;         /* só ação: a brasa acesa */
  --brasa-funda: #C2321F;   /* brasa pressionada */
  --ciano: #3FE0D0;         /* canal fantasma da onda */
  --magenta: #FF4FB0;       /* canal fantasma da onda */
  --linha: rgb(236 230 224 / 0.14);

  /* tipografia */
  --f-derrete: 'Climate Crisis', 'Arial Black', Impact, sans-serif;
  --f-texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 460ms;
  --motion-assinatura: 1400ms;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);

  --shift-sm: 8px;
  --shift-md: 14px;
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --shift-md: 0px;
    --press-scale: 1;
    --motion-scene: 200ms;
  }
}

/* ---------- base ---------- */

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

html {
  background: var(--resina);
  color: var(--fumaca);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: 560px;
  min-height: 100vh;
  background: var(--resina);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.titulo {
  margin: 0;
  font-family: var(--f-derrete);
  font-weight: 400;
  font-size: clamp(32px, 9.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-variation-settings: "YEAR" 1979;
}

/* ---------- botões ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 22px;
  border: 0;
  border-radius: 14px;
  font: 700 17px/1.2 var(--f-texto);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-standard) var(--ease-standard);
}
.btn i { font-size: 22px; }

.btn-brasa {
  background: var(--brasa);
  color: #FFF8F3;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}
/* toque: a brasa acende */
.btn-brasa:active {
  transform: scale(var(--press-scale));
  background: var(--brasa-funda);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 28px rgb(228 67 47 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .btn-brasa:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 22px rgb(228 67 47 / 0.35); }
}

.link-fumo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--linha);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color var(--motion-fast) var(--ease-standard), opacity var(--motion-fast);
}
.link-fumo i { font-size: 20px; }
.link-fumo:active { opacity: 0.7; text-decoration-color: var(--fumaca); }

/* ==========================================================
   CENA 1 — tragada
   ========================================================== */

.hero {
  position: relative;
  padding-bottom: 48px;
}

/* marcador invisível: passou dele rolando, a barra do WhatsApp aparece */
.gatilho-barra {
  position: absolute;
  top: 24px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero-top {
  position: absolute;
  z-index: 3;
  top: calc(14px + var(--safe-top));
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.handle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
}

/* o palco: imagem que respira */
.stage {
  position: relative;
  display: block;
  width: 100%;
  height: 62vh;
  height: 62svh;
  min-height: 360px;
  max-height: 680px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--resina);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.stage:active { cursor: grabbing; }
.stage:focus-visible { outline-offset: -4px; border-radius: 0; }

.stage-img,
.stage-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-img {
  object-fit: cover;
  object-position: 50% 40%;
  pointer-events: none;
  transition: filter var(--motion-scene) var(--ease-standard);
}
.stage-gl {
  opacity: 0;
  transition: opacity 900ms var(--ease-standard);
}
.stage-gl.is-live { opacity: 1; }

/* véus: topo para o @, base que vira fumaça e encontra o nome */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  pointer-events: none;
}
.stage::before {
  top: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgb(23 19 26 / 0.7), rgb(23 19 26 / 0));
}
.stage::after {
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, var(--resina) 4%, rgb(23 19 26 / 0.75) 40%, rgb(23 19 26 / 0));
}

.stage-hint {
  position: absolute;
  z-index: 2;
  top: calc(20px + var(--safe-top));
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(23 19 26 / 0.62);
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--fumaca);
  font: 500 14px/1.2 var(--f-texto);
  transition: opacity var(--motion-standard) var(--ease-standard);
}
.stage-hint i { font-size: 14px; color: var(--fumaca); }
.no-js .stage-hint, html:not(.js) .stage-hint { display: none; }

/* fallback sem WebGL / reduced motion: segurar tinge a imagem */
.stage.is-high .stage-img.is-fallback {
  filter: sepia(0.7) saturate(4.2) hue-rotate(235deg) contrast(1.08);
}

.hero-copy {
  position: relative;
  z-index: 2;
  margin-top: -52px;
  padding: 0 var(--gutter);
}

.hero-name {
  margin: 0 0 18px -0.02em;
  font-family: var(--f-derrete);
  font-weight: 400;
  font-size: clamp(64px, 21vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variation-settings: "YEAR" calc(1979 + var(--high) * 46);
  text-shadow:
    calc(var(--high) * 0.06em) 0 0 rgb(63 224 208 / 0.8),
    calc(var(--high) * -0.06em) 0 0 rgb(255 79 176 / 0.8);
}

.hero-lead {
  max-width: 30ch;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--fumaca);
}


/* entrada: o nome se solidifica, saindo da fumaça */
@keyframes solidifica {
  from { --high: 0.9; }
  to   { --high: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-name {
    animation: solidifica var(--motion-assinatura) var(--ease-enter) 120ms backwards;
  }
}
.hero.is-holding .hero-name { animation: none; }

/* sem WebGL: o nome derrete por transição de estado */
.hero.is-fallback { transition: --high 700ms var(--ease-standard); }
.hero.is-fallback.is-high { --high: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero.is-fallback { transition: none; }
}

/* ==========================================================
   CENA 2 — a sessão: as obras passam como num projetor
   ========================================================== */

.sessao {
  padding: 56px var(--gutter) 32px;
  border-top: 1px solid var(--linha);
}
.sessao-head { margin-bottom: 22px; }
.sessao-head p { margin-top: 10px; color: var(--cinza); font-size: 16px; }

.tela {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fumo);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.tela:active { cursor: grabbing; }
.tela-img,
.tela-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tela-img {
  object-fit: cover;
  pointer-events: none;
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    filter var(--motion-scene) var(--ease-standard);
}
.tela-img.is-trocando { opacity: 0; }
.tela.is-high .tela-img.is-fallback {
  filter: sepia(0.7) saturate(4.2) hue-rotate(235deg) contrast(1.08);
}
.tela-gl {
  opacity: 0;
  transition: opacity 700ms var(--ease-standard);
}
.tela-gl.is-live { opacity: 1; }

.tela::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  background: linear-gradient(to top, rgb(23 19 26 / 0.92), rgb(23 19 26 / 0));
  pointer-events: none;
}

.tela-progresso {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: rgb(236 230 224 / 0.16);
}
.tela-progresso span {
  display: block;
  height: 100%;
  background: var(--fumaca);
  transform: scaleX(0);
  transform-origin: left center;
}
html:not(.js) .tela-progresso { display: none; }

.tela-info {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 18px;
  pointer-events: none;
}
.tela-num {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-derrete);
  font-size: 22px;
  line-height: 1;
  font-variation-settings: "YEAR" calc(1979 + var(--high) * 46);
  text-shadow:
    calc(var(--high) * 3px) 0 0 rgb(63 224 208 / 0.8),
    calc(var(--high) * -3px) 0 0 rgb(255 79 176 / 0.8);
}
.tela-legenda {
  max-width: 32ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.tela-controles {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ctrl {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--fumo);
  color: var(--fumaca);
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast);
}
.ctrl:active { transform: scale(0.92); background: #2E2632; }
.ctrl[data-tela-play] { margin-left: auto; order: 3; }

.rolo {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 14px calc(var(--gutter) * -1) 0;
  padding: 4px var(--gutter) 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rolo::-webkit-scrollbar { display: none; }
.rolo li { flex: none; scroll-snap-align: start; }
.rolo-item {
  display: block;
  width: 60px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--motion-standard) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.rolo-item img { width: 100%; height: 100%; object-fit: cover; }
.rolo-item:active { transform: scale(0.94); }
.rolo-item[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--resina), 0 0 0 4px var(--brasa);
}
.rolo-item:focus-visible { outline-offset: 4px; }

.sessao-cta { margin-top: 20px; }

/* ==========================================================
   CENA 3 — ofício: as palavras vão derretendo
   ========================================================== */

.oficio {
  padding: 56px var(--gutter) 48px;
}
.derrete li {
  font-family: var(--f-derrete);
  font-size: clamp(32px, 10vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-variation-settings: "YEAR" var(--y, 1979);
}
.derrete li + li { margin-top: 2px; }

.oficio-nota {
  max-width: 34ch;
  margin: 32px 0 6px;
  color: var(--cinza);
  font-size: 16px;
}

/* ==========================================================
   CENA 4 — pouso
   ========================================================== */

.pouso {
  padding: 56px var(--gutter) 40px;
  border-top: 1px solid var(--linha);
}
.pouso-texto {
  max-width: 34ch;
  margin: 16px 0 26px;
  font-size: 17px;
}

.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 32px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--linha);
}
.ficha div { padding: 16px; background: var(--fumo); }
.ficha dt { color: var(--cinza); font-size: 14px; }
.ficha dt i { margin-right: 4px; color: var(--brasa); }
.ficha dd { margin: 4px 0 0; font-weight: 700; font-size: 16px; line-height: 1.3; }
.ficha dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  text-underline-offset: 4px;
}

/* ---------- rodapé ---------- */

.rodape {
  padding: 28px var(--gutter) calc(110px + var(--safe-bottom));
  border-top: 1px solid var(--linha);
  color: var(--cinza);
  font-size: 13px;
  text-align: center;
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  color: var(--fumaca);
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--brasa);
  --seal-ring: 0.4 1.4;          /* pontilhado: o sombreado do realismo */
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- barra fixa ---------- */

.barra {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(to top, var(--resina) 55%, rgb(23 19 26 / 0));
  transform: translate(-50%, 110%);
  transition: transform var(--motion-emphasis) var(--ease-emphasis);
}
.barra.is-on { transform: translate(-50%, 0); }
.barra .btn { width: 100%; }

/* ---------- larguras menores ---------- */

/* telas estreitas: a dica desce para perto do polegar e libera o @ */
@media (max-width: 374px) {
  .stage-hint { top: auto; bottom: 64px; }
}

@media (max-width: 350px) {
  :root { --gutter: 16px; }
  .hero-lead { font-size: 17px; }
  .ficha { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .stage-img { transition-duration: 200ms; }
  .barra { transition: opacity 200ms linear; transform: translate(-50%, 0); opacity: 0; visibility: hidden; }
  .barra.is-on { opacity: 1; visibility: visible; }
  .tela-progresso { display: none; }
  .rolo { scroll-behavior: auto; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}