/* ════════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * Mobile + tablet refinements. Loaded last so it overrides the desktop rules.
 * Breakpoints:
 *   ≤ 900px → tablet portrait + landscape phones
 *   ≤ 600px → phones
 *   ≤ 380px → small phones
 *   pointer:coarse → drop heavy hover-only effects on touch devices
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ─────────── ≤ 900px (tablets + landscape phones) ─────────── */
@media (max-width: 900px){
  /* Hero column-stack — quote above social button */
  .hero-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  /* Zappa quote: allow wrapping, scale down */
  .hero-quote-text{
    white-space:normal;
    font-size:clamp(22px,5vw,38px);
    line-height:1.2;
  }
  /* Social menu — fits within hero-l padding */
  .social-menu{
    min-width:220px;
    max-width:calc(100vw - 80px);
  }

  /* Section paddings — taller sections become reasonable on mobile */
  .sanborn-section{padding:120px 24px;}
  .quote-section{padding:100px 24px;}
  .contact-section{padding:100px 24px;}

  /* Hero name scales naturally via clamp; force smaller on tablet */
  .hero-name{font-size:clamp(64px,12vw,140px);}

  /* Single block — cover/info stack */
  .single-info{padding:32px 28px;}
  .single-info h3{font-size:clamp(36px,7vw,60px);}

  /* Bio readability */
  .bio-grid{gap:40px;}
  .collab-card{padding:24px;}

  /* Footer wraps tighter */
  footer{padding:24px;flex-direction:column;text-align:center;gap:6px;}
}

/* ─────────── ≤ 600px (phones) ─────────── */
@media (max-width: 600px){
  /* Nav — only logo + lang + Contact, no middle links (already hidden at 900px) */
  nav{padding:10px 14px;top:10px;left:10px;right:10px;gap:8px;}
  .brand{font-size:11px;}
  .brand sup{display:none;}
  /* Bigger touch targets */
  .lang-btn{padding:10px 12px;font-size:11px;min-height:40px;}
  .cta-btn{padding:10px 16px;font-size:12px;min-height:40px;}

  /* Hero spacing tightens */
  .hero{padding-top:80px;}
  .hero-l{padding:36px 24px;}
  .hero-name{font-size:clamp(56px,14vw,108px);}
  .hero-coord{font-size:10px;}
  .hero-name-block{padding:28px 0;}

  /* Zappa quote tighter */
  .hero-quote-text{font-size:clamp(20px,5.5vw,32px);}

  /* Social button — full bouton width on small phones for easier tap */
  .social-btn{padding:14px 22px;font-size:12px;min-height:48px;}

  /* Audio toggle — slightly smaller, still tap-friendly */
  .audio-toggle{bottom:16px;right:16px;padding:9px 13px 9px 11px;font-size:10px;}

  /* Section reset — uniform compact padding */
  section{padding:60px 20px !important;}
  .sanborn-section{padding:80px 20px !important;}

  /* Section titles smaller */
  .sec-title{font-size:clamp(40px,11vw,72px);margin-bottom:36px;}
  .sec-title em{font-size:inherit;}

  /* Music single — full stack with comfortable spacing */
  .single-block{border-radius:0 0 16px 0;}
  .single-info{padding:24px 20px;}
  .single-info h3{font-size:clamp(32px,8vw,52px);}
  .single-feat{font-size:9px;gap:10px;}
  .platforms a{padding:10px 14px;font-size:9px;min-height:40px;}

  /* Quote section */
  .q-text{font-size:clamp(32px,9vw,72px);}
  .quote-grid{gap:24px;}

  /* Tests — single column with tighter padding */
  .tcard{padding:32px 24px;}
  .tcard-name{font-size:24px;}
  .tcard-num{font-size:36px;}
  .tcard-quote{font-size:15px;}

  /* Bio */
  .bio-text p{font-size:14px;line-height:1.7;}
  .bio-more{padding:10px 14px;min-height:40px;}
  .collab-name{font-size:18px;}
  .collab-card{padding:20px;border-radius:0 16px 16px 0;}

  /* Live section */
  .live-section{padding:80px 20px 100px !important;}
  .live-h2{font-size:clamp(40px,9vw,68px);}
  .live-city{font-size:clamp(32px,8vw,56px);}
  .live-canvas-wrap{max-width:300px;}
  .live-glow{inset:-20px;}
  .live-session-block{margin-bottom:60px;}

  /* Live video frame — smaller play button on small screens */
  .live-video-play{width:64px;height:64px;font-size:22px;}

  /* Shows */
  .shows-block{padding:32px 24px;}

  /* Contact — wider form, tighter padding */
  .contact-text-big{font-size:clamp(40px,12vw,72px);margin-bottom:18px;}
  .contact-form input,.contact-form textarea{padding:14px 18px;font-size:14px;min-height:48px;}
  .contact-form textarea{min-height:120px;}
  .contact-form button{padding:16px 20px;font-size:11px;min-height:52px;}

  /* Sanborn dedication — readable on mobile */
  .sanborn-quote{font-size:clamp(22px,6vw,40px);line-height:1.4;}
  .sanborn-meta{font-size:10px;letter-spacing:.2em;}
  .sanborn-attrib{font-size:11px;}

  /* Hero stamp — smaller pill */
  .hero-stamp{font-size:9px;padding:6px 10px;top:14px;right:14px;}
  .hero-photo-tag{bottom:14px;left:18px;right:18px;padding:10px 14px;}
  .hero-photo-tag b{font-size:13px;}
}

