/* =============================================================================
   Tomer Zamir — Portfolio v2 · "Material Tonal Chapters" — Coastal palette
   -----------------------------------------------------------------------------
   Four full-bleed pastel surfaces (Lagoon → Sea Foam → Sky → Dusk Rose),
   Fraunces italic display, Deep Ocean anchor CTA, M3 shape/elevation/motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -----------------------------------------------------------------------------
   Palette + type + shape + motion + state layers. All derived from the
   design spec. Every contrast pairing verified WCAG AA. See README.
   -------------------------------------------------------------------------- */

:root {
  /* Type stacks */
  --font-display: "Fraunces", "GT Sectra", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-display-he: "Frank Ruhl Libre", "David Libre", "Noto Serif Hebrew", "Fraunces", serif;
  --font-body: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (clamps) */
  --t-hero:      clamp(3.5rem, 8vw + 1rem, 6.5rem);
  --t-title:     clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --t-lead:      clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --t-body:      1rem;
  --t-small:     0.875rem;
  --t-eyebrow:   0.6875rem;
  --t-mono:      0.75rem;

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max-content: 1200px;

  /* Motion — M3 curves */
  --ease-emph:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emph-dec:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emph-acc:  cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-std:       cubic-bezier(0.2, 0, 0, 1);
  --ease-std-dec:   cubic-bezier(0, 0, 0, 1);

  /* Motion — durations */
  --d-200: 200ms;
  --d-250: 250ms;
  --d-300: 300ms;
  --d-350: 350ms;
  --d-400: 400ms;
  --d-450: 450ms;
  --d-600: 600ms;
  --d-700: 700ms;
  --d-900: 900ms;

  /* State layer opacities */
  --op-hover: 0.08;
  --op-focus: 0.10;
  --op-press: 0.10;
}

/* ---- LIGHT (default) — Coastal palette ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Neutrals */
  --c-surface:         #F5F1E8; /* Bone */
  --c-on-surface:      #14202E; /* Ink Navy */
  --c-on-surface-var:  #4A5560; /* Stone Blue */

  /* Primary (Lagoon chapter — Hero) */
  --c-primary-c:       #A6DBDC; /* Light Ocean Turquoise */
  --c-on-primary-c:    #0E3336; /* Deep Teal Ink */
  --c-primary:         #1A4A6B; /* Deep Ocean (CTA anchor) */
  --c-on-primary:      #FFFFFF;

  /* Secondary (Sea Foam chapter — Work) */
  --c-secondary-c:     #B7DDD4; /* Sea Foam */
  --c-on-secondary-c:  #0F2A24; /* Deep Kelp */
  --c-secondary:       #2E5C52; /* Muted Sea */

  /* Tertiary (Sky chapter — About) */
  --c-tertiary-c:      #BCD4E6; /* Sky */
  --c-on-tertiary-c:   #14293D; /* Deep Sea Ink */
  --c-tertiary:        #2E5478; /* Slate Ocean */

  /* Accents */
  --c-accent:          #6B4F26; /* Driftwood */

  /* Structure */
  --c-outline:         #8A857A;
  --c-focus:           #1A4A6B;

  /* Shadow tints (cool navy, not black) */
  --sh-warm-1: 0 1px 2px rgba(20, 40, 60, 0.06), 0 1px 3px rgba(20, 40, 60, 0.04);
  --sh-warm-2: 0 2px 4px rgba(20, 40, 60, 0.08), 0 4px 12px rgba(20, 40, 60, 0.06);
  --sh-warm-3: 0 4px 8px rgba(20, 40, 60, 0.10), 0 8px 24px rgba(20, 40, 60, 0.08);

  /* Backdrop for dock/topbar */
  --c-backdrop: color-mix(in oklab, var(--c-surface) 78%, transparent);
}

