/* ============================================
   Canzengin.com - Shared Stylesheet
   Apple-inspired design with frosted glass
   ============================================ */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Full-viewport section snapping — gentle, not mandatory, so users can
     still scroll freely but each section naturally rests at the top. */
  scroll-snap-type: y proximity;
}

body {
  /* Inter first — it's the closest web font to SF Pro and renders the
     same on Windows and Mac. The native stack stays as a fallback while
     Inter loads. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  /* Inter OpenType features: single-story "a" (cv11) + disambiguated
     "I/l/1" (ss01), which give Inter a more SF-Pro-like feel. */
  font-feature-settings: "cv11", "ss01", "ss03";
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.6s ease, color 0.6s ease;
  position: relative;
}

/* Display-optimized font for big headings. Inter Tight is Inter with
   tighter default spacing — better proportions at large sizes. */
h1, h2, h3,
.hero__title,
.hero__line,
.section-head h2 {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
}

/* ---------- Theme Variables ---------- */

/* LIGHT MODE — Loro Piana Cream */
:root {
  --bg: #efe6d2;
  --bg-gradient-1: #f4ecda;
  --bg-gradient-2: #e6dcc2;
  --bg-gradient-3: #d9cdb0;

  --surface: rgba(255, 251, 240, 0.55);
  --surface-strong: rgba(255, 251, 240, 0.75);
  --surface-hover: rgba(255, 251, 240, 0.85);

  --border: rgba(90, 70, 40, 0.12);
  --border-strong: rgba(90, 70, 40, 0.22);

  --text: #2c2416;
  --text-secondary: #6b5e46;
  --text-muted: #8a7d63;

  --accent: #8b6f47;
  --accent-hover: #6e5634;
  --accent-glow: rgba(139, 111, 71, 0.25);

  --shadow-sm: 0 2px 8px rgba(60, 45, 20, 0.06);
  --shadow-md: 0 8px 32px rgba(60, 45, 20, 0.1);
  --shadow-lg: 0 20px 60px rgba(60, 45, 20, 0.15);

  --blob-1: rgba(200, 170, 120, 0.55);
  --blob-2: rgba(220, 200, 160, 0.5);
  --blob-3: rgba(180, 150, 100, 0.4);
}

/* DARK MODE — Vision Pro Navy Blue */
[data-theme="dark"] {
  --bg: #0a1628;
  --bg-gradient-1: #0f1e36;
  --bg-gradient-2: #0a1628;
  --bg-gradient-3: #142848;

  --surface: rgba(30, 55, 95, 0.35);
  --surface-strong: rgba(40, 70, 115, 0.55);
  --surface-hover: rgba(55, 90, 140, 0.65);

  --border: rgba(140, 180, 230, 0.25);
  --border-strong: rgba(170, 210, 255, 0.45);

  --text: #e8f1fb;
  --text-secondary: #b8cfe6;
  --text-muted: #8eacc9;

  --accent: #7fb3ff;
  --accent-hover: #a5c9ff;
  --accent-glow: rgba(127, 179, 255, 0.35);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);

  --blob-1: rgba(60, 110, 190, 0.5);
  --blob-2: rgba(90, 145, 220, 0.4);
  --blob-3: rgba(40, 80, 160, 0.55);
}

body {
  color: var(--text);
  background: var(--bg);
}