/* ─────────── ≤ 380px (small phones) ─────────── */
@media (max-width: 380px){
  .hero-name{font-size:clamp(48px,15vw,76px);}
  .hero-quote-text{font-size:18px;}
  .sec-title{font-size:clamp(36px,12vw,56px);}
  .audio-toggle{font-size:9px;padding:8px 12px;}
}

/* ─────────── pointer:coarse — disable heavy effects on touch devices ─────────── */
@media (pointer:coarse){
  /* Title flash sweep + jitter every 15s — pretty on desktop, distracting on mobile */
  .sec-title.in::before,
  .live-h2::before,
  .contact-text-big::before{display:none;}
  .sec-title.in,
  .live-h2,
  .contact-text-big{animation:none;}

  /* Magnet effect on cards — needs precise mouse tracking, no value on touch */
  .magnet{transform:none !important;transition:none !important;}

  /* Reduce blur filters that hammer the GPU */
  .grain-bg::after{display:none;}

  /* Disable 3D parallax on hero photo — saves a RAF loop */
  .hero-img{transform:none !important;}
}

/* ─────────── reduced motion preference ─────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Keep gradients but stop their movement */
  .hero-quote-text em,
  .sec-title em,
  .live-h2 em,
  .contact-text-big em,
  .q-text em{animation:none !important;}
}

/* ─────────── Mobile hamburger menu ───────────
   Clean two-column layout on mobile: brand (left) + burger (right).
   The lang dropdown and Contact CTA move INTO the drawer so they don't
   compete with the burger for nav space. The drawer is a true fullscreen
   overlay above the nav, with a top bar (brand + close) and a vertical
   stack of links + a language row at the bottom. */

/* Hidden by default (desktop) */
.nav-burger{display:none;}

