/* ==========================================================================
   MOVE IT · M1 BLACKOUT · Base: reset, tipografia, chrome global
   ========================================================================== */

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

html {
  background: var(--void);
  scrollbar-width: thin;
  scrollbar-color: var(--hair) var(--ink);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

::selection { background: var(--bone); color: var(--ink); }

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

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

button {
  background: none; border: none; color: inherit;
  font: inherit; cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 4px;
}

/* ---- Tipografia ------------------------------------------------------- */

.display-xl, .display-l, .display-m {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96;
  font-weight: 400;
}

.display-xl { font-size: var(--fs-display-xl); line-height: 0.92; letter-spacing: -0.02em; }
.display-l  { font-size: var(--fs-display-l);  line-height: 0.98; letter-spacing: -0.015em; }
.display-m  { font-size: var(--fs-display-m);  line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; }

.lead {
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--bone-dim);
}

.body-copy { max-width: 62ch; color: var(--bone-dim); }

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---- Layout ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.section { padding-block: var(--section-gap); position: relative; }

/* Régua de secção (M10): desenha-se ao entrar em viewport via JS */
.rule {
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.rule.is-drawn { transform: scaleX(1); }

/* ---- Header ------------------------------------------------------------ */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.6vw, 32px) var(--margin);
  mix-blend-mode: difference;
}

.brand {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand em { font-style: italic; }

.site-nav { display: flex; gap: clamp(18px, 2.4vw, 40px); }

.site-nav a {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding-block: 4px;
  opacity: 0.72;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.site-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.site-nav a:hover, .site-nav a.is-active { opacity: 1; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }

.lang { display: flex; gap: 10px; }
.lang .sep { opacity: 0.3; }
.lang a, .lang span { font-size: var(--fs-label); letter-spacing: 0.2em; }
.lang .is-current { opacity: 1; }
.lang a { opacity: 0.4; }
.lang a:hover { opacity: 0.8; }

/* ---- Footer ------------------------------------------------------------ */

.site-foot {
  border-top: 1px solid var(--hair);
  padding: clamp(48px, 7vh, 96px) var(--margin) 32px;
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px var(--gutter);
  max-width: var(--max-w);
  margin-inline: auto;
}

.foot-grid .display-m { font-size: clamp(20px, 2vw, 30px); }
.foot-meta {
  max-width: var(--max-w);
  margin: 64px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* Aviso obrigatório do mockup (spec §7.2) */
.mock-note {
  position: fixed;
  inset: auto auto 14px 14px;
  z-index: 70;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 10px;
  border: 1px solid var(--hair);
  backdrop-filter: blur(6px);
  pointer-events: none;
  max-width: 320px;
  line-height: 1.5;
}

/* ---- Indicador de percurso (M9) ---------------------------------------- */

.progress {
  position: fixed;
  inset: auto var(--margin) 20px auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  mix-blend-mode: difference;
}
.progress .p-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity var(--dur-micro) linear;
  min-width: 110px;
  text-align: right;
}
.progress .p-label.is-swapping { opacity: 0; }
.progress .p-track {
  width: 120px; height: 1px;
  background: var(--hair);
  position: relative;
  overflow: hidden;
}
.progress .p-fill {
  position: absolute; inset: 0;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---- Corte a negro (M5) ------------------------------------------------- */

.shutter {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--void);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.shutter.is-covering { clip-path: inset(0 0 0 0); }
.shutter.is-closing {
  transition: clip-path var(--dur-cut) var(--ease-in);
  clip-path: inset(0 0 0 0);
}
.shutter.is-open {
  transition: clip-path 620ms var(--ease-out);
  clip-path: inset(100% 0 0 0);
}

/* ---- Cursor de luz (M6) ------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 110;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--glow);
    mix-blend-mode: difference;
    pointer-events: none;
    display: grid;
    place-items: center;
    transition:
      width 380ms var(--ease-out),
      height 380ms var(--ease-out),
      background-color 380ms var(--ease-out),
      border-color 380ms var(--ease-out);
    border: 1px solid transparent;
    will-change: transform;
  }
  .cursor .c-text {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--glow);
    opacity: 0;
    transition: opacity var(--dur-micro) linear;
  }
  .cursor.is-hover {
    width: 56px; height: 56px;
    background: transparent;
    border-color: var(--glow);
  }
  .cursor.is-media { width: 72px; height: 72px; background: transparent; border-color: var(--glow); }
  .cursor.is-media .c-text { opacity: 1; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  /* teclado devolve o cursor nativo */
  body.kb-nav, body.kb-nav a, body.kb-nav button { cursor: auto; }
  body.kb-nav .cursor { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---- Split-text (M3) ---------------------------------------------------- */

.split-line { display: block; overflow: hidden; }
.split-line > .sl-inner {
  display: block;
  transform: translateY(110%);
  opacity: 0;
}
.is-revealed .split-line > .sl-inner {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 900ms var(--ease-out),
    opacity 500ms linear;
}
/* stagger de 90ms */
.is-revealed .split-line:nth-child(1) > .sl-inner { transition-delay: 0ms; }
.is-revealed .split-line:nth-child(2) > .sl-inner { transition-delay: 90ms; }
.is-revealed .split-line:nth-child(3) > .sl-inner { transition-delay: 180ms; }
.is-revealed .split-line:nth-child(4) > .sl-inner { transition-delay: 270ms; }
.is-revealed .split-line:nth-child(5) > .sl-inner { transition-delay: 360ms; }
.is-revealed .split-line:nth-child(6) > .sl-inner { transition-delay: 450ms; }

/* fade simples para leads */
.fade-up { opacity: 0; transform: translateY(16px); }
.fade-up.is-revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms linear, transform 700ms var(--ease-out);
}

/* ---- Acessibilidade ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .split-line > .sl-inner { transform: none; opacity: 1; }
  .fade-up { opacity: 1; transform: none; }
  .rule { transform: scaleX(1); }
}

.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 200;
  background: var(--bone); color: var(--ink);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 16px; }