.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-8); overflow: hidden; isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 180px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-7); align-items: center; }
.hero-copy { display: grid; gap: var(--sp-5); max-width: 640px; }
.hero h1 { font-size: var(--fs-h1); }
.hero h1 .shimmer {
  background: linear-gradient(90deg, var(--violet-light), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rotator { font: 500 var(--fs-sm)/1.4 var(--font-mono); letter-spacing: .12em; min-height: 1.4em; white-space: nowrap; }
.rot-label { color: var(--muted); }
.rot-word { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.rot-cursor { color: var(--accent); animation: rot-blink 1.06s steps(1) infinite; }
@keyframes rot-blink { 50% { opacity: 0; } }
.hero-sub { color: var(--muted); font-size: var(--fs-lg); max-width: 520px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--muted); letter-spacing: .06em; }
.hero-meta b { color: var(--fg); font-weight: 500; }

/* the cat */
.cat-stage { position: relative; display: grid; place-items: center; perspective: 900px; }
.cat-btn {
  position: relative; width: min(100%, 360px); aspect-ratio: 171.4 / 204.7;
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-lg);
  transform-style: preserve-3d; transition: transform var(--t-med) var(--ease);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.cat {
  position: absolute; inset: 0;
  -webkit-mask: url(../assets/logo/raspucat_white.svg) center / contain no-repeat;
  mask: url(../assets/logo/raspucat_white.svg) center / contain no-repeat;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), var(--fg) 0, var(--accent) 18%, transparent 46%),
    linear-gradient(160deg, var(--violet) 10%, var(--accent) 90%);
}
.cat-glow { filter: drop-shadow(0 0 10px var(--violet-glow)) drop-shadow(0 0 22px var(--accent-glow)); position: absolute; inset: 0; }
.cat-btn.is-booped .cat-glow { animation: surge 560ms var(--ease) 1; }
@keyframes surge {
  0% { transform: scale(1); }
  18% { transform: scale(0.86); filter: drop-shadow(0 0 4px var(--violet-glow)); }
  45% { transform: scale(1.12); filter: drop-shadow(0 0 22px var(--violet-glow)) drop-shadow(0 0 48px var(--accent-glow)) brightness(1.5); }
  100% { transform: scale(1); }
}
.cat-hint {
  position: absolute; bottom: calc(-1 * var(--sp-6)); left: 50%; transform: translateX(-50%);
  font: 400 var(--fs-xs)/1 var(--font-mono); color: var(--muted); letter-spacing: .12em; white-space: nowrap;
}
.boop {
  position: absolute; pointer-events: none; font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--accent);
  animation: boop-up 900ms var(--ease) forwards; text-shadow: var(--glow);
}
@keyframes boop-up { from { opacity: 1; transform: translate(-50%, 0) } to { opacity: 0; transform: translate(-50%, -60px) } }

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-1); min-width: var(--tap); min-height: var(--tap); padding: var(--sp-1) var(--sp-2);
  color: var(--accent); text-decoration: none; border-radius: var(--radius-sm);
  font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
}
.scroll-cue span { color: var(--muted); transition: color var(--t-fast); }
.scroll-cue:hover span { color: var(--fg); }
.scroll-cue svg { filter: drop-shadow(0 0 6px var(--accent-glow)); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }

/* meow easter egg */
.meow-cat {
  position: fixed; top: -80px; width: 48px; aspect-ratio: 171.4 / 204.7; pointer-events: none; z-index: var(--z-toast);
  -webkit-mask: url(../assets/logo/raspucat_white.svg) center / contain no-repeat;
  mask: url(../assets/logo/raspucat_white.svg) center / contain no-repeat;
  background: var(--neon); animation: meow-fall linear forwards;
}
@keyframes meow-fall { to { transform: translateY(calc(100vh + 160px)) rotate(var(--spin, 180deg)); } }

@media (max-width: 860px) {
  .hero { padding-bottom: var(--sp-8); }
  .hero .wrap { grid-template-columns: 1fr; gap: var(--sp-6); justify-items: center; text-align: center; }
  .hero-copy { gap: var(--sp-4); justify-items: center; }
  .hero-copy .eyebrow::before { display: none; }
  .cat-stage { order: -1; }
  .cat-btn { width: min(40vw, 168px); }
  .cat-hint, .hero-sub, .hero-meta { display: none; }
  .rotator { font-size: var(--fs-xs); }
  .hero-ctas { justify-content: center; width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; }
}