/*
  WaifuHunt motion layer.
  Cinematic where it matters, quiet where users need speed.
*/

:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wh-hero-scroll-y: 0px;
  --wh-hero-scroll-scale: 1;
  --wh-hero-scroll-blur: 0px;
  --wh-routes-lift: 0px;
  --wh-hero-glow-opacity: 0.92;
  --wh-gate-tilt-x: 0deg;
  --wh-gate-tilt-y: 0deg;
}

@view-transition {
  navigation: none;
}

::view-transition-old(root) {
  animation: whPageOld 260ms var(--ease-soft) both;
}

::view-transition-new(root) {
  animation: whPageNew 320ms var(--ease-out) both;
}

.logo {
  view-transition-name: wh-logo;
}

.desktop-nav .nav-link.is-active,
.site-nav .nav-link.is-active {
  view-transition-name: wh-active-nav;
}

html.wh-route-leaving body {
  animation: whRouteLeave 180ms var(--ease-soft) both;
}

/* Hero scene timeline */
body.wh-motion-ready.wh-page-index .wh-home-hero::before {
  opacity: var(--wh-hero-glow-opacity);
  animation: whHeroBloom 950ms var(--ease-out) both;
}

body.wh-motion-ready.wh-page-index .wh-home-copy .wh-eyebrow {
  animation: whClipReveal 420ms var(--ease-out) both;
}

body.wh-motion-ready.wh-page-index .wh-home-copy h1 {
  animation: whTitleReveal 560ms var(--ease-out) 40ms both;
}

body.wh-motion-ready.wh-page-index .wh-home-copy .subtitle {
  animation: whSoftRise 420ms var(--ease-out) 80ms both;
}

body.wh-motion-ready.wh-page-index .wh-home-actions .btn {
  animation: whSoftRise 520ms var(--ease-back) both;
}

body.wh-motion-ready.wh-page-index .wh-home-actions .btn:nth-child(1) { animation-delay: 120ms; }
body.wh-motion-ready.wh-page-index .wh-home-actions .btn:nth-child(2) { animation-delay: 155ms; }
body.wh-motion-ready.wh-page-index .wh-home-actions .btn:nth-child(3) { animation-delay: 190ms; }

body.wh-motion-ready.wh-page-index .wh-home-status span {
  animation: whChipIn 430ms var(--ease-back) both;
}

body.wh-motion-ready.wh-page-index .wh-home-status span:nth-child(1) { animation-delay: 210ms; }
body.wh-motion-ready.wh-page-index .wh-home-status span:nth-child(2) { animation-delay: 245ms; }
body.wh-motion-ready.wh-page-index .wh-home-status span:nth-child(3) { animation-delay: 280ms; }
body.wh-motion-ready.wh-page-index .wh-home-status span:nth-child(4) { animation-delay: 315ms; }

body.wh-motion-ready.wh-page-index .wh-hunt-gate {
  transform:
    translate3d(
      calc(var(--wh-pointer-x, 0) * -10px),
      calc((var(--wh-pointer-y, 0) * -10px) + var(--wh-hero-scroll-y)),
      0
    )
    scale(var(--wh-hero-scroll-scale));
  filter: blur(var(--wh-hero-scroll-blur));
  will-change: transform, filter;
}

body.wh-motion-ready.wh-page-index .wh-archive-scene {
  transform:
    translate3d(0, calc(var(--wh-hero-scroll-y) * 0.72), -40px)
    rotateX(calc(var(--wh-pointer-y, 0) * 3.2deg))
    rotateY(calc(var(--wh-pointer-x, 0) * -4deg))
    scale(calc(var(--wh-hero-scroll-scale) * 1));
  filter: blur(calc(var(--wh-hero-scroll-blur) * 0.7));
  will-change: transform, filter;
}

body.wh-motion-ready.wh-page-index .wh-cabinet-object {
  animation: whCabinetArrive 920ms var(--ease-out) 80ms both, whCabinetBreathe 6.4s ease-in-out 1100ms infinite alternate;
  will-change: transform, filter;
}

body.wh-motion-ready.wh-page-index .wh-cabinet-drawer-art {
  animation: whDrawerSlideOpen 860ms var(--ease-out) 260ms both, whDrawerIdle 5.2s ease-in-out 1250ms infinite alternate;
  will-change: transform, filter;
}

