/* ============================================================
   IORDAKI — vanilla rewrite stylesheet
   Hand-ported from app/globals.css + tailwind.config.ts.
   One file: fonts → tokens → base → utilities → sections.
   ============================================================ */

/* ===== Fonts (self-hosted; replaces next/font) ===== */
@font-face { font-family:'Space Grotesk'; font-weight:400; font-display:swap; src:url('fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:400; font-display:swap; src:url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-display:swap; src:url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:700; font-display:swap; src:url('fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:400; font-display:swap; src:url('fonts/geist-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-weight:500; font-display:swap; src:url('fonts/geist-mono-500.woff2') format('woff2'); }

/* ============================================================
   Global tokens — verbatim from globals.css :root
   ============================================================ */
:root {
  /* COLOR — locked seven */
  --obsidian:#1A1715; --graphite:#2B2A28; --true-black:#0D0D0D;
  --off-white:#F5F2ED; --jasper:#C0633A; --jasper-deep:#A14E2E; --bronze:#9A7B4F;

  /* Role tokens — surfaces and text on dark base */
  --color-bg:var(--obsidian);
  --color-text:var(--off-white);
  --color-text-muted:rgba(245,242,237,0.55);
  --color-text-quiet:rgba(245,242,237,0.45);
  --color-rule:rgba(245,242,237,0.14);
  --color-accent:var(--jasper);
  --color-accent-on-bg:var(--jasper);

  /* Fonts (same css-var names next/font injected) */
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-text:'Geist', system-ui, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, monospace;

  /* MOTION */
  --easing-soft:cubic-bezier(0.16,1,0.3,1);
  --easing-cinematic:cubic-bezier(0.25,1,0.5,1); /* lib/motion.ts easing.cinematic */
  --duration-soft:700ms;
  --stagger-base:70ms;

  /* SPACING — 4-based scale */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-6:48px; --space-8:96px; --space-12:192px;

  /* TYPE SCALE — from tailwind.config.ts fontSize */
  --fs-wordmark:clamp(8rem,18vw,20rem);
  --fs-h1:clamp(3rem,6vw,6rem);
  --fs-h2:clamp(2rem,3.5vw,3rem);
  --fs-body:clamp(1rem,1.25vw,1.25rem);
  --fs-mono:0.75rem;
}

/* ============================================================
   Base elements — verbatim from globals.css
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; }

html, body {
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-text), system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth; /* native smooth scroll — Lenis removed */
}
body { margin:0; }

/* selection — jasper bead on dark, off-white text */
::selection { background:rgba(192,99,58,0.85); color:var(--obsidian); }

/* ATMOSPHERIC GRAIN — fixed noise overlay (SVG data-URI, verbatim) */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none;
  opacity:0.04; z-index:9999; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity:0.02; } }

/* focus — jasper, the only accent */
:focus-visible { outline:1px solid var(--jasper); outline-offset:2px; }

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

a { color:inherit; text-decoration:none; }
img, video, canvas { display:block; max-width:100%; }
h1, h2, h3, p { margin:0; }

/* ============================================================
   MASON GRID — used by WorkWall reduced-motion fallback. Verbatim.
   ============================================================ */
.mason { column-gap:1rem; column-count:2; }
@media (min-width:768px)  { .mason { column-count:3; column-gap:1.25rem; } }
@media (min-width:1280px) { .mason { column-count:4; column-gap:1.5rem; } }
@media (min-width:1920px) { .mason { column-count:5; column-gap:1.5rem; } }
.mason-item { break-inside:avoid; display:block; width:100%; }

/* ============================================================
   Utility layer — the Tailwind classes the markup leaned on.
   Kept small + semantic, not a Tailwind clone.
   ============================================================ */
/* fonts */
.font-display { font-family:var(--font-display); }
.font-text    { font-family:var(--font-text); }
.font-mono    { font-family:var(--font-mono); }
/* weights */
.font-medium { font-weight:500; } .font-bold { font-weight:700; }
/* colors */
.text-text  { color:var(--color-text); }
.text-muted { color:var(--color-text-muted); }
.text-quiet { color:var(--color-text-quiet); }
.bg-bg      { background:var(--color-bg); }
.border-rule { border-color:var(--color-rule); }
/* type scale */
.text-mono { font-size:var(--fs-mono); }
.text-h1   { font-size:var(--fs-h1); }
.text-h2   { font-size:var(--fs-h2); }
.text-body { font-size:var(--fs-body); }
/* text transforms / spacing */
.uppercase     { text-transform:uppercase; }
.tracking-wide   { letter-spacing:0.025em; }
.tracking-wider  { letter-spacing:0.05em; }
.tracking-widest { letter-spacing:0.1em; }
.leading-none  { line-height:1; }
.leading-tight { line-height:1.15; }
.leading-snug  { line-height:1.35; }
.leading-relaxed { line-height:1.625; }
/* helpers */
.select-none { user-select:none; }
.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;
}
.relative { position:relative; }
.accent { color:var(--color-accent-on-bg); }

