/* Hero — ambient layers, headline, unsleeve rig */

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:88px 0 104px;overflow:hidden;}
/* The hero used to carry three moving layers behind the headline: a
   drifting colour wash, floating sparkles, and a pulsing halo round the
   record. On a light page they read as haze, and they were pulling the
   eye away from the one thing the hero is for. Gone. What is left is a
   single set of grooves, barely there, that does not move fast enough to
   notice — texture, not motion. */
.hero-grooves{
  position:absolute;z-index:-1;pointer-events:none;
  width:980px;height:980px;right:-300px;top:50%;margin-top:-490px;
  border-radius:50%;opacity:.5;
  background:repeating-radial-gradient(circle at center,transparent 0 13px,var(--fill-2) 13px 14px);
  mask-image:radial-gradient(circle at center,#000 38%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 70%);
  animation:grooveSpin 180s linear infinite;
}
@keyframes grooveSpin{to{transform:rotate(360deg);}}

.hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:54px;}}
.hero h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-0.033em;margin-top:20px;
}
.hero h1 .brass{color:var(--brass-ink);}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln > span{display:block;transform:translateY(105%);animation:lineUp .85s var(--ease) forwards;}
.hero h1 .ln:nth-child(1) > span{animation-delay:.08s;}
.hero h1 .ln:nth-child(2) > span{animation-delay:.18s;}
.hero h1 .ln:nth-child(3) > span{animation-delay:.28s;}
@keyframes lineUp{to{transform:translateY(0);}}
.fade-up{opacity:0;animation:fadeUp .8s var(--ease) forwards;}
.fade-up.d1{animation-delay:.45s;}.fade-up.d2{animation-delay:.58s;}.fade-up.d3{animation-delay:.7s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero .sub{margin-top:23px;max-width:50ch;font-size:18px;line-height:1.6;color:var(--manila-dim);}
.hero .sub strong{color:var(--manila);font-weight:600;}
.status{
  display:inline-flex;align-items:center;gap:9px;margin-top:25px;
  padding:8px 16px;
  border:1px solid var(--brass-line);border-radius:100px;
  font-family:'Courier Prime',monospace;font-size:12px;line-height:1;color:var(--brass-ink);
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--brass-ink);animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--brass-line);}
  70%{box-shadow:0 0 0 9px rgba(138,99,20,0);}
  100%{box-shadow:0 0 0 0 rgba(138,99,20,0);}
}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px;}

.btn{
  font-family:'Courier Prime',monospace;font-size:13px;padding:13px 24px;border-radius:4px;
  border:1px solid var(--rule-strong);background:transparent;color:var(--manila);
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),opacity .2s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--manila);}
.btn-solid{background:var(--oxblood);border-color:var(--oxblood);color:#F6EFE6;}
.btn-solid:hover{background:#8f3339;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* unsleeve rig */
.sleeve-stack{position:relative;height:320px;display:flex;align-items:center;justify-content:center;perspective:1100px;}
.unsleeve-rig{position:relative;width:240px;height:240px;animation:rigBob 7s ease-in-out infinite;}
@keyframes rigBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.rig-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;}
/* The halo is gone with the rest of the hero glow. A 320px gold pulse
   was tuned for a near-black page; on warm paper it reads as a smudge
   around the sleeve. The sleeve casts a real shadow instead. */

.hero-disc{
  position:absolute;top:0;left:0;width:240px;height:240px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,#0a0807 0 3px,#211a17 3px 6px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85);will-change:transform;z-index:1;
}
.hero-disc .sheen{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;}
.hero-disc .sheen::before{
  content:'';position:absolute;top:-60%;left:-70%;width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(227,211,179,.14),transparent);
  transform:rotate(18deg);animation:sheenSweep 6.5s ease-in-out infinite;
}
@keyframes sheenSweep{0%{left:-70%;}55%{left:130%;}100%{left:130%;}}
.hero-disc .disc-label{
  position:absolute;top:50%;left:50%;width:76px;height:76px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--oxblood);z-index:2;
  box-shadow:inset 0 0 0 1px rgba(227,211,179,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:.14em;
  color:rgba(227,211,179,.85);text-align:center;line-height:1.4;text-transform:uppercase;
}
.hero-disc .spindle{
  position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);background:#0B0908;z-index:3;
}
.hero-sleeve{
  position:absolute;top:0;left:0;width:240px;height:240px;z-index:2;border-radius:3px;
  /* Warm charcoal, not teal. The sleeve is the one dark object in the
     hero and it has to read as card stock in a lit room; the old teal
     was mixed against a near-black page and turned cold and plastic
     against warm paper. */
  background:linear-gradient(152deg,#3E3A33 0%,#26231E 56%,#17150F 100%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85),inset 0 0 0 1px rgba(227,211,179,.14);
  padding:21px;display:flex;flex-direction:column;justify-content:space-between;will-change:transform;
}
.hero-sleeve .label-top{
  font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(227,211,179,.75);
}
.hero-sleeve .sleeve-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;
  line-height:1.05;letter-spacing:-0.02em;color:#F1F4F3;
}
/* Sized to clear the 198px of usable sleeve width on one line — the link
   row above it took the slack that used to let this wrap harmlessly. */