body.wh-motion-ready.wh-page-index .wh-cabinet-slit {
  animation: whDrawerGlow 3.8s ease-in-out 900ms infinite alternate;
}

body.wh-motion-ready.wh-page-index .wh-cabinet-dust {
  animation: whCabinetDust 4.8s ease-in-out infinite alternate;
}

body.wh-motion-ready.wh-page-index .wh-cabinet-dust.d2 { animation-delay: -1.8s; }
body.wh-motion-ready.wh-page-index .wh-cabinet-dust.d3 { animation-delay: -3.1s; }

body.wh-motion-ready.wh-page-index .wh-archive-gate {
  animation: whArchiveGateIn 920ms var(--ease-out) 130ms both;
}

body.wh-motion-ready.wh-page-index .wh-archive-drawer {
  animation: whDrawerBreathe 4.8s ease-in-out 1050ms infinite alternate;
}

body.wh-motion-ready.wh-page-index .wh-archive-drawer-light {
  animation: whDrawerLight 3.6s ease-in-out 900ms infinite alternate;
}

.wh-portal-wrap.is-archive-hover .wh-archive-drawer,
.wh-portal-wrap.is-section-previewing .wh-archive-drawer {
  transform: translate3d(0, 22px, -58px) rotateX(50deg) scaleX(1.08);
  border-color: rgba(255, 214, 107, 0.44);
}

.wh-portal-wrap.is-archive-hover .wh-archive-drawer-light,
.wh-portal-wrap.is-section-previewing .wh-archive-drawer-light {
  opacity: 0.9;
  filter: blur(14px) saturate(1.24);
}

.wh-section-preview {
  transition:
    opacity 260ms var(--ease-out),
    transform 420ms var(--ease-out),
    filter 260ms var(--ease-out);
  will-change: transform, opacity, filter;
}

.wh-portal-wrap.is-section-previewing .wh-section-preview {
  opacity: 1;
  transform: translate3d(34px, -10px, 160px) rotateX(4deg) rotateY(-17deg) rotateZ(4deg) scale(1);
  filter: saturate(1.08) brightness(1.04);
}

.wh-portal-wrap.is-section-launching .wh-section-preview {
  opacity: 1;
  transform: translate3d(54px, -18px, 188px) rotateX(2deg) rotateY(-10deg) rotateZ(2deg) scale(1.05);
  filter: saturate(1.18) brightness(1.12);
  transition-duration: 420ms, 520ms, 260ms;
}

.wh-portal-wrap.is-section-previewing .wh-cabinet-drawer-art,
.wh-portal-wrap.is-section-launching .wh-cabinet-drawer-art,
.wh-portal-wrap.is-archive-hover .wh-cabinet-drawer-art {
  transform:
    translate3d(
      calc(20px + var(--wh-pointer-x, 0) * 8px),
      calc(26px + var(--wh-pointer-y, 0) * 4px),
      124px
    )
    rotateX(2deg)
    rotateY(-8deg)
    rotateZ(-1deg);
  filter:
    drop-shadow(0 28px 44px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 52px rgba(255, 79, 163, 0.34));
}

.wh-portal-wrap.is-section-launching .wh-cabinet-drawer-art {
  transform:
    translate3d(32px, 34px, 148px)
    rotateX(0deg)
    rotateY(-5deg)
    rotateZ(-1deg);
}

.wh-portal-wrap.is-section-previewing .wh-cabinet-slit,
.wh-portal-wrap.is-section-launching .wh-cabinet-slit,
.wh-portal-wrap.is-archive-hover .wh-cabinet-slit {
  opacity: 1;
  filter: blur(12px) saturate(1.28);
}

.wh-portal-wrap.is-section-launching .wh-section-preview::after {
  animation: whSectionShine 520ms var(--ease-out) both;
}

.wh-portal-wrap.is-archive-hover .wh-archive-card.is-near {
  filter: saturate(1.08) brightness(1.04) !important;
}

body.wh-motion-ready.wh-page-index .wh-portal-aura {
  animation: whGateAuraIn 900ms var(--ease-out) 130ms both, whPortalPulse 4.8s ease-in-out 950ms infinite alternate;
}

body.wh-motion-ready.wh-page-index .wh-portal-ring.outer {
  animation: whRingReveal 780ms var(--ease-out) 180ms both, whPortalSpin 24s linear 980ms infinite;
}

