/* ════════════════════════════════════════════════════════════════════════════
 * HERO
 * Hero — name, data, listen, photo column with depth
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ──────────────────────────  HERO  ────────────────────────── */
.hero{min-height:100vh;display:grid;grid-template-columns:7fr 5fr;gap:0;padding-top:90px;}
.hero-l{padding:64px 48px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--rule);position:relative;}

.hero-coord{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;animation:fade-up .8s .3s both;}
.hero-coord b{color:var(--periwinkle);font-weight:500;}

.hero-name-block{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 0;}
.hero-name{font-weight:900;font-size:clamp(72px,11vw,200px);line-height:.85;letter-spacing:-.05em;text-transform:uppercase;}
.hero-name .small{display:block;font-weight:400;font-size:.32em;letter-spacing:-.02em;color:var(--muted);margin-bottom:.2em;animation:fade-up-soft .8s .5s both;}
.hero-name .word{display:inline-block;animation:word-reveal 1s cubic-bezier(.16,1,.3,1) both;}
.hero-name .word.w1{animation-delay:.7s;}
.hero-name .word.w2{animation-delay:.95s;}
/* Animated gradient on the accent word — parme→indigo→violet shimmer.
   Inter italic 800: same family as "Maceo", italic for character, no stylistic break. */
.hero-name .accent{
  display:inline-block;
  font-family:'Inter',sans-serif;font-style:italic;font-weight:900;
  letter-spacing:-.05em;
  background:linear-gradient(90deg,var(--parme) 0%,var(--periwinkle) 25%,var(--indigo) 50%,var(--violet) 75%,var(--parme) 100%);
  background-size:300% 100%;
  background-clip:text;-webkit-background-clip:text;
  color:transparent;
  animation:word-reveal 1s cubic-bezier(.16,1,.3,1) 1.2s both, shimmer 5.5s ease-in-out 2.2s infinite;
}

.hero-data{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.hero-data > div{background:rgba(5,5,6,.6);backdrop-filter:blur(8px);padding:14px 16px;animation:count-up .6s cubic-bezier(.16,1,.3,1) both;transition:background .25s,box-shadow .35s cubic-bezier(.16,1,.3,1);will-change:transform;}
.hero-data > div:nth-child(1){animation-delay:1.5s;}
.hero-data > div:nth-child(2){animation-delay:1.6s;}
.hero-data > div:nth-child(3){animation-delay:1.7s;}
.hero-data > div:nth-child(4){animation-delay:1.8s;}
.hero-data > div:hover{background:rgba(94,106,210,.12);box-shadow:inset 0 0 0 1px var(--periwinkle);}
.hero-data b{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--periwinkle);margin-bottom:4px;}
.hero-data span{font-size:13px;color:var(--paper);}

.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:32px;}

/* ───── Hero pull-quote (Zappa) — mirrors the Sanborn dedication typography.
   Inter italic light, paper white, with periwinkle→violet shimmer on the
   accent word. French quote marks « » for cohesion with Sanborn. */
.hero-quote{
  flex:1;
  margin:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero-quote-text{
  margin:0;
  font-family:'Inter',sans-serif;
  font-style:italic;
  font-weight:300;
  /* Sized so the phrase « Music is the best. » always fits on one line —
     min protects mobile, max keeps it readable at desktop, viewport units
     scale fluidly between. */
  font-size:clamp(20px,3.2vw,48px);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--paper);
  white-space:nowrap;
}
.hero-quote-text em{
  font-style:italic;
  background:linear-gradient(90deg,var(--periwinkle),var(--violet));
  background-size:200% 100%;
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 5.5s ease-in-out infinite;
}

/* Word-by-word stagger reveal — same animation as .sanborn-quote .word.
   Triggered by body.entered (added when the loader fades out at ~2.1s). */
.hero-quote-text .word{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) skewY(2deg);
  filter:blur(6px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),
             transform 1s cubic-bezier(.16,1,.3,1),
             filter .8s cubic-bezier(.16,1,.3,1);
}
body.entered .hero-quote-text .word{opacity:1;transform:none;filter:none;}
/* Cascading stagger: starts ~2.0s after body.entered, 80ms between words */
body.entered .hero-quote-text .word:nth-child(1){transition-delay:2.00s;}
body.entered .hero-quote-text .word:nth-child(2){transition-delay:2.08s;}
body.entered .hero-quote-text .word:nth-child(3){transition-delay:2.16s;}
body.entered .hero-quote-text .word:nth-child(4){transition-delay:2.24s;}
body.entered .hero-quote-text .word:nth-child(5){transition-delay:2.32s;}
body.entered .hero-quote-text .word:nth-child(6){transition-delay:2.40s;}

/* Attribution — fades up after the words have settled */
.hero-quote-attrib{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1);
}
body.entered .hero-quote-attrib{
  opacity:1;
  transform:none;
  transition-delay:2.85s;
}