/* ---- DARK — Coastal palette (deep-sea twins: teal-charcoal / coffee / royal ink / wine) ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --c-surface:         #0A0E15; /* Midnight Ink */
  --c-on-surface:      #EBEEF2; /* Cool Bone */
  --c-on-surface-var:  #8A94A2; /* Fog */

  --c-primary-c:       #0C1B1C; /* Deep Teal Charcoal (Hero) */
  --c-on-primary-c:    #E4EFED; /* Cool Cream */
  --c-primary:         #7BC0E0; /* Sky Blue CTA (brighter for dark) */
  --c-on-primary:      #0A1420; /* Deep Ocean Ink */

  --c-secondary-c:     #3A2E22; /* Roasted Coffee (Work) */
  --c-on-secondary-c:  #EADFCE; /* Warm Cream */
  --c-secondary:       #C7B79A; /* Latte */

  --c-tertiary-c:      #0F1A32; /* Royal Ink (About) */
  --c-on-tertiary-c:   #C4D4F0; /* Ice Wash */
  --c-tertiary:        #8FB4DC; /* Muted Sky */

  --c-accent:          #E0B87A; /* Warm Gold Driftwood */

  --c-outline:         #6A7280;
  --c-focus:           #7BC0E0;

  --sh-warm-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
  --sh-warm-2: 0 2px 4px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-warm-3: 0 4px 8px rgba(0, 0, 0, 0.6),  0 8px 24px rgba(0, 0, 0, 0.4);

  --c-backdrop: color-mix(in oklab, var(--c-surface) 82%, transparent);
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 96px; /* keep anchor targets clear of the fixed dock */
  hanging-punctuation: first;
}

body {
  min-height: 100vh; /* fallback for older browsers */
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--c-on-surface);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;        /* fallback for engines without clip */
  overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-350) var(--ease-emph), color var(--d-350) var(--ease-emph);
}

/* Prevent iOS auto-styling on interactive elements */
input, textarea, button, select {
  -webkit-appearance: none;
  appearance: none;
}
input, textarea {
  -webkit-user-select: text;
}

/* Prose overflow protection: long strings (email addresses, URLs) never
   punch out of their container. */
p, li, dd, dt, a, span, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection {
  background: color-mix(in oklab, var(--c-primary) 35%, transparent);
  color: var(--c-on-surface);
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Skip-link target receives focus programmatically — don't ring the whole section */
#hero:focus { outline: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--c-on-surface);
  color: var(--c-surface);
  z-index: 1000;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }


/* -----------------------------------------------------------------------------
   3. UTILITIES / SHARED PARTS
   -------------------------------------------------------------------------- */

/* Eyebrow — mono uppercase label. Always in on-surface for AA safety. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: inline-block;
}

/* Status dot with warm pulse */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 25%, transparent);
  animation: pulse 1800ms var(--ease-emph) infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--c-primary) 0%, transparent); }
}


/* -----------------------------------------------------------------------------
   4. TOPBAR — thin, top-of-page, brand + status + theme toggle
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding:
    max(env(safe-area-inset-top, 0), var(--sp-3))
    max(env(safe-area-inset-right, 0), var(--gutter))
    var(--sp-3)
    max(env(safe-area-inset-left, 0), var(--gutter));
  transition: background var(--d-250) var(--ease-emph), border-color var(--d-250) var(--ease-emph);
  border-bottom: 1px solid transparent;
}
.topbar.is-scrolled {
  background: var(--c-backdrop);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: color-mix(in oklab, var(--c-outline) 30%, transparent);
}
.topbar__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.topbar__mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-on-surface);
}
.topbar__mark em {
  font-style: italic;
  color: var(--c-primary);
  font-variation-settings: "SOFT" 30;
}

/* Idle hint — a cursor that appears and "taps" the logo to invite a click */
.logo-hint {
  position: absolute;
  top: 38%;
  left: 58%;
  width: 30px;
  height: 34px;
  pointer-events: none;
  color: var(--c-primary);
  opacity: 0;
  transform: translate(-4px, 6px) scale(0.5);
  transition: opacity var(--d-300) var(--ease-emph), transform var(--d-300) var(--ease-emph);
}
.logo-hint.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.logo-hint__cursor {
  position: absolute;
  top: 2px;
  left: 2px;
  filter: drop-shadow(0 2px 3px color-mix(in oklab, var(--c-on-surface) 30%, transparent));
}
.logo-hint.is-visible .logo-hint__cursor {
  animation: hint-tap 1.25s var(--ease-emph) infinite;
}
.logo-hint__ring {
  position: absolute;
  top: -3px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--c-primary);
  opacity: 0;
  transform: scale(0.3);
}
.logo-hint.is-visible .logo-hint__ring {
  animation: hint-ring 1.25s var(--ease-emph) infinite;
}
@keyframes hint-tap {
  0%, 100% { transform: translate(0, 0); }
  22%      { transform: translate(-3px, -3px); }  /* lift before press */
  38%      { transform: translate(0, 0); }        /* press down = click */
}
@keyframes hint-ring {
  0%, 30%  { transform: scale(0.3); opacity: 0; }
  40%      { opacity: 0.55; }                      /* ring fires on the press */
  100%     { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-hint { display: none; }
}
.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-surface-var);
}
.topbar__status { display: inline-flex; align-items: center; gap: 6px; }
.status-text { font-variant-numeric: tabular-nums; }

