:root {
  --ink: #0b0b12;
  --paper: #e8d5ad;
  --paper-2: #c8aa78;
  --gold: #e5bb69;
  --violet: #a773ff;
  --blue: #6dc6ff;
  --glow: rgba(132, 188, 255, .9);
  --mx: 0;
  --my: 0;
  --pan-x: 0px;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: #070810; }
body {
  margin: 0;
  overflow: hidden;
  background: #070810;
  color: #f5ead3;
  font-family: Georgia, "Times New Roman", serif;
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: 1rem;
  transform: translateY(-200%);
  background: #fff;
  color: #111;
  padding: .75rem 1rem;
  border-radius: 999px;
}
.skip-link:focus { transform: none; }

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 40%, rgba(62, 48, 101, .25), transparent 38%),
    #080912;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translate3d(calc(-50% + var(--pan-x) + var(--parallax-x)), calc(-50% + var(--parallax-y)), 0) scale(1.012);
  transform-origin: center;
  overflow: hidden;
  will-change: transform;
}

.scene-picture,
.scene-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-picture img {
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  box-shadow: inset 0 0 12vw 2vw rgba(0,0,0,.65);
  background:
    radial-gradient(circle at 52% 43%, transparent 0 40%, rgba(0,0,0,.07) 68%, rgba(0,0,0,.32) 100%);
}

/* The source concept contained a cat on the high shelf. This scenic mask turns
   that corner back into shadowed shelving so Wolfycorn is the only animal
   character in the Hokus canon. */
.cat-cover {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 23%;
  height: 28%;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(3,4,8,.96) 2%, rgba(7,7,11,.91) 43%, rgba(12,10,12,.55) 76%, transparent 100%),
    radial-gradient(ellipse at 18% 30%, rgba(39,25,18,.84), transparent 62%);
  mix-blend-mode: multiply;
}
.cat-cover::before,
.cat-cover::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 18%;
  height: 4px;
  background: rgba(91,59,35,.58);
  box-shadow: 0 2px 7px rgba(0,0,0,.8);
}
.cat-cover::before { top: 43%; transform: rotate(-1deg); }
.cat-cover::after { top: 67%; transform: rotate(1deg); }

.window-haze {
  position: absolute;
  z-index: 4;
  left: 54%;
  top: 4%;
  width: 31%;
  height: 50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(124,178,255,.12), transparent 68%);
  opacity: .5;
  animation: haze 9s ease-in-out infinite;
}

.book-glow {
  position: absolute;
  z-index: 4;
  left: 25%;
  top: 53%;
  width: 34%;
  height: 14%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,207,110,.28), transparent 63%);
  filter: blur(6px);
  animation: bookGlow 4.8s ease-in-out infinite;
}

.wand-aura {
  position: absolute;
  z-index: 6;
  left: 51.5%;
  top: 35.5%;
  width: 5.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .45;
  background: radial-gradient(circle, #fff 0 3%, rgba(255,210,119,.9) 5%, rgba(145,178,255,.58) 18%, transparent 66%);
  filter: blur(.5px);
  animation: wandPulse 2.4s ease-in-out infinite;
}

.wolfycorn-aura {
  position: absolute;
  z-index: 5;
  left: 48.5%;
  top: 66%;
  width: 14.5%;
  height: 14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(126,199,255,.13), transparent 70%);
  opacity: 0;
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hotspot,
.flying-mail {
  position: absolute;
  z-index: 10;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff3d2;
  cursor: pointer;
  border-radius: 30%;
  outline: none;
}
.hotspot::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  border: 1px solid rgba(255,224,158,0);
  box-shadow: 0 0 0 rgba(255,215,128,0);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, inset .25s ease;
}
.hotspot:hover::before,
.hotspot:focus-visible::before,
body.show-clues .hotspot::before {
  inset: 7%;
  border-color: rgba(255,224,158,.55);
  box-shadow: 0 0 24px rgba(255,191,84,.38), inset 0 0 18px rgba(107,176,255,.13);
  background: rgba(255,255,255,.025);
}
.hotspot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .35rem);
  transform: translate(-50%, 5px);
  min-width: max-content;
  max-width: 14rem;
  padding: .36rem .62rem;
  color: #2b1d12;
  background: rgba(232,213,173,.95);
  border: 1px solid rgba(89,61,31,.55);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  font-size: clamp(.65rem, .7vw, .82rem);
  font-style: italic;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