/* ============================================================
   Section styles — added per-section in Task 4+.
   ============================================================ */

/* ---- Shared section corner labels (SectionLabel: title top-left, counter bottom-right) ---- */
.corner-title {
  pointer-events: none;
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
}
.corner-counter {
  pointer-events: none;
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 10;
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
}
.hero-intro,
.hero-scrub {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}
.hero-scrub { opacity: 0; }
.hero-canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* wordmark — mobile: centred top · desktop: left flank, vertically centred */
.hero-wordmark {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
}
.wordmark {
  margin: 0;
  font-size: clamp(3rem, 14vw, 6rem);
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.wordmark-letters { display: inline-block; }
.wordmark-letters .ltr { display: inline-block; }

.hero-subline {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  color: rgba(245, 242, 237, 0.78);
}
.hero-subline-desktop { display: none; }
.hero-subline-mobile {
  display: block;
  max-width: 30ch;
  margin-top: 12px;
  margin-left: auto;
}

/* tagline — mobile: bottom-right */
.hero-tagline {
  position: absolute;
  right: 24px;
  bottom: 96px;
  text-align: right;
  z-index: 5;
}
.hero-tagline-primary {
  margin: 0 0 0 auto;
  max-width: 14ch;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: 1.05;
}

@media (min-width: 768px) {
  .hero-wordmark {
    left: 8vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
  }
  .wordmark { font-size: clamp(4rem, 9vw, 9rem); }
  .hero-subline-desktop {
    display: block;
    max-width: 34ch;
    margin-top: 16px;
  }
  .hero-tagline .hero-subline-mobile { display: none; }
  .hero-tagline {
    right: 8vw;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .hero-tagline-primary { font-size: clamp(2rem, 2.6vw, 2.5rem); }
}

/* ============================================================
   02 — IDENTITY
   ============================================================ */
.identity {
  position: relative;
  width: 100%;
  padding: 96px 24px;
  background: var(--color-bg);
}
.identity-grid {
  margin: 0 auto;
  max-width: 80rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.identity-word {
  display: block;
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.identity-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.identity-statement {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.identity-statement p { margin: 0; }
.identity-statement p:first-child {
  font-size: var(--fs-h2);
  line-height: 1.2;
}
.identity-cats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
}
.identity-cats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.identity-cats > p { margin: 0; }

@media (min-width: 768px) {
  .identity { padding: 128px 40px; }
  .identity-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 64px;
    align-items: start;
  }
  .identity-numeral { grid-column: span 4; }
  .identity-body { grid-column: span 8; }
}

/* ============================================================
   03 — SELECTED WORK
   ============================================================ */
.work {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}

/* mobile / reduced-motion grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 12px;
  max-width: 28rem;
  margin: 40px auto 0;
  padding: 80px 24px;
}
.work-card-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.work-card-grid.is-focal { grid-column: span 2; }
.work-card-grid video {
  width: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--color-rule);
  aspect-ratio: 1 / 1;
}
.work-card-grid.is-focal video { aspect-ratio: 16 / 9; }
.work-card-grid figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.work-card-grid figcaption span:last-child { text-align: right; }
.work-cap { margin: 0; line-height: 1.35; }
.work-cap-manifesto {
  font-size: clamp(0.875rem, 2vw, 1rem);
  text-transform: none;
  letter-spacing: normal;
}

/* desktop zoom-parallax */
.work-zoom { display: none; }
@media (min-width: 768px) {
  .work-grid { display: none; }
  .work-zoom {
    display: block;
    position: relative;
    height: 300vh;
    width: 100%;
    background: var(--color-bg);
  }
  .work-zoom-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--color-bg);
  }
  /* full-viewport flex-centring wrapper; JS sets transform: scale() */
  .work-zoom-card {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    will-change: transform;
  }
  /* the card itself — PLACEMENT (verbatim from WorkWall PLACEMENT[]) offsets it
     from the centred origin via position:relative */
  .work-zoom-inner {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--color-rule);
  }
  .work-zoom-inner video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
  .work-zoom-card[data-place="0"] .work-zoom-inner { width: 25vw; aspect-ratio: 16 / 9; }
  .work-zoom-card[data-place="1"] .work-zoom-inner { width: 35vw; height: 30vh; top: -30vh; left: 5vw; }
  .work-zoom-card[data-place="2"] .work-zoom-inner { width: 20vw; height: 45vh; top: -10vh; left: -25vw; }
  .work-zoom-card[data-place="3"] .work-zoom-inner { width: 25vw; height: 25vh; left: 27.5vw; }
  .work-zoom-card[data-place="4"] .work-zoom-inner { width: 20vw; height: 25vh; top: 27.5vh; left: 5vw; }
  .work-zoom-card[data-place="5"] .work-zoom-inner { width: 30vw; height: 25vh; top: 27.5vh; left: -22.5vw; }
  .work-zoom-card[data-place="6"] .work-zoom-inner { width: 15vw; height: 15vh; top: 22.5vh; left: 25vw; }
}
/* reduced-motion (desktop): no zoom — show the static poster grid (4-col, wide) */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .work-zoom { display: none; }
  .work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 80rem;
    gap: 40px 16px;
  }
}
/* bottom legibility wash */
.work-wash {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.2) 60%, transparent);
}
/* museum overlay (cqw sizing scales text to the card) */
.work-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(6px, 3.5%, 28px);
  container-type: inline-size;
}
.work-overlay-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.work-overlay-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(2px, 0.6cqw, 6px);
}
.work-overlay-bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.4cqw, 14px);
  max-width: 88%;
}
.work-stamp {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(0.5rem, 1.6cqw, 0.85rem);
  color: rgba(245, 242, 237, 0.88);
}
.work-stamp-dim { color: rgba(245, 242, 237, 0.62); }
.work-rule {
  height: 1px;
  width: clamp(20px, 8cqw, 80px);
  background: rgba(245, 242, 237, 0.4);
}
.work-tags { display: flex; flex-wrap: wrap; gap: clamp(4px, 1.2cqw, 12px); }
.work-overlay-bottom .work-cap {
  font-size: clamp(0.55rem, 1.85cqw, 1rem);
  color: rgba(245, 242, 237, 0.85);
}
.work-overlay-bottom .work-cap-manifesto {
  color: rgba(245, 242, 237, 0.96);
  line-height: 1.2;
}

