/* ============================================================
   HERO — frame completo node 1:2388.
   Figma: 1920×879px, justify-end, py-110px, px-315px (→ container 1280px).
   ============================================================ */

/* ── Seção / track de scroll ───────────────────────────────────
   Sem JS (default): hero é uma seção normal de 100vh.
   Com JS (.js-ready): vira um track alto e o palco fica sticky,
   transformando a distância de scroll em "scrub" do vídeo. */
.hero {
  position: relative;
  height: 100vh;
}

.js-ready .hero {
  height: 250vh;            /* ~150vh de scroll mapeados ao vídeo inteiro */
}

/* ── Palco ──────────────────────────────────────────────────── */
.hero__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;          /* conteúdo ao fundo — Figma: justify-end */
  padding-bottom: var(--space-28);    /* 112px ≈ 110px do Figma */
}

.js-ready .hero__stage {
  position: sticky;
  top: 0;                  /* prende o palco no topo durante o scrub */
}

/* ── Background ─────────────────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background-color: var(--color-sumi);   /* base escura até o 1º frame decodificar */
}

/* Vídeo scroll-driven: cobre o palco. Sem áudio, sem controles. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fade inferior — garante a base do palco em sumi puro e dissolve o
   cursor glow ANTES da borda (overflow:hidden do palco). Sem isso, o
   glow/vídeo é cortado numa linha reta na transição p/ Serviços.
   Fica acima do glow (z:2) e abaixo do texto (z:10). */
.hero__fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38vh;
  z-index: 2;
  pointer-events: none;
  /* Fade monotônico até sumi PURO — base do palco = #16110F = fundo das
     demais seções → transição contínua, sem banda de cor. */
  background: linear-gradient(
    to bottom,
    rgba(22, 17, 15, 0) 0%,
    var(--color-sumi) 92%
  );
}

/* Gradiente: node 1:2389 — de transparente para --color-sumi.
   Agora alinhado ao hero visível, não ao offset anterior. */
.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-fade);
}

/* Camada de proteção de texto: escurecimento constante do topo + reforço progressivo no rodapé.
   Sem essa base, o céu claro da foto destrói o contraste do título e dos kanjis. */
.hero__bg-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 17, 15, 0.42) 0%,    /* escurecimento constante — cobre kanjis e título */
    rgba(22, 17, 15, 0.35) 40%,   /* leve alívio no centro */
    rgba(22, 17, 15, 0.60) 70%,
    rgba(22, 17, 15, 0.88) 100%
  );
}

/* ── Conteúdo ───────────────────────────────────────────────── */
/* Figma node 1:2419 (TEXT): flex-col, gap-200px entre nav e textos.
   Como o nav está no <header> fora do hero, a gap superior é absorvida
   pelo min-height:100vh + justify-end. */
.hero__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

/* ── Textos: headline + CTA ─────────────────────────────────── */
/* Figma node 1:2561 (TEXTS): flex-col, gap-160px */
.hero__texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);   /* 160px — Figma: gap-[160px] */
}

/* ── Headline ───────────────────────────────────────────────── */
/* Figma node 1:2653 (HEADLINE): flex-col, gap-24px */
.hero__headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);    /* 24px — Figma: gap-[24px] */
}

/* Label japonês — Figma: Kozuka Gothic Pr6N B, 14px, sakura */
.hero__label {
  font-family: var(--font-display);            /* Kawara */
  font-size: var(--font-size-sm);              /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);       /* 1.034 */
  color: var(--color-sakura);
  white-space: nowrap;
}

/* Título principal — Figma: Stage Grotesk Medium, 72px, washi, w-690px */
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-6xl);             /* 72px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);       /* 1.034 */
  color: var(--color-washi);
  max-width: 690px;
  font-style: normal;
}

/* Trecho de acento: "(e o mercado)." — cor sakura */
.hero__accent {
  color: var(--color-sakura);
  font-style: normal;
}

/* ── Bloco CTA ──────────────────────────────────────────────── */
/* Figma node 1:2396 (CONTACT TEXT): flex-col, gap-32px, w-350px */
.hero__cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);    /* 32px — Figma: gap-[32px] */
  max-width: 393px;       /* Figma: w-[393px] no body copy */
}