@media (max-width:900px){
  /* Nav becomes: brand | (flexible empty space) | lang | burger.
     CRITICAL three things to neutralise on mobile so the drawer can break
     out of the nav and fill the viewport:
       1. backdrop-filter — creates a containing block for fixed descendants
       2. animation with `transform` in keyframes — same problem (transform
          on the ancestor creates a containing block during/after animation)
       3. Any will-change or contain that could trigger compositing layers */
  nav,nav.glass-strong{
    grid-template-columns:auto 1fr auto auto;
    gap:10px;
    padding:12px 16px;
    align-items:center;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(5,5,6,.82);
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
    contain:none !important;
    filter:none !important;
  }
  /* Explicit column placement so the 1fr slot stays as empty centre space */
  .brand     {grid-column:1;}
  .nav-right {grid-column:3;}
  .nav-burger{grid-column:4;}
  /* Keep the language switcher visible in the bar (it's compact);
     hide the Contact CTA since it lives in the drawer */
  .nav-right{display:flex;align-items:center;gap:8px;margin:0;}
  .nav-right .cta-btn{display:none;}

  /* Burger button — sits in the right cell of the nav grid */
  .nav-burger{
    display:flex;flex-direction:column;justify-content:space-between;
    width:32px;height:22px;
    background:transparent;border:none;cursor:pointer;
    padding:5px 0;
    z-index:120;            /* always above the drawer */
    position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger span{
    display:block;height:1.5px;width:100%;
    background:var(--paper);
    transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s,background .25s;
    transform-origin:center;
    pointer-events:none;
  }
  /* Burger → X transition when the drawer is open */
  nav.nav-open .nav-burger span{background:var(--periwinkle);}
  nav.nav-open .nav-burger span:nth-child(1){transform:translateY(8.5px) rotate(45deg);}
  nav.nav-open .nav-burger span:nth-child(2){opacity:0;transform:scaleX(0);}
  nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);}

  /* Drawer — true fullscreen overlay above everything except the burger.
     Sized so all 6 menu items fit in a single viewport (no scroll needed). */
  .nav-mid{
    display:flex !important;
    position:fixed;inset:0;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:0;
    padding:64px 24px 24px;   /* top clears the nav, bottom snug */
    background:rgba(2,2,3,.92);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    z-index:100;
    opacity:0;pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav.nav-open .nav-mid{opacity:1;pointer-events:auto;transform:translateY(0);}

  /* Subtle decorative accent — gradient halo behind the links */
  .nav-mid::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 60% 50% at 50% 35%, rgba(94,106,210,.18), transparent 70%),
      radial-gradient(ellipse 70% 40% at 50% 80%, rgba(124,58,237,.14), transparent 70%);
  }

  /* Each link — readable row, full-width tap target, sized so the
     full set of 6 fits without scrolling on iPhone SE (568px). */
  .nav-mid a{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-size:17px;font-weight:500;letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--paper);
    text-decoration:none;
    padding:14px 24px;
    border-bottom:1px solid var(--rule);
    transition:color .25s cubic-bezier(.16,1,.3,1),
               letter-spacing .25s cubic-bezier(.16,1,.3,1),
               background .25s cubic-bezier(.16,1,.3,1),
               transform .35s cubic-bezier(.16,1,.3,1);
    /* Initial state — slight slide-in from below when drawer opens */
    opacity:0;transform:translateY(12px);
    flex-shrink:0;            /* keep height predictable when stacked */
  }
  nav.nav-open .nav-mid a{opacity:1;transform:translateY(0);}
  /* Cascading reveal — 50ms between rows */
  nav.nav-open .nav-mid a:nth-child(1){transition-delay:.10s;}
  nav.nav-open .nav-mid a:nth-child(2){transition-delay:.15s;}
  nav.nav-open .nav-mid a:nth-child(3){transition-delay:.20s;}
  nav.nav-open .nav-mid a:nth-child(4){transition-delay:.25s;}
  nav.nav-open .nav-mid a:nth-child(5){transition-delay:.30s;}
  nav.nav-open .nav-mid a:nth-child(6){transition-delay:.35s;}
  /* Last link — accent it (Contact, the action) */
  .nav-mid a:last-child{
    color:var(--periwinkle);
    border-bottom:none;
    margin-top:8px;
    background:linear-gradient(90deg,rgba(94,106,210,.10),rgba(124,58,237,.08));
    border-radius:0 12px 12px 0;
  }
  .nav-mid a:hover,
  .nav-mid a:active{
    color:var(--periwinkle);
    letter-spacing:.26em;
    background:rgba(94,106,210,.10);
  }
  .nav-mid a:last-child:hover{
    color:var(--paper);
    background:linear-gradient(90deg,var(--indigo),var(--violet));
  }

  /* Lock body scroll while the drawer is open */
  body.nav-open-lock{overflow:hidden;position:fixed;width:100%;}
}

/* Phone-specific drawer tightening — keep all 6 links visible without scroll */
@media (max-width:600px){
  .nav-mid{padding:60px 20px 20px;}
  .nav-mid a{font-size:15px;padding:13px 18px;letter-spacing:.18em;}
  .nav-mid a:hover,.nav-mid a:active{letter-spacing:.22em;}
  .nav-mid a:last-child{margin-top:6px;}
}