/* ============================================================
   04 — STORY / IDEAS  (resting layout; pin+rotation in T11)
   ============================================================ */
.story {
  position: relative;
  width: 100%;
  overflow-x: clip; /* clip rotation bleed WITHOUT becoming a scroll container (keeps sticky working) */
  background: var(--color-bg);
}
.flow-section {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}
.flow-section.tone-inverted {
  --color-bg: #A14E2E;
  --color-text: #F5F2ED;
  --color-text-muted: rgba(245, 242, 237, 0.70);
  --color-text-quiet: rgba(245, 242, 237, 0.45);
  --color-rule: rgba(245, 242, 237, 0.22);
  --color-accent-on-bg: #1A1715;
  background: var(--color-bg);
  color: var(--color-text);
}
.flow-section.tone-graphite {
  --color-bg: #2B2A28;
  --color-text: #F5F2ED;
  --color-text-muted: rgba(245, 242, 237, 0.55);
  --color-text-quiet: rgba(245, 242, 237, 0.45);
  --color-rule: rgba(245, 242, 237, 0.14);
  background: var(--color-bg);
  color: var(--color-text);
}
.flow-art-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2.2vh, 3rem);
  min-height: 100vh;
  padding: clamp(1.25rem, 3.5vh, 5rem) 24px;
  background: var(--color-bg);
  transform-origin: bottom left;
}
.flow-header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.flow-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
/* flow-body is itself the 12-col grid (left = headline+lead, right = prose).
   The markup has no wrapper div, so the grid lives directly on .flow-body. */
.flow-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-content: center;
}
.flow-body-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.flow-headline {
  margin: 0;
  font-size: clamp(2rem, min(6vw, 10vh), 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  max-width: 86vw;
}
.flow-lead {
  margin: 0;
  max-width: 32ch; /* tight editorial measure — the lead reads as a short 2-line caption, not a full-width sentence */
  font-size: 1.125rem; /* text-lg; -> text-xl at md */
  line-height: 1.4;
  color: rgba(245, 242, 237, 0.9);
}
.flow-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 44ch;
}
.flow-eyebrow {
  border-top: 1px solid var(--color-rule);
  padding-top: 12px;
}
.flow-right p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245, 242, 237, 0.85);
}
.flow-media { width: 100%; }
.flow-media video {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--color-rule);
  background: rgba(245, 242, 237, 0.02);
}
.flow-footer {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
}
.flow-tags { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.flow-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
}
.flow-tool-group { display: flex; flex-direction: column; gap: 4px; }

