/* Custom Fonts */
@font-face {
    font-family: 'Rusilla Serif';
    src: url('../assets/fonts/RusillaSerif-2OZpl.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rusilla Serif Light';
    src: url('../assets/fonts/RusillaSerifLight-vmx97.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circus Age';
    src: url('../assets/fonts/Circus Age DEMO.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Foglihten DeH02';
    src: url('../assets/fonts/FoglihtenDeH02.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Foglihten DeH04';
    src: url('../assets/fonts/FoglihtenDeH04.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Religath';
    src: url('../assets/fonts/RELIGATH-Demo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kudry';
    src: url('../assets/fonts/kudry_weird-headline.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dispater Regular';
    src: url('../assets/fonts/DISPATER-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arogant';
    src: url('../assets/fonts/Arogant DEMO.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Ballpoint';
    src: url('../assets/fonts/The Ballpoint.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futures Past';
    src: url('../assets/fonts/FuturesPast-4wql.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oliver Quin';
    src: url('../assets/fonts/OliverQuinRegular-GDxq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.title {
    margin-top: 30px;
    margin-bottom: 5px;
    font-family: 'Kudry', 'Times New Roman', serif;
    text-align: center;
    font-size: 70px;
    color: #ca0201;
}

.body {
    font-family: 'Oliver Quin', 'Times New Roman', serif;
    font-size: 23.2px;
    text-align: left;
    position: relative;
    z-index: 50;
    display: none; /* Hidden until paper animation completes */
    margin-left: 50px;
    color: #471c1c;
}

.subtitle {
	text-align: center;
	margin-bottom: 20px;
}

.center {
	text-align: center;
}

.text {
    position: relative;
    width: 350px;
    max-width: 350px; /* Ensure text stays within paper bounds */
}

.ornament {
    position: relative;
    top: 0px;
    font-family: 'Foglihten DeH02', 'Times New Roman', serif;
}

.menu {
    font-family: 'Foglihten DeH02', 'Times New Roman', serif;
    position: relative;
    top: -50px;
}

.menu-left {
    position: relative;
    left: -400px
}

.menu-right {
    position: relative;
    left: 400px
}

.pagination {
  font-family: 'Foglihten DeH02', 'Times New Roman', serif;
	font-size: 32px;
	color: #7C0A02;
	display: flex;
	justify-content: space-between;
	width: 350px; /* Match the text width to center within paper */
	cursor: pointer;
	margin-top: 5px;
}

/* When only next page is visible, align it to the right */
.pagination:has(.next-page:not(.hidden)):not(:has(.prev-page.visible)) {
	justify-content: flex-end;
}

/* When only prev page is visible, align it to the left */
.pagination:has(.prev-page.visible):not(:has(.next-page:not(.hidden))) {
	justify-content: flex-start;
}

.prev-page {
	display: none;
}

/* Turn.js will handle page animations */

/* Page visibility states - Turn.js compatible */
.page-1 {
    display: none; /* Hidden until paper animation completes */
    width: 350px;
    min-height: 450px;
}

.page-1.fade-in-ready {
    display: block;
    opacity: 0; /* Start transparent for fade-in */
    width: 350px;
    min-height: 450px;
}

.page-2 {
    display: none;
    width: 350px;
    min-height: 450px;
}

.page-3 {
    display: none;
    width: 350px;
    min-height: 450px;
		margin-top: 8px;
}

.br {
    margin-top: 13px;
}

.br2 {
    margin-top: 26px;
}

/* When pages are visible, show them for Turn.js */
.page-1.visible,
.page-2.visible,
.page-3.visible {
    display: block;
    position: relative; /* Turn.js will handle positioning */
}

/* Smooth fade-in animation for initial page display */
.page-1.fade-in,
.page-2.fade-in {
    transition: opacity 2s ease-in-out;
    opacity: 1 !important;
}


/* Alternative keyframe animation (backup) */
@keyframes textFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Let Turn.js fully control page visibility through wrapper display */

/* Let Turn.js handle its own visibility - don't override */

/* Ensure Turn.js content is visible when body becomes visible */
.body.visible .turn-page-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
}

.body.visible .turn-page {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Turn.js handles page visibility */

.page-1.hidden {
    display: none;
}

.page-1.visible {
    display: block;
}

.page-2.visible {
    display: block;
}

.page-3.visible {
    display: block;
}

/* Navigation button states */
.prev-page.visible {
    display: inline;
}

.next-page.hidden {
    display: none;
}

/* Body visibility state */
.body.visible {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Content wrapper to keep text centered */
.content-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative; /* Enable absolute positioning for pages */
    min-height: 400px; /* Ensure wrapper has height for absolute positioned children */
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Custom Properties for Animation Control */
:root {
    --base-sparkle-speed: 2.5s; /* Change this value to adjust all star animation speeds */
    
    /* Wand Animation Configuration - Infinity Symbol Parameters */
    --infinity-width: 1200px;    /* Total width of the infinity symbol */
    --infinity-height: 700px;   /* Total height of the infinity symbol */
    --infinity-center-x: -300px;   /* X offset from envelope center */
    --infinity-center-y: -400px;   /* Y offset from envelope center */
}

/* Body with full bleed background */
body {
    height: 100vh;
    width: 100vw;
    background-image: url('../assets/images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
    cursor: none; /* Hide default cursor initially */
    font-family: 'Rusilla Serif', 'Times New Roman', serif;
}

/* Envelope centered on background */
.envelope {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 90vw;
    height: 80vh;
    max-width: 1400px;
    max-height: 1000px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.envelope img {
    width: 800px;
    height: auto;
    opacity: 0.9;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* Paper element - initially hidden inside envelope */
.paper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6; /* Above envelope but below sparkles */
    width: 90vw;
    height: 80vh;
    max-width: 1400px;
    max-height: 1000px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Initially hidden */
    pointer-events: none;
    perspective: 2000px; /* Enable 3D transforms with enhanced depth */
}

.paper img {
    width: 600px; /* Slightly smaller than envelope */
    height: auto;
    opacity: 1;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    z-index: 10
}

/* Audio widget in lower right corner, left of butterfly */
.audio-widget {
    position: fixed;
    bottom: -100px;
    right: 0px; /* Position to the left of butterfly */
    z-index: 10;
    width: 400px;
    height: 400px;
    overflow: hidden;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out;
}

.audio-widget img {
    width: 550px;
    height: auto;
    opacity: 0.9;
}

/* Show audio widget after paper animation completes */
.audio-widget.show {
    opacity: 1;
}

/* Butterfly in lower right corner */
.butterfly {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.butterfly img {
    width: 50px;
    height: auto;
    opacity: 0.7;
}

/* Wand as custom cursor */
.wand {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 690px;
    height: 690px;
    overflow: visible;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.wand img {
    width: 690px;
    height: auto;
    opacity: 0.9;
    object-fit: contain;
}

/* Magical animation class - ready for custom implementation */
.wand.magical-animation {
    /* Animation removed - ready for new implementation */
    transform-origin: center center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .envelope {
        width: 95vw;
        height: 70vh;
        max-width: 800px;
        max-height: 600px;
    }
    
    .envelope img {
        width: 600px;
    }
    
    .paper img {
        width: 600px;
    }
    
    .audio-widget {
        bottom: 15px;
        right: 70px; /* Adjust for mobile spacing */
        width: 40px;
        height: 40px;
    }
    
    .audio-widget img {
        width: 40px;
    }
    
    .butterfly {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
    
    .butterfly img {
        width: 40px;
    }
    
    .wand {
        width: 552px;
        height: 552px;
    }
    
    .wand img {
        width: 552px;
    }
}

@media (max-width: 480px) {
    .envelope {
        width: 98vw;
        height: 60vh;
        max-width: 600px;
        max-height: 400px;
    }
    
    .envelope img {
        width: 400px;
    }
    
    .paper img {
        width: 300px;
    }
    
    .audio-widget {
        bottom: 10px;
        right: 50px; /* Adjust for smaller mobile spacing */
        width: 30px;
        height: 30px;
    }
    
    .audio-widget img {
        width: 30px;
    }
    
    .butterfly {
        bottom: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
    
    .butterfly img {
        width: 30px;
    }
    
    .wand {
        width: 460px;
        height: 460px;
    }
    
    .wand img {
        width: 460px;
    }
}

/* Sparkles: Plus shapes and Circles */
.sparkles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 15;
}

.sparkle {
    position: absolute;
    opacity: 1.0;
}

/* Plus shapes positioning and animation (35 total) */
.plus-1 {
    top: 12%;
    left: 18%;
    width: 45px;
    height: 45px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.69) ease-in-out infinite;
    animation-delay: 0s;
}

.plus-2 {
    top: 65%;
    right: 22%;
    width: 36px;
    height: 36px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.975) ease-in-out infinite;
    animation-delay: 1.5s;
}

.plus-3 {
    top: 35%;
    left: 75%;
    width: 32px;
    height: 32px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.5) ease-in-out infinite;
    animation-delay: 3s;
}

.plus-4 {
    bottom: 45%;
    left: 12%;
    width: 42px;
    height: 42px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.785) ease-in-out infinite;
    animation-delay: 0.8s;
}

.plus-5 {
    top: 20%;
    right: 15%;
    width: 28px;
    height: 28px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 2.065) ease-in-out infinite;
    animation-delay: 2.2s;
}

.plus-6 {
    bottom: 25%;
    right: 45%;
    width: 48px;
    height: 48px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.315) ease-in-out infinite;
    animation-delay: 1.8s;
}

.plus-7 {
    top: 50%;
    left: 38%;
    width: 34px;
    height: 34px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.8) ease-in-out infinite;
    animation-delay: 0.5s;
}

.plus-8 {
    bottom: 35%;
    right: 18%;
    width: 24px;
    height: 24px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.5) ease-in-out infinite;
    animation-delay: 2.8s;
}

.plus-9 {
    top: 8%;
    left: 55%;
    width: 54px;
    height: 54px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.225) ease-in-out infinite;
    animation-delay: 1.2s;
}

.plus-10 {
    bottom: 15%;
    left: 65%;
    width: 30px;
    height: 30px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.05) ease-in-out infinite;
    animation-delay: 3.5s;
}

.plus-11 {
    top: 75%;
    left: 25%;
    width: 39px;
    height: 39px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.8) ease-in-out infinite;
    animation-delay: 0.3s;
}

.plus-12 {
    top: 42%;
    right: 12%;
    width: 35px;
    height: 35px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.9) ease-in-out infinite;
    animation-delay: 0.6s;
}

.plus-13 {
    bottom: 18%;
    right: 30%;
    width: 34px;
    height: 34px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.35) ease-in-out infinite;
    animation-delay: 1.4s;
}

.plus-14 {
    top: 58%;
    left: 8%;
    width: 19px;
    height: 19px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.95) ease-in-out infinite;
    animation-delay: 2.1s;
}

.plus-15 {
    top: 15%;
    left: 45%;
    width: 37px;
    height: 37px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.5) ease-in-out infinite;
    animation-delay: 0.9s;
}

.plus-16 {
    bottom: 8%;
    left: 18%;
    width: 23px;
    height: 23px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.85) ease-in-out infinite;
    animation-delay: 1.7s;
}

.plus-17 {
    top: 68%;
    left: 62%;
    width: 31px;
    height: 31px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.65) ease-in-out infinite;
    animation-delay: 0.4s;
}

.plus-18 {
    bottom: 55%;
    right: 8%;
    width: 16px;
    height: 16px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.05) ease-in-out infinite;
    animation-delay: 0.35s;
}