/* Body copy — Figma: Stage Grotesk Regular, 16px, washi opacity-60, lh-1.2 */
.hero__body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);            /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);        /* 1.2 */
  color: var(--color-text-muted);              /* washi 60% */
}

/* Botão CTA — Figma: bg washi, text sumi, h-48px, w-197px, radius 100px, px-20px */
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5, 0.625rem);   /* 10px — Figma: gap-[10px] */
  background: var(--color-washi);
  color: var(--color-sumi);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  height: 48px;
  padding-left:  var(--space-5);    /* 20px — Figma: px-[20px] */
  padding-right: var(--space-1);    /* 4px — ícone quase flush com a borda pill */
  border-radius: var(--radius-pill);
  white-space: nowrap;
  width: fit-content;
  /* transition definido na seção de animações abaixo */
}

/* Ícone de seta — Figma: 41×41px, círculo com seta */
.hero__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  flex-shrink: 0;
}

.hero__btn-icon svg {
  display: block;
  width: 41px;
  height: 41px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */

/* Laptop pequeno / tablet landscape */
@media (max-width: 1279px) {
  .hero__title {
    font-size: var(--font-size-5xl);   /* 48px */
    max-width: 560px;
  }

  .hero__texts {
    gap: var(--space-24);              /* 96px */
  }
}

/* Tablet portrait */
@media (max-width: 1023px) {
  .hero__title {
    font-size: var(--font-size-4xl);   /* 40px */
    max-width: 100%;
  }

  /* título↔body com o MESMO espaço que body↔botão (32px) — sem vão vazio */
  .hero__texts {
    gap: var(--space-8);              /* 32px = gap do .hero__cta-block */
  }

  .hero__cta-block {
    max-width: 100%;
  }
}

/* Mobile — sem scrub: hero volta a ser seção normal de 1 viewport.
   O JS coloca o vídeo em loop autoplay como fundo (ver hero.js). */
@media (max-width: 767px) {
  .hero,
  .js-ready .hero {
    height: 100svh;                    /* safe viewport height em mobile */
  }

  .hero__stage,
  .js-ready .hero__stage {
    position: relative;                /* desliga o sticky/scrub */
    height: 100svh;
    padding-bottom: var(--space-16);   /* 64px */
  }

  .hero__label {
    white-space: normal;
  }

  .hero__title {
    font-size: 2.5rem;                 /* 40px — maior no mobile */
  }

  /* título↔body com o MESMO espaço que body↔botão (32px) */
  .hero__texts {
    gap: var(--space-8);              /* 32px */
  }

  .hero__headline {
    gap: var(--space-4);               /* 16px */
  }

  /* Botão maior e mais tocável no mobile */
  .hero__btn {
    height: 56px;
    font-size: var(--font-size-lg);    /* 18px */
    padding-left: var(--space-6);
  }
}


/* ══════════════════════════════════════════════════════════════
   HEADLINE EM INGLÊS (html[lang="en"])
   "We revolutionize your brand (and the market)." é mais larga que a PT.
   Sem ajuste, "brand" cai sozinho numa linha e o accent em outra (3 linhas).
   Aumentamos o max-width na largura certa por breakpoint para a quebra ficar
   "We revolutionize your" / "brand (and the market)." (accent junto do brand).
   Larguras medidas @72px: "your brand"=839px, "brand (and the market)."=710px.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  html[lang="en"] .hero__title { max-width: 46.5rem; }   /* 744px (>710, <839) */
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html[lang="en"] .hero__title { max-width: 32.5rem; }   /* 520px — escala p/ 48px */
}


/* ══════════════════════════════════════════════════════════════
   ANIMAÇÕES — apenas transform / opacity / clip-path (GPU).
   Layout aprovado intocado. Ativas apenas com .js-ready no <html>.
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */

/* Nav: desliza do topo (única animação on-load — header fixo) */
@keyframes hero-nav-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Nav: slide down no .nav__content (irmão do ::before, não seu pai).
   Transform aqui não bloqueia o backdrop-filter do ::before. */