/* ---------- Ambient background blobs (give frosted glass something to blur) ---------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(
      1200px 800px at 15% 10%,
      var(--bg-gradient-1),
      transparent 60%
    ),
    radial-gradient(900px 700px at 85% 20%, var(--bg-gradient-3), transparent 60%),
    radial-gradient(1000px 800px at 50% 100%, var(--bg-gradient-2), transparent 60%),
    var(--bg);
  transition: background 0.6s ease;
}

.ambient::before,
.ambient::after,
.ambient span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.9;
  animation: float 18s ease-in-out infinite;
}

.ambient::before {
  width: 520px;
  height: 520px;
  background: var(--blob-1);
  top: -120px;
  left: -80px;
}

.ambient::after {
  width: 620px;
  height: 620px;
  background: var(--blob-2);
  bottom: -180px;
  right: -120px;
  animation-delay: -6s;
}

.ambient span {
  width: 420px;
  height: 420px;
  background: var(--blob-3);
  top: 40%;
  left: 45%;
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* ---------- Floating Pill Navigation ---------- */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-md);
  overflow: hidden;              /* clip the logo bleed to the pill's shape */
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  animation: navDrop 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Brand mark — the ∾ glyph in warm gold ----------
   Hover behavior: no movement. Instead, a same-color light bleed
   diffuses out from behind the glyph. Stylized (not photo-real),
   engineered to be visible in both the cream-toned light mode
   and the navy dark mode. */
.nav__brand {
  position: relative;
  display: grid;                 /* grid centers by box, not baseline */
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  margin-right: 4px;
  background: transparent;
  text-decoration: none;
  color: #f0b84a;                /* warm amber */
  isolation: isolate;            /* contain blend-modes from the pseudo-elements */
  overflow: visible;             /* let the bleed escape the pill */
}

/* WIDE bleed — the far diffuse halo. Heavy blur, very soft edges. */
.nav__brand::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%) scale(0.5);
  background: radial-gradient(
    circle at center,
    rgba(255, 210, 130, 0.55) 0%,
    rgba(240, 184, 74, 0.32)  18%,
    rgba(240, 184, 74, 0.14)  38%,
    rgba(240, 184, 74, 0.05)  60%,
    rgba(240, 184, 74, 0)     80%
  );
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* INNER core — the hot bright center of the bleed, no ring/border.
   Small, very bright, very blurred — this is the "bulb" of the light. */