.hero-sleeve .sleeve-foot{
  font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:.08em;
  color:rgba(227,211,179,.6);border-top:1px solid rgba(227,211,179,.22);padding-top:8px;
  white-space:nowrap;
}
.unsleeve-hint{
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  font-family:'Courier Prime',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--manila-soft);white-space:nowrap;z-index:4;
  display:flex;align-items:center;gap:7px;
}
.unsleeve-hint .arrow{animation:hintBob 1.5s ease-in-out infinite;display:inline-block;}
@keyframes hintBob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ===== LINKS ON THE SLEEVE =====
   The record cover carries the LinkedIn / resume / email links, so the
   first thing on the page that says "here's where to find me" is the
   thing people are already looking at. This is the main call to action
   for anyone arriving from a LinkedIn profile, so the tiles are large,
   carry their real brand colour, and are labelled — an unlabelled icon
   still asks the visitor to decode it.

   Built by 03-utils.js from SLEEVE_LINKS in 01-config.js; each button
   gets a data-key that picks its colours below. */
.sleeve-links{display:flex;flex-direction:column;gap:9px;}
.sl-cap{
  font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(227,211,179,.6);
}
.sl-row{display:flex;gap:12px;}

/* --- per-service colours --- */
.sl-btn[data-key="linkedin"]{--brand:#0A66C2;--ink:#FFFFFF;}
.sl-btn[data-key="github"]  {--brand:#E9EDF0;--ink:#1B1F23;}
.sl-btn[data-key="resume"]  {--brand:#E3D3B3;--ink:#2A1D0C;}  /* paper */
.sl-btn[data-key="email"]   {--brand:#C99A3F;--ink:#1A1206;}
.sl-btn[data-key="discogs"] {--brand:#E8E8E8;--ink:#141414;}

.sl-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;flex:0 0 auto;
}
.sl-tile{
  width:52px;height:52px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand,#E3D3B3);
  color:var(--ink,#1A1206);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 16px -6px rgba(0,0,0,.75);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease),
             filter .25s var(--ease);
}
.sl-tile svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.sl-label{
  font-family:'Courier Prime',monospace;font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(227,211,179,.72);
  transition:color .25s var(--ease);
}
.sl-btn:hover .sl-tile,
.sl-btn:focus-visible .sl-tile{
  transform:translateY(-3px) scale(1.04);
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 12px 24px -8px rgba(0,0,0,.85),
    0 0 20px -2px var(--brand,#E3D3B3);
}
.sl-btn:hover .sl-label,
.sl-btn:focus-visible .sl-label{color:#FFFFFF;}
.sl-btn:focus-visible{outline:none;}
.sl-btn:focus-visible .sl-tile{outline:2px solid #FFFFFF;outline-offset:3px;}
.sl-btn:active .sl-tile{transform:translateY(-1px) scale(1);}

/* The rig bobs and tilts continuously. That's fine to look at and awful
   to click, so both settle while the pointer is over it. */
.unsleeve-rig:hover{animation-play-state:paused;}
.unsleeve-rig:focus-within{animation-play-state:paused;}
.sleeve-stack:hover .rig-tilt,
.sleeve-stack:focus-within .rig-tilt{transform:none !important;transition:transform .35s var(--ease);}

@media(max-width:980px){
  .sl-tile{width:46px;height:46px;border-radius:12px;}
  .sl-tile svg{width:23px;height:23px;}
  .sl-row{gap:10px;}
}
@media (prefers-reduced-motion:reduce){
  .sl-btn:hover .sl-tile,.sl-btn:focus-visible .sl-tile{transform:none;}
}

/* Brand logos are filled paths, not strokes. */
.sl-tile svg.ico-solid{stroke:none;}
.sl-tile svg.ico-solid path{fill:currentColor;stroke:none;}

/* The unsleeve hint is absolutely positioned 28px BELOW the rig, so it
   sits outside the rig's box and the next element in flow knows nothing
   about it. The catalogue caption landed straight on top of it. */
.unsleeve-hint + .fig{margin-top:52px;justify-content:center;}
@media(max-width:900px){
  .unsleeve-hint + .fig{margin-top:46px;}
}