.js-ready .nav__content {
  animation: hero-nav-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* ══════════════════════════════════════════════════════════════
   REVEAL DRIVEN BY SCROLL
   Com JS ativo os textos começam OCULTOS e só entram quando o
   scrub do vídeo se aproxima do fim (.hero.is-revealed via JS).
   Sem JS (sem .js-ready) tudo aparece normalmente — progressivo.
   ══════════════════════════════════════════════════════════════ */

/* ── Word split (spans injetados por hero.js) ───────────────── */
.hero__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: bottom;
}

/* Estado oculto das palavras (só com JS): clipadas abaixo da máscara */
.js-ready .hero__word-inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--word-delay, 0ms),
    opacity   820ms ease                          var(--word-delay, 0ms);
}

/* Estados ocultos de label / body / botão (só com JS) */
.js-ready .hero__label,
.js-ready .hero__body,
.js-ready .hero__btn {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   700ms ease,
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Revelado: scroll chegou ao ponto de entrada ──────────────
   Especificidade (.hero.is-revealed …) > (.js-ready …) → vence. */
.hero.is-revealed .hero__word-inner {
  transform: translateY(0);
  opacity: 1;
}

.hero.is-revealed .hero__label {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

.hero.is-revealed .hero__body {
  opacity: 1;
  transform: none;
  transition-delay: 340ms;
}

.hero.is-revealed .hero__btn {
  opacity: 1;
  transform: none;
  transition-delay: 480ms;
}

/* ── @property: permite transição suave das CSS vars usadas no SVG ──
   O SVG arrow.svg usa var(--fill-0) no círculo e var(--stroke-0) na seta.
   @property com syntax:'<color>' faz o browser interpolar os valores. */
@property --fill-0 {
  syntax: '<color>';
  inherits: true;
  initial-value: #E66578;
}
@property --stroke-0 {
  syntax: '<color>';
  inherits: true;
  initial-value: #F5F0E8;
}

/* ── Hover CTA ───────────────────────────────────────────────────
   Default: botão washi (claro) + círculo tsutsuji (rosa) + seta washi.
   Hover:   botão sakura (rosa) + expansão leve + círculo branco + seta diagonal. */
.hero__btn {
  --fill-0:   var(--color-tsutsuji);
  --stroke-0: var(--color-washi);

  transition:
    background-color   300ms ease,
    color              300ms ease,
    box-shadow         350ms ease,
    transform          400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    --fill-0           300ms ease,
    --stroke-0         300ms ease;
}

.hero__btn:hover {
  background-color: var(--color-sakura);
  color:            var(--color-sumi);
  --fill-0:   var(--color-washi);
  --stroke-0: var(--color-sumi);
  transform: scale(1.06);                             /* expande suavemente */
  box-shadow: 0 8px 32px rgba(250, 196, 212, 0.55);
}

.hero__btn:active {
  background-color: var(--color-tsutsuji);
  --fill-0: var(--color-washi);
  --stroke-0: var(--color-sumi);
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(230, 101, 120, 0.35);
}

/* ── Seta: rotaciona para diagonal superior-direita no hover ──── */
.hero__btn-icon {
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__btn:hover .hero__btn-icon {
  transform: rotate(-38deg);   /* aponta para ↗ (−45° seria exato, −38° fica mais suave) */
}

/* Cursor glow agora é GLOBAL — ver .cursor-glow em globals.css +
   setupCursorGlow() em interactions.js (funciona em qualquer seção). */

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Desativa todas as animações e transições declaradas aqui.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Sem scrub: hero vira seção normal de 1 viewport, vídeo pausado */
  .js-ready .hero {
    height: 100vh;
  }

  .js-ready .hero__stage {
    position: relative;
    top: auto;
  }

  .js-ready .nav__content,
  .js-ready .hero__label,
  .js-ready .hero__word-inner,
  .js-ready .hero__body,
  .js-ready .hero__btn {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  .hero__btn {
    transition: none !important;
    animation: none !important;
  }

  .hero__btn-icon {
    transition: none !important;
  }

  .nav__link,
  .nav__link::after {
    transition: none !important;
  }
}