.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-outline);
  color: var(--c-on-surface);
  display: inline-grid;
  place-items: center;
  transition: transform var(--d-350) var(--ease-emph), border-color var(--d-250) var(--ease-emph), background var(--d-200) var(--ease-emph);
  overflow: hidden;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  border-radius: inherit;
  pointer-events: none;
}
.theme-toggle:hover::before { opacity: var(--op-hover); }
.theme-toggle:active::before { opacity: var(--op-press); }
.theme-toggle:hover { border-color: var(--c-on-surface); transform: rotate(20deg); }
.theme-toggle__icon {
  position: absolute;
  transition: opacity var(--d-300) var(--ease-emph), transform var(--d-300) var(--ease-emph);
}
[data-theme="light"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0); }
[data-theme="light"] .theme-toggle__icon--sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"]  .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"]  .theme-toggle__icon--sun  { opacity: 1; transform: rotate(0); }

@media (max-width: 640px) {
  .status-text { display: none; }
}


/* -----------------------------------------------------------------------------
   5. CHAPTER — full-bleed tonal section (Hero, Work, About, Contact)
   -------------------------------------------------------------------------- */
.chapter {
  position: relative;
  padding: var(--sp-11) var(--gutter) var(--sp-10);
  isolation: isolate;
  transition: background var(--d-600) var(--ease-emph), color var(--d-600) var(--ease-emph);
}
@media (max-width: 780px) {
  .chapter { padding: var(--sp-10) var(--gutter) var(--sp-9); }
}

.chapter--hero    { background: var(--c-primary-c);    color: var(--c-on-primary-c);   }
.chapter--work    { background: var(--c-secondary-c);  color: var(--c-on-secondary-c); }
.chapter--about   { background: var(--c-tertiary-c);   color: var(--c-on-tertiary-c);  }

/* Contact — Dusk Rose (its own tonal chapter). We override --c-primary-c
   inside this scope so all descendants (channelcard, form) that reference
   --c-primary-c automatically pick up the Dusk Rose surface. --c-primary
   itself (the CTA anchor) stays Deep Ocean across all chapters. */
.chapter--contact {
  --c-primary-c:    #E8C4C4; /* Dusk Rose */
  --c-on-primary-c: #3A1420; /* Deep Rose Ink */
  background: var(--c-primary-c);
  color: var(--c-on-primary-c);
  box-shadow: inset 0 40px 60px -40px color-mix(in oklab, var(--c-primary) 22%, transparent);
}
[data-theme="dark"] .chapter--contact {
  --c-primary-c:    #24101C; /* Deep Wine */
  --c-on-primary-c: #ECC5D2; /* Rose Wash */
}
.footer           { background: var(--c-surface);      color: var(--c-on-surface);     }

.chapter__folio {
  position: absolute;
  top: var(--sp-6);
  right: var(--gutter);
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  z-index: 2;
  pointer-events: none;
}
/* Below wide desktop, drop the folio further down so it clears the topbar.
   On smaller viewports where there simply isn't clearance, hide it entirely. */
@media (max-width: 1180px) {
  .chapter__folio { top: calc(var(--sp-8) + 40px); }
}
@media (max-width: 900px) {
  .chapter__folio { display: none; }
}
.folio__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-style: italic;
  font-variation-settings: "SOFT" 60;
  color: inherit;
  line-height: 1;
  letter-spacing: -0.02em;
}
.folio__label { align-self: flex-end; padding-bottom: 4px; }

.chapter__head {
  max-width: 62ch;
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.chapter__head--centered { text-align: center; margin-left: auto; margin-right: auto; }
.chapter__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "SOFT" 30, "opsz" 96;
  font-size: var(--t-title);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: currentColor;
}
.chapter__title em {
  font-style: italic;
  color: var(--c-primary);
  font-variation-settings: "SOFT" 60, "opsz" 96;
}
.chapter--work    .chapter__title em { color: var(--c-secondary); }
.chapter--about   .chapter__title em { color: var(--c-tertiary); }
.chapter--contact .chapter__title em { color: var(--c-primary); }

.chapter__lede {
  font-size: var(--t-lead);
  color: color-mix(in oklab, currentColor 78%, transparent);
  max-width: 55ch;
  line-height: 1.5;
  text-wrap: pretty;
}


