/* ============================================================
   GLOBALS — reset moderno, base tipográfica, container e grid.
   Depende de tokens.css (carregar antes).
   ============================================================ */

/* ── @FONT-FACE — Stage Grotesk + KAWARA (self-hosted) ─────── */
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stage Grotesk';
  src: url('../assets/fonts/StageGrotesk-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* KAWARA — fonte display decorativa */
@font-face {
  font-family: 'Kawara';
  src: url('../assets/fonts/KAWARA.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── RESET MODERNO ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

/* ── TIPOGRAFIA BASE ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-6xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl);  }
h6 { font-size: var(--font-size-lg);  }

p {
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

.text-japanese {
  font-family: var(--font-japanese);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-tight);
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--full {
  max-width: 100%;
  padding-inline: 0;
}

/* ── GRID ───────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Grade de 12 colunas — base para composições responsivas */
.grid--12 {
  grid-template-columns: repeat(12, 1fr);
}

/* Colunas utilitárias */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ── BREAKPOINTS ────────────────────────────────────────────── */
/*
  sm:  640px  — mobile grande / tablet portrait pequeno
  md:  768px  — tablet portrait
  lg:  1024px — tablet landscape / laptop pequeno
  xl:  1280px — desktop (container-max do Figma)
  2xl: 1536px — telas largas
*/

@media (max-width: 1279px) {          /* abaixo do xl */
  h1 { font-size: var(--font-size-5xl); }
  h2 { font-size: var(--font-size-3xl); }
}

@media (max-width: 1023px) {          /* abaixo do lg */
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-2xl); }

  .grid--12 {
    grid-template-columns: repeat(6, 1fr);
  }
  .col-3, .col-4 { grid-column: span 3; }
  .col-5, .col-6 { grid-column: span 6; }
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 6; }
}

@media (max-width: 767px) {           /* abaixo do md */
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl);  }

  .grid--12 {
    grid-template-columns: 1fr;
  }
  [class*="col-"] { grid-column: span 1; }
}

/* ── UTILITÁRIOS GLOBAIS ────────────────────────────────────── */

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-washi);
  color: var(--color-sumi);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }

/* Divisor */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* ── ANIMAÇÕES PROGRESSIVAS (Intersection Observer) ─────────── */
/* Estado base — visível sem JS */
.anim-fade-up {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Com JS ativo (.js-ready no <html>), parte do estado oculto */
.js-ready .anim-fade-up {
  opacity: 0;
  transform: translateY(28px);
}

.js-ready .anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados */
.anim-delay-1 { transition-delay: 100ms; }
.anim-delay-2 { transition-delay: 200ms; }
.anim-delay-3 { transition-delay: 300ms; }
.anim-delay-4 { transition-delay: 450ms; }
.anim-delay-5 { transition-delay: 600ms; }

/* ══════════════════════════════════════════════════════════════
   CURSOR GLOW GLOBAL
   Luz sakura que segue o ponteiro em QUALQUER seção (injetada por
   interactions.js). position:fixed → independe de scroll/seção.
   mix-blend-mode:screen → só CLAREIA, então acende sobre o vídeo da
   Hero e sobre o fundo sumi das demais seções sem velar o conteúdo.
   z-index abaixo do nav (100). Some no touch e em reduced-motion.
   ══════════════════════════════════════════════════════════════ */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at center,
    rgba(250, 196, 212, 0.15) 0%,
    rgba(250, 196, 212, 0.06) 38%,
    rgba(250, 196, 212, 0) 70%
  );
  transition: opacity 450ms ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   CURSOR HINT — dica "role ↓" que acompanha o ponteiro logo na
   chegada (desktop). Injetada por interactions.js. Some no 1º scroll.
   position:fixed → independe de scroll. Pill de vidro discreta.
   ══════════════════════════════════════════════════════════════ */
.cursor-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(22, 17, 15, 0.55);
  border: 1px solid var(--color-border-accent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-sakura);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 500ms ease;
  will-change: transform, opacity;
}

.cursor-hint.is-on {
  opacity: 0.92;
}

.cursor-hint__arrow {
  display: inline-flex;
  animation: cursor-hint-bounce 1.4s ease-in-out infinite;
}

@keyframes cursor-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Touch / sem ponteiro fino: nunca aparece (também não é injetada) */
@media (hover: none), (pointer: coarse) {
  .cursor-hint { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-hint { display: none !important; }
}