body.wh-motion-ready.wh-page-index .wh-portal-ring.middle {
  animation: whRingReveal 780ms var(--ease-out) 250ms both, whPortalSpinReverse 30s linear 1050ms infinite;
}

body.wh-motion-ready.wh-page-index .wh-portal-ring.inner {
  animation: whRingReveal 680ms var(--ease-out) 310ms both, whPortalPulse 4s ease-in-out 1050ms infinite alternate;
}

body.wh-motion-ready.wh-page-index .wh-portal-card {
  animation-duration: 880ms, 6.8s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  will-change: transform, opacity, translate;
}

body.wh-motion-ready.wh-page-index .wh-portal-card.main {
  --wh-final-transform: translate3d(0, 4%, 72px) rotateX(var(--wh-gate-tilt-y)) rotateY(calc(-10deg + var(--wh-gate-tilt-x))) rotateZ(-2deg);
  transform: var(--wh-final-transform);
  animation-name: whFanMain, whPortalCardFloat;
  animation-delay: 40ms, 980ms;
}

body.wh-motion-ready.wh-page-index .wh-portal-card.back-left {
  --wh-final-transform: translate3d(-4%, 4%, 18px) rotateY(-18deg) rotateZ(-17deg) scale(0.9);
  transform: var(--wh-final-transform);
  animation-name: whFanLeft, whPortalCardFloat;
  animation-delay: 0ms, 930ms;
}

body.wh-motion-ready.wh-page-index .wh-portal-card.back-right {
  --wh-final-transform: translate3d(4%, -1%, 8px) rotateY(15deg) rotateZ(14deg) scale(0.88);
  transform: var(--wh-final-transform);
  animation-name: whFanRight, whPortalCardFloat;
  animation-delay: 20ms, 960ms;
}

body.wh-motion-ready.wh-page-index .wh-portal-card.rear-left {
  --wh-final-transform: translate3d(-2%, 0, -86px) rotateY(-25deg) rotateZ(-24deg) scale(0.88);
  transform: var(--wh-final-transform);
  animation-name: whFanRearLeft, whPortalCardFloat;
  animation-delay: 0ms, 900ms;
}

body.wh-motion-ready.wh-page-index .wh-portal-card.rear-right {
  --wh-final-transform: translate3d(2%, 2%, -74px) rotateY(24deg) rotateZ(21deg) scale(0.86);
  transform: var(--wh-final-transform);
  animation-name: whFanRearRight, whPortalCardFloat;
  animation-delay: 15ms, 920ms;
}

body.wh-motion-ready.wh-page-index .wh-portal-spark {
  animation: whSparkAwake 520ms var(--ease-out) 880ms both, whPortalSpark 4.2s ease-in-out 1300ms infinite alternate;
}