@media (min-width: 768px) {
  .flow-art-container { padding-left: 7vw; padding-right: 7vw; }
  .flow-body {
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
    align-items: center;
    align-content: end;
  }
  .flow-body-left { gap: 32px; grid-column: span 7; }
  .flow-right { grid-column: span 5; }
  .flow-lead { font-size: 1.25rem; } /* text-xl */
  .flow-media video { aspect-ratio: 21 / 5; }
  .flow-tools { grid-template-columns: repeat(3, 1fr); }
}

/* ===== StoryScroll pin + page-turn (desktop) =====
   ONE pinned stage (sticky) holds all scenes stacked absolutely; story-scroll.js
   wraps the scenes into it, gives .story an explicit tall height for the scroll
   length, and drives each scene deterministically from scroll progress:
   translateY (rise from below) + rotate (30deg->0deg page-turn, origin bottom-left).
   No per-scene sticky release -> no gaps/slivers. Mobile keeps natural flow. */
@media (min-width: 768px) {
  .story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .flow-section {
    position: absolute;
    inset: 0;
    height: 100vh;
    transform-origin: bottom left;
    will-change: transform;
  }
  .flow-art-container { height: 100%; min-height: 0; }
}

/* ============================================================
   THE SHELF + CLOSING marquees
   ============================================================ */
.shelf {
  position: relative;
  width: 100%;
  height: clamp(220px, 36vh, 380px);
  background: var(--color-bg);
}
.shelf-label {
  pointer-events: none;
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 10;
}
.closing {
  position: relative;
  width: 100%;
  height: clamp(120px, 18vh, 200px);
  background: var(--color-bg);
}
.marquee {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
}
@media (min-width: 768px) {
  .shelf-label { left: 40px; }
}

/* ============================================================
   05 — CONTACT  (resting layout + CSS hover; state toggles in T7)
   ============================================================ */
.contact {
  position: relative;
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: var(--color-bg);
}
.contact-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Stage 2 — hidden by default (overlaid, centred) */
.contact-stage2 {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.97);
}
.contact-stage2-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.s2-good { letter-spacing: 0.3em; }
.s2-talk {
  margin: 0;
  font-size: clamp(1.875rem, 9vw, 2.25rem);
  letter-spacing: -0.02em;
}
.contact-mail {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.contact-mail-rule { height: 1px; width: 32px; background: var(--color-rule); transition: all 500ms var(--easing-soft); }
.contact-mail-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-rule);
  border-radius: 9999px;
  padding: 14px 28px;
  transition: all 500ms var(--easing-soft);
}
.contact-mail-label { color: var(--color-text); transition: color 500ms ease; }
.contact-mail-arrow { font-family: var(--font-mono); line-height: 1; color: var(--color-text); transition: all 500ms ease; }
.contact-mail:hover .contact-mail-pill { border-color: var(--color-text); background: var(--color-text); }
.contact-mail:hover .contact-mail-label { color: var(--color-bg); }
.contact-mail:hover .contact-mail-arrow { color: var(--color-bg); transform: translate(3px, -3px) scale(1.1); }
.contact-back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  transition: color 300ms ease;
}
.contact-back:hover { color: var(--jasper-deep); }
.contact-back-arrow { transition: transform 300ms ease; display: inline-block; }
.contact-back:hover .contact-back-arrow { transform: translateX(-4px); }

/* Stage 1 — availability ping */
.contact-avail {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 500ms ease;
}
.contact-ping {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.contact-ping-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--jasper-deep);
  animation: io-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.contact-ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jasper-deep);
}
@keyframes io-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Stage 1 CTA */
.contact-cta {
  position: relative;
  cursor: pointer;
  transition: all 700ms var(--easing-soft);
}
.contact-headline {
  position: relative;
  margin: 0;
  text-align: center;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.contact-line { display: block; overflow: hidden; }
.contact-line-inner {
  display: block;
  transform: translateY(0);
  transition: transform 700ms var(--easing-soft);
}
.contact-cta:hover .contact-line-inner { transform: translateY(-8%); }
.contact-arrow-wrap {
  position: relative;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0;
}
.contact-arrow-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  transition: all 500ms ease-out;
}
.contact-cta:hover .contact-arrow-ring { border-color: var(--color-text); background: var(--color-text); transform: scale(1.1); }
.contact-arrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text);
  transition: all 500ms var(--easing-soft);
}
.contact-cta:hover .contact-arrow { color: var(--color-bg); transform: translate(2px, -2px); }
.contact-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.contact-side-left { left: -64px; }
.contact-side-right { right: -64px; }
.contact-side-rule { height: 1px; width: 48px; background: var(--color-rule); transition: all 500ms ease; }
.contact-cta:hover .contact-side-rule { transform: scaleX(1.5); }