.plus-19 {
    top: 32%;
    left: 52%;
    width: 31px;
    height: 31px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.41) ease-in-out infinite;
    animation-delay: 0.1s;
}

.plus-20 {
    bottom: 12%;
    right: 55%;
    width: 25px;
    height: 25px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.475) ease-in-out infinite;
    animation-delay: 0.45s;
}

.plus-21 {
    top: 78%;
    right: 12%;
    width: 38px;
    height: 38px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.8) ease-in-out infinite;
    animation-delay: 0.22s;
}

.plus-22 {
    top: 5%;
    left: 8%;
    width: 18px;
    height: 18px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 2.35) ease-in-out infinite;
    animation-delay: 0.6s;
}

.plus-23 {
    bottom: 35%;
    left: 75%;
    width: 44px;
    height: 44px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.65) ease-in-out infinite;
    animation-delay: 0.15s;
}

.plus-24 {
    top: 48%;
    right: 28%;
    width: 27px;
    height: 27px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.5) ease-in-out infinite;
    animation-delay: 0.38s;
}

.plus-25 {
    bottom: 62%;
    left: 5%;
    width: 34px;
    height: 34px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.8) ease-in-out infinite;
    animation-delay: 0.12s;
}

.plus-26 {
    top: 18%;
    right: 72%;
    width: 12px;
    height: 12px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.54) ease-in-out infinite;
    animation-delay: 0.52s;
}