body.show-clues .hotspot-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hotspot-globe { left: 0.4%; top: 31%; width: 15%; height: 37%; border-radius: 50%; }
.hotspot-book-1 { left: 57.1%; top: 50.2%; width: 15.4%; height: 7.6%; }
.hotspot-book-2 { left: 57.5%; top: 57.8%; width: 15.1%; height: 6.6%; }
.hotspot-book-3 { left: 57.7%; top: 64.4%; width: 14.9%; height: 6.6%; }
.hotspot-book-4 { left: 58%; top: 71%; width: 14.5%; height: 6.2%; }
.hotspot-dog { left: 48.2%; top: 67%; width: 14.7%; height: 12.3%; border-radius: 50%; }
.hotspot-wand { left: 47.5%; top: 35.5%; width: 10.2%; height: 18%; transform: rotate(13deg); }
.hotspot-envelope { left: 47.5%; top: 22.5%; width: 15.3%; height: 17%; transform: rotate(4deg); }
.hotspot-potion { left: 7.7%; top: 67%; width: 8.2%; height: 13%; }
.hotspot-window { left: 57%; top: 3.5%; width: 29%; height: 44%; border-radius: 46%; }
.hotspot-wand .hotspot-label { transform: translate(-50%, 5px) rotate(-13deg); }
.hotspot-wand:hover .hotspot-label,
.hotspot-wand:focus-visible .hotspot-label,
body.show-clues .hotspot-wand .hotspot-label { transform: translate(-50%, 0) rotate(-13deg); }

