/* ============================================================
   Hamburger Spark Micro-Interaction  — hamburger-spark.css
   Premium lightning / spark animation for the navbar-toggler.
   ─────────────────────────────────────────────────────────
   HOW IT WORKS
   ─────────────────────────────────────────────────────────
   1. JavaScript wraps the .navbar-toggler in .hamburger-spark-wrapper
      and inserts 8 .spark-particle <span> elements.
   2. On click the JS adds the class .spark-active for SPARK_DURATION ms,
      then removes it, which re-enables the animations cleanly.
   3. All animations are CSS-only; JS only toggles a class.
   4. prefers-reduced-motion: all animations are suppressed.
   5. Debounce: a second click while animating is ignored.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --spark-color-gold:   #ffd700;
  --spark-color-amber:  #ffaa00;
  --spark-color-white:  #ffffff;
  --spark-glow-color:   rgba(255, 215, 0, 0.55);
  --spark-duration:     0.38s;
  --spark-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Wrapper ────────────────────────────────────────────────
   Creates a stacking context so sparks can overflow the
   button without disrupting surrounding layout.
   ─────────────────────────────────────────────────────────── */
.hamburger-spark-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Radial glow ring (behind the button) ───────────────────
   Invisible at rest; expands & fades when .spark-active fires.
   ─────────────────────────────────────────────────────────── */
.hamburger-spark-wrapper::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--spark-glow-color) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  will-change: opacity, transform;
}

.hamburger-spark-wrapper.spark-active::before {
  animation: spark-glow-ring var(--spark-duration) var(--spark-ease) forwards;
}

@keyframes spark-glow-ring {
  0%   { opacity: 0;   transform: scale(0.5);  }
  35%  { opacity: 1;   transform: scale(1.15); }
  70%  { opacity: 0.6; transform: scale(1.3);  }
  100% { opacity: 0;   transform: scale(1.5);  }
}

/* ── Spark particle base ────────────────────────────────────
   8 <span class="spark-particle"> are injected by JS.
   All sit centred on the button at rest (opacity: 0).
   ─────────────────────────────────────────────────────────── */
.hamburger-spark-wrapper .spark-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Individual spark sizes & colours ──────────────────────
   8 particles fired in the 8 compass directions.
   ─────────────────────────────────────────────────────────── */
.hamburger-spark-wrapper .spark-particle:nth-child(1) { width:4px; height:4px; background:var(--spark-color-white); }
.hamburger-spark-wrapper .spark-particle:nth-child(2) { width:5px; height:5px; background:var(--spark-color-amber); }
.hamburger-spark-wrapper .spark-particle:nth-child(3) { width:6px; height:6px; background:var(--spark-color-gold);  }
.hamburger-spark-wrapper .spark-particle:nth-child(4) { width:4px; height:4px; background:var(--spark-color-amber); }
.hamburger-spark-wrapper .spark-particle:nth-child(5) { width:5px; height:5px; background:var(--spark-color-white); }
.hamburger-spark-wrapper .spark-particle:nth-child(6) { width:4px; height:4px; background:var(--spark-color-gold);  }
.hamburger-spark-wrapper .spark-particle:nth-child(7) { width:6px; height:6px; background:var(--spark-color-amber); }
.hamburger-spark-wrapper .spark-particle:nth-child(8) { width:4px; height:4px; background:var(--spark-color-white); }

