/* ============================================================
   GMX ENGINE — camada visual (tokens, grain, vignette, cursor,
   shader, reveals). Carrega DEPOIS do style.css.
============================================================ */

:root {
  --bg:        #050505;
  --surface:   #0A0A0C;
  --card:      #111114;
  --ink:       #F4F4F2;
  --body-c:    #B6B6B3;
  --mute:      #8C8C8A;
  --faint:     #6A6A68;
  --line:      #1E1E22;
  --cyan:      #00FFFF;
  --magenta:   #FF00FF;

  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --step--1: clamp(0.75rem,  0.7rem   + 0.25vw, 0.875rem);
  --step-0:  clamp(0.9375rem,0.875rem + 0.3125vw,1rem);
  --step-1:  clamp(1.125rem, 1rem     + 0.625vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.2rem   + 0.875vw, 1.875rem);
  --step-3:  clamp(1.75rem,  1.5rem   + 1.25vw,  2.5rem);
  --step-4:  clamp(2.25rem,  1.875rem + 1.875vw, 3.5rem);
  --step-5:  clamp(3rem,     2.5rem   + 2.5vw,   5rem);
  --step-6:  clamp(4rem,     3.25rem  + 3.75vw,  7rem);

  --sp-2xs: clamp(0.25rem,  0.2rem   + 0.25vw,  0.375rem);
  --sp-xs:  clamp(0.5rem,   0.425rem + 0.375vw, 0.75rem);
  --sp-s:   clamp(0.75rem,  0.65rem  + 0.5vw,   1rem);
  --sp-m:   clamp(1rem,     0.875rem + 0.625vw,  1.5rem);
  --sp-l:   clamp(1.5rem,   1.25rem  + 1.25vw,   2.5rem);
  --sp-xl:  clamp(2rem,     1.625rem + 1.875vw,  3.5rem);
  --sp-2xl: clamp(3rem,     2.375rem + 3.125vw,  5.5rem);
  --sp-3xl: clamp(4rem,     3rem     + 5vw,      8rem);

  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-expo-io:  cubic-bezier(0.87, 0, 0.13, 1);
}

/* ============================================================
   CANVAS — shader caustics global
   Fixo atrás de tudo: cor total na hero, cinza 7% no resto.
   Seções têm fundo translúcido (.92) para a nuvem respirar.
============================================================ */
#gl-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 0;
}
/* base sempre preta atrás do canvas (sem depender de color-scheme) */
html { background: #050505; }
/* segurança: nenhum palco legado pode voltar a tampar o canvas */
.hero-video-stage, .webgl-universe { background: transparent !important; }
/* a faixa de fade hero→showreel servia ao vídeo antigo;
   com a nuvem global ela virava uma emenda visível */
.showreel-section::before { display: none; }

/* ============================================================
   GRAIN — upgrade do .noise-overlay existente (mesmo z: 9998)
============================================================ */
.noise-overlay {
  inset: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 256px 256px !important;
  opacity: 0.042 !important;
  animation: gmx-grain .25s steps(1) infinite;
  will-change: transform;
}
@keyframes gmx-grain {
  0%  { transform: translate(0,0); }   10% { transform: translate(-3%,2%); }
  20% { transform: translate(2%,-3%); } 30% { transform: translate(-1%,1%); }
  40% { transform: translate(3%,3%); }  50% { transform: translate(-2%,-1%); }
  60% { transform: translate(1%,-2%); } 70% { transform: translate(-3%,3%); }
  80% { transform: translate(2%,1%); }  90% { transform: translate(-1%,-3%); }
  100%{ transform: translate(0,0); }
}

/* ============================================================
   VIGNETTE — abaixo do grain, acima do conteúdo
============================================================ */
.gmx-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(5,5,5,.55) 75%, rgba(5,5,5,.92) 100%);
  pointer-events: none;
  z-index: 9997;
}

/* ============================================================
   CURSOR CRAFT — dot + ring, mix-blend difference
   (substitui o .gmx-cursor legado)
============================================================ */
.gmx-cursor { display: none !important; }

