/* ═══════════ SHARED MAGIC (shared across pages) ═══════════ */

html, body { cursor: none; }
@media (max-width: 900px), (pointer: coarse) { html, body { cursor: auto; } }

/* Add Caveat font for magical accents */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* Starfield */
.magic-starfield {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.magic-star {
  position: absolute;
  background: radial-gradient(circle, rgba(255,215,150,.9) 0%, rgba(225,155,255,.5) 45%, transparent 75%);
  border-radius: 50%;
  animation: magicTwinkle var(--d,4s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
  filter: drop-shadow(0 0 4px rgba(255,215,150,.5));
}
@keyframes magicTwinkle {
  0%,100% { opacity: var(--o,.35); transform: scale(1); }
  50% { opacity: .95; transform: scale(1.5); }
}
.magic-shooting-star {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255,215,150,.9), 0 0 14px rgba(225,155,255,.6);
}
.magic-shooting-star::after {
  content:""; position:absolute; right:0; top:50%;
  width: 120px; height: 1px;
  background: linear-gradient(270deg, rgba(255,215,150,.9), transparent);
  transform: translateY(-50%);
}

/* Bg bubbles */
.magic-bg-bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.magic-bg-bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,.9) 0 10%, rgba(255,255,255,.4) 11%,
    rgba(155,215,255,.45) 26%, rgba(225,155,255,.38) 44%,
    rgba(145,255,200,.3) 60%, rgba(255,225,130,.12) 76%,
    rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 4px 4px 12px rgba(255,255,255,.55);
  animation: magicBubbleRise var(--dur,22s) ease-in-out infinite;
  animation-delay: var(--bd,0s);
}
@keyframes magicBubbleRise {
  0% { transform: translateY(30px) scale(.95); opacity: .3; }
  50% { transform: translateY(-30px) scale(1.05); opacity: .6; }
  100% { transform: translateY(30px) scale(.95); opacity: .3; }
}

/* Gold-accent gradient helper */
.magic-text {
  background: linear-gradient(135deg, #7235a8 0%, #c850a0 50%, #e0a13f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(114,53,168,.18));
}
.handwrite {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: #c850a0;
  font-size: 1.3em;
}

/* Brand mark dot (for brand title) */
.brand::before {
  content:"";
  display: inline-block;
  width: 14px; height: 14px; border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #fff8dc 10%, #ffd88a 50%, #c850a0 100%);
  box-shadow: 0 0 10px rgba(255,200,120,.7), inset -2px -2px 5px rgba(200,80,160,.3);
  animation: magicPulse 3s ease-in-out infinite;
}
@keyframes magicPulse {
  0%,100% { box-shadow: 0 0 6px rgba(255,180,100,.6); }
  50% { box-shadow: 0 0 14px rgba(255,180,100,1), 0 0 22px rgba(225,155,255,.5); }
}

/* Gold corner ornaments — auto-placed on elements marked with .magic-corners */
.magic-corners { position: relative; }
.magic-corners::before,
.magic-corners::after {
  content:""; position: absolute;
  width: 40px; height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23c9892e'/><stop offset='1' stop-color='%23c850a0'/></linearGradient></defs><path d='M2 28 Q2 2 28 2' stroke='url(%23g)' stroke-width='1.4' fill='none'/><circle cx='10' cy='10' r='2' fill='%23c9892e'/><path d='M18 4 l1.6 3.6 3.6 1.6 -3.6 1.6 -1.6 3.6 -1.6 -3.6 -3.6 -1.6 3.6 -1.6 z' fill='%23c9892e' opacity='.8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .7;
  pointer-events: none;
}
.magic-corners::before { top: 12px; left: 12px; }
.magic-corners::after { bottom: 12px; right: 12px; transform: rotate(180deg); }

/* ═══════════ MAGIC CURSOR (wand) ═══════════ */
.magic-wand-cursor {
  position: fixed; pointer-events: none; z-index: 10000;
  width: 28px; height: 28px;
  transform: translate(-50%,-50%);
  transition: transform .05s linear;
}
.magic-wand-cursor::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, #fff8dc 10%, #ffd88a 40%, rgba(225,155,255,.5) 70%, transparent);
  border-radius:50%;
  box-shadow: 0 0 12px rgba(255,216,138,.85), 0 0 22px rgba(225,155,255,.5);
}
.magic-wand-cursor::after {
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:20px;
  transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,245,214,.9) 12%, transparent 25%, rgba(255,245,214,.9) 37%, transparent 50%, rgba(255,245,214,.9) 62%, transparent 75%, rgba(255,245,214,.9) 87%, transparent 100%);
  mask: radial-gradient(circle, transparent 18%, #000 22%, #000 45%, transparent 48%);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 22%, #000 45%, transparent 48%);
}

.magic-sparkle {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 25%, #ffd88a 55%, transparent);
  box-shadow: 0 0 8px rgba(255,216,138,.9), 0 0 12px rgba(225,155,255,.4);
  animation: magicSparkleFall 1.6s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes magicSparkleFall {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
  30%  { opacity: 1; transform: translate(calc(-50% + var(--dx,0px)*.3), calc(-50% + var(--dy,0px)*.3)) scale(1.3) rotate(90deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.3) rotate(360deg); }
}

.magic-bubble-trail {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 9997;
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,.98) 0 10%, rgba(255,255,255,.52) 11%,
    rgba(155,215,255,.58) 26%, rgba(225,155,255,.48) 44%,
    rgba(145,255,200,.4) 60%, rgba(255,225,130,.18) 76%,
    rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px rgba(195,230,255,.5), 0 0 12px rgba(155,215,255,.42), 0 0 26px rgba(225,155,255,.2);
  animation: magicBubbleFloat 2.8s ease-out forwards;
}
@keyframes magicBubbleFloat {
  0% { opacity:.97; transform: translate(-50%,-50%) scale(.55); }
  70% { opacity:.9; }
  100% { opacity:0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% - 120px)) scale(1.5); }
}

.magic-star-burst {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 10px; height: 10px;
  transform: translate(-50%,-50%);
  animation: magicStarBurst 1.2s ease-out forwards;
}
.magic-star-burst::before, .magic-star-burst::after {
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:2px;
  background: linear-gradient(90deg, transparent, #ffd88a, transparent);
  transform: translate(-50%,-50%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255,216,138,.9);
}
.magic-star-burst::after { transform: translate(-50%,-50%) rotate(90deg); }
@keyframes magicStarBurst {
  0% { opacity:1; width:4px; }
  50% { opacity:1; width:38px; }
  100% { opacity:0; width:50px; }
}

@media (prefers-reduced-motion: reduce) {
  .magic-star, .magic-bg-bubble, .brand::before { animation: none !important; }
  .magic-wand-cursor { display:none; }
  html, body { cursor: auto; }
}