.nav__brand::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 999px;
  background: radial-gradient(
    circle at center,
    rgba(255, 235, 180, 0.85) 0%,
    rgba(255, 210, 130, 0.55) 25%,
    rgba(240, 184, 74, 0.25)  55%,
    rgba(240, 184, 74, 0)     85%
  );
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  filter: blur(4px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__brand:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nav__brand:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nav__mark {
  display: block;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-2px);   /* optical centering for the ∾ glyph */
  /* Resting soft glow on the glyph itself. */
  text-shadow:
    0 0 12px rgba(240, 184, 74, 0.40),
    0 0 4px  rgba(240, 184, 74, 0.30);
  transition:
    text-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover, the glyph lifts toward white-gold and its own halo widens. */
.nav__brand:hover .nav__mark {
  color: #ffd27a;
  text-shadow:
    0 0 22px rgba(240, 184, 74, 0.85),
    0 0 8px  rgba(255, 210, 122, 0.60),
    0 0 2px  rgba(255, 225, 160, 0.75);
}

/* LIGHT MODE — the cream bg eats pure gold, so we deepen + saturate
   so the bleed reads clearly against the warm background. */
.nav__brand::before {
  mix-blend-mode: multiply;      /* darkens warmly into cream */
}
.nav__brand:hover::before {
  background: radial-gradient(
    circle at center,
    rgba(199, 122, 0, 0.42)  0%,
    rgba(215, 145, 30, 0.28) 20%,
    rgba(232, 170, 60, 0.15) 44%,
    rgba(240, 184, 74, 0.05) 65%,
    rgba(240, 184, 74, 0)    82%
  );
}
.nav__brand:hover::after {
  background: radial-gradient(
    circle at center,
    rgba(230, 160, 40, 0.55) 0%,
    rgba(215, 145, 30, 0.35) 28%,
    rgba(199, 122, 0, 0.15)  58%,
    rgba(240, 184, 74, 0)    88%
  );
}

/* DARK MODE — the navy bg lets us use screen blending so the bleed
   reads as pure emitted warm light. */
[data-theme="dark"] .nav__brand::before {
  mix-blend-mode: screen;
}
[data-theme="dark"] .nav__brand:hover::before {
  background: radial-gradient(
    circle at center,
    rgba(255, 220, 150, 0.80) 0%,
    rgba(255, 200, 100, 0.50) 18%,
    rgba(240, 184, 74, 0.25)  38%,
    rgba(240, 184, 74, 0.08)  60%,
    rgba(240, 184, 74, 0)     82%
  );
}
[data-theme="dark"] .nav__brand:hover::after {
  background: radial-gradient(
    circle at center,
    rgba(255, 245, 210, 0.95) 0%,
    rgba(255, 220, 150, 0.70) 22%,
    rgba(255, 200, 100, 0.35) 50%,
    rgba(240, 184, 74, 0.10)  75%,
    rgba(240, 184, 74, 0)     92%
  );
}

[data-theme="dark"] .nav__mark {
  text-shadow:
    0 0 14px rgba(240, 184, 74, 0.55),
    0 0 5px  rgba(240, 184, 74, 0.40);
}
[data-theme="dark"] .nav__brand:hover .nav__mark {
  color: #ffe6a8;
  text-shadow:
    0 0 26px rgba(255, 200, 100, 0.95),
    0 0 10px rgba(255, 220, 150, 0.75),
    0 0 2px  rgba(255, 235, 190, 0.85);
}

/* Respect reduced-motion users — keep the glow, drop the scale animation. */
@media (prefers-reduced-motion: reduce) {
  .nav__brand::before,
  .nav__brand::after,
  .nav__mark {
    transition: opacity 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
  }
  .nav__brand:hover::before,
  .nav__brand:hover::after {
    transform: translate(-50%, -50%) scale(1);
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.nav__link.is-active {
  color: var(--text);
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* ---------- Theme Toggle — Liquid-Glass Sliding Pill ----------
   Structure:
     .theme-toggle          → the outer capsule / track (translucent)
     .theme-toggle__thumb   → invisible positioner that slides
       ::before             → the glass surface + colored active-icon glow
       ::after              → the inner "nested glass" ring
     .theme-toggle__icon    → sun / moon, always both visible

   Separating position (thumb transform) from deformation (::before
   scale) lets the thumb slide AND squeeze independently.
---------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  width: 78px;
  height: 36px;
  margin-left: 6px;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;

  /* Track — very translucent, hairline border */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.30),
    inset 0 -1px 0  rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(40, 30, 10, 0.04);

  transition: border-color 0.5s ease, background 0.5s ease,
              box-shadow 0.5s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark track — smoky translucent */
[data-theme="dark"] .theme-toggle {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.01));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.07),
    inset 0 -1px 0  rgba(0, 0, 0, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-toggle:hover { border-color: rgba(255, 255, 255, 0.55); }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.18); }

/* Track inner ring — the second, thinner frame that sits just inside
   the outer capsule. Mirrors the thumb's ::after ring so the "layered
   glass" language is consistent on both the track and the thumb. */
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 0;
  transition: border-color 0.5s ease;
}

[data-theme="dark"] .theme-toggle::before {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Icons — now bigger (18px) and always-on top of thumb */
.theme-toggle__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  pointer-events: none;
  transition: color 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
}

.theme-toggle__icon svg {
  width: 18px;
  height: 18px;
}

/* Tint per active side. Inactive icon uses the theme's secondary text
   tone at 55% alpha so it's clearly visible but reads as "not selected",
   mirroring how the dark-mode inactive sun is a muted white. */