.craft-cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 99999999;
  mix-blend-mode: difference;
}
.craft-cursor-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); transform: translate(-50%,-50%);
  transition: width .18s var(--ease-expo-out), height .18s var(--ease-expo-out);
}
.craft-cursor-ring {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(244,244,242,.45); transform: translate(-50%,-50%);
  transition: width .4s var(--ease-expo-out), height .4s var(--ease-expo-out), border-color .3s;
}
.craft-cursor--hover .craft-cursor-ring { width: 54px; height: 54px; border-color: var(--cyan); }
.craft-cursor--click .craft-cursor-dot  { width: 12px; height: 12px; }

@media (hover: hover) and (pointer: fine) {
  body.craft-cursor-on,
  body.craft-cursor-on a,
  body.craft-cursor-on button,
  body.craft-cursor-on [role="button"] { cursor: none; }
  /* campos de texto mantêm cursor nativo */
  body.craft-cursor-on input,
  body.craft-cursor-on textarea,
  body.craft-cursor-on select { cursor: text; }
  body.craft-cursor-on select { cursor: auto; }
}
@media (hover: none) {
  .craft-cursor { display: none; }
}

/* ============================================================
   PRELOADER — restyle do .gmx-loader existente (mesma estrutura)
============================================================ */
.gmx-loader .loader-text {
  font-family: var(--font-mono);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mute);
}
.gmx-loader .loader-counter {
  font-family: var(--font-mono);
  color: var(--cyan);
  letter-spacing: -.02em;
}
.gmx-loader .loader-bar-fill {
  background: linear-gradient(90deg, var(--cyan), var(--magenta)) !important;
  box-shadow: 0 0 10px var(--cyan);
}

/* ============================================================
   HERO HEADLINE — máscara por caractere
============================================================ */
.hero-title .glitch-target {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
}
.hero-title .split-char { display: inline-block; will-change: transform; }

/* ============================================================
   HERO — eyebrow + CTAs + scroll cue
============================================================ */
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--sp-m);
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--cyan);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  flex-wrap: wrap;
  margin-top: var(--sp-l);
  pointer-events: auto; /* .hero-content tem pointer-events:none */
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--sp-s) var(--sp-l);
  border: 1px solid var(--cyan);
  color: #050505;
  background: var(--cyan);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: color .35s;
}
.hero-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: #050505;
  transform: translateX(-101%);
  transition: transform .4s var(--ease-expo-out);
}
.hero-cta:hover { color: var(--ink); }
.hero-cta:hover::after { transform: translateX(0); }
.hero-cta span { position: relative; z-index: 1; }

.hero-cta--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(244,244,242,.28);
}
.hero-cta--ghost::after { background: rgba(244,244,242,.08); }
.hero-cta--ghost:hover { border-color: var(--ink); }

.hero-scroll-cue {
  position: absolute;
  bottom: clamp(2rem, 4vh, 4rem);
  right: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
  z-index: 3;
  pointer-events: none;
}
.hero-scroll-cue .cue-line {
  width: 1px; height: 48px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.hero-scroll-cue .cue-line::after {
  content: '';
  position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--cyan);
  animation: gmx-scroll-tick 1.6s var(--ease-expo-out) infinite;
}
@keyframes gmx-scroll-tick { from { top: -100%; } to { top: 100%; } }
@media (max-width: 768px) { .hero-scroll-cue { display: none; } }

/* ============================================================
   SHOWREEL — microcopy sensorial
============================================================ */
.showreel-note {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin-top: var(--sp-m);
}

/* ============================================================
   RECIPES — seções com coreografia própria desligam o estado
   inicial do reveal-up legado (o GSAP craft assume a entrada)
============================================================ */
[data-craft-recipe] .reveal-up { opacity: 1; transform: none; }

/* ============================================================
   ════════════ SISTEMA DE COR — PRETO ↔ GRAFITE ════════════
   Regra: só preto, grafite, branco-gelo, cyan e magenta.
============================================================ */
:root {
  /* unifica os tokens legados na paleta flagship */
  --gmx-blue:   #00FFFF;
  --gmx-pink:   #FF00FF;

  --graphite:     #0E0E11;
  --graphite-2:   #141419;
  --glass-dark:   rgba(20,20,25,.55);
  --glass-border: rgba(244,244,242,.08);
}

/* ── Accents de seção: rainbow → marca ───────────────────── */
.about-gmx,
.services-grid-section,
.method-section,
.portfolio-light-wrapper,
.gmx-proof-section,
.gmx-qualification,
.gmx-faq { --section-accent: var(--cyan); }
.gmx-manifesto { --section-accent: var(--magenta); }

