/* ============================================
   WANNA GO — Base Styles
   ============================================ */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background-color: var(--color-black);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-text);
  background-color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'palt' 1;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

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

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

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

ul, ol {
  list-style: none;
}

::selection {
  background-color: var(--color-warm);
  color: var(--color-black);
}

/* --- Focus visible (keyboard navigation) --- */
:focus-visible {
  outline: 1px solid var(--color-warm);
  outline-offset: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Scroll-triggered reveal --- */
/* Pure opacity + translateY — no blur on text, ever.
   The movement itself conveys emergence. Blur degrades Japanese letterforms.
   Ease: --ease-luxury (extreme ease-out) — most of the motion lands quickly,
   then a long graceful tail settles in. Cinematic, never bouncy.             */
.reveal {
  opacity: 0;
  transform: translateY(96px);
  transition:
    opacity var(--duration-reveal) var(--ease-luxury),
    transform var(--duration-reveal) var(--ease-luxury);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — cinematic cascading cadence, 200ms breathing room between items */
.reveal-delay-1 { transition-delay: 0ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 400ms; }
.reveal-delay-4 { transition-delay: 600ms; }
.reveal-delay-5 { transition-delay: 800ms; }
.reveal-delay-6 { transition-delay: 1000ms; }

/* --- Reveal variants --- */

/* Image reveal: cinematic depth emergence — scale settles from compressed depth.
   The image rises and expands into presence. Scale 0.85 → 1.0 is clearly felt
   as genuine spatial depth. Uses --duration-enter for monumental pacing.        */
.reveal.reveal--image {
  transform: translateY(72px) scale(0.85);
  transition-duration: var(--duration-enter);
}
.reveal.reveal--image.is-visible {
  transform: translateY(0) scale(1);
}

/* Heading reveal: clip-path curtain — editorial "stage reveal" technique.
   The text rises 120px as the clip-mask lifts. Pacing: --duration-cinematic (2400ms)
   means the heading "arrives" monumentally. Used by Vogue, Numéro, L'Officiel.
   No blur — Japanese strokes must remain razor-sharp at every keyframe.         */
.reveal.reveal--heading {
  opacity: 0;
  transform: translateY(120px);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transition-property: opacity, transform, clip-path;
  transition-duration: var(--duration-cinematic);
  transition-timing-function: var(--ease-luxury);
}
.reveal.reveal--heading.is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: polygon(0% 0%, 100% 0%, 100% 130%, 0% 130%);
}

/* Label reveal: horizontal slide — editorial metadata entrance.
   -52px gives a crisper sense of horizontal authority on entry. */
.reveal.reveal--label {
  opacity: 0;
  transform: translateX(-52px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-slow);
  transition-timing-function: var(--ease-luxury);
}
.reveal.reveal--label.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Quote reveal: stronger presence than standard text, no clip-path.
   Pullquotes carry emotional weight — they deserve gravitational arrival.
   112px travel + 2.6x duration makes them land with genuine weight.         */
.reveal.reveal--quote {
  transform: translateY(112px);
  transition-duration: calc(var(--duration-reveal) * 2.6);
}
.reveal.reveal--quote.is-visible {
  transform: translateY(0);
}

/* Scene reveal: monumental section arrival — deepest travel, longest duration.
   Used for bridge-cta headings, chapter titles, key emotional statements.
   The extra delay creates a momentary scene-change tension before text appears. */
.reveal.reveal--scene {
  opacity: 0;
  transform: translateY(140px);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transition-property: opacity, transform, clip-path;
  transition-duration: calc(var(--duration-cinematic) * 1.15);
  transition-timing-function: var(--ease-luxury);
}
.reveal.reveal--scene.is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: polygon(0% 0%, 100% 0%, 100% 140%, 0% 140%);
}

/* --- Editorial sequence — cinematic cascading cadence ---
   Child elements rise clearly and stagger visibly with 240ms spacing,
   so the content flows in like a scene establishing itself.
   Increased travel (68px) and duration (1300ms) for more dramatic presence. */
.motion-sequence__item {
  opacity: 0;
  transform: translateY(68px);
  transition:
    opacity 1300ms var(--ease-luxury),
    transform 1300ms var(--ease-luxury);
  transition-delay: calc(var(--motion-index, 0) * 240ms);
  will-change: transform, opacity;
}

.motion-sequence.is-visible .motion-sequence__item,
.reveal.is-visible .motion-sequence__item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .motion-sequence__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- View Transitions — page-to-page continuity ---
   Applies to same-origin navigations in supporting browsers (Chrome 111+).
   Old page lifts away (opacity + 4px up). New page settles in (opacity + 4px drop).
   The 4px displacement is imperceptible as technology — felt only as direction.
   On unsupported browsers: ignored — .page-transition black-overlay is the fallback. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 380ms cubic-bezier(0.4, 0, 1, 1) both vt-depart;
}

::view-transition-new(root) {
  animation: 900ms var(--ease-luxury) 60ms both vt-arrive;
}

@keyframes vt-depart {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes vt-arrive {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}

/* --- Typography utilities --- */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

.text-muted { color: var(--color-muted); }
.text-warm { color: var(--color-warm); }

.text-center { text-align: center; }
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Section label — small uppercase editorial label with leading mark */
.section-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0.7;
}

.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.55;
}

/* --- Layout utilities --- */
.container {
  width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.container-narrow {
  width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}

.container-wide {
  width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--compact {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.section--flush-top {
  padding-top: 0;
}

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

/* Page transition overlay */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  z-index: 9999;
  pointer-events: none;
  /* CSS fallback: auto-fade after 0.4s even if JS fails */
  animation: page-reveal 0.6s 0.4s var(--ease-smooth) forwards;
}

.page-transition.is-loaded {
  opacity: 0;
}

@keyframes page-reveal {
  to { opacity: 0; }
}

/* --- Section with medium padding --- */
.section--medium {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* --- Active / pressed feedback (touch) --- */
@media (hover: none) {
  .cta-link:active,
  .stories-gateway__item:active,
  .gallery-item:active,
  .gallery-filter__btn:active,
  .footer__link:active,
  .story-nav__link:active,
  .form-submit:active,
  .nav-overlay__link:active {
    opacity: 0.7;
    transition: opacity 50ms;
  }
}