/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.chapter--hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-top: max(18vh, 8rem);
  padding-bottom: var(--sp-9);
  max-width: 100%;
}
/* On small screens content is taller than viewport — stack from top and
   leave clear space under the CTAs so the fixed dock doesn't cover them. */
@media (max-width: 720px) {
  .chapter--hero {
    align-content: start;
    padding-top: max(10vh, 4.5rem);
    padding-bottom: calc(var(--sp-9) + 80px);
  }
}
@media (max-width: 400px) {
  .chapter--hero {
    padding-top: max(8vh, 3.5rem);
  }
  .hero__title { font-size: 3.25rem; }
}
.hero__grid {
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--sp-8);
  align-items: end;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; }
}
.hero__body { display: grid; gap: var(--sp-5); align-content: start; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  color: var(--c-on-primary-c);
  text-wrap: balance;
}
.hero__title-line { display: block; }
.hero__title-line--italic em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--c-primary);
}

/* JS-injected ambient settle */
.hero__title.is-loaded .hero__title-line {
  animation: ambientSettle var(--d-900) var(--ease-emph-dec) both;
}
.hero__title.is-loaded .hero__title-line--italic {
  animation-delay: 120ms;
}
@keyframes ambientSettle {
  from { opacity: 0; transform: translateY(12px); font-variation-settings: "SOFT" 60, "opsz" 144; }
  to   { opacity: 1; transform: translateY(0);    font-variation-settings: "SOFT" 30, "opsz" 144; }
}

.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  color: color-mix(in oklab, var(--c-on-primary-c) 92%, transparent);
  text-wrap: pretty;
}
.hero__lead em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "opsz" 32;
  font-size: 1.08em;
  color: var(--c-primary);
  padding: 0 2px;
}

.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }

.hero__aside { display: grid; gap: var(--sp-4); }


/* -----------------------------------------------------------------------------
   7. BUTTONS (M3-style filled / outlined with state-layer overlays)
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-xl);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--d-200) var(--ease-emph),
    box-shadow var(--d-300) var(--ease-emph),
    background var(--d-200) var(--ease-emph),
    border-color var(--d-200) var(--ease-emph),
    color var(--d-200) var(--ease-emph);
}
.btn::before { /* state layer */
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { opacity: var(--op-hover); }
.btn:focus-visible::before { opacity: var(--op-focus); }
.btn:active::before { opacity: var(--op-press); }
.btn svg { transition: transform var(--d-200) var(--ease-emph); }
.btn:hover svg { transform: translate(3px, -3px); }

/* Filled — Deep Ocean anchor */
.btn--filled {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: 1px solid var(--c-primary);
  box-shadow: var(--sh-warm-1);
}
.btn--filled:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-warm-3);
}
.btn--filled:active { transform: translateY(0); }

/* Outlined */
.btn--outlined {
  background: transparent;
  color: currentColor;
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
}
.btn--outlined:hover { border-color: currentColor; }

.btn--wide { width: 100%; padding: 18px 24px; }


/* Ripple (JS-injected span) */
/* [data-ripple] > .ripple beats the `.X > *` layout rules (e.g. .channelcard > *)
   that would otherwise clobber the ripple's absolute positioning and turn it
   into an in-flow grid item that balloons the card. */
.ripple,
[data-ripple] > .ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.14;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleGo 600ms var(--ease-emph) forwards;
  z-index: 0;
}
@keyframes rippleGo {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}


/* -----------------------------------------------------------------------------
   8. CARDS (hero factlist, contact channels)
   -------------------------------------------------------------------------- */
.card {
  background: color-mix(in oklab, var(--c-surface) 60%, var(--c-primary-c));
  color: var(--c-on-primary-c);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid color-mix(in oklab, var(--c-outline) 30%, transparent);
  box-shadow: var(--sh-warm-1);
  transition: box-shadow var(--d-300) var(--ease-emph), transform var(--d-300) var(--ease-emph);
}
.card[data-elevation="2"] { box-shadow: var(--sh-warm-2); }
.card[data-elevation="3"] { box-shadow: var(--sh-warm-3); }

.card--hero {
  background: color-mix(in oklab, #FFFFFF 60%, var(--c-primary-c));
}
[data-theme="dark"] .card--hero {
  background: color-mix(in oklab, var(--c-surface) 55%, var(--c-primary-c));
}

/* Factlist inside card */
.factlist {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}
.factlist > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed color-mix(in oklab, var(--c-outline) 50%, transparent);
}
.factlist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.factlist dt {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.factlist dd {
  font-size: var(--t-small);
  color: var(--c-on-primary-c);
  line-height: 1.4;
}
.factlist__meta {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--c-accent) 15%, transparent);
  color: var(--c-accent);
  vertical-align: middle;
}


