.hero-cubes{position:absolute;inset:0 0 0 46%;z-index:0;overflow:visible}
.hero-cubes canvas{--cube-gutter:100px;--cube-zoom:1.44;position:absolute;left:-100px;top:-100px;display:block;width:calc(100% + 200px);height:calc(100% + 200px);touch-action:pan-y}
.hero-inner{pointer-events:none}
.hero-inner :is(h1,h2,p,a){pointer-events:auto}
@media(max-width:1100px) and (min-width:761px){.hero-cubes{left:59%}.hero h2{max-width:510px}.hero-deck{max-width:36ch}}
@media(max-width:760px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 88px;column-gap:12px;align-items:start;min-height:0;padding:30px 20px 28px}
  .hero-inner{display:contents}
  .hero h2{font-size:var(--heading-hero-size);width:max-content;max-width:calc(100% - 40px);grid-column:1/-1;grid-row:1;margin-bottom:24px;position:relative;z-index:1}
  /* Fade the moving artwork behind the title without blurring the text. */
  .hero h2::before{content:"";position:absolute;inset:-12px -24px -12px -20px;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .hero-deck{grid-column:1;grid-row:2;max-width:none;margin:0;position:relative;z-index:1}
  .hero-actions{--action-inset:10px;grid-column:1;grid-row:3;flex-wrap:wrap;gap:4px 12px;margin-top:14px;position:relative;z-index:1}
  .hero-actions .action{min-height:44px;padding:12px var(--action-inset);gap:10px;font-size:12px;white-space:nowrap}
  .hero-actions .text-link{min-height:44px;padding-inline:var(--action-inset);gap:6px;font-size:12px;white-space:nowrap}
  .hero-actions .icon{width:16px;height:16px}
  .hero-cubes{position:absolute;inset:0;width:auto;height:auto;margin:0;overflow:visible}
  .hero-cubes canvas{width:calc(100% + 600px);height:calc(100% + 200px);left:calc(50% - 260px);--cube-shift:40px;mask-image:none;--cube-zoom:3}
  #hero-motion{right:16px;left:auto;bottom:16px;border-color:transparent;background:var(--paper);z-index:1}
}
@media(max-width:760px) and (max-height:740px){.hero{padding-top:24px}}
@media(max-width:370px){.hero{grid-template-columns:minmax(0,1fr) 64px;column-gap:12px}.hero h2{font-size:var(--heading-hero-compact-size)}.hero-actions .action{gap:8px}.hero-cubes canvas{left:calc(50% - 226px);--cube-shift:24px}}
@media(min-width:600px) and (max-width:760px){.hero{grid-template-columns:minmax(0,1fr) 144px}.hero-cubes canvas{left:calc(50% - 356px);--cube-shift:0px}}

/* Short chromatic slices, then a marker sweep. The original text stays readable. */
.hero-glitch,.hero-highlight{position:relative;display:inline-block}
.hero-glitch-slice{position:absolute;inset:0;pointer-events:none;user-select:none;opacity:0;color:var(--ink);text-shadow:-.025em 0 var(--accent);animation:hero-glitch-top 7s steps(1,end) infinite}
.hero-glitch-slice:last-child{text-shadow:.025em 0 #a08bd8;animation-name:hero-glitch-bottom}
.hero-highlight-ink{position:absolute;inset:0;white-space:nowrap;pointer-events:none;user-select:none;background:var(--accent);color:var(--paper);clip-path:inset(0 100% 0 0);animation:hero-marker 7s cubic-bezier(.16,1,.3,1) infinite}
[data-hero-type] :is(.hero-glitch-slice,.hero-highlight-ink){animation-play-state:paused}
[data-hero-type][data-running="true"] :is(.hero-glitch-slice,.hero-highlight-ink){animation-play-state:running}
@keyframes hero-glitch-top{
  0%,8%,100%{opacity:0;transform:none;clip-path:inset(0 0 100% 0)}
  1%,4%{opacity:1;transform:translateX(-.035em);clip-path:inset(18% 0 58% 0)}
  2%,6%{opacity:1;transform:translateX(.025em);clip-path:inset(43% 0 39% 0)}
}
@keyframes hero-glitch-bottom{
  0%,8%,100%{opacity:0;transform:none;clip-path:inset(100% 0 0 0)}
  1%,4%{opacity:1;transform:translateX(.035em);clip-path:inset(65% 0 14% 0)}
  2%,6%{opacity:1;transform:translateX(-.025em);clip-path:inset(50% 0 32% 0)}
}
@keyframes hero-marker{
  0%,12%,100%{clip-path:inset(0 100% 0 0);opacity:1}
  23%,48%{clip-path:inset(0 0 0 0);opacity:1}
  60%,99%{clip-path:inset(0 0 0 0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-glitch-slice,.hero-highlight-ink{display:none;animation:none}
  .hero-highlight{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.045em;text-underline-offset:.12em}
}