/* =====================================================
   READING LAB · ALIVE LAYER — pages that breathe back
   x5: cursor halo, sparkle trail, click pop, fireflies,
       living headlines, scroll reveal, magnetic CTAs,
       character parallax, ink trail, scroll potion,
       magic words, paper planes, twink stars, 3D tilt,
       click ripple, konami spell, idle peek, sound,
       hue shift, type-on hero
   ===================================================== */

/* === CUSTOM CURSOR === */
@media (hover: hover) {
  html, body { cursor: none; }
  a, button, .btn-fun, [data-magnet], input, textarea, summary { cursor: none; }
}
.cursor-halo {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(27, 21, 66, 0.55), 0 0 10px rgba(27, 21, 66, 0.18);
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
}
.cursor-halo.hot {
  width: 56px; height: 56px;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 60%, transparent 80%);
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(27, 21, 66, 0.7), 0 0 16px rgba(27, 21, 66, 0.25);
}
.cursor-dot {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px #1B1542, 0 0 6px rgba(255,255,255,0.55);
  transform: translate(-50%, -50%);
}
@media (max-width: 880px), (hover: none) {
  html, body, a, button { cursor: auto; }
  .cursor-halo, .cursor-dot { display: none; }
}

/* === SPARKLE TRAIL === */
.spark {
  position: fixed; pointer-events: none; z-index: 9990;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
  animation: spark-life 900ms ease-out forwards;
}
.spark svg { width: 100%; height: 100%; display: block; }
@keyframes spark-life {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(45deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -40px))) scale(0.4) rotate(140deg); }
}

/* === CLICK POP === */
.pop {
  position: fixed; pointer-events: none; z-index: 9991;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
}
.pop b {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 8px;
  transform-origin: 0 0;
}
.pop b::before {
  content: ''; display: block;
  width: 8px; height: 8px;
  background: var(--purple-main);
  border-radius: 50%;
  animation: pop-shoot 600ms ease-out forwards;
}
.pop b:nth-child(2n)::before { background: var(--cyan-main); }
.pop b:nth-child(3n)::before { background: var(--pink); }
.pop b:nth-child(5n)::before { background: var(--lilac); width: 6px; height: 6px; }
@keyframes pop-shoot {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--tx, 40px), var(--ty, 0)) scale(0.2); opacity: 0; }
}

/* === FIREFLIES === */
.firefly-field {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.firefly {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,204,245,0.95) 0%, rgba(123,114,212,0.4) 50%, transparent 70%);
  box-shadow: 0 0 12px rgba(215,204,245,0.7);
  animation: firefly-rise var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.firefly.cyan {
  background: radial-gradient(circle, rgba(168,238,244,0.95) 0%, rgba(45,197,212,0.4) 50%, transparent 70%);
  box-shadow: 0 0 12px rgba(168,238,244,0.7);
}
.firefly.pink {
  background: radial-gradient(circle, rgba(244,168,192,0.9) 0%, rgba(199,106,136,0.3) 50%, transparent 70%);
  box-shadow: 0 0 10px rgba(244,168,192,0.6);
}
@keyframes firefly-rise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  8%   { opacity: 0.85; }
  30%  { transform: translate(28px, -28vh) scale(1); }
  55%  { transform: translate(-22px, -55vh) scale(0.85); opacity: 0.9; }
  80%  { transform: translate(18px, -82vh) scale(1.1); opacity: 0.6; }
  100% { transform: translate(0, -110vh) scale(0.4); opacity: 0; }
}

/* === LIVING HEADLINE LETTERS === */
.alive-word { display: inline-block; white-space: nowrap; }
.alive-letter {
  display: inline-block;
  transform-origin: 50% 80%;
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), color 200ms;
  will-change: transform;
}
h1:hover .alive-letter, h2:hover .alive-letter {
  animation: letter-wave 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes letter-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-3deg); }
}
.alive-letter:hover {
  color: var(--purple-main);
  transform: translateY(-4px) scale(1.18) rotate(-4deg);
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(.2,.7,.3,1), transform 600ms cubic-bezier(.2,.7,.3,1);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 450ms; }