.flying-mail {
  z-index: 13;
  width: clamp(58px, 6vw, 104px);
  aspect-ratio: 16 / 9;
  left: -12vw;
  top: 26%;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(245,204,117,.65));
}
.flying-mail svg { width: 100%; height: 100%; overflow: visible; }
.mail-paper { fill: #e6d3ad; stroke: #846238; stroke-width: 2; }
.mail-fold { fill: none; stroke: #8c6840; stroke-width: 2; }
.mail-seal { fill: #7e2430; stroke: #d39b71; stroke-width: 1; }
.mail-wing { fill: rgba(238,232,214,.94); stroke: rgba(120,103,80,.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.flying-mail.is-flying .wing-left { animation: flapLeft .26s ease-in-out infinite alternate; }
.flying-mail.is-flying .wing-right { animation: flapRight .26s ease-in-out infinite alternate; }
.flying-mail.is-flying {
  opacity: 1;
  animation: flyMail 9s cubic-bezier(.44,.02,.45,.99) forwards;
}

.sleep-z {
  position: absolute;
  z-index: 12;
  left: 40%;
  top: 34%;
  color: rgba(224,234,255,.88);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(106,155,255,.65);
  opacity: 0;
  pointer-events: none;
}

.coffee-spell {
  position: absolute;
  z-index: 11;
  left: 31%;
  top: 66%;
  width: 5.8%;
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
}
.coffee-cup {
  position: absolute;
  left: 18%; bottom: 8%; width: 64%; height: 45%;
  border: 2px solid rgba(235,215,177,.7);
  border-radius: 4px 4px 12px 12px;
  background: rgba(31,24,27,.78);
  box-shadow: 0 0 12px rgba(255,192,92,.15);
}
.coffee-cup::after {
  content: "";
  position: absolute;
  right: -29%; top: 12%; width: 35%; height: 48%;
  border: 2px solid rgba(235,215,177,.65);
  border-left: 0;
  border-radius: 0 50% 50% 0;
}
.coffee-spell i {
  position: absolute;
  bottom: 54%;
  width: 2px;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(transparent, rgba(240,239,230,.85), transparent);
  filter: blur(.4px);
}
.coffee-spell i:nth-child(2) { left: 31%; animation-delay: -.7s; }
.coffee-spell i:nth-child(3) { left: 49%; animation-delay: -.2s; }
.coffee-spell i:nth-child(4) { left: 67%; animation-delay: -.9s; }

.scene-caption {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  max-width: min(82vw, 650px);
  padding: .45rem .8rem;
  text-align: center;
  color: rgba(243,228,198,.85);
  font-size: clamp(.76rem, 1vw, .98rem);
  font-style: italic;
  letter-spacing: .03em;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
  opacity: 0;
}
.scene-caption.show { animation: captionInOut 6.5s ease forwards; }

.help-orb,
.motion-toggle {
  position: fixed;
  z-index: 25;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(230,203,147,.42);
  color: rgba(243,226,192,.86);
  background: rgba(8,9,16,.52);
  backdrop-filter: blur(7px);
  box-shadow: 0 0 16px rgba(99,125,202,.12);
  cursor: pointer;
}
.help-orb { right: 1rem; }
.motion-toggle { left: 1rem; font: 700 .72rem/1 system-ui, sans-serif; }
.help-orb:hover,
.help-orb:focus-visible,
.motion-toggle:hover,
.motion-toggle:focus-visible { border-color: rgba(255,224,158,.88); color: #fff0c7; outline: none; }

.panel-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s step-end;
}
.panel-layer.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}
.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,9,.67);
  backdrop-filter: blur(6px) saturate(.8);
}
.panel {
  position: relative;
  z-index: 2;
  width: min(680px, 92vw);
  max-height: min(78vh, 760px);
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #2a1c12;
  border: 1px solid rgba(92,61,32,.7);
  border-radius: 9px 15px 9px 18px;
  background:
    linear-gradient(rgba(239,220,180,.96), rgba(211,184,137,.97)),
    #dac29a;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 0 40px rgba(104,68,35,.08);
  transform: translateY(18px) scale(.985) rotate(-.2deg);
  transition: transform .35s cubic-bezier(.2,.75,.2,1);
}
.panel-layer.is-open .panel { transform: none; }
.panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(95,66,39,.16);
  border-radius: inherit;
  pointer-events: none;
}
.panel-close {
  position: absolute;
  z-index: 3;
  right: .85rem;
  top: .75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(77,48,27,.28);
  background: rgba(255,255,255,.18);
  color: #432b1b;
  cursor: pointer;
}
.panel-kicker {
  text-transform: uppercase;
  letter-spacing: .18em;
  font: 700 .68rem/1.3 system-ui, sans-serif;
  opacity: .62;
  margin-bottom: .65rem;
}
.panel h2 {
  margin: 0 2rem .7rem 0;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: .96;
  font-weight: 500;
  letter-spacing: -.035em;
}
.panel-copy {
  max-width: 56ch;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.55;
}
.panel-copy p { margin: .5rem 0 1rem; }
.panel-copy a { color: #4d2b17; font-weight: 700; text-underline-offset: .17em; }
.portal-list {
  display: grid;
  gap: .7rem;
  margin-top: 1.4rem;
}
.portal-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(81,52,29,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.13);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.portal-card:hover,
.portal-card:focus-visible { transform: translateX(4px); background: rgba(255,255,255,.28); border-color: rgba(81,52,29,.5); outline: none; }
.portal-card strong { display: block; font-size: 1.06rem; }
.portal-card small { display: block; margin-top: .15rem; opacity: .67; }
.portal-arrow { font-size: 1.25rem; }
.empty-shelf { padding: .9rem 0; font-style: italic; opacity: .67; }

body[data-scene="sleeping"] .window-haze { opacity: .2; }
body[data-scene="sleeping"] .stage::after { background: linear-gradient(rgba(8,12,31,.13), rgba(2,5,14,.27)), radial-gradient(circle at 52% 43%, transparent 0 37%, rgba(0,0,0,.18) 75%); }
body[data-scene="sleeping"] .sleep-z { animation: sleepZ 3.4s ease-in infinite; }
body[data-scene="sleeping"] .sleep-z-2 { animation-delay: 1.05s; left: 42%; }
body[data-scene="sleeping"] .sleep-z-3 { animation-delay: 2.1s; left: 44%; }

body[data-scene="spell"] .wand-aura { animation: wildSpell .72s ease-in-out infinite alternate; opacity: .9; }
body[data-scene="spell"] .book-glow { animation-duration: 1.6s; }

body[data-scene="mail"] .flying-mail { pointer-events: auto; }
body[data-scene="wolfycorn"] .wolfycorn-aura { opacity: 1; animation: dogGlow 2.6s ease-in-out infinite; }
body[data-scene="coffee"] .coffee-spell { opacity: 1; }
body[data-scene="coffee"] .coffee-spell i { animation: steam 2.1s ease-in-out infinite; }

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after { animation-play-state: paused !important; }

@keyframes haze { 0%,100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.06); opacity: .62; } }
@keyframes bookGlow { 0%,100% { opacity: .35; transform: scale(.97); } 50% { opacity: .8; transform: scale(1.02); } }
@keyframes wandPulse { 0%,100% { transform: scale(.7); opacity: .32; } 50% { transform: scale(1.2); opacity: .78; } }
@keyframes wildSpell { 0% { transform: scale(.65) rotate(-8deg); filter: blur(.5px) hue-rotate(0); } 100% { transform: scale(1.55) rotate(9deg); filter: blur(1px) hue-rotate(35deg); } }
@keyframes dogGlow { 0%,100% { transform: scale(.9); opacity: .2; } 50% { transform: scale(1.08); opacity: .85; } }
@keyframes sleepZ { 0% { transform: translate(0, 18px) scale(.6); opacity: 0; } 25% { opacity: .85; } 100% { transform: translate(28px, -52px) scale(1.25) rotate(-8deg); opacity: 0; } }
@keyframes steam { 0% { transform: translateY(10%) scaleX(.7); opacity: 0; } 35% { opacity: .7; } 100% { transform: translateY(-65%) translateX(4px) scaleX(1.4); opacity: 0; } }
@keyframes flapLeft { from { transform: rotate(7deg); } to { transform: rotate(-23deg); } }
@keyframes flapRight { from { transform: rotate(-7deg); } to { transform: rotate(23deg); } }
@keyframes flyMail {
  0% { left: -12%; top: 27%; transform: rotate(-8deg) scale(.75); }
  18% { left: 28%; top: 16%; transform: rotate(6deg) scale(.92); }
  38% { left: 60%; top: 29%; transform: rotate(-4deg) scale(1); }
  56% { left: 78%; top: 16%; transform: rotate(12deg) scale(.88); }
  75% { left: 52%; top: 38%; transform: rotate(-11deg) scale(1.08); }
  100% { left: 50%; top: 25%; transform: rotate(3deg) scale(.92); }
}
@keyframes captionInOut { 0% { opacity: 0; transform: translate(-50%, 7px); } 12%,72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .stage {
    width: max(100vw, 150svh);
    touch-action: pan-y;
  }
  .hotspot-label { font-size: .72rem; }
  .hotspot::before { inset: 8%; }
  .panel { width: min(94vw, 680px); max-height: 82svh; padding: 1.45rem 1.2rem 1.6rem; }
  .panel h2 { font-size: clamp(2rem, 12vw, 3.4rem); }
  .help-orb, .motion-toggle { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .stage { transform: translate3d(calc(-50% + var(--pan-x)), -50%, 0); }
}

/* --------------------------------------------------------------------------
   Hokus v2: separated animation layers
   -------------------------------------------------------------------------- */
:root {
  --look-x: 0px;
  --look-y: 0px;
}

.window-fireflies {
  position: absolute;
  z-index: 5;
  left: 55.2%;
  top: 5.5%;
  width: 30.8%;
  height: 44.5%;
  pointer-events: none;
  clip-path: ellipse(46% 49% at 50% 50%);
  filter: drop-shadow(0 0 6px rgba(250, 211, 109, .14));
  opacity: .95;
}

.mail-origin-veil {
  position: absolute;
  z-index: 8;
  left: 46.8%;
  top: 18.5%;
  width: 17.2%;
  height: 22%;
  border-radius: 48%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.72) rotate(-8deg);
  backdrop-filter: blur(12px) saturate(.72) brightness(.74);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(19, 29, 54, .82) 0 25%, rgba(58, 77, 117, .48) 47%, rgba(95, 144, 220, .12) 66%, transparent 77%),
    conic-gradient(from 20deg, transparent, rgba(137, 183, 255, .18), transparent 28%, rgba(255, 211, 116, .12), transparent 58%);
  filter: drop-shadow(0 0 18px rgba(104, 161, 255, .22));
  transition: opacity .25s ease, transform .55s ease;
}
body.mail-in-flight .mail-origin-veil {
  opacity: .96;
  transform: scale(1) rotate(4deg);
  animation: mailVeil 2.2s ease-in-out infinite alternate;
}

