/* JasonFly · hero — first screen layout, title, brain stage and the flying Jason overlay (loaded after styles.css) */

/* overlay canvas made by js/hero-jason.js sits above the brain, below the copy and the readings panel */
#hero .hero-jason{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#hero .hero-inner{z-index:3;max-width:1480px;min-height:100vh;min-height:100svh;grid-template-columns:minmax(0,36%) minmax(0,1fr) minmax(262px,25%);gap:24px;align-items:center;padding-block:92px 76px}
#hero .hero-stage{align-self:stretch;min-height:300px;pointer-events:none}
#hero .hero-shade{background:
  linear-gradient(90deg,rgba(5,3,11,.9) 0%,rgba(5,3,11,.62) 24%,rgba(5,3,11,0) 41%,rgba(5,3,11,0) 72%,rgba(5,3,11,.3) 100%),
  linear-gradient(0deg,var(--bg) 0%,rgba(5,3,11,0) 20%),
  linear-gradient(180deg,rgba(5,3,11,.6) 0%,rgba(5,3,11,0) 15%)}

/* copy */
#hero .hero-copy{position:relative;min-width:0}
#hero .chips{gap:6px}
#hero .chip{height:28px;padding:0 11px;font-size:10.5px;background:rgba(12,8,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#hero .hero-title{margin:24px 0 16px;font:900 clamp(58px,7.4vw,112px)/.84 var(--display);letter-spacing:-.045em}
#hero .hero-title.glitch{animation:none}
#hero .hero-title span{width:max-content;max-width:100%}
#hero .hero-title .l1{background:linear-gradient(180deg,#fff 0%,#f1eaff 46%,#b9a3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(169,107,255,.34))}
#hero .hero-title .l2{padding-right:.06em;background:linear-gradient(95deg,var(--neon) 0%,var(--cyan) 30%,var(--violet) 62%,var(--pink) 84%,var(--orange) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jf-flow 10s ease-in-out infinite alternate}
#hero .hero-title.glitch .l2{animation:jf-flow 10s ease-in-out infinite alternate,jf-pop 1s ease-out}
#hero .hero-cn{display:flex;align-items:center;gap:14px;margin:0;font:900 clamp(22px,2.2vw,30px)/1.2 var(--sans);letter-spacing:.34em;color:#fff;text-shadow:0 0 26px rgba(169,107,255,.55)}
#hero .hero-cn::after{content:"";flex:0 1 120px;height:1px;background:linear-gradient(90deg,rgba(169,107,255,.9),rgba(61,245,255,.45),transparent)}
#hero .hero-tag{margin:14px 0 0;font:700 clamp(18px,1.8vw,23px)/1.45 var(--sans)}
#hero .hero-sub{margin:10px 0 26px;max-width:440px;font-size:clamp(14.5px,1.2vw,16px);line-height:1.75;text-wrap:pretty}
#hero .hud-foot{line-height:1.6}
#hero .hero-sub b{color:var(--text);font-weight:600}

/* readings panel, a little tighter so the brain gets the middle column */
#hero .hud{align-self:center;padding:16px;background:linear-gradient(180deg,rgba(20,14,44,.6),rgba(8,6,18,.5))}
#hero .hud-dl{gap:8px}
#hero .hud-dl div{padding:9px 11px}
#hero .hud-dl dd{font-size:16px}
#hero .hud-dl dd.hash{font-size:11px;line-height:1.45}
#hero #raster{height:58px;margin-top:10px}
#hero .scroll-hint{bottom:56px;opacity:.7}

@keyframes jf-flow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes jf-pop{0%,100%{filter:drop-shadow(0 0 0 rgba(61,245,255,0)) brightness(1)}35%{filter:drop-shadow(0 0 26px rgba(61,245,255,.55)) brightness(1.28)}}

/* laptops: copy on the left, brain above the readings on the right */
@media (max-width:1180px) and (min-width:981px){
  #hero .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"copy stage" "copy hud";row-gap:12px}
  #hero .hero-copy{grid-area:copy}
  #hero .hero-stage{grid-area:stage;min-height:240px}
  #hero .hud{grid-area:hud;align-self:end;padding:12px}
  #hero #raster,#hero .hud-foot,#hero .scroll-hint{display:none}
  #hero .hero-shade{background:linear-gradient(90deg,rgba(5,3,11,.9) 0%,rgba(5,3,11,.55) 34%,rgba(5,3,11,0) 50%),linear-gradient(0deg,var(--bg) 0%,rgba(5,3,11,0) 20%),linear-gradient(180deg,rgba(5,3,11,.6) 0%,rgba(5,3,11,0) 15%)}
}

/* tablets and phones: brain and Jason on top, copy below */
@media (max-width:980px){
  #hero{align-items:stretch}
  #hero .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "copy";align-content:start;gap:0;padding-block:72px 64px}
  #hero .hero-stage{grid-area:stage;height:clamp(210px,34svh,420px);min-height:0}
  #hero .hero-copy{grid-area:copy}
  #hero .hero-title{font-size:clamp(56px,14vw,112px)}
  #hero .hero-shade{background:linear-gradient(0deg,var(--bg) 2%,rgba(5,3,11,.8) 42%,rgba(5,3,11,.12) 60%,rgba(5,3,11,0) 82%,rgba(5,3,11,.5) 100%)}
}
@media (max-width:560px){
  #hero .hero-inner{padding-block:70px 60px}
  #hero .chips{gap:5px}
  #hero .chip{height:24px;padding:0 8px;gap:6px;font-size:9.5px;letter-spacing:.05em}
  #hero .hero-title{margin:12px 0 12px;font-size:clamp(52px,17vw,80px)}
  #hero .hero-cn{font-size:21px;letter-spacing:.28em}
  #hero .hero-tag{margin-top:10px;font-size:18px}
  #hero .hero-sub{margin:8px 0 20px;font-size:14.5px;line-height:1.7}
  #hero .cta{gap:10px}
  #hero .cta .btn{flex:1 1 auto;height:46px;padding:0 16px;font-size:14px}
  #hero .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  #hero .hero-title .l2,#hero .hero-title.glitch .l2{animation:none}
}