/* Ultra-small phones (iPhone SE 320×568, etc.) — even tighter */
@media (max-width:380px), (max-height:600px){
  .nav-mid{padding:54px 16px 16px;}
  .nav-mid a{font-size:14px;padding:11px 16px;letter-spacing:.16em;}
  .nav-mid a:last-child{margin-top:4px;}
}

/* Landscape phones (very limited height) — make rows even shorter */
@media (max-width:900px) and (max-height:500px){
  .nav-mid{padding:48px 24px 12px;}
  .nav-mid a{font-size:13px;padding:9px 16px;letter-spacing:.14em;}
}

/* ════════════════════════════════════════════════════════════════════════════
   PERFORMANCE — reduce GPU/paint cost on lower-end machines
   ════════════════════════════════════════════════════════════════════════════ */

/* Skip rendering offscreen sections until the user scrolls near them.
   `contain-intrinsic-size` provides a placeholder height so scroll position
   is preserved while paint is deferred. Huge win on long pages. */
#bio,
#shows,
#contact,
#live,
.sanborn-section,
.quote-section{
  content-visibility:auto;
  contain-intrinsic-size:0 1200px;
}

/* Cap GPU-intensive backdrop-filter blurs — blur(40px) costs ~5x blur(16px) */
.glass-strong{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);}
.glass{backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);}

/* Drifting violet blobs — filter:blur(100px) is the single most expensive
   paint operation on the page. Drop to 60px (still soft) and reduce opacity
   slightly so the visual weight stays similar. */
.blob{filter:blur(60px);opacity:.4;}
.blob-3{opacity:.22;}

/* Tone down the second-pass dot grain on lower-perf devices */
.grain-bg{opacity:.42;}

/* ─── Pause heavy CSS animations when their host section is scrolled offscreen.
   The `body.scroll-paused-X` classes are added by JS via IntersectionObserver. */
body.sec-music-off  #music *,
body.sec-words-off  #words *,
body.sec-bio-off    #bio   *,
body.sec-live-off   #live  *,
body.sec-shows-off  #shows *,
body.sec-contact-off #contact *,
body.sanborn-off    .sanborn-section *{
  animation-play-state:paused !important;
}

/* Devices that flag low GPU: turn off the shimmer animation (infinite, runs even
   offscreen). The text keeps its gradient — just no animated background-position. */
@media (max-resolution: 1.5dppx) and (max-width: 1280px), (pointer:coarse){
  .hero-quote-text em,
  .sec-title em,
  .live-h2 em,
  .contact-text-big em,
  .q-text em,
  .live-city .city-name,
  .single-info h3 em,
  .bio-text em,
  .tcard-num,
  .scroll-bar,
  .platforms a.primary,
  .hero-listen a:first-child,
  .contact-form button,
  .hero-stamp,
  .single-cover-tag,
  .cta-btn,
  .social-btn{
    animation:none !important;
    background-size:100% 100% !important;
  }

  /* Hero photo — drop animated overlays that no one notices on a small or low-fps screen */
  .hero-color-wash,
  .hero-photo-grain,
  .hero-scan,
  .hero-vig{display:none !important;}

  /* Stop the infinite wave animation stack — keep the gradient as static */
  .wave-bg,.wave-bg::before{animation:none !important;}

  /* Drop the second grain layer (radial-gradient dots) entirely */
  .grain-bg::after{display:none !important;}
}

/* ════════════════════════════════════════════════════════════════════════════
   NATIVE CURSOR — kill the custom brutalist cursor entirely.
   Re-enables the OS arrow / I-beam / pointer / etc. and stops the RAF loop
   that was tracking mouse position. Also a small perf win: no more two
   layered DOM elements being repainted on every mousemove.
   ════════════════════════════════════════════════════════════════════════════ */
html,html *{cursor:auto !important;}
a,button,[role="button"],.audio-toggle,.lang-opt,.social-btn,.social-opt,
.bio-more,.tcard,.collab-row,.live-video-frame,.live-video-thumb-btn,
.single-cover{cursor:pointer !important;}
input,textarea{cursor:text !important;}
.cursor,.cursor-dot{display:none !important;}