/* <splatoo-hero> — styles for the live interactive hero (home page + every
   sector page). Paired with components/splatoo-hero.js.

   Its own file rather than a block in splatoo.css, because index.html is the
   one page that does NOT link splatoo.css — it carries a self-contained inline
   <style>. Hero CSS put in splatoo.css therefore reached every page except the
   home page, which is the most important one. Linked explicitly by the nine
   pages that use <splatoo-hero>.

   Not injected from the JS either: the hero is the LCP element, so it has to be
   styled on first paint, and the markup has to stand up before any script runs.

   Tokens used (--c-accent, --header-h, --space-gutter, --font-display,
   --fs-mono, --c-ink*) are defined by splatoo.css and, on the home page, by its
   inline <style>. */
splatoo-hero{display:block}
.shero{position:relative;height:calc(100vh - var(--header-h));min-height:620px;padding:0}
.shero__view{position:absolute;inset:0;background:#05070a;overflow:hidden}
.shero__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#05070a;z-index:1}
.shero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(130% 120% at 0% 100%,rgba(6,8,7,.95) 0%,rgba(6,8,7,.72) 26%,rgba(6,8,7,.3) 48%,transparent 64%)}
.shero__corner{position:absolute;width:15px;height:15px;border:1.5px solid var(--c-accent);z-index:3;pointer-events:none}
.shero__corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.shero__corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.shero__corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.shero__corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.shero__top{position:absolute;top:18px;left:40px;right:130px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-3);z-index:3;pointer-events:none}
.shero__top .d{display:inline-block;width:6px;height:6px;background:var(--c-accent);margin-right:7px;vertical-align:1px;animation:sheroPulse 2.4s infinite}
@keyframes sheroPulse{0%,100%{opacity:1}50%{opacity:.2}}
.shero__panel{position:absolute;left:48px;bottom:52px;max-width:660px;z-index:5;pointer-events:none}
.shero__panel .eyebrow{margin-bottom:0}
.shero__panel h1{font-family:var(--font-display);font-weight:500;font-size:clamp(46px,5.6vw,88px);line-height:.97;letter-spacing:-.035em;margin-top:20px}
.shero__panel h1 .lime{color:var(--c-accent)}
.shero__panel .lede{margin-top:22px;color:var(--c-ink);font-size:19px;line-height:1.5;max-width:520px}
.shero__panel .cta{display:flex;align-items:center;gap:24px;margin-top:36px}
.shero__panel .btn,.shero__panel .text-link,.shero__panel .txtlink{pointer-events:auto}
.shero__panel .btn{padding:16px 32px;font-size:15px}
.shero__panel .text-link,.shero__panel .txtlink{font-size:15px}
/* portrait / vertical tablet: stack the scene over a lime content peek */
@media (orientation:portrait),(max-width:820px){
  .shero{height:auto;min-height:0;display:flex;flex-direction:column}
  .shero__view{position:relative;inset:auto;height:75vh}
  .shero__scrim,.shero__corner,.shero__top{display:none}
  .shero__panel{position:static;max-width:none;background:var(--c-accent);color:var(--c-ink-on-accent);padding:30px var(--space-gutter) 38px}
  .shero__panel .eyebrow{color:#0a0e06}
  .shero__panel .eyebrow .ln,.shero__panel .eyebrow .eyebrow__line{background:rgba(8,12,5,.45)}
  .shero__panel h1{font-size:clamp(28px,7vw,46px);margin-top:14px;color:#060a04}
  .shero__panel h1 .lime{color:#060a04}
  .shero__panel .lede{color:rgba(8,12,5,.74);font-size:15px;margin-top:12px;max-width:none}
  .shero__panel .cta{margin-top:22px;flex-wrap:wrap;gap:14px}
  .shero__panel .btn{background:#080b05;color:#f4f5f2;border:1px solid #080b05}
  .shero__panel .btn:hover{background:#1b2113;box-shadow:none;transform:none}
  .shero__panel .text-link,.shero__panel .txtlink{color:#0a0e06}
}