/* Inspired by AW-2025 SWork.astro by @aerospike, ported line-for-line from original source to vanilla JS in main.js. AntoineW AW-2025-Portfolio
Source:https://github.com/AntoineW/AW-2025-Portfolio?tab=readme-ov-file  */

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

  :root {
    --bg: #0a0a0a;
    --fg: #f0ede6;
    --accent: #e8d5b0;
    --muted: #333;
    --border: #222;
    --work-bg: #f0ede6;
    --work-fg: #0a0a0a;
    --work-shadow: rgba(10,10,10,0.25);
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Space Mono', monospace;
    overflow-x: hidden;
    cursor: none;
  }

  /* ─── CUSTOM CURSOR ─── */
  #cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    background: var(--fg);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000; /* Higher than any fixed container */
    pointer-events: none;
    transition: transform 0.1s ease, background 0.2s;
    transform: translate(-50%, -50%);
  }
  #cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1px solid rgba(240,237,230,0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease, width 0.2s, height 0.2s, border-color 0.2s;
  }

  /* ─── SCROLLBAR ─── */
  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--muted); }

  /* ─── NAV ─── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2.5rem;
    mix-blend-mode: difference;
  }
  .nav-logo {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
  }
  /* nav-links sits outside nav — positioned to align with nav bar on desktop */
  .nav-links {
    position: fixed;
    top: 0; right: 2.5rem;
    z-index: 101; /* above nav (100) but below cursor (9998) */
    height: 5.5rem;        /* matches nav padding: 1.5rem top + content + 1.5rem bottom */
    display: flex;
    align-items: center;
    gap: 2.5rem;
    mix-blend-mode: difference;  /* match nav's blend mode on desktop */
  }
  .nav-links a {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  .nav-links a:hover { opacity: 1; }

  /* ─── HERO ─── */
  .s-hero {
        position: relative;
        z-index: 5;
        height: 100vh;
        width: 100%; /* Ensures it spans the full width */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background: var(--bg);
    }

  /* ─── DARK VEIL canvas ─── */
  #hero-veil {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .hero-noise { opacity: 0.25; }
  .hero-grid  { opacity: 0.4;  }

  .hero-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
  }
  .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(240,237,230,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(240,237,230,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row; /* Changed from column */
    align-items: center;
    justify-content: center;
    gap: 2rem; /* Space between the tag and the name */
    width: 100%;
    padding: 0 5vw;
  }
  .hero-tag {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0;            /* GSAP animates this in */
    margin-bottom: 2rem;
    animation: none;
  }
.hero-name {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 10rem); /* Slightly smaller to fit horizontally */
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  white-space: nowrap; /* Prevents name from breaking into two lines */
}