.plus-27 {
    bottom: 8%;
    left: 42%;
    width: 32px;
    height: 32px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.31) ease-in-out infinite;
    animation-delay: 0.18s;
}

.plus-28 {
    top: 85%;
    left: 68%;
    width: 17px;
    height: 17px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.475) ease-in-out infinite;
    animation-delay: 0.42s;
}

.plus-29 {
    top: 62%;
    right: 5%;
    width: 28px;
    height: 28px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.36) ease-in-out infinite;
    animation-delay: 0.08s;
}

.plus-30 {
    bottom: 45%;
    right: 42%;
    width: 13px;
    height: 13px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.65) ease-in-out infinite;
    animation-delay: 0.65s;
}

.plus-31 {
    top: 25%;
    left: 82%;
    width: 31px;
    height: 31px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.33) ease-in-out infinite;
    animation-delay: 0.25s;
}

.plus-32 {
    bottom: 25%;
    left: 58%;
    width: 22px;
    height: 22px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.425) ease-in-out infinite;
    animation-delay: 0.32s;
}

.plus-33 {
    top: 52%;
    left: 12%;
    width: 15px;
    height: 15px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.56) ease-in-out infinite;
    animation-delay: 0.48s;
}

.plus-34 {
    bottom: 72%;
    right: 15%;
    width: 36px;
    height: 36px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 0.275) ease-in-out infinite;
    animation-delay: 0.05s;
}

.plus-35 {
    top: 38%;
    right: 62%;
    width: 10px;
    height: 10px;
    animation: starTwinkle calc(var(--base-sparkle-speed) * 1.35) ease-in-out infinite;
    animation-delay: 0.68s;
}

/* Circle positioning and animation (8 total) */
.circle-1 {
    top: 18%;
    left: 45%;
    width: 20px;
    height: 20px;
    animation: ellipticalMove 13s ease-in-out infinite;
    animation-delay: 0.7s;
}