.mervlin-expression,
.tuffsa-sleep {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.mervlin-brow {
  position: absolute;
  height: auto;
  transform-origin: 50% 70%;
  opacity: .78;
  filter: saturate(.92) contrast(1.03);
  will-change: transform;
}
.mervlin-brow.brow-left {
  left: 33.85%;
  top: 36.13%;
  width: 3.58%;
  animation: browLeftThink 8.4s ease-in-out infinite;
}
.mervlin-brow.brow-right {
  left: 37.89%;
  top: 33.4%;
  width: 3.45%;
  animation: browRightThink 7.2s ease-in-out infinite;
}

.eye-glint {
  position: absolute;
  width: .29%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 246, 215, .88);
  box-shadow: 0 0 5px rgba(255, 237, 183, .62);
  transform: translate(var(--look-x), var(--look-y));
  transition: transform .08s linear;
  opacity: .6;
}
.eye-glint-left { left: 35.72%; top: 40.7%; }
.eye-glint-right { left: 39.45%; top: 37.08%; }

body[data-scene="spell"] .mervlin-brow.brow-left {
  animation: browSpellLeft 1.7s ease-in-out infinite alternate;
}
body[data-scene="spell"] .mervlin-brow.brow-right {
  animation: browSpellRight 1.7s ease-in-out infinite alternate;
}
body[data-scene="sleeping"] .mervlin-brow {
  opacity: .62;
  animation-duration: 12s;
}