/* ── Fundos: brancas → grafite/preto translúcido (nuvem passa) ── */
.about-gmx,
.light-realm,
.portfolio-light-wrapper,
.gmx-qualification,
.gmx-manifesto { background: rgba(14,14,17,.92); }

.gmx-proof-section,
.gmx-faq { background: rgba(5,5,6,.92); }

.gmx-proof-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ── Tipografia: tinta clara em tudo ─────────────────────── */
.section-title,
.light-content .section-title { color: var(--ink); }
.light-content .section-desc { color: var(--body-c); }

/* Sobre */
.premium-text-card { color: var(--body-c); }
.premium-text-card .section-title { color: var(--ink); }
.premium-text-card .section-desc { color: var(--body-c); }
.premium-text-card .big-text { color: var(--mute); }
.capability-pill {
  border-color: var(--glass-border);
  color: var(--body-c);
  background: var(--graphite-2);
}
.capability-pill:hover { border-color: var(--cyan); color: var(--cyan); }

/* Serviços — bento glass escuro */
.bento-card,
.bento-card:nth-child(1),
.bento-card:nth-child(2),
.bento-card:nth-child(3),
.bento-card:nth-child(4),
.bento-card:nth-child(5) {
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
}
.bento-card:hover { border-color: rgba(0,255,255,.30); }
.bento-title { color: var(--ink); }
.bento-desc { color: var(--body-c); }
.bento-tag,
.bento-card:nth-child(even) .bento-tag { color: var(--mute); }

/* Método — step cards */
.step-card {
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
}
.step-number,
.step-card:nth-child(even) .step-number { color: rgba(244,244,242,.10); }
.step-card:hover .step-number { color: var(--cyan); }
.step-card:nth-child(even):hover .step-number { color: var(--magenta); }
.step-card h4 { color: var(--ink); }
.step-card p { color: var(--body-c); }

/* Portfólio */
.portfolio-heading { color: var(--ink); }
.portfolio-drag-hint { color: var(--mute); }

/* Impacto */
.proof-copy h2 { color: var(--ink); }
.proof-copy p { color: var(--body-c); }
.metric p { color: var(--body-c); }

/* Critérios — o wrapper era vidro BRANCO (painel cinza lavado no dark) */
.qualification-wrapper {
  background: rgba(14,14,19,.72);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,244,242,.05);
}
.promise-check {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
}
.qualification-wrapper h2 { color: var(--ink); }
.qualification-subtitle { color: var(--body-c); }
.qualification-item,
.promise-item {
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
}
.qualification-item:hover,
.promise-item:hover {
  border-color: rgba(0,255,255,.25);
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
}
.qualification-item h3,
.promise-item h4 { color: var(--ink); }
.qualification-item p,
.promise-item p { color: var(--body-c); }
.segment-pill {
  color: var(--body-c);
  background: var(--graphite-2);
  border: 1px solid var(--glass-border);
}

/* FAQ */
.faq-wrapper h2 { color: var(--ink); }
.faq-item {
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
}
.faq-item summary { color: var(--ink); }
.faq-item p { color: var(--body-c); }

/* Manifesto */
.manifesto-title { color: var(--ink); }
.manifesto-desc { color: var(--body-c); }