[data-theme="light"] .theme-toggle__icon--sun  { color: #f5b622; opacity: 1; }
[data-theme="light"] .theme-toggle__icon--moon { color: var(--text-secondary); opacity: 0.55; }
[data-theme="dark"]  .theme-toggle__icon--sun  { color: rgba(255, 255, 255, 0.55); opacity: 1; }
[data-theme="dark"]  .theme-toggle__icon--moon { color: #7fb3ff; opacity: 1; }

/* -------- The thumb (positioner only — visual lives on pseudos) --------
   Padding-box is 34px tall (36 outer − 2 border), and the thumb is 32px.
   Using top: 1px leaves a symmetric 1px gap above and below so the
   droplet sits in the exact vertical centre of the track. */
.theme-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

[data-theme="dark"] .theme-toggle__thumb { transform: translateX(40px); }

/* -------- ::before = liquid-glass body + colored active-icon glow -------- */
.theme-toggle__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: center;

  /* Three stacked layers, top to bottom:
     1) colored glow centered behind the active icon
     2) diagonal top-left highlight
     3) base liquid-glass tint */
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(245, 182, 34, 0.38), transparent 70%),
    radial-gradient(130% 110% at 28% 12%, rgba(255, 255, 255, 0.60), transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.32),
      rgba(255, 255, 255, 0.10));

  backdrop-filter: blur(14px) saturate(200%);
  -webkit-backdrop-filter: blur(14px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.85);

  /* Deeper, layered shadow so the thumb feels clearly above the track */
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.90),
    inset 0 -1px 0  rgba(255, 255, 255, 0.18),
    inset 0 0 14px  rgba(255, 255, 255, 0.25),
    0 6px 18px rgba(40, 30, 10, 0.22),
    0 2px 6px rgba(40, 30, 10, 0.12);

  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* -------- ::after = inner nested-glass ring -------- */
.theme-toggle__thumb::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transform-origin: center;
  transition: border-color 0.5s ease;
}

/* Dark-mode glass: cool glow + darker body */
[data-theme="dark"] .theme-toggle__thumb::before {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(127, 179, 255, 0.45), transparent 70%),
    radial-gradient(130% 110% at 28% 12%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.28),
    inset 0 -1px 0  rgba(0, 0, 0, 0.30),
    inset 0 0 14px  rgba(255, 255, 255, 0.05),
    0 6px 22px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.40);
}

[data-theme="dark"] .theme-toggle__thumb::after {
  border-color: rgba(255, 255, 255, 0.14);
}

/* -------- Click squeeze: fired by JS via .is-pressed -------- */
.theme-toggle.is-pressed .theme-toggle__thumb::before,
.theme-toggle.is-pressed .theme-toggle__thumb::after {
  animation: thumbSqueeze 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes thumbSqueeze {
  0%   { transform: scaleX(1)    scaleY(1); }
  30%  { transform: scaleX(1.20) scaleY(0.85); }
  60%  { transform: scaleX(0.94) scaleY(1.04); }
  100% { transform: scaleX(1)    scaleY(1); }
}

/* Reduced-motion users: instant, no slide/squeeze */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__thumb,
  .theme-toggle__icon,
  .theme-toggle__thumb::before,
  .theme-toggle__thumb::after {
    transition: none;
    animation: none;
  }
}

/* ---------- Page Container ---------- */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Full-viewport sections ----------
   Each top-level <section> inside <main> fills the viewport and snaps
   to the top when it comes to rest, so every strip of content feels
   like its own "page" while scrolling.
   The first section reserves room for the floating nav pill;
   the last section reserves a little bottom breathing room.
---------------------------------------------------- */
main > section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  padding-top: 120px;   /* clears the fixed nav */
  padding-bottom: 60px;
}

main > section:last-child {
  padding-bottom: 100px;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  /* Padding is now handled by the full-viewport section wrapper */
  padding: 0;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ---------- Hello wave — cute one-shot welcome animation ----------
   Each letter briefly flashes a soft pastel hue and does a tiny hop,
   staggered left-to-right, so the eyebrow greets the visitor. */
.hero__eyebrow--wave {
  /* prevent the inline letter boxes from inheriting any weird baseline */
  line-height: 1;
}

.hero__eyebrow-letter {
  display: inline-block;
  color: inherit;
  /* Starts after the intro fade has settled, then staggers per letter. */
  animation: helloWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(1.1s + var(--l) * 0.09s);
  will-change: transform, color;
  cursor: default;
}

/* Once the entrance has played, disable the load animation and only
   re-trigger on hover via the .is-replaying class (toggled by JS). */
.hero__eyebrow--wave.is-ready .hero__eyebrow-letter {
  animation: none;
}

.hero__eyebrow--wave.is-ready.is-replaying .hero__eyebrow-letter {
  animation: helloWave 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--l) * 0.09s);
}