/* === Mascot transitions === */
.characters { transition: transform 300ms cubic-bezier(.2,.7,.3,1); }
.characters img { will-change: transform; transition: filter 600ms; }

/* === Magnetic CTAs === */
[data-magnet] {
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms;
  will-change: transform;
}

/* === Button glint === */
.btn-fun { position: relative; overflow: hidden; isolation: isolate; }
.btn-fun::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms ease;
  pointer-events: none;
  z-index: 1;
}
.btn-fun:hover::before { transform: translateX(100%); }
.btn-fun > * { position: relative; z-index: 2; }

/* === Breathing background blobs === */
body { background-attachment: fixed; }
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 600px at var(--mx, 50%) var(--my, 30%), rgba(215,204,245,0.18), transparent 60%),
    radial-gradient(500px 500px at calc(100% - var(--mx, 50%)) calc(100% - var(--my, 50%)), rgba(168,238,244,0.14), transparent 60%);
  transition: background-position 600ms ease;
  mix-blend-mode: multiply;
}

.underline:hover { filter: hue-rotate(-12deg) brightness(1.05); }

/* === INK TRAIL === */
#ink-trail {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9985;
  mix-blend-mode: multiply;
}

/* === Selection === */
::selection { background: rgba(215,204,245,0.7); color: var(--purple-deep); }
::-moz-selection { background: rgba(215,204,245,0.7); color: var(--purple-deep); }

/* === Scroll potion === */
.potion-progress {
  position: fixed; right: 24px; bottom: 24px;
  width: 64px; height: 86px;
  z-index: 60;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 12px rgba(42,36,96,0.18));
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.potion-progress:hover { transform: scale(1.12) rotate(-6deg); }
.potion-bottle { position: relative; width: 100%; height: 100%; }
.potion-bottle::before {
  content:''; position: absolute; inset: 18% 8% 6% 8%;
  border: 3px solid var(--navy);
  border-radius: 20px 20px 30px 30px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.potion-bottle::after {
  content:''; position: absolute; left: 32%; top: 0; width: 36%; height: 22%;
  background: var(--cyan-light);
  border: 3px solid var(--navy);
  border-radius: 6px 6px 4px 4px;
}
.potion-fill {
  position: absolute; left: 11%; right: 11%; bottom: 9%;
  height: var(--fill, 8%);
  background: linear-gradient(180deg, #C9B8E8 0%, #8E7AC8 100%);
  border-radius: 0 0 28px 28px;
  transition: height 200ms ease;
  overflow: hidden;
}
.potion-fill::before {
  content:''; position: absolute; left: -10%; right: -10%; top: -6px; height: 12px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.6) 0 30%, transparent 30%),
    radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.5) 0 30%, transparent 30%),
    radial-gradient(ellipse at 90% 50%, rgba(255,255,255,0.4) 0 30%, transparent 30%);
  animation: potion-wave 3s ease-in-out infinite;
}
@keyframes potion-wave {
  0%, 100% { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
}
.potion-bubble {
  position: absolute; bottom: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.85);
  animation: pot-bub 2.4s ease-in infinite;
  animation-delay: var(--d, 0s);
  left: var(--x, 50%);
}
@keyframes pot-bub {
  0%   { bottom: 0; opacity: 0; }
  20%  { opacity: 0.95; }
  100% { bottom: 100%; opacity: 0; }
}

/* === Magic word trail === */
.magic-word {
  position: fixed; pointer-events: none; z-index: 9988;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--purple-main);
  transform: translate(-50%, -50%);
  animation: word-float 1800ms ease-out forwards;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  white-space: nowrap;
}
@keyframes word-float {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, calc(-50% - 6px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 70px)) scale(0.85); }
}

/* === Paper planes === */
.paper-plane {
  position: fixed; pointer-events: none; z-index: 6;
  width: 56px; height: 36px;
  filter: drop-shadow(0 3px 4px rgba(42,36,96,0.18));
}