/* Ensure individual letters don't stack */
.hero-name span {
  display: inline-block;
  will-change: transform;
}
  .hero-name .thin {
    font-weight: 200;
    color: transparent;
    -webkit-text-stroke: 1px var(--fg);
    opacity: 0.5;
  }

  /* ─── MAGNETIC LETTERS ─── */
  .hero-name {
    /* override display so words stack correctly */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-word {
    display: block;
    white-space: nowrap;
    opacity: 0;            /* GSAP animates each word in — higher specificity needed below */
  }
  /* #hero-name beats .hero-name .thin (specificity 1,1,0 vs 0,2,0)
     so both words are hidden initially regardless of .thin's opacity:0.5 */
  #hero-name .hero-word { opacity: 0; }
  /* Each individual letter span injected by JS */
  .hero-letter {
    display: inline-block;
    will-change: transform;
    /* spring transition is handled entirely by JS for physics accuracy */
    transition: none;
    cursor: none;
  }
  /* While the cursor is near, remove the CSS animation so JS owns it */
  .hero-name.is-magnetic .hero-letter {
    animation: none;
  }

  .hero-subtitle {
    margin-top: 2rem;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    opacity: 0;            /* GSAP animates this in */
    text-transform: uppercase;
    animation: none;
  }
  .hero-scroll {
    position: absolute;
  bottom: 2.5rem;
  left: 50%;
  /* Combine both the centering and the initial animation offset */
  transform: translate(-50%, 20px); 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  opacity: 0; /* Start at 0 for the animation */
  animation: fadeUpScroll 1s 1s forwards;
  pointer-events: none;
  z-index: 10;
    }

  .hero-scroll span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
  .hero-scroll-line {
        width: 1px;
    height: 48px;
    background: var(--fg);
    display: block;
    /* margin: 0 auto; is no longer strictly needed but doesn't hurt */
    animation: scrollLine 1.5s ease-in-out infinite;
    }
  @keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* ─── ABOUT ─── */
  .s-about {
    position: relative;
    z-index: 5; /* above fixed work-inner */
    min-height: 100vh;
    background: var(--bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
  }
  .about-left {
    padding: 8rem 5rem;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about-label {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 3rem;
  }
  .about-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
  }
  .about-title em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 1px var(--fg);
    opacity: 0.5;
  }
  .about-text {
    font-size: 0.8rem;
    line-height: 2;
    opacity: 0.6;
    max-width: 40ch;
  }
  .about-right {
    padding: 8rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
  }
  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
  }
  .stat-num {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-top: 0.5rem;
  }
  .about-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .skill-tag {
    border: 1px solid var(--border);
    padding: 0.4rem 0.9rem;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .skill-tag:hover { opacity: 1; border-color: var(--fg); }

    /* ══════════════════════════════════════════════════
     WORK SECTION — exact port of AW-2025 SWork.astro
  ══════════════════════════════════════════════════ */
  .s-work {
        --height: 100lvh;
        position: relative;
        z-index: 2;
        height: var(--height);
        background: var(--work-bg);
    }
  .s-work::before {
    content: '';
    position: absolute;
    top: 0; left: 0; z-index: 2;
    width: 100%; height: 1px;
    background: var(--work-fg);
  }

  /* s__outer — scrollable height container */
  .s__outer {
    position: relative;
    height: var(--height);
    clip-path: inset(0 -1rem);
  }

  /* s__inner (js-container) — FIXED, always covers the full viewport.
     The sticky .s__mask-outer reveals it via the SVG pill hole (fill-rule:evenodd). */
  .s__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--work-fg);
    color: var(--work-bg);
    transform: translate3d(0, calc(var(--scroll-progress, 0) * -15%), 0);
    will-change: clip-path, transform;
  }
  @media (max-width: 480px) { .s__inner { transform: none; } }

  /* Sticky mask overlay — sits over the fixed inner.
     SVG with fill-rule:evenodd punches a pill-shaped hole, revealing inner below. */
  .s__mask-outer {
    position: sticky;
    top: 0; left: 0;
    width: 100%; height: 100lvh;
    overflow: hidden;
    pointer-events: none;
  }
  .s__mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    will-change: scale, transform;
  }
  .s__mask__svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  .s__mask__path-outer {
    fill: var(--work-bg);
    fill-rule: evenodd;
    stroke: var(--work-fg);
    stroke-width: 1px;
  }
  .s__mask__path-inner {
    fill: var(--work-bg);
    fill-rule: evenodd;
    stroke: var(--work-fg);
    stroke-width: 1px;
    transform: translate3d(0, calc(var(--scroll-progress, 0) * 48px), 0);
    will-change: transform;
  }
  .s__mask__path-inner, .s__mask__path-outer {
        vector-effect: non-scaling-stroke;
    }
  .s__mask__path-lines {
    fill: none;
    stroke: var(--work-fg);
    stroke-width: 1px;
    opacity: 0.12;
  }

  /* Ruler — invisible element whose bounding rect defines pill geometry in JS */
  .s__ruler {
    --width: min(16.6667%, 19.625rem);
    position: absolute;
    top: 10lvh;
    left: calc(50% - var(--width) / 2);
    width: var(--width);
    height: 80lvh;
    pointer-events: none;
    opacity: 0;
  }
  @media (max-width: 1024px) { .s__ruler { --width: 33.3333%; } }
  @media (max-width: 480px)  { .s__ruler { --width: 50%; } }

  /* Title — invisible, used only for letter getBoundingClientRect in JS */
  .s__title,
  .s__scene {
    font: 700 min(18.75rem, 25lvh) / 1 'Unbounded', sans-serif;
    text-align: center;
    text-transform: uppercase;
  }
  .s__title__inner,
  .s__scene__letter {
    line-height: 0.85;
  }
  .s__title {
    width: 0.7em;
    opacity: 0;
    word-break: break-all;
  }
  .s__title__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.075em 0 -0.125em;
  }

  /* Scene — contains ghost letters + a-work cards */
  .s__scene {
    --shadow: rgba(10,10,10,0.3);
    --progress: 0.5;
    --state: 0;
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    width: 100%; height: 100%;
    perspective: 40rem;
    will-change: transform;
  }

  /* Ghost letter spans — JS only sets --progress; CSS derives --head and --ahead */
  .s__scene__letter {
    --head:  calc((var(--progress) - 0.5) * -2);
    --ahead: calc(var(--head) * var(--head));
    position: absolute;
    top: 0; left: 0;
    display: block;
    pointer-events: none;
    will-change: transform;
    transform:
      rotateY(calc(var(--head) * -10deg * var(--state)))
      translate3d(
        calc(var(--head) * 50vw * var(--state)),
        calc(var(--iy) * 50% * var(--ahead) * var(--state)),
        0
      );
  }

  

  .s__scene__letter::before {
    content: attr(data-letter);
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
    color: var(--shadow);
    opacity: min(calc(var(--state) * 2), 1);
    transform:
      scale(1.05, 1.02)
      translate3d(calc(var(--head) * 0.1rem * var(--state) * var(--state)), 0, 0);
    transform-origin: calc(50% - var(--head) * 50%) -50%;
    will-change: opacity, transform;
  }

  /* a-work custom element */
  a-work {
    position: relative;
    top: 0; left: 0;
    display: block;
    margin: 0;
    padding: 0.5rem 0.5rem 0;
    background: var(--work-fg);
    transform-style: preserve-3d;
    will-change: transform;
  }
  @media (max-width: 480px) { a-work { padding: 0.25rem; } }
  a-work a { display: block; text-decoration: none; }
  a-work .a__inner { display: block; margin: 0; padding: 0; }

  /* Placeholder card visuals (stand-in for real video) */
  .a__media-container {
    display: block;
    width: 100%;
    line-height: 0;
  }
  .a__placeholder {
    display: block;
    width: 100%;
    max-width: 70vw;
    height: auto;
    aspect-ratio: 1082 / 636;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 480px) { .a__placeholder { max-width: 92vw; } }
  .a__placeholder-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }
  .a__placeholder-title {
    font: 700 clamp(0.6rem, 3vw, 0.85rem) / 1 'Unbounded', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .a__placeholder-cat {
    font: 400 clamp(0.5rem, 1.5vw, 0.6rem) / 1 'Space Mono', monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .a__placeholder::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 50%, transparent);
    animation: shimmer 2.4s ease-in-out infinite;
  }
  @keyframes shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
  }

  /* Caption below each card */
  .a__caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    color: var(--work-bg);
    font: 700 11px / 1 'Space Mono', monospace;
    letter-spacing: 0.15em;
    text-align: right;
    text-transform: uppercase;
  }
  @media (max-width: 480px) { .a__caption { display: none; } }

  /* Work card 3-D position — driven by --progress, --y, --size CSS vars */
  .s__scene__work {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 2;
    will-change: transform;
    transform:
      rotateY(calc(var(--progress) * -20deg))
      translate3d(
        calc(var(--progress) * (50vw + 100%) - 50%),
        calc(var(--y) * 50% - 50%),
        calc(var(--progress) * var(--progress) * -5rem)
      )
      scale(var(--size));
  }
  /* ── Tablet landscape (≤1024px, not portrait phone) ── */
  @media (max-width: 1024px) and (min-width: 769px) {
    .s__scene__work {
      transform:
        rotateY(calc(var(--progress) * -20deg))
        translate3d(
          calc(var(--progress) * (50vw + 100%) - 50%),
          calc(var(--y) * 50% - 50%),
          calc(var(--progress) * var(--progress) * -5rem)
        );
    }
  }

  /* Dot-grid canvas */
  .s__canvas {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    width: 100%; height: 100%;
    transform: translate3d(0, calc(var(--scroll-progress, 0) * -5%), 0);
  }
  @media (max-width: 480px) { .s__canvas { transform: none; } }