/* -----------------------------------------------------------------------------
   9. CHIPS (assist + filter)
   -------------------------------------------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* "Currently focusing on" chips: even 2×2 grid (content-width, left-packed)
   so they never orphan into a 3+1 wrap. */
.about__side .chip-row {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in oklab, var(--c-outline) 50%, transparent);
  color: var(--c-on-primary-c);
  background: color-mix(in oklab, #FFFFFF 25%, var(--c-primary-c));
  transition: background var(--d-200) var(--ease-emph), border-color var(--d-200) var(--ease-emph), transform var(--d-200) var(--ease-emph), color var(--d-200) var(--ease-emph);
  cursor: default;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="dark"] .chip {
  background: color-mix(in oklab, var(--c-surface) 40%, var(--c-primary-c));
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.chip:hover::before { opacity: var(--op-hover); }

.chip--work {
  color: var(--c-on-secondary-c);
  border-color: color-mix(in oklab, var(--c-secondary) 40%, transparent);
  background: color-mix(in oklab, #FFFFFF 35%, var(--c-secondary-c));
}
[data-theme="dark"] .chip--work {
  background: color-mix(in oklab, var(--c-surface) 50%, var(--c-secondary-c));
}

.chip--filter {
  border-radius: var(--r-sm);
  color: var(--c-on-tertiary-c);
  border-color: color-mix(in oklab, var(--c-tertiary) 45%, transparent);
  background: color-mix(in oklab, #FFFFFF 35%, var(--c-tertiary-c));
  cursor: pointer;
}
[data-theme="dark"] .chip--filter {
  background: color-mix(in oklab, var(--c-surface) 50%, var(--c-tertiary-c));
}
.chip--filter:hover { border-color: var(--c-tertiary); }


/* -----------------------------------------------------------------------------
   10. WORK — Typographic index (rows, not cards)
   -------------------------------------------------------------------------- */
.workindex {
  max-width: var(--max-content);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid color-mix(in oklab, var(--c-secondary) 25%, transparent);
}
.workindex__row {
  border-bottom: 1px solid color-mix(in oklab, var(--c-secondary) 25%, transparent);
  position: relative;
}
.workindex__link {
  display: grid;
  grid-template-columns: 90px 1fr 280px 32px;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-3);
  position: relative;
  transition: background var(--d-300) var(--ease-emph), padding var(--d-300) var(--ease-emph);
  overflow: hidden;
}
.workindex__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  pointer-events: none;
}
.workindex__link:hover::before { opacity: var(--op-hover); }
.workindex__link:hover { padding-left: var(--sp-5); }

.workindex__num {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "opsz" 96;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--c-secondary);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;      /* keep "P/01" on one line */
  overflow-wrap: normal;    /* override the global span break-word */
}
.workindex__body { display: grid; gap: var(--sp-2); }
.workindex__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  line-height: 1.2;
  color: var(--c-on-secondary-c);
  letter-spacing: -0.005em;
}
.workindex__desc {
  font-size: var(--t-small);
  color: color-mix(in oklab, var(--c-on-secondary-c) 78%, transparent);
  max-width: 52ch;
  line-height: 1.5;
}
.workindex__thumb {
  width: 280px;
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in oklab, var(--c-surface) 40%, var(--c-secondary-c));
  border: 1px solid color-mix(in oklab, var(--c-secondary) 30%, transparent);
  box-shadow: var(--sh-warm-1);
  transition: transform var(--d-400) var(--ease-emph), box-shadow var(--d-400) var(--ease-emph);
}
.workindex__thumb img,
.workindex__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-600) var(--ease-emph);
}
.workindex__link:hover .workindex__thumb {
  transform: scale(1.02);
  box-shadow: var(--sh-warm-3);
}
.workindex__link:hover .workindex__thumb img,
.workindex__link:hover .workindex__thumb video {
  transform: scale(1.05);
}
.workindex__arrow {
  color: var(--c-secondary);
  transition: color var(--d-200) var(--ease-emph), transform var(--d-200) var(--ease-emph);
  justify-self: end;
}
.workindex__link:hover .workindex__arrow {
  color: var(--c-primary);
  transform: translate(4px, -4px);
}