/* Attribution — JetBrains Mono caps with a thin gradient rule */
.hero-quote-attrib{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:28px;
  font-family:'JetBrains Mono',monospace;
  font-style:normal;font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-quote-attrib-rule{
  display:inline-block;
  width:42px;height:1px;
  background:linear-gradient(90deg,var(--periwinkle),transparent);
  flex-shrink:0;
}
/* ───── Social Media collapsible menu (replaces music platforms row) ───── */
.social-wrap{position:relative;animation:fade-up-soft .8s 2.05s both;align-self:end;}
.social-btn{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);
  background:linear-gradient(90deg,var(--parme),var(--periwinkle),var(--indigo),var(--violet),var(--parme));
  background-size:300% 100%;
  animation:shimmer 6s ease-in-out infinite;
  padding:13px 20px;border:none;border-radius:99px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 32px rgba(124,58,237,.28);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 16px 48px rgba(124,58,237,.45);}
.social-btn .arr{font-size:10px;opacity:.85;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.social-wrap.open .social-btn .arr{transform:rotate(180deg);}

.social-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  display:flex;flex-direction:column;gap:0;
  min-width:260px;
  background:rgba(5,5,6,.85);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--rule-strong);border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
  z-index:30;
}
.social-wrap.open .social-menu{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.social-opt{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:background .25s, color .25s, padding-left .25s;
}
.social-opt:last-child{border-bottom:none;}
.social-opt:hover{background:rgba(94,106,210,.15);color:var(--periwinkle);padding-left:24px;}
.social-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--periwinkle);width:18px;height:18px;}
.social-handle{margin-left:auto;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:none;}

/* ───── PHOTO COLUMN — softened + multi-layered depth ───── */
.hero-r{position:relative;overflow:hidden;border-radius:0 0 0 24px;animation:fade-in 1.4s .4s both;}
.hero-r::before{
  /* soft mask gradient on left edge to fade into left column */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,2,3,.55) 0%,rgba(2,2,3,.18) 8%,transparent 22%);
}
.hero-r::after{
  /* outer glow halo behind photo */
  content:"";position:absolute;inset:-40px -40px -40px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 30% 50%,rgba(94,106,210,.18),transparent 60%);
  filter:blur(50px);
}

/* photo wrapper — for parallax + slow zoom */
.hero-photo-wrap{position:absolute;inset:0;overflow:hidden;}
.hero-img{width:110%;height:110%;object-fit:cover;object-position:center 30%;filter:contrast(1.04) saturate(1.02) brightness(.98);position:absolute;left:-5%;top:-5%;animation:slow-zoom 30s ease-in-out infinite alternate;will-change:transform;transition:transform .3s cubic-bezier(.16,1,.3,1);}

/* color wash drifting horizontally — adds depth */
.hero-color-wash{position:absolute;inset:-10%;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at center,rgba(124,58,237,.45) 0%,rgba(94,106,210,.25) 35%,transparent 70%);
  mix-blend-mode:overlay;
  animation:color-wash 14s ease-in-out infinite;
}

/* film grain on photo */
.hero-photo-grain{position:absolute;inset:-5%;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-anim 6s steps(8) infinite;
}

/* horizontal scanline subtle */
.hero-scan{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(184,175,232,.04) 3px,rgba(184,175,232,.04) 4px);
}

/* vignette pulse */
.hero-vig{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(2,2,3,.65) 100%);
  animation:vignette-pulse 6s ease-in-out infinite;
}

.hero-stamp{position:absolute;top:24px;right:24px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(90deg,var(--parme),var(--periwinkle),var(--indigo),var(--violet),var(--parme));background-size:300% 100%;animation:shimmer 6s ease-in-out infinite,fade-up-soft .8s 2.4s both;color:var(--paper);padding:7px 13px;z-index:6;display:flex;align-items:center;gap:6px;animation:fade-up-soft .8s 2.4s both;box-shadow:0 0 32px var(--accent-glow);}
.hero-stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--paper);animation:pulse-dot 1.6s ease-in-out infinite;}

.hero-photo-tag{position:absolute;bottom:24px;left:32px;right:24px;padding:14px 18px;z-index:6;border-radius:0 12px 12px 12px;animation:fade-up .8s 2.6s both;}
.hero-photo-tag b{display:block;font-size:14px;font-weight:600;color:var(--paper);margin-bottom:4px;}
.hero-photo-tag span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}

/* orbital ring decoration — subtle, brutalist accent */
.hero-orbit{position:absolute;top:50%;left:30%;width:140px;height:140px;border:1px dashed rgba(184,175,232,.25);border-radius:50%;z-index:6;pointer-events:none;animation:ring-orbit 50s linear infinite;}
.hero-orbit::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--periwinkle);box-shadow:0 0 12px var(--periwinkle);top:-4px;left:50%;}