/* Soft pastel rainbow — one hue per letter (H E L L O). */
.hero__eyebrow-letter:nth-child(1) { --hue: #ff9bb8; } /* pink  */
.hero__eyebrow-letter:nth-child(2) { --hue: #ffb86c; } /* peach */
.hero__eyebrow-letter:nth-child(3) { --hue: #7fd3a0; } /* mint  */
.hero__eyebrow-letter:nth-child(4) { --hue: #7cc9e8; } /* sky   */
.hero__eyebrow-letter:nth-child(5) { --hue: #b39eff; } /* lilac */

@keyframes helloWave {
  0%   { transform: translateY(0);    color: inherit; }
  25%  { transform: translateY(-5px); color: var(--hue); }
  50%  { transform: translateY(0);    color: var(--hue); }
  75%  { transform: translateY(-1px); color: var(--hue); }
  100% { transform: translateY(0);    color: inherit; }
}

/* Accessibility — skip the hop for reduced-motion users, keep a tiny
   color flicker so the greeting still registers. */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-letter {
    animation: helloWaveReduced 0.9s ease both;
    animation-delay: calc(0.9s + var(--l) * 0.06s);
  }
  @keyframes helloWaveReduced {
    0%, 100% { color: inherit; }
    50%      { color: var(--hue); }
  }
}

.hero__title {
  font-size: clamp(42px, 6.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.035em;
  /* Slightly relaxed so descenders (the tail of "g") never get clipped by
     the line box when background-clip: text is active. */
  line-height: 1.12;
  margin-bottom: 22px;
}

/* Gradient is applied per-line so each line can animate independently
   (opacity/blur/transform) without breaking background-clip: text. */
.hero__line {
  display: block;
  background: linear-gradient(180deg, var(--text) 0%, var(--text-secondary) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Extra safety margin for descenders — some fonts render "g/j/p/q/y"
     below what line-height alone reserves. */
  padding-bottom: 0.08em;
  will-change: opacity, transform, filter;
}

.hero__subtitle {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.55;
}

.hero__cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Apple-style Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  background: var(--surface-strong);
  color: var(--text);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}

.btn--primary:hover {
  background: var(--accent);
  color: #fff;
}

[data-theme="dark"] .btn--primary {
  background: var(--accent);
  color: #0a1628;
}
[data-theme="dark"] .btn--primary:hover {
  background: var(--accent-hover);
}

/* ---------- Section Heading ---------- */
.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.section-head p {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Frosted Glass Card ---------- */
.card {
  position: relative;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.25),
    transparent 35%,
    transparent 65%,
    rgba(255, 255, 255, 0.08)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  background: var(--surface-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: 18px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__icon { transform: scale(1.08) rotate(-4deg); }

.card__icon svg { width: 22px; height: 22px; }

.card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ---------- Grid Layouts ---------- */
.grid {
  display: grid;
  gap: 20px;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
}

/* ---------- Projects ---------- */
.project {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.project__cover {
  height: 220px;
  background: linear-gradient(135deg, var(--blob-1), var(--blob-3));
  position: relative;
  overflow: hidden;
}

.project__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.25), transparent 60%);
}

.project__body { padding: 26px 30px 32px; }

/* Coming Soon badge floating on the cover image */
.project__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 15, 10, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Placeholder "Coming Soon" card — text looks a little quieter */
.project--soon h3 { color: var(--text-secondary); }
.project--soon .project__cover { filter: saturate(0.82) brightness(0.96); }

.project__tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 12px;
}

/* ---------- Pricing ---------- */
.price-card { text-align: center; padding: 40px 32px; }

.price-card__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.price-card__amount {
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.price-card__amount span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.price-card__desc {
  color: var(--text-secondary);
  margin-bottom: 28px;
  font-size: 15px;
}

.price-card__list {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}

.price-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.price-card--featured {
  border-color: var(--border-strong);
  background: var(--surface-strong);
  transform: scale(1.02);
}

.price-card--featured::after {
  content: "Most Popular";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}

/* ---------- Contact ---------- */
.contact-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}

.form__field { display: flex; flex-direction: column; gap: 6px; }

.form__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form__field input,
.form__field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  resize: vertical;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.form__field textarea { min-height: 140px; }

/* ---------- Unified Contact Card ----------
   One glass card below the form, composed of rows. Each row is
   (icon · label + value · optional action). Divided by thin rules.
-------------------------------------------------------------- */
.contact-info {
  margin-top: 16px;
}

.contact-card {
  padding: 10px 28px;
  text-align: left;
}

.contact-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* Only actual anchor rows (Email) get the hover lift */
.contact-row--link { cursor: pointer; }
.contact-row--link:hover { color: var(--text); }
.contact-row--link:hover .contact-row__value { color: var(--accent); }
.contact-row--link:hover .contact-row__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.contact-row__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.contact-row__icon svg { width: 20px; height: 20px; }

.contact-row--link:hover .contact-row__icon {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--text);
}

.contact-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;  /* critical: lets the value column shrink/wrap */
}

.contact-row__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.contact-row__value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.35;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  transition: color 0.25s ease;
}

.contact-row__hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

/* Small "24/7" live chip next to the Availability label */
.contact-row__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--text);
}
.contact-row__chip--live {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.35);
  color: #2ecc71;
  letter-spacing: 0.12em;
}