/* ── Clientes: roxo → marca ──────────────────────────────── */
.traj {
  background: linear-gradient(160deg, #050507 0%, #08080E 40%, #0A0A12 70%, #050507 100%);
}
.traj::before {
  background:
    radial-gradient(ellipse 90% 60% at 5% 10%,  rgba(0,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 95% 45%, rgba(255,0,255,.08) 0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 40% 90%, rgba(0,255,255,.07) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 75% 15%, rgba(255,0,255,.06) 0%, transparent 45%);
}

/* Clientes — detalhes: nodes, labels, tags (esq=cyan, dir=magenta) */
.traj .heading-lg em { color: var(--cyan); }
.traj .section-label { color: rgba(0,255,255,.55); }
.traj-node span {
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 0 12px rgba(0,255,255,.12);
}
.traj-item--right .traj-node span {
  border-color: rgba(255,0,255,.35);
  box-shadow: 0 0 12px rgba(255,0,255,.12);
}
.traj-item.is-active .traj-node span {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,255,255,.4), 0 0 8px rgba(0,255,255,.25);
}
.traj-item--right.is-active .traj-node span {
  background: var(--magenta); border-color: var(--magenta);
  box-shadow: 0 0 24px rgba(255,0,255,.4), 0 0 8px rgba(255,0,255,.25);
}
.traj-item.is-active .traj-node::after { border-color: rgba(0,255,255,.35); }
.traj-item--right.is-active .traj-node::after { border-color: rgba(255,0,255,.35); }
.traj-item--right .traj-card-tag { color: rgba(255,0,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6), 0 0 20px rgba(255,0,255,.3); }
.traj-item--right .traj-card-tag::before { color: rgba(255,0,255,.5); }
.traj-item--right .traj-card-cta { color: rgba(255,0,255,.4); border-color: rgba(255,0,255,.06); }
.traj-item--right .traj-card-cta:hover { color: var(--magenta); border-color: rgba(255,0,255,.15); }

/* Método — linhas de topo dos steps 3/4 (violeta/verde → marca) */
.step-card:nth-child(3)::before { background: linear-gradient(90deg, var(--cyan), transparent); }
.step-card:nth-child(4)::before { background: linear-gradient(90deg, var(--magenta), transparent); }

/* ── Modais inativos não capturam cliques ──────────────────
   service-modal usa .active; video-modal usa aria-hidden.
   Delay na visibility preserva o fade-out do GSAP. ─────── */
.service-modal:not(.active) {
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.service-modal.active { visibility: visible; transition: none; }

.video-modal[aria-hidden="true"] {
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.video-modal[aria-hidden="false"] { visibility: visible; transition: none; }

/* ============================================================
   SEÇÃO TECNOLOGIA · "A planta vira prédio"
============================================================ */
.gmx-tec {
  position: relative;
  z-index: 20;
  background: rgba(5,5,6,.92);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8vh 5vw;
  overflow: hidden;
  /* pin (desktop): a seção vira um palco de viewport inteira */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tec-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .tec-wrapper { grid-template-columns: 1fr; } }

.tec-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.tec-title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 22px;
}
.tec-title em { font-style: normal; color: var(--cyan); }
.tec-desc {
  color: var(--body-c);
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 28px;
}
.tec-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tec-pill {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--body-c);
  background: var(--graphite-2);
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: 100px;
  transition: border-color .3s, color .3s;
}
.tec-pill:hover { border-color: var(--cyan); color: var(--cyan); }
.tec-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(244,244,242,.28);
  padding: 14px 28px;
  transition: border-color .3s, color .3s;
}
.tec-cta:hover { border-color: var(--cyan); color: var(--cyan); }

.tec-stage {
  position: relative;
  height: min(74vh, 660px);
  min-height: 320px;
}
@media (max-width: 900px) { .tec-stage { height: auto; aspect-ratio: 4/3; } }
#tec-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tec-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.tec-fallback svg { width: 80%; height: auto; opacity: .9; }
.gmx-tec.is-fallback #tec-canvas { display: none; }
.gmx-tec.is-fallback .tec-fallback { display: flex; }