.tuffsa-lip {
  position: absolute;
  left: 55.08%;
  top: 74.02%;
  width: 4.17%;
  height: auto;
  opacity: .9;
  transform-origin: 54% 46%;
  animation: tuffsaLipFlap 6.8s ease-in-out infinite;
  will-change: transform;
}
body[data-scene="wolfycorn"] .tuffsa-lip {
  animation-duration: 4.8s;
}

.snore-puff {
  position: absolute;
  left: 58.25%;
  top: 75.45%;
  width: 1.1%;
  aspect-ratio: 1;
  border: 1px solid rgba(220, 231, 255, .5);
  border-radius: 50%;
  opacity: 0;
  filter: blur(.15px);
  animation: snorePuff 5.2s ease-out infinite;
}
.snore-puff-2 { animation-delay: 2.6s; }

/* The scene hit areas remain generous, but their visual affordance is now a
   rotating spell made of broken light and sparks rather than a UI circle. */
.hotspot {
  overflow: visible;
}
.hotspot::before {
  content: "";
  position: absolute;
  inset: auto !important;
  left: 50%;
  top: 50%;
  width: clamp(30px, 3.3vw, 58px);
  height: clamp(30px, 3.3vw, 58px);
  margin: 0;
  border: 0 !important;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 7%,
      rgba(255, 230, 150, .98) 8% 12%,
      transparent 13% 25%,
      rgba(127, 184, 255, .82) 27% 31%,
      transparent 33% 47%,
      rgba(255, 204, 103, .9) 49% 53%,
      transparent 55% 72%,
      rgba(169, 129, 255, .82) 74% 78%,
      transparent 80% 100%
    ) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 42% 49%, transparent 53% 100%);
  mask: radial-gradient(circle, transparent 0 38%, #000 42% 49%, transparent 53% 100%);
  box-shadow: none !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45) rotate(0deg);
  filter: drop-shadow(0 0 5px rgba(255, 216, 126, .85)) drop-shadow(0 0 12px rgba(101, 164, 255, .6));
  transition: opacity .18s ease, transform .25s cubic-bezier(.16,.8,.2,1) !important;
  animation: magicSigil 1.65s linear infinite;
  pointer-events: none;
}
.hotspot::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff6d5;
  box-shadow:
    0 -22px 0 0 rgba(255,220,125,.92),
    16px -14px 0 -1px rgba(137,191,255,.9),
    24px 3px 0 -1px rgba(255,241,191,.75),
    13px 19px 0 0 rgba(181,137,255,.72),
    -6px 25px 0 -1px rgba(255,204,93,.85),
    -20px 12px 0 0 rgba(132,197,255,.72),
    -23px -8px 0 -1px rgba(255,239,179,.82),
    -8px -19px 0 0 rgba(190,144,255,.66);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45) rotate(0deg);
  filter: drop-shadow(0 0 5px rgba(255, 229, 153, .92));
  transition: opacity .18s ease, transform .25s ease;
  animation: magicSparks 1.1s linear infinite reverse;
  pointer-events: none;
}
.hotspot:hover::before,
.hotspot:focus-visible::before,
body.show-clues .hotspot::before,
.hotspot:hover::after,
.hotspot:focus-visible::after,
body.show-clues .hotspot::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  border: 0 !important;
  box-shadow: none;
}
.hotspot:focus-visible { outline: none; }
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
body.show-clues .hotspot-label {
  transition-delay: .12s;
}