.contact-row__arrow {
  color: var(--text-muted);
  font-size: 18px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
  flex: none;
}

.contact-row__divider {
  border: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.7;
  margin: 0;
}

/* ---------- City pills (Manhattan / Istanbul) ---------- */
.contact-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.contact-city {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.contact-city.is-active {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--text);
}

.contact-city__name {
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
}

.contact-city__status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 999px;
  background: transparent;
}

.contact-city.is-active .contact-city__status {
  color: var(--accent);
  background: var(--accent-glow);
}

/* Shared "live presence" dot — reused on Manhattan. Pulse ring animates
   via box-shadow expanding outward, so the dot itself stays crisp. */
.location-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  position: relative;
  flex: none;
}

.contact-city.is-active .location-dot {
  width: 9px;
  height: 9px;
  background: #2ecc71;
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
  animation: locationPulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes locationPulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-city.is-active .location-dot { animation: none; }
}

/* ---------- Responsive: compact on narrow screens ---------- */
@media (max-width: 640px) {
  .contact-card { padding: 6px 20px; }
  .contact-row {
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    padding: 16px 0;
  }
  .contact-row__icon { width: 40px; height: 40px; border-radius: 12px; }
  .contact-row__icon svg { width: 18px; height: 18px; }
  .contact-row__value { font-size: 15px; }
  .contact-row__hint { font-size: 13px; }
  .contact-cities { gap: 6px; }
}

/* ---------- Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 40px 24px 24px;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ---------- Small screens nav ---------- */
@media (max-width: 640px) {
  .nav {
    top: 12px;
    width: calc(100% - 24px);
    justify-content: center;
  }
  .nav__brand { display: none; }
  .nav__link { padding: 8px 12px; font-size: 13px; }
  main > section {
    padding-top: 100px;
    padding-bottom: 40px;
  }
  main > section:last-child {
    padding-bottom: 80px;
  }
  /* On small screens, snapping can feel fighty when content is tall. Relax it. */
  html { scroll-snap-type: none; }
}

/* ---------- Page fade-in ---------- */
.page {
  animation: pageIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Hero intro — Cluely-style sequential reveal
   Stagger via --i. Total runtime ≤ 2s.
   --i:0 eyebrow → 1 "Crafted with care." → 2 "Built for clarity."
   → 3 subtitle → 4 CTAs
   ============================================ */
.hero__intro {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
  animation: heroIntro 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.28s + 0.05s);
  will-change: opacity, transform, filter;
}