/* ─── CTA / CONTACT ─── */
  .s-contact {
    position: relative;
    z-index: 5; /* above fixed work-inner */
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 1px solid var(--border);
    padding: 8rem 2rem;
  }
  .contact-label {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 3rem;
    animation: fadeUp 0.8s both;
  }
  .contact-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 10vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 4rem;
  }
  .contact-title .outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--fg);
    opacity: 0.4;
  }
  .contact-email {
    font-size: clamp(0.75rem, 2vw, 1.1rem);
    letter-spacing: 0.1em;
    opacity: 0.6;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid rgba(240,237,230,0.2);
    padding-bottom: 0.25rem;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .contact-email:hover { opacity: 1; border-color: var(--fg); }

  /* FOOTER */
  footer {
    position: relative;
    z-index: 5;
    border-top: 1px solid var(--border);
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.4;
  }


  /* ─── MUSIC BUTTON ─── */
  /* ─── MUSIC BUTTON — Apple Liquid Glass ─── */
  #music-btn {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem 0.55rem 0.7rem;
    cursor: none;
    user-select: none;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.92);
    font: 500 0.68rem / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.01em;

    /* Glass pill shape */
    border-radius: 100px;

    /* Layered glass background — mimics Apple visionOS / iOS blur pill */
    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0.10) 100%
      );
    backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);

    /* Inner highlight rim — the key Apple glass tell */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),   /* top specular rim    */
      inset 0 -1px 0 rgba(255,255,255,0.08),  /* bottom inner shadow */
      inset 0 0 0 0.5px rgba(255,255,255,0.18), /* full border         */
      0 8px 32px rgba(0,0,0,0.35),             /* outer shadow        */
      0 2px 8px  rgba(0,0,0,0.20);

    transition:
      box-shadow 0.25s ease,
      background 0.25s ease,
      transform   0.15s ease;
  }

  /* Hover — brighter, lifts slightly */
  #music-btn:hover {
    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.16) 100%
      );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.70),
      inset 0 -1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 0.5px rgba(255,255,255,0.28),
      0 12px 40px rgba(0,0,0,0.40),
      0 2px 10px  rgba(0,0,0,0.22);
    transform: translateX(-50%) translateY(-1px);
  }

  /* Active press — sinks */
  #music-btn:active {
    transform: translateX(-50%) translateY(0px) scale(0.97);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      inset 0 0 0 0.5px rgba(255,255,255,0.15),
      0 4px 16px rgba(0,0,0,0.28);
  }

  /* Playing state — subtle warm glow */
  #music-btn.is-playing {
    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,0.26) 0%,
        rgba(255,255,255,0.08) 40%,
        rgba(180,220,255,0.15) 100%
      );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.60),
      inset 0 -1px 0 rgba(255,255,255,0.08),
      inset 0 0 0 0.5px rgba(255,255,255,0.22),
      0 8px 32px rgba(0,0,0,0.35),
      0 0 20px rgba(160,200,255,0.18);
  }

  /* ── Icon wrapper ── */
  .music-icon {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Frosted glass disc behind icon */
    background: rgba(255,255,255,0.14);
    border-radius: 50%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      inset 0 0 0 0.5px rgba(255,255,255,0.15);
    transition: background 0.25s;
  }
  #music-btn:hover .music-icon {
    background: rgba(255,255,255,0.22);
  }
  .music-icon svg {
    width: 15px;
    height: 15px;
    display: block;
  }

  /* Spinning disc while playing */
  #music-btn.is-playing .music-disc {
    animation: discSpin 3s linear infinite;
    transform-origin: 50% 50%;
  }
  @keyframes discSpin {
    to { transform: rotate(360deg); }
  }

  /* ── Waveform bars ── */
  .music-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #music-btn.is-playing .music-bars { opacity: 1; }

  .music-bar {
    width: 2px;
    height: 3px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
  }
  #music-btn.is-playing .music-bar:nth-child(1) { animation: bar1 0.9s ease-in-out infinite; }
  #music-btn.is-playing .music-bar:nth-child(2) { animation: bar2 0.7s ease-in-out infinite 0.15s; }
  #music-btn.is-playing .music-bar:nth-child(3) { animation: bar3 1.1s ease-in-out infinite 0.05s; }
  #music-btn.is-playing .music-bar:nth-child(4) { animation: bar4 0.8s ease-in-out infinite 0.25s; }
  #music-btn.is-playing .music-bar:nth-child(5) { animation: bar5 1.0s ease-in-out infinite 0.1s; }
  @keyframes bar1 { 0%,100%{height:3px}  50%{height:12px} }
  @keyframes bar2 { 0%,100%{height:6px}  50%{height:14px} }
  @keyframes bar3 { 0%,100%{height:8px}  50%{height:4px}  }
  @keyframes bar4 { 0%,100%{height:4px}  50%{height:11px} }
  @keyframes bar5 { 0%,100%{height:9px}  50%{height:3px}  }

  /* ── Label ── */
  .music-label {
    font: 500 0.68rem / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.90);
    transition: opacity 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeUpScroll {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 0.4;
    transform: translate(-50%, 0);
  }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE & TOUCH
   Breakpoints: 1024 · 768 · 480 · 390