.flying-mail {
  left: 0 !important;
  top: 0 !important;
  opacity: 0;
  pointer-events: none;
  animation: none !important;
  will-change: transform, opacity;
}
.flying-mail.is-flying {
  opacity: 1;
  pointer-events: auto;
  animation: none !important;
}
.flying-mail.is-flying .wing-left { animation: flapLeft .24s ease-in-out infinite alternate; }
.flying-mail.is-flying .wing-right { animation: flapRight .24s ease-in-out infinite alternate; }
.flying-mail:hover,
.flying-mail:focus-visible {
  filter:
    drop-shadow(0 0 7px rgba(255, 232, 160, .95))
    drop-shadow(0 0 18px rgba(115, 181, 255, .75));
  outline: none;
}

@keyframes magicSigil {
  to { rotate: 360deg; }
}
@keyframes magicSparks {
  0% { rotate: 0deg; scale: .82; }
  50% { scale: 1.15; }
  100% { rotate: 360deg; scale: .82; }
}
@keyframes mailVeil {
  0% { filter: drop-shadow(0 0 12px rgba(104,161,255,.22)); }
  100% { filter: drop-shadow(0 0 26px rgba(255,203,111,.28)); }
}
@keyframes browLeftThink {
  0%, 66%, 100% { transform: translate(0,0) rotate(0); }
  72% { transform: translate(-.6px,-1.4px) rotate(-2.2deg); }
  78% { transform: translate(.2px,-.3px) rotate(.5deg); }
  84% { transform: translate(0,0) rotate(0); }
}
@keyframes browRightThink {
  0%, 54%, 100% { transform: translate(0,0) rotate(0); }
  60% { transform: translate(.5px,-1.8px) rotate(2.6deg); }
  67% { transform: translate(0,-.4px) rotate(.4deg); }
  74% { transform: translate(0,0) rotate(0); }
}
@keyframes browSpellLeft {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-2px) rotate(-3deg); }
}
@keyframes browSpellRight {
  from { transform: translateY(-.2px) rotate(0); }
  to { transform: translateY(-2.8px) rotate(4deg); }
}
@keyframes tuffsaLipFlap {
  0%, 62%, 100% { transform: translate(0,0) rotate(0) scaleY(1); }
  66% { transform: translate(1px,.6px) rotate(1.2deg) scaleY(.96); }
  69% { transform: translate(-1px,0) rotate(-1.5deg) scaleY(1.025); }
  72% { transform: translate(1.3px,.8px) rotate(1.5deg) scaleY(.95); }
  75% { transform: translate(-.4px,.2px) rotate(-.6deg) scaleY(1.01); }
  78% { transform: translate(0,0) rotate(0) scaleY(1); }
}
@keyframes snorePuff {
  0%, 70% { opacity: 0; transform: translate(0,0) scale(.3); }
  74% { opacity: .5; }
  100% { opacity: 0; transform: translate(18px,-15px) scale(1.7); }
}