.workindex__aux {
  padding: 0 var(--sp-3) var(--sp-4);
  text-align: right;
}
.link-inline {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-secondary-c);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-200) var(--ease-emph), color var(--d-200) var(--ease-emph);
  padding-bottom: 2px;
}
.link-inline:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); }

@media (max-width: 900px) {
  /* Card-like stack: meta row → full-width prominent thumbnail → title → desc → tags.
     Body text spans the full width so it no longer wraps into a narrow column. */
  .workindex__link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "thumb"
      "body";
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-6) 0;
  }
  .workindex__link:hover { padding-left: 0; } /* no indent shift on touch */
  .workindex__num {
    grid-area: num;
    justify-self: start;
    align-self: center;
    font-size: 2.25rem;
  }
  .workindex__thumb {
    grid-area: thumb;
    width: 100%;
    max-width: none;
    aspect-ratio: 16/9;
    margin: var(--sp-2) 0;
  }
  .workindex__body { grid-area: body; }
  /* Arrow lives inline with the title on mobile, so hide the standalone one */
  .workindex__arrow { display: none; }
}


/* -----------------------------------------------------------------------------
   11. ABOUT — bio prose + marginalia pull-quotes + skill matrix
   -------------------------------------------------------------------------- */
.about__grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.about__prose {
  display: grid;
  gap: var(--sp-5);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-on-tertiary-c);
  max-width: 62ch;
}
.about__prose p { text-wrap: pretty; }

.about__lead { font-size: calc(var(--t-lead) * 1.05); }
.dropcap {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--c-tertiary);
  font-weight: 500;
}

/* Marginalia pull-quotes */
.pullquote {
  margin: var(--sp-4) 0;
  padding: 0 0 0 var(--sp-4);
  border-left: 3px solid var(--c-on-tertiary-c);
  position: relative;
  transition: padding-left var(--d-400) var(--ease-emph);
}
.pullquote::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-on-tertiary-c);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform var(--d-450) var(--ease-emph-dec);
}
.pullquote.is-visible::before { transform: scaleY(1); }
.pullquote__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 50, "opsz" 40;
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.375rem);
  line-height: 1.35;
  color: var(--c-on-tertiary-c);
  text-wrap: balance;
}
.pullquote__quote em {
  font-style: italic;
  color: var(--c-tertiary);
}
.pullquote__cite {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--c-tertiary);
  letter-spacing: 0.02em;
}

.about__side { display: grid; gap: var(--sp-6); position: sticky; top: 100px; }
@media (max-width: 900px) { .about__side { position: static; } }

.skillmatrix__title {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.skillmatrix__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.skillmatrix__list li {
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--c-on-tertiary-c) 25%, transparent);
  font-size: var(--t-body);
  color: var(--c-on-tertiary-c);
  transition: padding-left var(--d-200) var(--ease-emph), color var(--d-200) var(--ease-emph);
}
.skillmatrix__list li:hover {
  padding-left: 8px;
  color: var(--c-tertiary);
}


/* -----------------------------------------------------------------------------
   12. EPIGRAPHS (Herzl at Hero footer, Jobs at Contact head)
   -------------------------------------------------------------------------- */
.epigraph {
  max-width: var(--max-content);
  margin: var(--sp-9) auto 0;
  padding: var(--sp-6) 0;
  text-align: left;
  border-top: 1px solid color-mix(in oklab, var(--c-on-primary-c) 25%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--d-600) var(--ease-emph-dec), transform var(--d-600) var(--ease-emph-dec);
}
.epigraph.is-visible { opacity: 1; transform: translateY(0); }
.epigraph__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.epigraph__eyebrow-alt {
  font-family: var(--font-display-he);
  text-transform: none;
  letter-spacing: 0;
}
.epigraph__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 50, "opsz" 72;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  line-height: 1.2;
  color: var(--c-on-primary-c);
  text-wrap: balance;
}
.epigraph__quote em {
  font-style: italic;
  color: var(--c-primary);
  font-variation-settings: "SOFT" 60, "opsz" 72;
}
.epigraph__cite {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-small);
  color: color-mix(in oklab, var(--c-on-primary-c) 75%, transparent);
  letter-spacing: 0.02em;
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.epigraph__dot { opacity: 0.5; }

/* Hebrew epigraph (Herzl) — RTL variant */
.epigraph--hero .epigraph__quote[lang="he"] p {
  font-family: var(--font-display-he);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  line-height: 1.4;
  direction: rtl;
  text-align: right;
}
.epigraph--hero .epigraph__cite { direction: ltr; }
.epigraph__eyebrow-alt[dir="rtl"] {
  display: inline-block;
  direction: rtl;
  margin-left: 6px;
}