.circle-2 {
    top: 55%;
    right: 35%;
    width: 16px;
    height: 16px;
    animation: ellipticalMove 12s ease-in-out infinite 7.5s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-3 {
    bottom: 50%;
    left: 8%;
    width: 14px;
    height: 14px;
    animation: ellipticalMove 15s ease-in-out infinite 9.8s ease-in-out infinite;
    animation-delay: 1.3s;
}

.circle-4 {
    top: 40%;
    right: 8%;
    width: 18px;
    height: 18px;
    animation: ellipticalMove 11s ease-in-out infinite 8s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-5 {
    bottom: 20%;
    left: 40%;
    width: 12px;
    height: 12px;
    animation: ellipticalMove 14s ease-in-out infinite 9s ease-in-out infinite;
    animation-delay: 0.2s;
}

.circle-6 {
    top: 28%;
    right: 55%;
    width: 22px;
    height: 22px;
    animation: ellipticalMove 10s ease-in-out infinite 6.8s ease-in-out infinite;
    animation-delay: 3.2s;
}

.circle-7 {
    bottom: 40%;
    right: 65%;
    width: 10px;
    height: 10px;
    animation: ellipticalMove 16s ease-in-out infinite 10.5s ease-in-out infinite;
    animation-delay: 1.7s;
}

.circle-8 {
    top: 5%;
    left: 35%;
    width: 15px;
    height: 15px;
    animation: ellipticalMove 13.5s ease-in-out infinite 8.8s ease-in-out infinite;
    animation-delay: 2.8s;
}

/* Animation keyframes */
@keyframes starTwinkle {
    0% {
        transform: scale(0);
    }
    10% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes ellipticalMove {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(40px, -15px);
    }
    50% {
        transform: translate(0, -30px);
    }
    75% {
        transform: translate(-40px, -15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Wand animation keyframes removed - ready for custom implementation */

/* Paper animation - slides out from envelope and lays flat on top with fade-in effect */
@keyframes paperSlideOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(20px) translateY(70px) scale(2.2) rotateX(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(20px) translateY(70px) scale(2.2) rotateX(0deg);
    }
}

.paper.slide-out {
    animation: paperSlideOut 1.5s ease-out forwards;
    animation-delay: 1.3s;
}

/* Sparkle life animation */
@keyframes sparkleLife {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    10% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Heavy sparkle life animation with gravity and intense glow effects */
@keyframes sparkleLifeHeavy {
    0% {
        transform: scale(0) rotate(0deg) translateY(0px);
        opacity: 1;
        filter: brightness(2.5) blur(0px) saturate(1.5) contrast(1.3);
    }
    5% {
        transform: scale(1.4) rotate(30deg) translateY(-8px);
        opacity: 1;
        filter: brightness(3) blur(0px) saturate(1.8) contrast(1.4);
    }
    15% {
        transform: scale(1.2) rotate(90deg) translateY(-2px);
        opacity: 0.98;
        filter: brightness(2.7) blur(0px) saturate(1.7) contrast(1.3);
    }
    25% {
        transform: scale(1.1) rotate(150deg) translateY(8px);
        opacity: 0.95;
        filter: brightness(2.3) blur(0px) saturate(1.5) contrast(1.2);
    }
    40% {
        transform: scale(1) rotate(240deg) translateY(25px);
        opacity: 0.9;
        filter: brightness(2) blur(0.5px) saturate(1.4) contrast(1.1);
    }
    55% {
        transform: scale(0.9) rotate(330deg) translateY(45px);
        opacity: 0.8;
        filter: brightness(1.7) blur(1px) saturate(1.3) contrast(1.1);
    }
    70% {
        transform: scale(0.75) rotate(420deg) translateY(65px);
        opacity: 0.6;
        filter: brightness(1.4) blur(1.5px) saturate(1.2) contrast(1);
    }
    85% {
        transform: scale(0.5) rotate(510deg) translateY(85px);
        opacity: 0.4;
        filter: brightness(1.1) blur(2px) saturate(1.1) contrast(0.9);
    }
    95% {
        transform: scale(0.2) rotate(570deg) translateY(95px);
        opacity: 0.2;
        filter: brightness(0.8) blur(2.5px) saturate(1) contrast(0.8);
    }
    100% {
        transform: scale(0) rotate(600deg) translateY(100px);
        opacity: 0;
        filter: brightness(0.5) blur(3px) saturate(0.8) contrast(0.7);
    }
}

/* Enhanced sparkle styles with intense glow */
.magic-sparkle {
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

.magic-sparkle.sparkle-star {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magic-sparkle.sparkle-circle {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.magic-sparkle.sparkle-diamond {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.magic-sparkle.sparkle-plus {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* Halo effects disabled - pulseGlow animation removed */

/* Recording indicator pulse animation */
@keyframes recordingPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.3;
        transform: scale(1.2);
    }
}































































/* === RECORDED WAND ANIMATION START === */

@keyframes recordedWandAnimation {
    9.96% { left: 1024px; top: 627px; }
    10.09% { left: 1026px; top: 626px; }
    10.23% { left: 1028px; top: 625px; }
    10.38% { left: 1029px; top: 625px; }
    10.52% { left: 1031px; top: 623px; }
    10.65% { left: 1036px; top: 620px; }
    10.79% { left: 1039px; top: 617px; }
    10.96% { left: 1041px; top: 615px; }
    11.09% { left: 1044px; top: 611px; }
    11.23% { left: 1047px; top: 608px; }
    11.38% { left: 1050px; top: 605px; }
    11.52% { left: 1054px; top: 600px; }
    11.65% { left: 1057px; top: 597px; }
    11.79% { left: 1060px; top: 592px; }
    11.96% { left: 1063px; top: 588px; }
    12.08% { left: 1066px; top: 583px; }
    12.23% { left: 1069px; top: 579px; }
    12.37% { left: 1071px; top: 573px; }
    12.50% { left: 1074px; top: 567px; }
    12.66% { left: 1076px; top: 561px; }
    12.79% { left: 1079px; top: 554px; }
    12.93% { left: 1082px; top: 547px; }
    13.08% { left: 1084px; top: 539px; }
    13.22% { left: 1087px; top: 530px; }
    13.35% { left: 1089px; top: 522px; }
    13.52% { left: 1092px; top: 514px; }
    13.64% { left: 1093px; top: 505px; }
    13.78% { left: 1095px; top: 498px; }
    13.93% { left: 1096px; top: 489px; }
    14.07% { left: 1098px; top: 482px; }
    14.20% { left: 1098px; top: 475px; }
    14.34% { left: 1099px; top: 468px; }
    14.49% { left: 1099px; top: 461px; }
    14.63% { left: 1099px; top: 454px; }
    14.76% { left: 1099px; top: 448px; }
    14.90% { left: 1099px; top: 442px; }
    15.04% { left: 1099px; top: 437px; }
    15.21% { left: 1096px; top: 430px; }
    15.36% { left: 1094px; top: 424px; }
    15.48% { left: 1092px; top: 419px; }
    15.63% { left: 1090px; top: 414px; }
    15.77% { left: 1087px; top: 407px; }
    15.90% { left: 1080px; top: 396px; }
    16.19% { left: 1076px; top: 390px; }
    16.33% { left: 1072px; top: 386px; }
    16.48% { left: 1063px; top: 376px; }
    16.62% { left: 1058px; top: 372px; }
    16.89% { left: 1052px; top: 367px; }
    17.06% { left: 1042px; top: 360px; }
    17.19% { left: 1035px; top: 356px; }
    17.47% { left: 1023px; top: 348px; }
    17.60% { left: 1016px; top: 345px; }
    17.75% { left: 1009px; top: 341px; }
    18.03% { left: 997px; top: 334px; }
    18.16% { left: 991px; top: 332px; }
    18.47% { left: 979px; top: 326px; }
    18.60% { left: 973px; top: 324px; }
    18.88% { left: 960px; top: 319px; }
    19.16% { left: 945px; top: 316px; }
    19.30% { left: 939px; top: 315px; }
    19.59% { left: 924px; top: 313px; }
    19.88% { left: 907px; top: 312px; }
    20.01% { left: 900px; top: 311px; }
    20.30% { left: 883px; top: 310px; }
    20.44% { left: 876px; top: 310px; }
    20.56% { left: 869px; top: 309px; }
    20.73% { left: 862px; top: 309px; }
    21.00% { left: 849px; top: 309px; }
    21.15% { left: 843px; top: 309px; }
    21.42% { left: 830px; top: 309px; }
    21.71% { left: 824px; top: 309px; }
    21.85% { left: 811px; top: 310px; }
    22.00% { left: 805px; top: 311px; }
    22.14% { left: 799px; top: 312px; }
    22.27% { left: 792px; top: 313px; }
    22.43% { left: 786px; top: 314px; }
    22.55% { left: 780px; top: 316px; }
    22.68% { left: 774px; top: 317px; }
    22.83% { left: 769px; top: 318px; }
    22.99% { left: 764px; top: 320px; }
    23.12% { left: 759px; top: 322px; }
    23.28% { left: 754px; top: 323px; }
    23.41% { left: 749px; top: 325px; }
    23.55% { left: 745px; top: 326px; }
    23.70% { left: 740px; top: 328px; }
    23.82% { left: 736px; top: 330px; }
    23.97% { left: 734px; top: 330px; }
    24.11% { left: 727px; top: 333px; }
    24.26% { left: 722px; top: 335px; }
    24.40% { left: 718px; top: 337px; }
    24.55% { left: 714px; top: 338px; }
    24.69% { left: 711px; top: 340px; }
    24.82% { left: 707px; top: 342px; }
    24.97% { left: 702px; top: 344px; }
    25.11% { left: 699px; top: 347px; }
    25.25% { left: 693px; top: 349px; }
    25.40% { left: 689px; top: 353px; }
    25.54% { left: 684px; top: 356px; }
    25.67% { left: 679px; top: 359px; }
    25.82% { left: 674px; top: 363px; }
    25.96% { left: 669px; top: 367px; }
    26.08% { left: 665px; top: 370px; }
    26.23% { left: 660px; top: 374px; }
    26.38% { left: 656px; top: 378px; }
    26.52% { left: 652px; top: 381px; }
    26.67% { left: 649px; top: 385px; }
    26.81% { left: 646px; top: 388px; }
    26.95% { left: 643px; top: 392px; }
    27.12% { left: 640px; top: 396px; }
    27.23% { left: 637px; top: 399px; }
    27.37% { left: 634px; top: 403px; }
    27.52% { left: 631px; top: 406px; }
    27.66% { left: 629px; top: 411px; }
    27.79% { left: 625px; top: 415px; }
    27.95% { left: 622px; top: 420px; }
    28.08% { left: 620px; top: 424px; }
    28.22% { left: 616px; top: 429px; }
    28.37% { left: 613px; top: 435px; }
    28.51% { left: 610px; top: 439px; }
    28.66% { left: 608px; top: 444px; }
    28.80% { left: 605px; top: 449px; }
    28.93% { left: 602px; top: 454px; }
    29.07% { left: 600px; top: 459px; }
    29.22% { left: 595px; top: 468px; }
    29.51% { left: 593px; top: 473px; }
    29.65% { left: 592px; top: 477px; }
    29.78% { left: 589px; top: 488px; }
    29.92% { left: 588px; top: 489px; }
    30.07% { left: 587px; top: 497px; }
    30.34% { left: 586px; top: 503px; }
    30.50% { left: 584px; top: 509px; }
    30.63% { left: 584px; top: 513px; }
    30.77% { left: 584px; top: 517px; }
    30.92% { left: 583px; top: 522px; }
    31.07% { left: 583px; top: 527px; }
    31.21% { left: 583px; top: 531px; }
    31.46% { left: 583px; top: 543px; }
    31.63% { left: 583px; top: 548px; }
    31.75% { left: 583px; top: 552px; }
    31.91% { left: 583px; top: 557px; }
    32.06% { left: 584px; top: 561px; }
    32.33% { left: 586px; top: 571px; }
    32.62% { left: 588px; top: 575px; }
    32.76% { left: 589px; top: 579px; }
    32.89% { left: 593px; top: 587px; }
    33.04% { left: 595px; top: 591px; }
    33.33% { left: 598px; top: 595px; }
    33.47% { left: 604px; top: 604px; }
    33.61% { left: 607px; top: 609px; }
    33.89% { left: 611px; top: 614px; }
    34.05% { left: 615px; top: 619px; }
    34.18% { left: 619px; top: 624px; }
    34.30% { left: 622px; top: 629px; }
    34.47% { left: 630px; top: 638px; }
    34.73% { left: 635px; top: 642px; }
    34.88% { left: 639px; top: 647px; }
    35.03% { left: 647px; top: 655px; }
    35.17% { left: 651px; top: 659px; }
    35.44% { left: 659px; top: 666px; }
    35.71% { left: 663px; top: 670px; }
    35.86% { left: 672px; top: 678px; }
    36.00% { left: 677px; top: 681px; }
    36.15% { left: 681px; top: 685px; }
    36.29% { left: 686px; top: 688px; }
    36.44% { left: 691px; top: 693px; }
    36.70% { left: 701px; top: 700px; }
    36.85% { left: 707px; top: 704px; }
    37.00% { left: 712px; top: 707px; }
    37.14% { left: 717px; top: 711px; }
    37.29% { left: 722px; top: 714px; }
    37.43% { left: 727px; top: 716px; }
    37.56% { left: 731px; top: 720px; }
    37.72% { left: 737px; top: 722px; }
    37.87% { left: 741px; top: 725px; }
    37.99% { left: 746px; top: 727px; }
    38.14% { left: 751px; top: 729px; }
    38.28% { left: 755px; top: 732px; }
    38.41% { left: 761px; top: 735px; }
    38.57% { left: 766px; top: 736px; }
    38.69% { left: 771px; top: 738px; }
    38.84% { left: 776px; top: 740px; }
    38.99% { left: 781px; top: 743px; }
    39.13% { left: 788px; top: 744px; }
    39.26% { left: 793px; top: 746px; }
    39.42% { left: 799px; top: 748px; }
    39.57% { left: 804px; top: 750px; }
    39.69% { left: 809px; top: 751px; }
    39.84% { left: 815px; top: 752px; }
    39.98% { left: 820px; top: 754px; }
    40.15% { left: 825px; top: 754px; }
    40.27% { left: 830px; top: 755px; }
    40.40% { left: 835px; top: 755px; }
    40.54% { left: 841px; top: 756px; }
    40.71% { left: 846px; top: 756px; }
    40.83% { left: 851px; top: 756px; }
    40.98% { left: 856px; top: 756px; }
    41.11% { left: 862px; top: 756px; }
    41.25% { left: 868px; top: 756px; }
    41.40% { left: 873px; top: 755px; }
    41.54% { left: 878px; top: 754px; }
    41.69% { left: 883px; top: 752px; }
    41.83% { left: 888px; top: 750px; }
    41.96% { left: 894px; top: 747px; }
    42.12% { left: 898px; top: 744px; }
    42.25% { left: 904px; top: 741px; }
    42.39% { left: 909px; top: 737px; }
    42.52% { left: 914px; top: 733px; }
    42.66% { left: 925px; top: 724px; }
    42.81% { left: 930px; top: 720px; }
    42.95% { left: 936px; top: 715px; }
    43.24% { left: 948px; top: 706px; }
    43.37% { left: 954px; top: 701px; }
    43.66% { left: 966px; top: 692px; }
    43.80% { left: 971px; top: 688px; }
    43.93% { left: 977px; top: 684px; }
    44.22% { left: 982px; top: 680px; }
    44.36% { left: 986px; top: 677px; }
    44.50% { left: 991px; top: 673px; }
    44.63% { left: 995px; top: 670px; }
    44.77% { left: 1003px; top: 664px; }
    44.94% { left: 1008px; top: 661px; }
    45.07% { left: 1012px; top: 658px; }
    45.23% { left: 1015px; top: 657px; }
    45.36% { left: 1020px; top: 654px; }
    45.65% { left: 1028px; top: 651px; }
    45.79% { left: 1032px; top: 649px; }
    45.92% { left: 1034px; top: 649px; }
    46.06% { left: 1042px; top: 648px; }
    46.35% { left: 1050px; top: 647px; }
    46.48% { left: 1053px; top: 647px; }
    46.64% { left: 1058px; top: 647px; }
    46.76% { left: 1062px; top: 647px; }
    47.06% { left: 1070px; top: 648px; }
    47.20% { left: 1072px; top: 649px; }
    47.49% { left: 1082px; top: 653px; }
    47.62% { left: 1083px; top: 654px; }
    47.91% { left: 1091px; top: 660px; }
    48.20% { left: 1097px; top: 666px; }
    48.34% { left: 1099px; top: 669px; }
    48.62% { left: 1104px; top: 676px; }
    48.76% { left: 1106px; top: 679px; }
    48.90% { left: 1107px; top: 683px; }
    49.17% { left: 1110px; top: 691px; }
    49.32% { left: 1112px; top: 697px; }
    49.46% { left: 1114px; top: 702px; }
    49.61% { left: 1115px; top: 708px; }
    49.73% { left: 1116px; top: 716px; }
    49.86% { left: 1117px; top: 722px; }
    50.03% { left: 1118px; top: 730px; }
    50.17% { left: 1119px; top: 737px; }
    50.32% { left: 1119px; top: 743px; }
    50.46% { left: 1119px; top: 750px; }
    50.59% { left: 1119px; top: 753px; }
    50.73% { left: 1119px; top: 758px; }
    50.87% { left: 1119px; top: 766px; }
    51.02% { left: 1119px; top: 770px; }
    51.16% { left: 1119px; top: 775px; }
    51.31% { left: 1117px; top: 779px; }
    51.43% { left: 1115px; top: 784px; }
    51.58% { left: 1113px; top: 789px; }
    51.73% { left: 1111px; top: 793px; }
    51.87% { left: 1108px; top: 798px; }
    52.00% { left: 1105px; top: 803px; }
    52.17% { left: 1103px; top: 806px; }
    52.29% { left: 1099px; top: 811px; }
    52.43% { left: 1096px; top: 816px; }
    52.58% { left: 1092px; top: 820px; }
    52.72% { left: 1087px; top: 824px; }
    52.85% { left: 1082px; top: 829px; }
    52.99% { left: 1076px; top: 834px; }
    53.14% { left: 1070px; top: 839px; }
    53.28% { left: 1064px; top: 844px; }
    53.43% { left: 1056px; top: 850px; }
    53.57% { left: 1049px; top: 855px; }
    53.70% { left: 1042px; top: 861px; }
    53.86% { left: 1035px; top: 865px; }
    53.98% { left: 1027px; top: 870px; }
    54.13% { left: 1019px; top: 874px; }
    54.28% { left: 1013px; top: 877px; }
    54.42% { left: 1005px; top: 880px; }
    54.55% { left: 999px; top: 882px; }
    54.71% { left: 991px; top: 884px; }
    54.83% { left: 983px; top: 886px; }
    54.98% { left: 976px; top: 887px; }
    55.13% { left: 968px; top: 888px; }
    55.27% { left: 961px; top: 889px; }
    55.40% { left: 952px; top: 890px; }
    55.56% { left: 944px; top: 891px; }
    55.69% { left: 935px; top: 891px; }
    55.83% { left: 928px; top: 891px; }
    55.98% { left: 911px; top: 892px; }
    56.27% { left: 902px; top: 892px; }
    56.41% { left: 895px; top: 893px; }
    56.52% { left: 886px; top: 893px; }
    56.68% { left: 877px; top: 893px; }
    56.81% { left: 868px; top: 893px; }
    56.97% { left: 858px; top: 893px; }
    57.12% { left: 838px; top: 893px; }
    57.37% { left: 828px; top: 893px; }
    57.51% { left: 802px; top: 893px; }
    57.82% { left: 780px; top: 891px; }
    58.10% { left: 768px; top: 888px; }
    58.24% { left: 756px; top: 886px; }
    58.38% { left: 724px; top: 876px; }
    58.53% { left: 712px; top: 871px; }
    58.66% { left: 699px; top: 864px; }
    58.80% { left: 685px; top: 857px; }
    59.09% { left: 672px; top: 849px; }
    59.23% { left: 652px; top: 834px; }
    59.38% { left: 642px; top: 826px; }
    59.51% { left: 631px; top: 816px; }
    59.65% { left: 623px; top: 807px; }
    59.80% { left: 615px; top: 799px; }
    59.94% { left: 609px; top: 790px; }
    60.21% { left: 601px; top: 777px; }
    60.50% { left: 595px; top: 764px; }
    60.65% { left: 593px; top: 758px; }
    60.79% { left: 593px; top: 752px; }
    61.08% { left: 592px; top: 735px; }
    61.35% { left: 592px; top: 716px; }
    61.50% { left: 592px; top: 707px; }
    61.77% { left: 592px; top: 698px; }
    61.93% { left: 597px; top: 680px; }
    62.20% { left: 602px; top: 666px; }
    62.35% { left: 606px; top: 660px; }
    62.49% { left: 611px; top: 653px; }
    62.62% { left: 615px; top: 647px; }
    62.78% { left: 620px; top: 641px; }
    62.91% { left: 625px; top: 635px; }
    63.05% { left: 630px; top: 629px; }
    63.20% { left: 636px; top: 623px; }
    63.34% { left: 643px; top: 617px; }
    63.47% { left: 648px; top: 611px; }
    63.63% { left: 655px; top: 604px; }
    63.76% { left: 661px; top: 599px; }
    63.90% { left: 667px; top: 594px; }
    64.05% { left: 674px; top: 589px; }
    64.20% { left: 680px; top: 585px; }
    64.32% { left: 686px; top: 582px; }
    64.48% { left: 692px; top: 579px; }
    64.61% { left: 697px; top: 577px; }
    64.75% { left: 704px; top: 576px; }
    64.90% { left: 709px; top: 575px; }
    65.04% { left: 715px; top: 575px; }
    65.17% { left: 720px; top: 575px; }
    65.32% { left: 726px; top: 575px; }
    65.46% { left: 732px; top: 575px; }
    65.60% { left: 737px; top: 575px; }
    65.75% { left: 743px; top: 575px; }
    65.89% { left: 749px; top: 576px; }
    66.02% { left: 755px; top: 578px; }
    66.17% { left: 760px; top: 580px; }
    66.31% { left: 766px; top: 583px; }
    66.45% { left: 773px; top: 586px; }
    66.60% { left: 778px; top: 589px; }
    66.73% { left: 785px; top: 592px; }
    66.89% { left: 790px; top: 596px; }
    67.02% { left: 797px; top: 600px; }
    67.16% { left: 803px; top: 604px; }
    67.30% { left: 809px; top: 608px; }
    67.45% { left: 815px; top: 613px; }
    67.58% { left: 821px; top: 618px; }
    67.72% { left: 827px; top: 623px; }
    67.89% { left: 832px; top: 628px; }
    68.01% { left: 838px; top: 632px; }
    68.18% { left: 844px; top: 638px; }
    68.30% { left: 850px; top: 643px; }
    68.43% { left: 857px; top: 649px; }
    68.57% { left: 862px; top: 654px; }
    68.74% { left: 866px; top: 659px; }
    68.86% { left: 871px; top: 663px; }
    68.99% { left: 876px; top: 668px; }
    69.13% { left: 880px; top: 672px; }
    69.28% { left: 885px; top: 675px; }
    69.44% { left: 893px; top: 681px; }
    69.72% { left: 896px; top: 684px; }
    69.86% { left: 901px; top: 687px; }
    70.00% { left: 911px; top: 694px; }
    70.13% { left: 917px; top: 697px; }
    70.27% { left: 922px; top: 700px; }
    70.42% { left: 927px; top: 703px; }
    70.59% { left: 932px; top: 705px; }
    70.85% { left: 944px; top: 710px; }
    70.98% { left: 949px; top: 712px; }
    71.12% { left: 955px; top: 714px; }
    71.27% { left: 962px; top: 716px; }
    71.54% { left: 975px; top: 718px; }
    71.70% { left: 982px; top: 719px; }
    71.83% { left: 989px; top: 720px; }
    71.98% { left: 997px; top: 720px; }
    72.12% { left: 1004px; top: 721px; }
    72.26% { left: 1012px; top: 721px; }
    72.39% { left: 1021px; top: 721px; }
    72.68% { left: 1028px; top: 721px; }
    72.82% { left: 1045px; top: 721px; }
    73.11% { left: 1060px; top: 716px; }
    73.38% { left: 1069px; top: 713px; }
    73.53% { left: 1086px; top: 704px; }
    73.82% { left: 1096px; top: 699px; }
    73.96% { left: 1113px; top: 689px; }
    74.09% { left: 1123px; top: 683px; }
    74.24% { left: 1133px; top: 678px; }
    74.38% { left: 1143px; top: 671px; }
    74.52% { left: 1151px; top: 665px; }
    74.67% { left: 1160px; top: 658px; }
    74.94% { left: 1167px; top: 653px; }
    75.08% { left: 1183px; top: 639px; }
    75.23% { left: 1189px; top: 632px; }
    75.37% { left: 1195px; top: 625px; }
    75.52% { left: 1200px; top: 618px; }
    75.81% { left: 1207px; top: 603px; }
    75.94% { left: 1210px; top: 596px; }
    76.08% { left: 1214px; top: 588px; }
    76.21% { left: 1215px; top: 579px; }
    76.37% { left: 1217px; top: 572px; }
    76.50% { left: 1217px; top: 563px; }
    76.64% { left: 1218px; top: 554px; }
    76.79% { left: 1218px; top: 546px; }
    76.93% { left: 1218px; top: 537px; }
    77.06% { left: 1218px; top: 520px; }
    77.22% { left: 1216px; top: 511px; }
    77.35% { left: 1214px; top: 505px; }
    77.51% { left: 1207px; top: 487px; }
    77.64% { left: 1201px; top: 474px; }
    77.78% { left: 1195px; top: 463px; }
    77.93% { left: 1191px; top: 457px; }
    78.05% { left: 1183px; top: 446px; }
    78.20% { left: 1176px; top: 435px; }
    78.36% { left: 1167px; top: 425px; }
    78.49% { left: 1160px; top: 416px; }
    78.63% { left: 1152px; top: 407px; }
    78.76% { left: 1144px; top: 399px; }
    78.92% { left: 1137px; top: 391px; }
    79.05% { left: 1128px; top: 385px; }
    79.19% { left: 1120px; top: 378px; }
    79.32% { left: 1113px; top: 372px; }
    79.46% { left: 1105px; top: 367px; }
    79.61% { left: 1098px; top: 363px; }
    79.77% { left: 1091px; top: 360px; }
    79.90% { left: 1084px; top: 356px; }
    80.05% { left: 1077px; top: 354px; }
    80.19% { left: 1071px; top: 352px; }
    80.33% { left: 1065px; top: 351px; }
    80.46% { left: 1058px; top: 349px; }
    80.60% { left: 1053px; top: 349px; }
    80.75% { left: 1047px; top: 349px; }
    80.89% { left: 1042px; top: 349px; }
    81.04% { left: 1036px; top: 349px; }
    81.18% { left: 1030px; top: 349px; }
    81.31% { left: 1025px; top: 349px; }
    81.46% { left: 1020px; top: 349px; }
    81.60% { left: 1015px; top: 349px; }
    81.75% { left: 1013px; top: 350px; }
    81.89% { left: 1005px; top: 352px; }
    82.03% { left: 1001px; top: 354px; }
    82.18% { left: 997px; top: 356px; }
    82.30% { left: 993px; top: 358px; }
    82.45% { left: 988px; top: 361px; }
    82.60% { left: 984px; top: 363px; }
    82.74% { left: 980px; top: 367px; }
    82.87% { left: 976px; top: 370px; }
    83.03% { left: 972px; top: 374px; }
    83.16% { left: 965px; top: 382px; }
    83.44% { left: 959px; top: 391px; }
    83.72% { left: 953px; top: 400px; }
    84.01% { left: 947px; top: 410px; }
    84.15% { left: 944px; top: 414px; }
    84.28% { left: 941px; top: 419px; }
    84.44% { left: 938px; top: 425px; }
    84.73% { left: 932px; top: 435px; }
    84.85% { left: 929px; top: 440px; }
    85.00% { left: 926px; top: 445px; }
    85.30% { left: 923px; top: 449px; }
    85.44% { left: 917px; top: 458px; }
    85.71% { left: 911px; top: 467px; }
    85.85% { left: 908px; top: 473px; }
    86.14% { left: 903px; top: 482px; }
    86.43% { left: 899px; top: 490px; }
    86.56% { left: 896px; top: 496px; }
    86.70% { left: 894px; top: 500px; }
    86.83% { left: 893px; top: 504px; }
    87.12% { left: 890px; top: 511px; }
    87.41% { left: 888px; top: 518px; }
    87.55% { left: 887px; top: 521px; }
    87.82% { left: 885px; top: 529px; }
    87.97% { left: 884px; top: 532px; }
    88.12% { left: 883px; top: 535px; }
    88.26% { left: 882px; top: 538px; }
    88.53% { left: 882px; top: 541px; }
    88.67% { left: 880px; top: 548px; }
    88.82% { left: 879px; top: 550px; }
    88.96% { left: 878px; top: 553px; }
    89.11% { left: 878px; top: 557px; }
    89.25% { left: 877px; top: 559px; }
    89.38% { left: 876px; top: 562px; }
    89.53% { left: 876px; top: 565px; }
    89.67% { left: 875px; top: 568px; }
    89.81% { left: 875px; top: 570px; }
    89.96% { left: 874px; top: 574px; }
    90.10% { left: 874px; top: 576px; }
    90.23% { left: 873px; top: 579px; }
    90.38% { left: 873px; top: 581px; }
    90.52% { left: 873px; top: 584px; }
    90.67% { left: 873px; top: 587px; }
    90.81% { left: 872px; top: 589px; }
    90.94% { left: 872px; top: 592px; }
    91.08% { left: 872px; top: 594px; }
    91.22% { left: 871px; top: 596px; }
    91.37% { left: 871px; top: 599px; }
    91.52% { left: 871px; top: 601px; }
    91.66% { left: 871px; top: 603px; }
    91.78% { left: 870px; top: 605px; }
    91.93% { left: 870px; top: 608px; }
    92.08% { left: 869px; top: 610px; }
    92.22% { left: 869px; top: 613px; }
    92.35% { left: 869px; top: 615px; }
    92.51% { left: 868px; top: 617px; }
    92.64% { left: 868px; top: 619px; }
    92.78% { left: 867px; top: 620px; }
    92.92% { left: 867px; top: 623px; }
    93.09% { left: 866px; top: 625px; }
    93.20% { left: 866px; top: 626px; }
    93.34% { left: 866px; top: 628px; }
    93.49% { left: 866px; top: 630px; }
    93.63% { left: 866px; top: 632px; }
    93.78% { left: 865px; top: 633px; }
    93.92% { left: 865px; top: 635px; }
    94.09% { left: 865px; top: 637px; }
    94.21% { left: 865px; top: 638px; }
    94.34% { left: 865px; top: 640px; }
    94.48% { left: 865px; top: 641px; }
    94.63% { left: 865px; top: 642px; }
    94.77% { left: 865px; top: 643px; }
    94.90% { left: 865px; top: 644px; }
    95.06% { left: 865px; top: 644px; }
    95.19% { left: 865px; top: 645px; }
    95.33% { left: 865px; top: 645px; }
    95.48% { left: 865px; top: 646px; }
    95.62% { left: 865px; top: 646px; }
    95.77% { left: 865px; top: 646px; }
    95.89% { left: 865px; top: 647px; }
    96.04% { left: 865px; top: 647px; }
    96.18% { left: 865px; top: 648px; }
    96.48% { left: 865px; top: 648px; }
    96.89% { left: 865px; top: 648px; }
    97.32% { left: 865px; top: 649px; }
    97.74% { left: 865px; top: 649px; }
    97.88% { left: 865px; top: 649px; }
    98.17% { left: 865px; top: 649px; }
    98.59% { left: 865px; top: 649px; }
    100.00% { left: 865px; top: 649px; }
}

.wand.recorded-animation {
    animation: recordedWandAnimation 5886ms linear forwards;
}
/* === RECORDED WAND ANIMATION END === */

/* Mobile adjustments */
@media (max-width: 768px) {
    .sparkle {
        width: 80% !important;
        height: 80% !important;
    }
}

@media (max-width: 480px) {
    .sparkle {
        width: 60% !important;
        height: 60% !important;
    }
}