@keyframes heroIntro {
  0%   { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  60%  { filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* Respect users who prefer reduced motion: show instantly */
@media (prefers-reduced-motion: reduce) {
  .hero__intro {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================
   Per-icon hover animations (feature cards)
   Each card has its own unique motion.
   ============================================ */

/* Override the generic .card:hover .card__icon transform for these,
   so each card's bespoke animation can play cleanly. */
.card--design:hover .card__icon,
.card--dev:hover .card__icon,
.card--direction:hover .card__icon {
  transform: none;
}

/* SVG-internal transform origin fix (critical on Chrome/Safari) */
.card--design .card__icon svg *,
.card--dev .card__icon svg *,
.card--direction .card__icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- Design card: the inner "cross" re-draws itself,
        while the outer frame breathes gently. ---- */
.card--design .icon-design-frame {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.card--design .icon-design-cross {
  stroke-dasharray: 36;       /* 18 + 18, total length of both strokes */
  stroke-dashoffset: 0;
}
.card--design:hover .icon-design-frame {
  transform: scale(1.06);
}
.card--design:hover .icon-design-cross {
  animation: designRedraw 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes designRedraw {
  0%   { stroke-dashoffset: 36; opacity: 0.25; }
  60%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 1; }
}

/* ---- Development card: angle brackets split apart, then snap back. ---- */
.card--dev .icon-dev-left,
.card--dev .icon-dev-right {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.card--dev:hover .icon-dev-left {
  animation: devSplitLeft 0.75s cubic-bezier(0.33, 1.4, 0.5, 1);
}
.card--dev:hover .icon-dev-right {
  animation: devSplitRight 0.75s cubic-bezier(0.33, 1.4, 0.5, 1);
}
@keyframes devSplitLeft {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
@keyframes devSplitRight {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* ---- Direction card: star does a full 360° spin with a gentle pulse. ---- */
.card--direction:hover .icon-direction-star {
  animation: directionSpin 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes directionSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(0.82); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Respect reduced-motion for icon hover too */
@media (prefers-reduced-motion: reduce) {
  .card--design:hover .icon-design-cross,
  .card--dev:hover .icon-dev-left,
  .card--dev:hover .icon-dev-right,
  .card--direction:hover .icon-direction-star {
    animation: none;
  }
}

/* ============================================
   Scroll hint — small liquid-glass pill anchored
   at the bottom of the hero to cue the reader to
   scroll. Fades in after the hero intro finishes,
   then bobs gently up and down.
   ============================================ */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 36px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translate(-50%, 10px);
  /* 1) appear once the hero intro has had time to play (~1.6s in)
     2) then bob forever starting after the appear animation finishes */
  animation:
    scrollHintAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards,
    scrollHintBob 2.6s ease-in-out 2.5s infinite;
  transition: color 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
  will-change: transform, opacity;
}

.scroll-hint:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Tiny mouse-style capsule with an animated dot */
.scroll-hint__icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  opacity: 0.9;
  flex: none;
}

.scroll-hint__icon::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollHintDot 1.8s ease-in-out infinite;
}

.scroll-hint__label {
  line-height: 1;
}

@keyframes scrollHintAppear {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Bob keeps the X centering (-50%) intact; only Y moves. */
@keyframes scrollHintBob {
  0%, 100% { transform: translate(-50%, 0);    opacity: 1;   }
  50%      { transform: translate(-50%, -5px); opacity: 0.85; }
}

/* Dot rides down inside the mouse shape, then resets */
@keyframes scrollHintDot {
  0%        { transform: translate(-50%, 0);   opacity: 1;   }
  55%       { transform: translate(-50%, 7px); opacity: 0;   }
  55.01%    { transform: translate(-50%, 0);   opacity: 0;   }
  100%      { transform: translate(-50%, 0);   opacity: 1;   }
}

/* Hide the scroll hint on short viewports where it would overlap content */
@media (max-height: 620px) {
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .scroll-hint__icon::before { animation: none; }
}