.wh-hunt-gate.is-portal-hover .wh-portal-aura {
  opacity: 1;
  filter: blur(12px) saturate(1.24);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card.main {
  transform: translate3d(0, 1%, 96px) rotateX(var(--wh-gate-tilt-y)) rotateY(calc(-10deg + var(--wh-gate-tilt-x))) rotateZ(-2deg) scale(1.025);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card.back-left {
  transform: translate3d(-11%, 6%, 24px) rotateY(-22deg) rotateZ(-22deg) scale(0.92);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card.back-right {
  transform: translate3d(10%, -4%, 18px) rotateY(19deg) rotateZ(19deg) scale(0.9);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card.rear-left {
  transform: translate3d(-10%, 0, -80px) rotateY(-28deg) rotateZ(-28deg) scale(0.88);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card.rear-right {
  transform: translate3d(10%, 4%, -70px) rotateY(28deg) rotateZ(26deg) scale(0.86);
}

.wh-hunt-gate.is-portal-hover .wh-portal-card::after {
  animation: whCardHolo 920ms var(--ease-out) both;
}

.wh-portal-card {
  transition:
    opacity 340ms var(--ease-out),
    filter 340ms var(--ease-out),
    scale 340ms var(--ease-out),
    rotate 340ms var(--ease-out) !important;
}

.wh-portal-card.is-card-updating {
  opacity: 0.42 !important;
  filter: saturate(0.86) brightness(0.78);
}

.wh-portal-card.main.is-card-updating {
  translate: 24px -10px;
  rotate: 5deg;
  scale: 0.94;
}

.wh-portal-card.back-left.is-card-updating,
.wh-portal-card.back-right.is-card-updating {
  translate: 0 8px;
  scale: 0.96;
}

body.wh-page-index .wh-home-routes {
  transform: translate3d(0, var(--wh-routes-lift), 0);
  transition: transform var(--motion-base) var(--ease-out);
}

body.wh-motion-ready.wh-page-index .wh-section-card-3d {
  animation: whSectionCardIn 640ms var(--ease-out) both;
  animation-delay: calc(120ms + var(--wh-stagger-index, 0) * 54ms);
  transform:
    perspective(980px)
    translate3d(0, 0, 0)
    rotateX(var(--wh-tilt-y, 0deg))
    rotateY(var(--wh-tilt-x, 0deg));
}

.wh-section-card-3d.wh-motion-card:hover {
  transform:
    perspective(980px)
    translate3d(0, -12px, 44px)
    rotateX(calc(var(--wh-tilt-y, 0deg) - 4deg))
    rotateY(calc(var(--wh-tilt-x, 0deg) + 3deg)) !important;
}

.wh-section-card-3d:active {
  transform:
    perspective(980px)
    translate3d(0, -4px, 16px)
    rotateX(calc(var(--wh-tilt-y, 0deg) - 1deg))
    rotateY(var(--wh-tilt-x, 0deg))
    scale(0.985) !important;
}

.wh-section-card-3d.is-route-pressing {
  filter: saturate(1.2) brightness(1.08);
}

/* Premium page and card micro-motion */
.section-card,
.waifu-card,
.discussion-card,
.rank-card,
.news-card,
.wh-route-card,
.wh-system-card,
.account-panel-card,
.account-panel-storefront-product,
.account-panel-item,
.account-panel-avatar-tile,
.account-panel-style-tile,
.account-panel-achievement-badge {
  transform-style: preserve-3d;
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    filter var(--motion-base) var(--ease-out),
    opacity var(--motion-base) var(--ease-out) !important;
}

.wh-motion-card:hover {
  transform:
    perspective(900px)
    translate3d(0, -6px, 0)
    rotateX(var(--wh-tilt-y, 0deg))
    rotateY(var(--wh-tilt-x, 0deg)) !important;
  filter: saturate(1.06) brightness(1.03);
}

.wh-motion-card:active,
.btn:active,
.account-panel-btn:active,
.filter-btn:active,
.news-mode-btn:active,
.account-panel-storefront-segment:active,
.account-panel-storefront-type-chip:active,
.nav-link:active,
.mobile-nav-link:active {
  transform: translateY(0) scale(0.985) !important;
}

.wh-motion-card:hover img,
.wh-motion-card:hover video,
.discussion-card:hover .card-media,
.news-card:hover .news-media,
.rank-card:hover .rank-media,
.waifu-card:hover .waifu-media {
  transform: scale(1.035);
  transition: transform var(--motion-slow) var(--ease-out) !important;
}

.legendary.wh-motion-card,
.wh-motion-card.legendary,
.account-panel-storefront-product.legendary {
  animation: whLegendaryBreath 5.6s ease-in-out infinite;
}

.filter-btn,
.news-mode-btn,
.account-panel-tab,
.account-panel-storefront-segment,
.account-panel-storefront-type-chip,
.account-panel-settings-nav-btn,
.nav-link,
.mobile-nav-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    background var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out) !important;
}

.filter-btn.active::after,
.news-mode-btn.active::after,
.account-panel-tab.is-active::after,
.account-panel-storefront-segment.is-active::after,
.account-panel-storefront-type-chip.is-active::after,
.account-panel-settings-nav-btn.is-active::after,
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--wh-gold), var(--wh-pink-2), transparent);
  box-shadow: 0 0 16px rgba(255, 214, 107, 0.42);
  animation: whActiveTrace 340ms var(--ease-out) both;
  pointer-events: none;
}

/* Overlay motion */
.account-panel-root {
  --wh-overlay-stagger: 0ms;
}

.account-panel-root[data-open="true"] .account-panel-backdrop {
  animation: whOverlayBackdropIn var(--motion-base) var(--ease-out) both;
}

.account-panel-root[data-open="true"] .account-panel-glow {
  animation: whOverlayGlowIn 380ms var(--ease-out) both;
}

.account-panel-root[data-open="true"] .account-panel {
  animation: whOverlayShellIn 280ms var(--ease-back) both;
  will-change: transform, opacity, filter;
}