.tec-hud {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

/* ============================================================
   REEL WALL — portfólio em vídeo (substitui o carrossel)
   Grid editorial: verticais 9:16 ancoram, horizontais 16:9 fluem.
============================================================ */
.reel-walls {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reel-wall {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.15fr 1fr;
  grid-template-areas:
    "v1 h1 h1 v2"
    "v1 h2 h2 v2";
  gap: 14px;
}
.reel-wall--b {
  grid-template-columns: 1fr 1.15fr 1.15fr 1fr;
  grid-template-areas:
    "v3 h3 h3 cta"
    "v3 h3 h3 cta";
}
.reel-area-v1 { grid-area: v1; }
.reel-area-v2 { grid-area: v2; }
.reel-area-v3 { grid-area: v3; }
.reel-area-h1 { grid-area: h1; }
.reel-area-h2 { grid-area: h2; }
.reel-area-h3 { grid-area: h3; align-self: center; }
.reel-area-cta { grid-area: cta; }

@media (max-width: 900px) {
  .reel-wall, .reel-wall--b {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
  }
  .reel-wall > *, .reel-wall--b > * { grid-area: auto !important; }
  .reel-card--v { grid-row: span 2; }
}
@media (max-width: 540px) {
  .reel-wall, .reel-wall--b { grid-template-columns: 1fr; }
  .reel-card--v { grid-row: auto; aspect-ratio: 9/14; }
}

.reel-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  min-height: 220px;
}
.reel-card--v { aspect-ratio: 9/16; }
.reel-card--h { aspect-ratio: 16/9; }

/* placeholder on-brand enquanto o vídeo não toca */
.reel--astria  { background: radial-gradient(ellipse at 50% 28%, rgba(0,255,255,.14) 0%, #050507 70%); }
.reel--amazon  { background: radial-gradient(ellipse at 35% 60%, rgba(0,255,200,.11) 0%, #050507 68%); }
.reel--carmel  { background: radial-gradient(ellipse at 60% 40%, rgba(255,0,255,.10) 0%, #050507 68%); }
.reel--elo     { background: radial-gradient(ellipse at 50% 65%, rgba(0,200,255,.13) 0%, #050507 70%); }
.reel--poti    { background: radial-gradient(ellipse at 45% 30%, rgba(0,255,255,.11) 0%, #050507 70%); }
.reel--riopoty { background: radial-gradient(ellipse at 55% 55%, rgba(255,0,255,.09) 0%, #050507 68%); }

/* vídeo sempre visível: poster aparece de imediato; sem arquivo,
   o elemento pinta transparente e o gradiente do card assume */
.reel-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-expo-out);
}
.reel-card:hover .reel-vid { transform: scale(1.04); }

.reel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.88) 0%, transparent 38%);
  pointer-events: none;
  z-index: 2;
  transition: opacity .4s;
}
.reel-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  z-index: 3;
  pointer-events: none;
  transition: opacity .4s;
}
/* hover desktop: o filme assume a tela inteira do card (o cursor
   contextual "VER FILME" faz o papel da legenda) */
@media (hover: hover) and (pointer: fine) {
  .reel-card:hover .reel-meta,
  .reel-card:hover .reel-shade { opacity: 0; }
}
.reel-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.reel-name {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.reel-play {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(5,5,5,.55);
  border: 1px solid var(--glass-border);
  padding: 6px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s, transform .35s var(--ease-expo-out);
  pointer-events: none;
}
.reel-card:focus-visible .reel-play { opacity: 1; transform: translateY(0); }

/* tile CTA — conversão dentro do portfólio */
.reel-cta-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  background: rgba(255,0,255,.04);
  border: 1px solid var(--line);
  border-left: 3px solid var(--magenta);
  min-height: 220px;
}
.reel-cta-tile:hover { border-color: rgba(255,0,255,.35); border-left-color: var(--magenta); }
.reel-cta-kicker {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--magenta);
}
.reel-cta-title {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 14px 0;
}
.reel-cta-link {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--magenta);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color .3s;
}
.reel-cta-tile:hover .reel-cta-link { color: var(--magenta); }

/* ============================================================
   PERFORMANCE — render adiado nas seções abaixo da dobra
============================================================ */
.gmx-qualification,
.gmx-faq,
.gmx-manifesto {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ============================================================
   LAPIDAÇÃO — relógio, som, rótulo do cursor, capítulo, fx
============================================================ */
.hero-clock-line {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: var(--sp-l);
}
.hero-clock-line #hero-clock { color: var(--mute); }

.nav-sound {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  transition: color .25s;
}
.nav-sound:hover { color: var(--ink); }
.nav-sound.is-on { color: var(--cyan); }

.craft-cursor-label {
  position: absolute;
  left: 26px;
  top: -8px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s, transform .3s var(--ease-expo-out);
}
.craft-cursor--labeled .craft-cursor-label { opacity: 1; transform: translateX(0); }

.gmx-chapter {
  position: fixed;
  left: 28px;
  bottom: 26px;
  z-index: 9000;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .5s var(--ease-expo-out);
  pointer-events: none;
  mix-blend-mode: difference;
}
.gmx-chapter.is-on { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .gmx-chapter { display: none; } }

#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 8000;
}

/* ============================================================
   REDUCED MOTION — desliga tudo que é decorativo
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .noise-overlay { animation: none; }
  #gl-canvas { display: none; }
  #fx-canvas { display: none; }
  .gmx-chapter { display: none; }
  .craft-cursor { display: none; }
  .hero-title .split-char { transform: none !important; opacity: 1 !important; }
  .gmx-tec #tec-canvas { display: none; }
  .gmx-tec .tec-fallback { display: flex; }
}