══════════════════════════════════════════════════ */

/* ── Touch: hide custom cursor entirely ── */
@media (hover: none), (pointer: coarse) {
  #cursor, #cursor-ring { display: none !important; }
  body { cursor: auto; }
  a, button, .skill-tag, .hero-letter { cursor: auto; }
  #music-btn { cursor: pointer; }
}

/* ── Hamburger toggle button (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 600;            /* above overlay */
  position: fixed;
  top: 1.75rem;
  right: 1.5rem;
  transform: translateY(-50%);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.77,0,.18,1),
              opacity   0.25s ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* When the fullscreen menu is open, lift nav out of its blend-mode
   isolation so the hamburger X is readable over the dark overlay. */
nav.menu-open {
  mix-blend-mode: normal;
  z-index: 599;
}
nav.menu-open .nav-logo { color: var(--fg); }

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .about-left  { padding: 6rem 3.5rem; }
  .about-right { padding: 6rem 3.5rem; }
  .stat-num    { font-size: 2.8rem; }
}

/* ══════════════════════════════════════════════════
   ≤ 768px — Hamburger kicks in, single-column layout
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav bar */
  nav { padding: 1.25rem 1.5rem; }

  /* Show hamburger; hide the inline links */
  .nav-toggle { display: flex; }

  /* Fullscreen overlay — sits outside nav so blend mode is irrelevant */
  .nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    mix-blend-mode: normal;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links a {
    font-size: 1.15rem;
    letter-spacing: 0.3em;
    opacity: 0.8;
    color: var(--fg);
    text-transform: uppercase;
    transition: opacity 0.2s;
  }
  .nav-links a:hover { opacity: 1; }

  /* Hero — switch to column layout */
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 2rem;
    gap: 0;
  }
  .hero-tag {
    font-size: 0.58rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.25em;
  }
  .hero-name {
    font-size: clamp(3rem, 13vw, 6rem);
    white-space: normal;
    align-items: center;
    line-height: 1;
    gap: 0;
  }
  .hero-word { white-space: nowrap; }
  .hero-subtitle {
    margin-top: 1.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }

  /* About — single column */
  .s-about { grid-template-columns: 1fr; }
  .about-left {
    padding: 5rem 2.5rem 3rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .about-right { padding: 3rem 2.5rem 5rem; }
  .about-title { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .about-text  { font-size: 0.78rem; }
  .stat-num    { font-size: 2.5rem; }

  /* Contact */
  .s-contact { padding: 6rem 2rem; }
  .contact-title { font-size: clamp(2.5rem, 10vw, 6rem); }

  /* Footer */
  footer {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    padding: 2rem 1.5rem;
  }
}

/* ── Small phone (≤ 480px) ── */
@media (max-width: 480px) {
  nav { padding: 1rem 1.25rem; }

  .hero-content { padding: 0 1.5rem; }
  .hero-tag     { font-size: 0.52rem; letter-spacing: 0.2em; }
  .hero-name    { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .hero-subtitle { font-size: 0.62rem; letter-spacing: 0.16em; }

  .about-left  { padding: 4rem 1.5rem 2.5rem; }
  .about-right { padding: 2.5rem 1.5rem 4rem; }
  .about-title { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .about-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .stat-num    { font-size: 2.2rem; }
  .stat-label  { font-size: 0.55rem; }

  .s-contact   { padding: 5rem 1.5rem; }
  .contact-title {
    font-size: clamp(2.2rem, 13vw, 4rem);
    margin-bottom: 2.5rem;
  }
  .contact-label { font-size: 0.55rem; margin-bottom: 2rem; }

  footer { padding: 1.75rem 1.25rem; font-size: 0.55rem; }

  #music-btn { bottom: 1.25rem; }

  .nav-links { gap: 2rem; }
  .nav-links a { font-size: 1rem; }
}

/* ── Very small (≤ 390px) ── */
@media (max-width: 390px) {
  .hero-name    { font-size: clamp(2.2rem, 13vw, 3rem); }
  .about-stats  { grid-template-columns: 1fr; gap: 1.25rem; }
  .contact-title { font-size: clamp(1.9rem, 13vw, 3rem); }
}

/* ── Work section — iPhone mini / SE (≤390px) ── */
/* These are handled by the ≤768px mobile block below */

/* ================================================================
   MOBILE WORK SECTION ≤ 768px — desktop-parity carousel

   KEY: .s-work and .s__outer heights have NO !important
        so JS can set them via inline style (e.g. 1800vh).
        Every other rule uses !important to beat the desktop styles.
================================================================ */
@media (max-width: 768px) {

  /* height set by JS — intentionally no !important */
  .s-work  { height: auto; z-index: 3 !important; background: var(--work-fg); }
  .s__outer { clip-path: none !important; overflow: visible !important; height: auto; }

  /* ── Sticky full-viewport dark stage ── */
  .s__inner {
    position:        sticky !important;
    top:             0 !important;
    left:            0 !important;
    width:           100vw !important;
    height:          100dvh !important;
    background:      var(--work-fg) !important;
    overflow:        hidden !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transform:       none !important;
    will-change:     clip-path !important;
    /* GSAP opens this pill shape as user scrolls in */
    clip-path: inset(30% 20% round 50%);
  }

  /* SVG mask replaced by clip-path on s__inner */
  .s__mask-outer { display: none !important; }

  /* ── Ghost WORK letters ── */
  .s__scene__letter {
    display: block !important;
    opacity: 0.055 !important;
    color:   var(--work-bg) !important;
    pointer-events: none !important;
  }
  .s__scene__letter::before { opacity: 0 !important; }

  /* ── Dot-grid canvas ── */
  .s__canvas { display: block !important; opacity: 0.25 !important; transform: none; }

  /* ── Enormous ghost WORK title ── */
  .s__title {
    opacity: 1 !important; position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important; text-align: center !important;
    pointer-events: none !important; z-index: 1 !important;
  }
  .s__title__inner {
    flex-direction: row !important;
    font-size: clamp(4rem, 28vw, 8rem) !important;
    justify-content: center !important;
    letter-spacing: 0.04em !important;
    opacity: 0.065 !important;
    margin: 0 !important;
    color: var(--work-bg) !important;
  }

  /* ── Scene: perspective enables card 3-D tilt ── */
  .s__scene {
    position: absolute !important; inset: 0 !important;
    display: block !important; width: 100% !important; height: 100% !important;
    overflow: hidden !important; perspective: 900px !important; z-index: 2 !important;
  }

  /* ── Cards: centred, driven by --card-x / --card-ry / --card-opacity ── */
  .s__scene__work {
    position:  absolute !important;
    top:       50% !important;
    left:      50% !important;
    width:     88vw !important;
    max-width: 400px !important;
    z-index:   3 !important;
    transform:
      translateX(calc(-50% + var(--card-x, 110vw)))
      translateY(-50%)
      rotateY(var(--card-ry, 18deg)) !important;
    opacity:     var(--card-opacity, 0) !important;
    will-change: transform, opacity !important;
  }

  a-work { display: block !important; padding: 0 !important; background: transparent !important; }
  a-work .a__inner    { width: 100%; }
  .a__media-container { width: 100% !important; }
  .a__placeholder {
    width: 100% !important; max-width: 100% !important;
    aspect-ratio: 16 / 10 !important; height: auto !important;
  }
  .a__placeholder-title {
    font: 700 clamp(0.75rem, 4.5vw, 1.05rem) / 1.1 'Unbounded', sans-serif !important;
    letter-spacing: 0.08em;
  }
  .a__placeholder-cat  { font-size: clamp(0.55rem, 2.8vw, 0.72rem) !important; }
  .a__caption {
    display: flex !important; padding: 0.45rem 0 0 !important;
    font-size: 0.55rem !important; color: var(--work-bg) !important;
    letter-spacing: 0.12em !important; opacity: 0.65 !important;
  }

  /* ── Counter "03 / 16" ── */
  .m-counter {
    position: absolute; bottom: 3.6rem; left: 50%; transform: translateX(-50%);
    z-index: 10; font: 700 0.58rem / 1 'Space Mono', monospace;
    letter-spacing: 0.22em; color: var(--work-bg); opacity: 0.45;
    pointer-events: none; white-space: nowrap;
  }

  /* ── Thin progress bar ── */
  .m-progress-wrap {
    position: absolute; bottom: 2.7rem; left: 50%; transform: translateX(-50%);
    width: 72px; height: 1px; background: rgba(240,237,230,0.15);
    z-index: 10; overflow: hidden; pointer-events: none;
  }
  .m-progress-bar {
    width: 100%; height: 100%; background: var(--work-bg);
    transform-origin: left center; transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.33,1,0.68,1); opacity: 0.8;
  }
}

/* ── 390px ── */
@media (max-width: 390px) {
  .hero-name     { font-size: clamp(2.2rem, 13vw, 3rem); }
  .about-stats   { grid-template-columns: 1fr; gap: 1.25rem; }
  .contact-title { font-size: clamp(1.9rem, 13vw, 3rem); }
  .s__scene__work { width: 92vw !important; }
}

/* ── 320px (iPhone 5) ── */
@media (max-width: 320px) {
  nav { padding: 0.9rem 1rem; } .nav-logo { font-size: 0.65rem; }
  .hero-content { padding: 0 1rem; } .hero-name { font-size: clamp(2rem, 14vw, 2.6rem); }
  .hero-subtitle { font-size: 0.55rem; margin-top: 1rem; }
  .about-left { padding: 3.5rem 1rem 2rem; } .about-right { padding: 2rem 1rem 3.5rem; }
  .about-title { font-size: clamp(1.4rem, 10vw, 2rem); } .stat-num { font-size: 1.8rem; }
  .s-contact { padding: 4rem 1rem; }
  .contact-title { font-size: clamp(1.7rem, 13vw, 2.5rem); margin-bottom: 2rem; }
  footer { padding: 1.5rem 1rem; font-size: 0.5rem; } #music-btn { bottom: 1rem; }
  .s__scene__work { width: 93vw !important; }
}

/* ── Mobile work scroll hint — sits between About and Work ── */
.m-work-hint {
  display: none;              /* invisible on desktop */
}

@media (max-width: 768px) {
  .m-work-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    background: var(--bg);   /* matches the dark page background */
    border-top: 1px solid var(--border);
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  .m-work-hint.hidden { opacity: 0; }

  .m-work-hint-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    opacity: 0.35;
  }

  /* Thin animated line pointing down */
  .m-work-hint-arrow {
    width: 1px;
    height: 28px;
    background: var(--fg);
    opacity: 0.18;
    animation: workHintDrop 1.8s ease-in-out infinite;
    transform-origin: top center;
  }
  @keyframes workHintDrop {
    0%   { transform: scaleY(0.4) translateY(-8px); opacity: 0.1; }
    60%  { transform: scaleY(1.0) translateY(0px);  opacity: 0.4; }
    100% { transform: scaleY(0.4) translateY(6px);  opacity: 0.1; }
  }
}