.account-panel-root[data-open="true"] .account-panel-top,
.account-panel-root[data-open="true"] .account-panel-tabs,
.account-panel-root[data-open="true"] .account-panel-status:not(.hidden) {
  animation: whOverlayItemIn 240ms var(--ease-out) 70ms both;
}

.account-panel-root[data-open="true"] .account-panel-close {
  animation: whCloseSettle 340ms var(--ease-back) 95ms both;
}

.account-panel-root .account-panel-body > .wh-motion-item,
.account-panel-root .account-panel-body .wh-motion-item {
  animation: whOverlayItemIn 300ms var(--ease-out) both;
  animation-delay: calc(80ms + (var(--wh-stagger-index, 0) * 28ms));
}

.account-panel-root.is-closing {
  pointer-events: none !important;
}

.account-panel-root.is-closing .account-panel-backdrop {
  animation: whOverlayBackdropOut 170ms var(--ease-soft) both;
}

.account-panel-root.is-closing .account-panel-glow {
  animation: whOverlayBackdropOut 170ms var(--ease-soft) both;
}

.account-panel-root.is-closing .account-panel {
  animation: whOverlayShellOut 180ms var(--ease-soft) both;
}

/* Empty and loading states */
.empty,
.locked,
.account-panel-empty,
.account-panel-loading {
  position: relative;
  overflow: hidden;
}

.empty::before,
.locked::before,
.account-panel-empty::before,
.account-panel-loading::before {
  content: "";
  width: 54px;
  aspect-ratio: 0.68;
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 214, 107, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 50% 18%, rgba(255, 79, 163, 0.28), transparent 44%),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(255, 79, 163, 0.16);
  animation: whEmptyPulse 2.7s ease-in-out infinite;
}

.account-panel-loading::after,
.empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 16%, rgba(255, 255, 255, 0.1) 45%, transparent 62%);
  transform: translateX(-120%) skewX(-18deg);
  animation: whSkeletonSweep 1.8s ease-in-out infinite;
}

@keyframes whPageOld {
  to { opacity: 0; filter: blur(8px); transform: scale(0.985); }
}

@keyframes whPageNew {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px) scale(1.006); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes whRouteLeave {
  to { opacity: 0.72; filter: blur(5px); transform: translateY(-4px) scale(0.992); }
}

@keyframes whHeroBloom {
  from { opacity: 0.42; transform: scale(0.96); filter: blur(18px); }
  to { opacity: var(--wh-hero-glow-opacity); transform: scale(1); filter: blur(8px); }
}