@media (max-width: 760px) {
  .hotspot::before { width: 42px; height: 42px; }
  .hotspot::after { transform-origin: center; }
  .eye-glint { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .window-fireflies,
  .mervlin-brow,
  .tuffsa-lip,
  .snore-puff,
  .mail-origin-veil { animation: none !important; }
}


/* --------------------------------------------------------------------------
   Hokus v4 micro-animation rules
   -------------------------------------------------------------------------- */
.mail-origin-veil { display:none !important; }
.mervlin-pupil {
  position:absolute; z-index:3; width:.42%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff 0 8%, #6f5739 10% 24%, #17120d 28% 72%, #000 76%);
  box-shadow:0 0 1px rgba(255,255,255,.7); opacity:0;
  transition:opacity .32s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.pupil-left{left:35.38%;top:40.22%;transform:translate(3px,-1px) scale(.86);}
.pupil-right{left:38.93%;top:37.16%;transform:translate(3px,-1px) scale(.86);}
body.mervlin-direct .mervlin-pupil{opacity:.88;}
body.mervlin-direct .pupil-left{transform:translate(0,1px) scale(.92);}
body.mervlin-direct .pupil-right{transform:translate(-1px,1px) scale(.92);}

.mervlin-lid {
  position:absolute; z-index:4; border-radius:60% 60% 48% 48%;
  background:linear-gradient(180deg, rgba(188,128,90,.98), rgba(135,85,61,.95));
  box-shadow:0 1px 2px rgba(42,23,18,.55); opacity:0;
  transform-origin:50% 0; transition:opacity .04s linear, transform .07s ease-in;
  filter:blur(.25px);
}
.lid-left{left:34.04%;top:39.08%;width:3.36%;height:1.22%;transform:rotate(-8deg) scaleY(.08);}
.lid-right{left:37.55%;top:36.10%;width:3.28%;height:1.18%;transform:rotate(-8deg) scaleY(.08);}
body.mervlin-blink .mervlin-lid{opacity:.95;}
body.mervlin-blink .lid-left{transform:rotate(-8deg) scaleY(1);}
body.mervlin-blink .lid-right{transform:rotate(-8deg) scaleY(1);}
body.mervlin-blink .mervlin-pupil{opacity:0 !important;}
body.mervlin-direct .mervlin-brow.brow-left{transform:translate(-1px,-1px) rotate(-8deg);}
body.mervlin-direct .mervlin-brow.brow-right{transform:translate(1px,-1px) rotate(8deg);}

.tuffsa-lip { animation:none !important; transition:transform .12s ease; }
body.tuffsa-flutter .tuffsa-lip { animation:tuffsaDreamFlutter .72s ease-in-out 1 !important; }
@keyframes tuffsaDreamFlutter {
  0%,100%{transform:translate(0,0) rotate(0) scaleY(1)}
  18%{transform:translate(.8px,.45px) rotate(1.3deg) scaleY(.94)}
  37%{transform:translate(-.7px,-.1px) rotate(-1deg) scaleY(1.04)}
  56%{transform:translate(1px,.5px) rotate(1.6deg) scaleY(.93)}
  76%{transform:translate(-.25px,.15px) rotate(-.4deg) scaleY(1.015)}
}

.stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 52%, rgba(255,188,90,.05), transparent 34%), radial-gradient(circle at 67% 26%, rgba(109,198,255,.05), transparent 22%);}
.window-fireflies{left:52.4%;top:8.2%;width:29%;height:39%;filter:none;opacity:.96;mix-blend-mode:screen;}