/* Stage 1 footer */
.contact-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.contact-foot-line {
  margin: 0;
  max-width: 28rem;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.contact-email { transition: color 300ms ease; }
.contact-email:hover { color: var(--jasper-deep); }
.socials {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
/* 40×40 bordered box with a 20px glyph inside (matches Socials.tsx) */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-rule);
  color: var(--color-text-muted);
  transition: color 300ms ease, border-color 300ms ease;
}
.social-link:hover { color: var(--color-text); border-color: var(--color-text); }
.social-glyph {
  display: block;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.social-glyph svg { width: 100%; height: 100%; display: block; fill: currentColor; }

@media (min-width: 640px) {
  .contact-arrow-wrap { width: 80px; height: 80px; }
  .contact-arrow { font-size: 1.875rem; }
  .contact-side { display: block; }
}

/* ============================================================
   TEXT REVEAL (T5) — Framer TextReveal replacement.
   lib/motion.ts: blur 10px, drift 7.5px, 1.2s, easeOutQuart,
   sibling stagger 0.06s, wordmark per-letter 0.05s.
   ============================================================ */
@keyframes io-reveal {
  from { opacity: 0; transform: translateY(7.5px); filter: blur(10px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
/* Hidden only when JS is present (no-JS / SSR shows content) */
.js [data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: io-reveal 1.2s var(--easing-cinematic) both; }

/* Wordmark per-letter — drift ×4, blur ×1.6 (SilhouetteHero letterVariant) */
@keyframes io-letter {
  from { opacity: 0; transform: translateY(30px); filter: blur(16px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
.js .wordmark .ltr { opacity: 0; }
.wordmark.is-in .ltr { animation: io-letter 1.2s var(--easing-cinematic) both; }

/* No-JS / reduced-motion — everything visible, no animation */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in,
  .wordmark .ltr {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ============================================================
   CONTACT two-stage CTA (T7) — class-toggle of LetsWorkTogether
   React state. Timings/delays verbatim from the component.
   ============================================================ */
.contact-headline { transition: opacity 700ms var(--easing-soft), transform 700ms var(--easing-soft); }
.contact-foot { transition: opacity 500ms ease 100ms, transform 500ms ease 100ms; }
.contact-arrow-ring { transition: all 500ms ease-out; }

/* Stage 2 — fade/scale in on success */
.contact-stage2 { transition: opacity 700ms var(--easing-soft), transform 700ms var(--easing-soft); }
.contact.is-success .contact-stage2 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Stage 2 children — hidden offsets + staggered reveal (delays per component) */
.s2-good     { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease 100ms, transform 500ms ease 100ms; }
.s2-talk     { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease 200ms, transform 500ms ease 200ms; }
.contact-mail{ opacity: 0; transform: translateY(15px); transition: opacity 500ms ease 150ms, transform 500ms ease 150ms; }
.s2-hint     { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease 450ms, transform 500ms ease 450ms; }
.contact-back{ opacity: 0; transform: translateY(10px); transition: opacity 500ms ease 600ms, transform 500ms ease 600ms, color 300ms ease; }
.contact.is-success .s2-good,
.contact.is-success .s2-talk,
.contact.is-success .s2-hint,
.contact.is-success .contact-back { opacity: 1; transform: translateY(0); }
.contact.is-success .contact-mail { opacity: 1; transform: translateY(0); }
.contact.is-success .contact-mail:hover { transform: translateY(0) scale(1.02); }

/* Stage 1 — animate out on click */
.contact.is-clicked .contact-avail { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.contact.is-clicked .contact-cta { pointer-events: none; }
.contact.is-clicked .contact-headline { opacity: 0; transform: translateY(-40px) scale(0.95); }
.contact.is-clicked .contact-foot { opacity: 0; transform: translateY(20px); pointer-events: none; }
.contact.is-clicked .contact-arrow-ring {
  border-color: var(--color-text);
  background: transparent;
  transform: scale(3);
  opacity: 0;
  transition-duration: 700ms;
}
.contact.is-clicked .contact-arrow {
  transform: translate(100px, -100px) scale(0.5);
  opacity: 0;
  transition-duration: 600ms;
}
.contact.is-clicked .contact-side-left .contact-side-rule { transform: scaleX(0) translateX(-20px); opacity: 0; }
.contact.is-clicked .contact-side-right .contact-side-rule { transform: scaleX(0) translateX(20px); opacity: 0; }