@keyframes whClipReveal {
  from { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transform: translateY(6px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transform: translateY(0); }
}

@keyframes whTitleReveal {
  from { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(12px); }
  55% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes whSoftRise {
  from { opacity: 1; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes whChipIn {
  from { opacity: 1; transform: translate3d(0, 8px, 0) scale(0.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes whCabinetArrive {
  from {
    opacity: 0;
    transform: translate3d(34px, 44px, -180px) rotateX(10deg) rotateY(-24deg) rotateZ(-2deg) scale(0.84);
    filter: blur(10px) saturate(0.82);
  }
  62% {
    opacity: 1;
    transform: translate3d(-6px, -4px, 36px) rotateX(-3deg) rotateY(-7deg) rotateZ(-1deg) scale(1.03);
    filter: blur(0) saturate(1.12);
  }
  to {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--wh-pointer-x, 0) * -10px),
        calc(var(--wh-pointer-y, 0) * -7px),
        0
      )
      rotateX(calc(-2deg + var(--wh-pointer-y, 0) * 2.4deg))
      rotateY(calc(-9deg + var(--wh-pointer-x, 0) * 5deg))
      rotateZ(-1deg);
    filter: blur(0) saturate(1);
  }
}

@keyframes whCabinetBreathe {
  from {
    filter:
      drop-shadow(0 42px 62px rgba(0, 0, 0, 0.62))
      saturate(1);
  }
  to {
    filter:
      drop-shadow(0 48px 72px rgba(0, 0, 0, 0.66))
      drop-shadow(0 0 28px rgba(255, 79, 163, 0.12))
      saturate(1.08);
  }
}

@keyframes whDrawerSlideOpen {
  from {
    opacity: 0;
    transform: translate3d(-38px, -14px, -40px) rotateX(10deg) rotateY(-18deg) rotateZ(-1deg) scale(0.82);
    filter: blur(8px);
  }
  to {
    opacity: 0.98;
    transform:
      translate3d(
        calc(10px + var(--wh-pointer-x, 0) * 6px),
        calc(18px + var(--wh-pointer-y, 0) * 3px),
        96px
      )
      rotateX(2deg)
      rotateY(-10deg)
      rotateZ(-1deg);
    filter:
      drop-shadow(0 24px 38px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 38px rgba(255, 79, 163, 0.24));
  }
}

@keyframes whDrawerIdle {
  from {
    filter:
      drop-shadow(0 24px 38px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 32px rgba(255, 79, 163, 0.2));
  }
  to {
    filter:
      drop-shadow(0 28px 44px rgba(0, 0, 0, 0.54))
      drop-shadow(0 0 48px rgba(255, 214, 107, 0.18))
      drop-shadow(0 0 40px rgba(255, 79, 163, 0.28));
  }
}

@keyframes whDrawerGlow {
  from { opacity: 0.46; filter: blur(20px) saturate(0.9); transform: translate3d(0, 2px, 78px) rotateZ(-1deg) scale(0.88); }
  to { opacity: 0.92; filter: blur(14px) saturate(1.24); transform: translate3d(0, -2px, 96px) rotateZ(-1deg) scale(1.08); }
}

@keyframes whCabinetDust {
  from { transform: translate3d(-14px, 18px, 110px) scale(0.7); opacity: 0.28; }
  to { transform: translate3d(18px, -26px, 150px) scale(1.18); opacity: 0.92; }
}

@keyframes whSectionShine {
  from { transform: translateX(-30%) skewX(-16deg); opacity: 0; }
  40% { opacity: 1; }
  to { transform: translateX(360%) skewX(-16deg); opacity: 0; }
}

@keyframes whArchiveGateIn {
  from { opacity: 0.3; transform: translate3d(0, 44px, -180px) rotateX(20deg) scale(0.82); filter: blur(10px); }
  58% { opacity: 1; transform: translate3d(0, 12px, -70px) rotateX(0deg) scale(1.04); filter: blur(0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg) scale(1); filter: blur(0); }
}

@keyframes whDrawerBreathe {
  from { transform: translate3d(0, 34px, -72px) rotateX(62deg) scaleX(1); filter: saturate(0.94); }
  to { transform: translate3d(0, 24px, -60px) rotateX(52deg) scaleX(1.05); filter: saturate(1.14); }
}

@keyframes whDrawerLight {
  from { opacity: 0.42; transform: translate3d(0, 26px, -36px) rotateX(64deg) scale(0.82); }
  to { opacity: 0.82; transform: translate3d(0, 14px, -24px) rotateX(58deg) scale(1.08); }
}

@keyframes whSectionCardIn {
  from { opacity: 0; filter: blur(10px); transform: perspective(980px) translate3d(0, 48px, -90px) rotateX(18deg) rotateY(-16deg) scale(0.88); }
  to { opacity: 1; filter: blur(0); transform: perspective(980px) translate3d(0, 0, 0) rotateX(var(--wh-tilt-y, 0deg)) rotateY(var(--wh-tilt-x, 0deg)) scale(1); }
}

@keyframes whGateAuraIn {
  from { opacity: 0.78; transform: scale(0.78); }
  to { opacity: 0.95; transform: scale(1); filter: blur(16px); }
}

@keyframes whRingReveal {
  from { opacity: 0.72; transform: scale(0.78) rotate(-24deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes whFanMain {
  from { opacity: 1; transform: translate3d(0, 12%, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.72); }
  62% { opacity: 1; }
  to { opacity: 1; transform: var(--wh-final-transform); }
}

@keyframes whFanLeft {
  from { opacity: 0.82; transform: translate3d(4%, 10%, -18px) rotateY(0deg) rotateZ(-2deg) scale(0.72); }
  to { opacity: 0.9; transform: var(--wh-final-transform); }
}

@keyframes whFanRight {
  from { opacity: 0.78; transform: translate3d(-4%, 10%, -18px) rotateY(0deg) rotateZ(2deg) scale(0.72); }
  to { opacity: 0.86; transform: var(--wh-final-transform); }
}

@keyframes whFanRearLeft {
  from { opacity: 0.42; transform: translate3d(8%, 8%, -96px) rotateY(0deg) rotateZ(-2deg) scale(0.68); }
  to { opacity: 0.54; transform: var(--wh-final-transform); filter: blur(1px); }
}

@keyframes whFanRearRight {
  from { opacity: 0.46; transform: translate3d(-8%, 8%, -92px) rotateY(0deg) rotateZ(2deg) scale(0.68); }
  to { opacity: 0.6; transform: var(--wh-final-transform); filter: blur(0.7px); }
}

@keyframes whSparkAwake {
  from { opacity: 0.62; transform: scale(0.72); }
  to { opacity: 0.82; transform: scale(1); }
}

@keyframes whActiveTrace {
  from { transform: translateX(-22px) scaleX(0.2); opacity: 0; }
  to { transform: translateX(0) scaleX(1); opacity: 1; }
}

@keyframes whLegendaryBreath {
  0%, 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 214, 107, 0.13); }
  50% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 34px rgba(255, 214, 107, 0.22); }
}

@keyframes whOverlayBackdropIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(14px); }
}

@keyframes whOverlayGlowIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes whOverlayShellIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes whOverlayItemIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes whCloseSettle {
  from { opacity: 0; transform: rotate(-18deg) scale(0.82); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes whOverlayBackdropOut {
  to { opacity: 0; backdrop-filter: blur(0); }
}

@keyframes whOverlayShellOut {
  to { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); filter: blur(5px); }
}

@keyframes whEmptyPulse {
  0%, 100% { transform: translateY(0); opacity: 0.78; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes whSkeletonSweep {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(150%) skewX(-18deg); opacity: 0; }
}

@media (max-width: 760px) {
  body.wh-page-index .wh-home-hero,
  body.wh-page-index .wh-home-hero.wh-reveal,
  body.wh-page-index .wh-home-hero.wh-reveal.is-visible,
  body.wh-page-index .wh-home-routes,
  body.wh-page-index .wh-home-routes.wh-reveal,
  body.wh-page-index .wh-home-routes.wh-reveal.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  body.wh-page-index .wh-home-copy,
  body.wh-page-index .wh-home-copy *,
  body.wh-page-index .wh-home-actions,
  body.wh-page-index .wh-home-status {
    opacity: 1 !important;
    filter: none !important;
  }

  body.wh-motion-ready.wh-page-index .wh-home-copy .wh-eyebrow,
  body.wh-motion-ready.wh-page-index .wh-home-copy h1,
  body.wh-motion-ready.wh-page-index .wh-home-copy .subtitle,
  body.wh-motion-ready.wh-page-index .wh-home-actions .btn,
  body.wh-motion-ready.wh-page-index .wh-home-status span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  body.wh-motion-ready.wh-page-index .wh-portal-card {
    animation-name: whPortalCardFloat !important;
    animation-duration: 6.8s !important;
    animation-delay: 0ms !important;
    animation-fill-mode: none !important;
  }

  body.wh-page-index .wh-portal-aura,
  body.wh-page-index .wh-portal-ring,
  body.wh-page-index .wh-portal-spark {
    animation-delay: 0ms !important;
  }

  body.wh-page-index .wh-portal-card.has-image .wh-card-image {
    opacity: 1 !important;
    transition: none !important;
  }

  .wh-motion-card:hover {
    transform: translate3d(0, -3px, 0) !important;
  }

  body.wh-motion-ready.wh-page-index .wh-archive-scene {
    transform: translate3d(0, 0, -40px) scale(0.94) !important;
    filter: none !important;
  }

  .wh-section-card-3d.wh-motion-card:hover {
    transform: translate3d(0, -4px, 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.wh-route-leaving body,
  .wh-motion-card:hover,
  .wh-archive-scene,
  .wh-archive-depth,
  .wh-archive-card,
  .wh-section-preview,
  .wh-section-card-3d,
  body.wh-motion-ready.wh-page-index .wh-hunt-gate,
  body.wh-page-index .wh-home-routes {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .wh-archive-card {
    opacity: 0.24 !important;
  }

  .wh-portal-wrap.is-section-previewing .wh-section-preview {
    opacity: 0.8 !important;
  }

  .account-panel-root[data-open="true"] .account-panel,
  .account-panel-root[data-open="true"] .account-panel-backdrop,
  .account-panel-root[data-open="true"] .account-panel-glow {
    animation: none !important;
  }
}