/* === Twinkling stars === */
.twink {
  position: fixed; pointer-events: none; z-index: 1;
  width: 12px; height: 12px;
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--td, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.2) rotate(45deg); }
}

/* === 3D tilt + ripple shake === */
.tiltable, .ing, .week, .polaroid, .door {
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
}
@keyframes click-shake {
  0%, 100% { transform: var(--card-tilt, none) translate(0, 0); }
  25%      { transform: var(--card-tilt, none) translate(-3px, -2px) rotate(-1deg); }
  75%      { transform: var(--card-tilt, none) translate(3px, 2px) rotate(1deg); }
}
.shaking { animation: click-shake 280ms ease-in-out; }

/* === Hue shift === */
body { transition: filter 600ms ease; }
/* NOTE: a filter on body breaks position:fixed for descendants (including the custom cursor).
   The hue-shift on deep scroll was too subtle to justify losing the fixed cursor — removed. */
body.scroll-deep { filter: none; }

/* === Idle peek bubble === */
.idle-bubble {
  position: fixed; right: 100px; bottom: 36px;
  background: #fff;
  border: 2.5px solid var(--navy);
  padding: 10px 16px;
  border-radius: 18px;
  font-family: 'Caveat', cursive;
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  box-shadow: 4px 4px 0 var(--purple-main);
  transform: translateY(20px) rotate(-3deg);
  opacity: 0;
  pointer-events: none;
  z-index: 65;
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1), opacity 280ms;
  max-width: 260px;
}
.idle-bubble.show { transform: translateY(0) rotate(-3deg); opacity: 1; }
.idle-bubble::after {
  content: ''; position: absolute;
  right: 24px; bottom: -14px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--navy);
}

/* === Sound toggle === */
.sound-toggle {
  position: fixed; left: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--navy);
  box-shadow: 3px 3px 0 var(--purple-main);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 60;
  font-size: 18px;
  color: var(--purple-deep);
  transition: transform .2s, box-shadow .2s;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}
.sound-toggle:hover {
  transform: translate(-1px, -1px) rotate(-6deg);
  box-shadow: 5px 5px 0 var(--purple-main);
}
.sound-toggle.muted { color: var(--text-muted); }

/* === Confetti === */
.confetto {
  position: fixed; pointer-events: none; z-index: 9992;
  width: 10px; height: 14px;
  animation: confetti-fall var(--dur, 2.4s) cubic-bezier(.25,.6,.4,1) forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(var(--sx, 0), 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(var(--sx, 0) + var(--ex, 0)), calc(100vh + 60px)) rotate(720deg); opacity: 0.6; }
}

/* === Spell flash === */
.spell-flash {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9994;
  background: radial-gradient(circle at center, rgba(215,204,245,0.55) 0%, rgba(123,114,212,0.2) 30%, transparent 60%);
  animation: spell 900ms ease-out forwards;
}
@keyframes spell {
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.4); }
}

/* === Hero type-on caret === */
.typing::after {
  content: '|';
  color: var(--purple-main);
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* === Living purple-button pulse === */
.btn-fun.purple { animation: btn-pulse 4s ease-in-out infinite; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--navy), 0 0 0 0 rgba(123,114,212,0.4); }
  50%      { box-shadow: 4px 4px 0 var(--navy), 0 0 0 12px rgba(123,114,212,0); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .firefly, .spark, .pop, .alive-letter, .cursor-halo, .cursor-dot,
  .twink, .paper-plane, .magic-word, .potion-bubble,
  .confetto, .spell-flash, .idle-bubble, #ink-trail { display: none !important; }
  html, body, * { cursor: auto !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .btn-fun.purple { animation: none !important; }
}

@media (max-width: 880px) {
  .potion-progress { width: 48px; height: 64px; right: 14px; bottom: 14px; }
  .sound-toggle { width: 38px; height: 38px; left: 14px; bottom: 14px; font-size: 15px; }
  .idle-bubble { display: none; }
}
</content>