/* ── Per-particle trigger classes ──────────────────────────── */
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(1) {
  animation: spark-fly-0   var(--spark-duration) var(--spark-ease) 0.000s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(2) {
  animation: spark-fly-45  var(--spark-duration) var(--spark-ease) 0.030s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(3) {
  animation: spark-fly-90  var(--spark-duration) var(--spark-ease) 0.020s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(4) {
  animation: spark-fly-135 var(--spark-duration) var(--spark-ease) 0.040s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(5) {
  animation: spark-fly-180 var(--spark-duration) var(--spark-ease) 0.010s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(6) {
  animation: spark-fly-225 var(--spark-duration) var(--spark-ease) 0.035s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(7) {
  animation: spark-fly-270 var(--spark-duration) var(--spark-ease) 0.015s forwards;
}
.hamburger-spark-wrapper.spark-active .spark-particle:nth-child(8) {
  animation: spark-fly-315 var(--spark-duration) var(--spark-ease) 0.025s forwards;
}

/* ── Radial burst keyframes (8 compass directions) ──────────
   Each particle travels ~28 px outward and fades out.
   ─────────────────────────────────────────────────────────── */
@keyframes spark-fly-0 {
  0%   { opacity:0; transform: translate(-50%,-50%) translateY(0)          scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translateY(-28px)      scale(0.3); }
}
@keyframes spark-fly-45 {
  0%   { opacity:0; transform: translate(-50%,-50%) translate(0,0)          scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translate(20px,-20px)   scale(0.3); }
}
@keyframes spark-fly-90 {
  0%   { opacity:0; transform: translate(-50%,-50%) translateX(0)           scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translateX(28px)        scale(0.3); }
}
@keyframes spark-fly-135 {
  0%   { opacity:0; transform: translate(-50%,-50%) translate(0,0)          scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translate(20px,20px)    scale(0.3); }
}
@keyframes spark-fly-180 {
  0%   { opacity:0; transform: translate(-50%,-50%) translateY(0)           scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translateY(28px)        scale(0.3); }
}
@keyframes spark-fly-225 {
  0%   { opacity:0; transform: translate(-50%,-50%) translate(0,0)          scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translate(-20px,20px)   scale(0.3); }
}
@keyframes spark-fly-270 {
  0%   { opacity:0; transform: translate(-50%,-50%) translateX(0)           scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translateX(-28px)       scale(0.3); }
}
@keyframes spark-fly-315 {
  0%   { opacity:0; transform: translate(-50%,-50%) translate(0,0)          scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-50%) translate(-20px,-20px)  scale(0.3); }
}

/* ── Button micro-pulse ─────────────────────────────────────
   The toggler itself gently bounces to reinforce the click.
   ─────────────────────────────────────────────────────────── */
.hamburger-spark-wrapper.spark-active .navbar-toggler {
  animation: spark-btn-pulse var(--spark-duration) var(--spark-ease) forwards;
}

@keyframes spark-btn-pulse {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.12); }
  65%  { transform: scale(0.97); }
  100% { transform: scale(1);    }
}

/* ── Accessibility: prefers-reduced-motion ──────────────────
   All animations are disabled; the menu opens immediately.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hamburger-spark-wrapper::before,
  .hamburger-spark-wrapper .spark-particle,
  .hamburger-spark-wrapper.spark-active .navbar-toggler,
  .dynamic-spark-container::before,
  .dynamic-spark-container .spark-particle,
  .spark-pulse-active {
    animation: none !important;
    opacity:   0    !important;
    transform: none !important;
  }
}

/* ============================================================
   Dynamic Spark Container (for buttons, links, etc.)
   ============================================================ */
.dynamic-spark-container {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 100000;
}

/* Radial glow ring for dynamic elements */
.dynamic-spark-container::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  top: -30px;
  left: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--spark-glow-color) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  will-change: opacity, transform;
}

.dynamic-spark-container.spark-active::before {
  animation: spark-glow-ring var(--spark-duration) var(--spark-ease) forwards;
}

/* Spark particle base for dynamic elements */
.dynamic-spark-container .spark-particle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Individual spark sizes & colours (reusing variables) */
.dynamic-spark-container .spark-particle:nth-child(1) { width:4px; height:4px; background:var(--spark-color-white); }
.dynamic-spark-container .spark-particle:nth-child(2) { width:5px; height:5px; background:var(--spark-color-amber); }
.dynamic-spark-container .spark-particle:nth-child(3) { width:6px; height:6px; background:var(--spark-color-gold);  }
.dynamic-spark-container .spark-particle:nth-child(4) { width:4px; height:4px; background:var(--spark-color-amber); }
.dynamic-spark-container .spark-particle:nth-child(5) { width:5px; height:5px; background:var(--spark-color-white); }
.dynamic-spark-container .spark-particle:nth-child(6) { width:4px; height:4px; background:var(--spark-color-gold);  }
.dynamic-spark-container .spark-particle:nth-child(7) { width:6px; height:6px; background:var(--spark-color-amber); }
.dynamic-spark-container .spark-particle:nth-child(8) { width:4px; height:4px; background:var(--spark-color-white); }

/* Trigger CSS animations on the dynamic container */
.dynamic-spark-container.spark-active .spark-particle:nth-child(1) { animation: spark-fly-0   var(--spark-duration) var(--spark-ease) 0.000s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(2) { animation: spark-fly-45  var(--spark-duration) var(--spark-ease) 0.030s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(3) { animation: spark-fly-90  var(--spark-duration) var(--spark-ease) 0.020s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(4) { animation: spark-fly-135 var(--spark-duration) var(--spark-ease) 0.040s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(5) { animation: spark-fly-180 var(--spark-duration) var(--spark-ease) 0.010s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(6) { animation: spark-fly-225 var(--spark-duration) var(--spark-ease) 0.035s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(7) { animation: spark-fly-270 var(--spark-duration) var(--spark-ease) 0.015s forwards; }
.dynamic-spark-container.spark-active .spark-particle:nth-child(8) { animation: spark-fly-315 var(--spark-duration) var(--spark-ease) 0.025s forwards; }

/* Micro-pulse scale animation trigger for clicked element */
.spark-pulse-active {
  animation: spark-btn-pulse var(--spark-duration) var(--spark-ease) forwards;
}

/* ============================================================
   Global Premium Button Styles (Glow & Metallic Shine Sweep)
   ============================================================ */

/* Selectors for all CTA buttons and button-like links across the site */
.btn-krishna,
.getstarted_btn,
.get_started_btn,
.enroll_now_btn,
.premium_btn,
.top-btn,
.contact_us,
.navbar-nav .nav-item .contact_us,
.btn-accordion-toggle,
.btn_wrapper a,
.btn_wrapper button,
button.btn:not(.navbar-toggler):not(.btn-link),
a.btn:not(.btn-link),
button[type="submit"],
input[type="submit"],
input[type="button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Maroon radial background representing polished lacquer finish (rich high-contrast dark maroon) */
    background: radial-gradient(circle at center, rgba(107, 0, 44, 0.94) 0%, rgba(77, 0, 32, 0.97) 70%, rgba(58, 0, 24, 0.99) 100%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    
    /* Border width set to transparent, as ::before provides the animated border overlay */
    border: 2px solid transparent !important; 
    background-clip: padding-box !important;
    
    /* Elegant luxury typography */
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    
    /* Transition timings matching design requirement (0.35s ease) */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                background 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    
    /* Layered depth shadows & gently pulsing glow */
    animation: buttonGlobalGlowPulse 4.5s infinite ease-in-out !important;
    
    will-change: transform, box-shadow;
}

/* Maintain icons/text inside the buttons above the layers */
.btn-krishna *,
.getstarted_btn *,
.get_started_btn *,
.enroll_now_btn *,
.premium_btn *,
.top-btn *,
.contact_us *,
.navbar-nav .nav-item .contact_us *,
.btn-accordion-toggle *,
.btn_wrapper a *,
.btn_wrapper button *,
button.btn:not(.navbar-toggler):not(.btn-link) *,
a.btn:not(.btn-link) *,
button[type="submit"] * {
    position: relative;
    z-index: 3;
    color: #ffffff !important;
    text-shadow: none !important;
    transition: color 0.35s ease;
}

/* The elegant moving gold border highlight overlay */
.btn-krishna::before,
.getstarted_btn::before,
.get_started_btn::before,
.enroll_now_btn::before,
.premium_btn::before,
.top-btn::before,
.contact_us::before,
.navbar-nav .nav-item .contact_us::before,
.btn-accordion-toggle::before,
.btn_wrapper a::before,
.btn_wrapper button::before,
button.btn:not(.navbar-toggler):not(.btn-link)::before,
a.btn:not(.btn-link)::before,
button[type="submit"]::before,
input[type="submit"]::before,
input[type="button"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
    padding: 2px !important; /* Border thickness */
    
    /* Luxury gold, warm amber, soft yellow gradient */
    background: linear-gradient(90deg, 
        #d4af37, #ffeaa7 25%, #ffaa00 50%, 
        #ffeaa7 75%, #d4af37 100%) !important;
    background-size: 300% 100% !important;
    
    /* CSS Masking to exclude the inner content area, leaving only the border */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    
    pointer-events: none !important;
    z-index: 2 !important;
    
    /* Smooth continuous watch-highlight motion */
    animation: buttonBorderHighlight 8s linear infinite !important;
    transition: filter 0.35s ease !important;
    will-change: background-position;
}

/* The elegant gold-white metallic shine sweep element */
.btn-krishna::after,
.getstarted_btn::after,
.get_started_btn::after,
.enroll_now_btn::after,
.premium_btn::after,
.top-btn::after,
.contact_us::after,
.navbar-nav .nav-item .contact_us::after,
.btn-accordion-toggle::after,
.btn_wrapper a::after,
.btn_wrapper button::after,
button.btn:not(.navbar-toggler):not(.btn-link)::after,
a.btn:not(.btn-link)::after,
button[type="submit"]::after,
input[type="submit"]::after,
input[type="button"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 150% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.05) 80%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-30deg) translateX(-120%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    mix-blend-mode: overlay !important; /* Blends dynamically with button background */
    animation: buttonGlobalShine 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite !important;
    will-change: transform;
}

@keyframes buttonBorderHighlight {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 300% 0%;
    }
}

@keyframes buttonGlobalShine {
    0% {
        transform: skewX(-30deg) translateX(-120%);
    }
    40% {
        transform: skewX(-30deg) translateX(120%);
    }
    100% {
        transform: skewX(-30deg) translateX(120%);
    }
}

@keyframes buttonGlobalGlowPulse {
    0%, 100% {
        box-shadow: 
            0 4px 10px rgba(0, 0, 0, 0.3), /* bottom shadow */
            0 0 10px rgba(212, 175, 55, 0.2), /* soft outer glow */
            inset 0 1px 0 rgba(255, 255, 255, 0.15), /* top inset edge highlight */
            inset 0 0 10px rgba(255, 215, 0, 0.15) !important; /* inner gold glow */
    }
    50% {
        box-shadow: 
            0 6px 16px rgba(0, 0, 0, 0.35), /* deeper bottom shadow */
            0 0 22px rgba(212, 175, 55, 0.45), /* bloom effect */
            inset 0 1px 0 rgba(255, 255, 255, 0.25), /* brighter top edge */
            inset 0 0 16px rgba(255, 215, 0, 0.35) !important; /* inner gold glow */
    }
}

/* Hover style overrides: elegant lift and scale with faster animations */
.btn-krishna:hover,
.getstarted_btn:hover,
.get_started_btn:hover,
.enroll_now_btn:hover,
.premium_btn:hover,
.top-btn:hover,
.contact_us:hover,
.navbar-nav .nav-item .contact_us:hover,
.btn-accordion-toggle:hover,
.btn_wrapper a:hover,
.btn_wrapper button:hover,
button.btn:not(.navbar-toggler):not(.btn-link):hover,
a.btn:not(.btn-link):hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-3px) scale(1.03) !important;
    background: radial-gradient(circle at center, rgba(130, 0, 55, 0.97) 0%, rgba(107, 0, 44, 0.99) 70%, rgba(77, 0, 32, 1) 100%) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 28px rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 0 20px rgba(255, 215, 0, 0.45) !important;
    cursor: pointer !important;
}

/* Brighter border and faster border highlight on hover */
.btn-krishna:hover::before,
.getstarted_btn:hover::before,
.get_started_btn:hover::before,
.enroll_now_btn:hover::before,
.premium_btn:hover::before,
.top-btn:hover::before,
.contact_us:hover::before,
.navbar-nav .nav-item .contact_us:hover::before,
.btn-accordion-toggle:hover::before,
.btn_wrapper a:hover::before,
.btn_wrapper button:hover::before,
button.btn:not(.navbar-toggler):not(.btn-link):hover::before,
a.btn:not(.btn-link):hover::before,
button[type="submit"]:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before {
    filter: brightness(1.25) !important;
    animation-duration: 4s !important; /* speed up border movement */
}

/* Speed up diagonal shine sweep on hover */
.btn-krishna:hover::after,
.getstarted_btn:hover::after,
.get_started_btn:hover::after,
.enroll_now_btn:hover::after,
.premium_btn:hover::after,
.top-btn:hover::after,
.contact_us:hover::after,
.navbar-nav .nav-item .contact_us:hover::after,
.btn-accordion-toggle:hover::after,
.btn_wrapper a:hover::after,
.btn_wrapper button:hover::after,
button.btn:not(.navbar-toggler):not(.btn-link):hover::after,
a.btn:not(.btn-link):hover::after,
button[type="submit"]:hover::after,
input[type="submit"]:hover::after,
input[type="button"]:hover::after {
    animation-duration: 1.5s !important;
}

/* Enhance gold colors and glow of inner texts/icons when hovered */
.btn-krishna:hover *,
.getstarted_btn:hover *,
.get_started_btn:hover *,
.enroll_now_btn:hover *,
.premium_btn:hover *,
.top-btn:hover *,
.contact_us:hover *,
.navbar-nav .nav-item .contact_us:hover *,
.btn-accordion-toggle:hover *,
.btn_wrapper a:hover *,
.btn_wrapper button:hover *,
button.btn:not(.navbar-toggler):not(.btn-link):hover *,
a.btn:not(.btn-link):hover * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Click interaction: depress slightly and compress glow (150ms return) */
.btn-krishna:active,
.getstarted_btn:active,
.get_started_btn:active,
.enroll_now_btn:active,
.premium_btn:active,
.top-btn:active,
.contact_us:active,
.navbar-nav .nav-item .contact_us:active,
.btn-accordion-toggle:active,
.btn_wrapper a:active,
.btn_wrapper button:active,
button.btn:not(.navbar-toggler):not(.btn-link):active,
a.btn:not(.btn-link):active,
button[type="submit"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(-1px) scale(0.97) !important;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(212, 175, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 10px rgba(255, 215, 0, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* ============================================================
   Story Reading Shimmer Animation (Line-by-Line)
   ============================================================ */
.story-line {
    display: block;
    position: relative;
    overflow: hidden;
    opacity: 0.35;
    /* Dimmed state before reading guides attention */
    transition: opacity 0.8s ease;
    transition-delay: calc(var(--line-index) * 0.35s + 0.1s);
    line-height: inherit;
}

.content-card-pro.story-reading-active .story-line,
.reading-animation-container.story-reading-active .story-line {
    opacity: 1;
    /* Fade-in active line */
}

.story-line::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* High-contrast premium sweep: golden halo with bright white spotlight core */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 175, 55, 0.25) 30%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(212, 175, 55, 0.25) 70%,
            transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.content-card-pro.story-reading-active .story-line::after,
.reading-animation-container.story-reading-active .story-line::after {
    animation: story-sweep-line 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: calc(var(--line-index) * 0.35s + 0.1s);
}

@keyframes story-sweep-line {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Twinkling Music Sparkles */
.story-sparkle {
    position: absolute;
    color: #ffd54f;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0);
    text-shadow: 0 0 8px rgba(255, 213, 79, 0.9), 0 0 15px rgba(212, 175, 55, 0.6);
    font-family: serif;
    will-change: transform, opacity;
}

.content-card-pro.story-reading-active .story-sparkle,
.reading-animation-container.story-reading-active .story-sparkle {
    animation: story-sparkle-twinkle 1.0s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: calc(var(--line-index) * 0.35s + 0.7s + (0.6s * var(--sparkle-x) / 100));
}

@keyframes story-sparkle-twinkle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3) rotate(90deg);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1.0) rotate(180deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(0.4) rotate(270deg);
    }
}

/* Highlight box — fades in gracefully after the reading animation completes */
.content-card-pro.story-reading-active .highlight-box,
.reading-animation-container.story-reading-active .highlight-box {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .story-line {
        opacity: 1 !important;
    }

    .story-line::after,
    .story-sparkle {
        display: none !important;
    }

    .highlight-box,
    .content-card-pro.story-reading-active .highlight-box,
    .reading-animation-container.story-reading-active .highlight-box {
        opacity: 1 !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}