/* Jobs coda — centered, no left rule */
.epigraph--coda {
  max-width: 720px;
  text-align: center;
  border-top: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--c-on-primary-c) 22%, transparent);
  padding-bottom: var(--sp-7);
  margin-top: 0;
  margin-bottom: var(--sp-8);
}
.epigraph--coda .epigraph__cite { justify-content: center; margin-left: auto; margin-right: auto; }


/* -----------------------------------------------------------------------------
   13. CONTACT — channels + form
   -------------------------------------------------------------------------- */
.contact__grid {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .channels { grid-template-columns: 1fr; }
}
.channelcard {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  min-height: 78px;
  background: color-mix(in oklab, #FFFFFF 55%, var(--c-primary-c));
  color: var(--c-on-primary-c);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--c-outline) 25%, transparent);
  box-shadow: var(--sh-warm-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-300) var(--ease-emph), box-shadow var(--d-300) var(--ease-emph);
}
.channelcard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
[data-theme="dark"] .channelcard {
  background: color-mix(in oklab, var(--c-surface) 40%, var(--c-primary-c));
}
.channelcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  pointer-events: none;
  z-index: 0;
}
.channelcard > * { position: relative; z-index: 1; }
.channelcard:hover::before { opacity: var(--op-hover); }
.channelcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-warm-3);
}
.channelcard__label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  color: var(--c-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.channelcard__value {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 40, "opsz" 24;
  font-size: clamp(0.95rem, 0.5vw + 0.75rem, 1.05rem);
  line-height: 1.2;
  color: var(--c-on-primary-c);
  align-self: end;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.channelcard__arrow {
  font-family: var(--font-mono);
  color: var(--c-primary);
  font-size: 1.15rem;
  transition: transform var(--d-200) var(--ease-emph);
}
.channelcard:hover .channelcard__arrow {
  transform: translate(4px, -4px);
}

/* Contact form — Material 3 filled variant with floating labels */
.contactform {
  background: color-mix(in oklab, #FFFFFF 55%, var(--c-primary-c));
  border: 1px solid color-mix(in oklab, var(--c-outline) 25%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  box-shadow: var(--sh-warm-1);
}
[data-theme="dark"] .contactform {
  background: color-mix(in oklab, var(--c-surface) 40%, var(--c-primary-c));
}
.field {
  position: relative;
  isolation: isolate;
}

/* Filled container: rounded top corners only, subtle tint, indicator bar at bottom */
.field input,
.field textarea {
  width: 100%;
  padding: 26px 16px 10px;
  background: color-mix(in oklab, var(--c-on-primary-c) 6%, transparent);
  border: none;
  border-bottom: 1px solid var(--c-outline);
  border-radius: 8px 8px 0 0;
  color: var(--c-on-primary-c);
  font-size: var(--t-body);
  line-height: 1.4;
  transition:
    background var(--d-200) var(--ease-emph),
    border-color var(--d-200) var(--ease-emph);
  min-height: 56px;
  resize: none;
  caret-color: var(--c-primary);
}
.field textarea { min-height: 132px; padding-top: 28px; resize: vertical; }

/* Hover: darken the fill slightly (M3 state layer) */
.field input:hover:not(:focus),
.field textarea:hover:not(:focus) {
  background: color-mix(in oklab, var(--c-on-primary-c) 9%, transparent);
  border-bottom-color: var(--c-on-surface-var);
}

/* Focus indicator: 2px primary line at the bottom, retains fill */
.field input:focus,
.field textarea:focus {
  outline: none;
  background: color-mix(in oklab, var(--c-on-primary-c) 8%, transparent);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 9px; /* compensate for the +1px border to prevent text jump */
}

/* Floating label — mono at rest, floats up + uppercase when focused/filled */
.field label {
  position: absolute;
  left: 16px;
  top: 18px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-on-surface-var);
  letter-spacing: 0.02em;
  pointer-events: none;
  transition:
    transform var(--d-200) var(--ease-emph),
    color var(--d-200) var(--ease-emph),
    letter-spacing var(--d-200) var(--ease-emph);
  transform-origin: top left;
  background: transparent;
}
.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-12px) scale(0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-surface-var);
}
.field input:focus ~ label,
.field textarea:focus ~ label {
  color: var(--c-primary);
}
/* Contact chapter (Dusk Rose): resting label needs more weight to clear AA
   against the tinted fill — a light color-mix falls short, so use the full
   on-container ink at rest. */
.chapter--contact .field label,
.chapter--contact .field input:not(:focus):not(:placeholder-shown) ~ label,
.chapter--contact .field textarea:not(:focus):not(:placeholder-shown) ~ label {
  color: var(--c-on-primary-c);
}

.contactform__status {
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-primary);
  letter-spacing: 0.02em;
  display: none;
  align-items: center;
  gap: 8px;
}
.contactform__status:not(:empty) {
  display: inline-flex;
}
.contactform.is-success .contactform__status {
  animation: successPulse var(--d-400) var(--ease-emph) both;
}
.contactform.is-error .contactform__status { color: var(--c-on-surface-var); }
.contactform.is-success {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-primary) 25%, transparent), var(--sh-warm-2);
}
@keyframes successPulse {
  0%   { transform: scale(0.96); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}


/* -----------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--c-outline);
  padding: var(--sp-5) var(--gutter);
}
.footer__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 780px) { .footer__inner { grid-template-columns: 1fr; } }

.footer__inner--slim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--c-on-surface-var);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .footer__inner--slim { flex-direction: column; gap: var(--sp-2); text-align: center; }
}

/* ---------------------------------------------------------------------------
   Easter egg — triple-click the topbar logo: a sailboat drifts across, the
   passenger waves, and the boat bobs on static wave strokes as it sails past.
   --------------------------------------------------------------------------- */
.sailboat {
  position: fixed;
  left: 0;
  bottom: 15vh;
  width: 150px;
  height: 134px;
  pointer-events: none;
  color: var(--c-primary);
  z-index: 999;
  opacity: 0;
  transform: translateX(-200px);
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 6px color-mix(in oklab, var(--c-primary) 22%, transparent));
}
.sailboat.is-swinging {
  animation: boat-sail 4.6s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
/* Waving arm — pivots at the shoulder while the boat sails */
.sailboat__arm {
  transform-box: view-box;
  transform-origin: 46px 53px;
}
.sailboat.is-swinging .sailboat__arm {
  animation: arm-wave 0.42s ease-in-out infinite;
}
@keyframes arm-wave {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(-30deg); }
}
@keyframes boat-sail {
  0%   { transform: translateX(-180px)               translateY(0)     rotate(-6deg); opacity: 0; }
  8%   { opacity: 1; }
  20%  { transform: translateX(18vw)                 translateY(-10px) rotate(6deg); }
  35%  { transform: translateX(36vw)                 translateY(5px)   rotate(-5deg); }
  50%  { transform: translateX(50vw)                 translateY(-9px)  rotate(6deg); }
  65%  { transform: translateX(64vw)                 translateY(5px)   rotate(-5deg); }
  80%  { transform: translateX(82vw)                 translateY(-9px)  rotate(6deg); }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 160px))  translateY(0)     rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sailboat.is-swinging,
  .sailboat.is-swinging .sailboat__arm { animation: none; }
}
/* -----------------------------------------------------------------------------
   15. DOCK NAV (bottom center)
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0), 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--c-backdrop);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid color-mix(in oklab, var(--c-outline) 30%, transparent);
  box-shadow: var(--sh-warm-3);
  isolation: isolate;
  transition: transform var(--d-400) var(--ease-emph);
}
.dock a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-surface-var);
  transition: color var(--d-200) var(--ease-emph), background var(--d-200) var(--ease-emph);
}
.dock a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-200) var(--ease-emph);
  pointer-events: none;
  z-index: 0;
}
.dock a > * { position: relative; z-index: 1; }
.dock a:hover::before { opacity: var(--op-hover); }
.dock a[aria-current="true"] { color: var(--c-on-surface); }
.dock__num { color: var(--c-accent); }
.dock__lbl { color: currentColor; }

.dock__dot {
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-primary) 25%, transparent);
  transition: transform var(--d-400) var(--ease-emph);
  pointer-events: none;
}

@media (max-width: 620px) {
  .dock a { padding: 8px 10px; }
  .dock__lbl { display: none; }
}


/* -----------------------------------------------------------------------------
   16. REVEALS (data-reveal)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-700) var(--ease-emph-dec), transform var(--d-700) var(--ease-emph-dec);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   17. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .pullquote::before { transform: scaleY(1); }
  .hero__title.is-loaded .hero__title-line { animation: none; opacity: 1; transform: none; }
  .status-dot { animation: none; }
}