.hotspot::before,.hotspot::after{display:none !important;}
.hover-spell {
  --spell-x:50%; --spell-y:50%; position:absolute; z-index:30; left:var(--spell-x); top:var(--spell-y);
  width:96px; height:96px; transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none;
  transition:opacity .16s ease, transform .22s cubic-bezier(.18,.86,.24,1);
  filter:drop-shadow(0 0 8px rgba(255,211,112,.86)) drop-shadow(0 0 20px rgba(121,155,255,.54));
}
.hover-spell.is-active { opacity:1; transform:translate(-50%,-50%) scale(1); }
.hover-spell::before,.hover-spell::after{content:"";position:absolute;inset:18px;border-radius:50%;pointer-events:none;}
.hover-spell::before{border:1px dashed rgba(255,228,157,.52);animation:spellOrbit 2.8s linear infinite;}
.hover-spell::after{inset:10px;border:1px solid rgba(132,174,255,.18);filter:blur(2px);}
.hover-spell .helix {
  position:absolute; left:50%; top:50%; width:82px; height:26px; border-radius:50%;
  border:1.6px solid rgba(255,220,125,.85); transform-origin:center;
  box-shadow:0 0 8px rgba(255,203,89,.44), inset 0 0 5px rgba(135,185,255,.28);
}
.hover-spell .helix::before,.hover-spell .helix::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#fff7d6; top:50%; margin-top:-2.5px;
  box-shadow:0 0 7px #ffd46a, 0 0 14px rgba(123,174,255,.72);
}
.hover-spell .helix::before{left:5px}.hover-spell .helix::after{right:5px}
.helix-a{transform:translate(-50%,-50%) rotate(0deg); animation:helixA 1.05s linear infinite;}
.helix-b{transform:translate(-50%,-50%) rotate(60deg) scale(.84); border-color:rgba(147,191,255,.8)!important; animation:helixB 1.38s linear infinite reverse;}
.helix-c{transform:translate(-50%,-50%) rotate(120deg) scale(.68); border-color:rgba(190,145,255,.72)!important; animation:helixC 1.18s linear infinite;}
.spell-core{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 7px #fff,0 0 18px #ffd16c,0 0 30px rgba(117,166,255,.8);animation:spellCore .85s ease-in-out infinite alternate;}
@keyframes helixA{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes helixB{to{transform:translate(-50%,-50%) rotate(420deg) scale(.84)}}
@keyframes helixC{to{transform:translate(-50%,-50%) rotate(480deg) scale(.68)}}
@keyframes spellCore{to{transform:translate(-50%,-50%) scale(1.55);opacity:.72}}
@keyframes spellOrbit{to{transform:rotate(360deg)}}

.flying-mail{left:0;top:0;z-index:26;width:clamp(68px,6.2vw,104px);aspect-ratio:1.42;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(255,206,116,.22));}
.flying-mail.is-flying{pointer-events:auto;}
.flying-mail:hover,.flying-mail:focus-visible{outline:none;}
.flying-mail .letter-shell{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:linear-gradient(145deg,#f1e4c8,#d0af7a);border:1px solid rgba(85,56,29,.62);box-shadow:0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.32);}
.flying-mail .letter-shell::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 58%,100% 0);background:linear-gradient(180deg,#f1e2c4,#d5ba89);}
.flying-mail .letter-shell::after{content:"pokus@hokus.se";position:absolute;left:14%;top:42%;font-size:clamp(6px,.62vw,11px);color:#553926;letter-spacing:.02em;transform:rotate(-5deg);font-style:italic;opacity:.92;}
.flying-mail .letter-flap{position:absolute;z-index:2;left:0;right:0;top:0;height:56%;clip-path:polygon(0 0,100% 0,50% 92%);background:linear-gradient(#eedfbe,#ceb07c);transform-origin:50% 0;}
.flying-mail .letter-seal{position:absolute;z-index:3;left:50%;top:49%;width:16%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#a64d50,#652229 72%);box-shadow:0 0 0 1px rgba(223,159,119,.8),0 1px 2px rgba(0,0,0,.4)}
.flying-mail.is-flying .letter-shell{animation:letterBreathe 4s ease-in-out infinite;}
@keyframes letterBreathe{50%{transform:rotate(1.3deg) translateY(-2px)}}
.hotspot-envelope{display:none!important;}

.hotspot-label{background:rgba(8,8,13,.84);border-color:rgba(255,215,145,.28);box-shadow:0 8px 22px rgba(0,0,0,.28);}

@media (max-width: 760px){
  .hover-spell{width:84px;height:84px}
  .window-fireflies{left:51.8%;top:7.2%;width:31%;height:36%;}
}

@media (prefers-reduced-motion: reduce){
  .hover-spell .helix,.spell-core,.flying-mail.is-flying .letter-shell{animation:none!important}
}