html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA9NC4wODg2IDIzNi4wODkgOTMuODA3MkwyNzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIE0yNjMuNTc2IDg2LjA1NDdMNTEuMzkgMjAuMTYyIDU3LjE4IDIwLjE1YzEuNjItMi41LS43Ny0zLjEjLS44MyA1LjEyLS45MjZjMi4yMTMtMi44Mi4zNTktNS4xOS40NTktNy42MTcgMS4zNDIiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables */
:root {
    --tdc-navy-950: #020E24;
    --tdc-navy-900: #052455;
    --tdc-navy-800: #062556;
    --tdc-navy-700: #171D30;
    --tdc-navy-600: #3F4B5A;
    --tdc-navy-500: #5D6273;
    --tdc-sky-50: #F8FCFD;
    --tdc-sky-100: #EDF7F7;
    --tdc-sky-200: #DCEFFD;
    --tdc-sky-300: #DAEFFD;
    --tdc-sky-400: #DCECF7;
    /* Lapis Lazuli tones */
    --tdc-lapis-950: #1A3A5C;
    --tdc-lapis-900: #26619C;
    --tdc-lapis-800: #2E6FAF;
    --tdc-lapis-700: #4187CE;
    --tdc-lapis-600: #5A9FE0;
    --tdc-lapis-500: #87B9EB;
    --tdc-lapis-400: #A8CDF2;
    --tdc-lapis-300: #C8DFF8;
    --tdc-lapis-200: #E0EEFB;
    --tdc-lapis-100: #F0F7FD;
    --tdc-azure-300: #8BAFCF;
    --tdc-azure-400: #82A9CE;
    --tdc-azure-500: #94B8D7;
    --tdc-azure-600: #98BCD8;
    --tdc-azure-700: #9FBFD6;
    --tdc-azure-800: #A8C3D4;
    --tdc-azure-900: #B9CBD1;
    /* Refined Gold tones (slightly less saturated, more elegant) */
    --tdc-gold-900: #B5860B;
    --tdc-gold-800: #D4A520;
    --tdc-gold-700: #F5C83C;
    --tdc-gold-600: #FFD250;
    --tdc-gold-500: #FFDA70;
    --tdc-gold-400: #FFE696;
    --tdc-gold-300: #FFF0BE;
    --tdc-gold-200: #FFF5DC;
    --tdc-gold-100: #FFFAEB;
    --tdc-rose-200: #EFD0CC;
    --tdc-rose-500: #A0837A;
    --tdc-neutral-200: #BDBCC0;
    --tdc-neutral-900: #201B15;
    --tdc-neutral-950: #201C13;
}

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tailwind directives (kept for future build pipeline) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Utility-like classes (since we are on Tailwind CDN + app.css) */
.text-tdc-navy-950 {
    color: var(--tdc-navy-950);
}

.text-tdc-navy-900 {
    color: var(--tdc-navy-900);
}

.text-tdc-navy-700 {
    color: var(--tdc-navy-700);
}

.text-tdc-navy-500 {
    color: var(--tdc-navy-500);
}

/* Lapis text colors for dark theme */
.text-tdc-lapis-200 {
    color: var(--tdc-lapis-200);
}

.text-tdc-lapis-300 {
    color: var(--tdc-lapis-300);
}

.text-tdc-lapis-400 {
    color: var(--tdc-lapis-400);
}

.text-tdc-lapis-500 {
    color: var(--tdc-lapis-500);
}

.bg-tdc-navy-950 {
    background-color: var(--tdc-navy-950);
}

.bg-tdc-sky-50 {
    background-color: var(--tdc-sky-50);
}

/* Section background styles - Celestial Night Theme */
.tdc-section-bg-light {
    background: radial-gradient(ellipse 100% 80% at 20% 30%, rgba(90, 159, 224, 0.15), rgba(26, 58, 92, 0) 60%), radial-gradient(ellipse 80% 60% at 80% 70%, rgba(200, 179, 143, 0.08), rgba(26, 58, 92, 0) 50%), linear-gradient(180deg, #0A1628 0%, #0D1E35 50%, #0A1628 100%);
}

.tdc-section-bg-alt {
    background: radial-gradient(ellipse 100% 80% at 80% 30%, rgba(135, 185, 235, 0.12), rgba(26, 58, 92, 0) 60%), radial-gradient(ellipse 80% 60% at 20% 70%, rgba(255, 210, 80, 0.05), rgba(26, 58, 92, 0) 50%), linear-gradient(180deg, #0D1E35 0%, #112842 50%, #0D1E35 100%);
}

/* Gradients / effects - Celestial Night Theme */
.tdc-hero-bg {
    background:
    /* Soft magical glow - upper left */
    radial-gradient(ellipse 80% 70% at 25% 25%, rgba(135, 185, 235, 0.25), rgba(10,22,40,0) 60%),
    /* Lapis lazuli dreamy blue center */
    radial-gradient(ellipse 120% 100% at 60% 40%, rgba(65, 135, 206, 0.2), rgba(10,22,40,0) 55%),
    /* Soft lapis accent right */
    radial-gradient(ellipse 70% 60% at 85% 60%, rgba(90, 159, 224, 0.15), rgba(10,22,40,0) 50%),
    /* Refined gold shimmer area - bottom */
    radial-gradient(ellipse 60% 40% at 70% 85%, rgba(255, 210, 80, 0.08), rgba(10,22,40,0) 60%),
    /* Base gradient - celestial night sky */
    linear-gradient(165deg, #0A1628 0%, #0D1E35 15%, #112842 30%, #0F2339 50%, #0D1E35 70%, #0A1628 100%);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

    /* Floating fairy dust overlay */
    .tdc-hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(135, 185, 235, 0.15) 0%, transparent 30%), radial-gradient(circle at 80% 20%, rgba(90, 159, 224, 0.12) 0%, transparent 25%), radial-gradient(circle at 60% 70%, rgba(255, 210, 80, 0.06) 0%, transparent 35%), radial-gradient(circle at 30% 80%, rgba(65, 135, 206, 0.1) 0%, transparent 30%);
        pointer-events: none;
        z-index: 0;
    }

    /* Dark overlay to reduce brightness */
    .tdc-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2, 14, 36, 0.5) 0%, rgba(2, 14, 36, 0.55) 40%, rgba(2, 14, 36, 0.65) 100%);
        pointer-events: none;
        z-index: 1;
    }

/* Sparkles animation layer */
.tdc-sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

    .tdc-sparkles::before,
    .tdc-sparkles::after {
        content: "";
        position: absolute;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.9), 0 0 20px 4px rgba(135, 185, 235, 0.5);
        animation: tdc-sparkle-float 8s ease-in-out infinite;
        pointer-events: none;
    }

    .tdc-sparkles::before {
        top: 15%;
        right: 20%;
        animation-delay: 0s;
    }

    .tdc-sparkles::after {
        bottom: 30%;
        left: 15%;
        animation-delay: 4s;
    }

@keyframes tdc-sparkle-float {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0) scale(1);
    }

    25% {
        opacity: 1;
        transform: translateY(-10px) scale(1.5);
    }

    50% {
        opacity: 0.5;
        transform: translateY(-5px) scale(1.2);
    }

    75% {
        opacity: 0.8;
        transform: translateY(-15px) scale(1.3);
    }
}

/* Magical floating animation */
.tdc-float {
    animation: tdc-float-gentle 6s ease-in-out infinite;
}

@keyframes tdc-float-gentle {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Fairy tale stars decoration - golden 4-pointed stars */
.tdc-fairy-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.tdc-fairy-star {
    position: absolute;
    width: 20px;
    height: 20px;
    animation: tdc-star-twinkle 4s ease-in-out infinite;
    pointer-events: none;
}

    .tdc-fairy-star::before,
    .tdc-fairy-star::after {
        content: "", position: absolute;
        background: linear-gradient(180deg, rgba(255, 215, 0, 1) 0%, rgba(255, 235, 160, 0.8) 50%, rgba(218, 165, 32, 0.3) 100%);
        border-radius: 50%;
        pointer-events: none;
    }

/* Lapis lazuli variant */
.tdc-fairy-star--lapis::before,
.tdc-fairy-star--lapis::after {
    background: linear-gradient(180deg, rgba(135, 185, 235, 1) 0%, rgba(180, 210, 245, 0.8) 50%, rgba(65, 135, 206, 0.3) 100%);
}

.tdc-fairy-star--sm {
    width: 12px;
    height: 12px;
}

.tdc-fairy-star--lg {
    width: 28px;
    height: 28px;
}

    .tdc-fairy-star--lg::before {
        width: 4px;
    }

    .tdc-fairy-star--lg::after {
        height: 4px;
    }

@keyframes tdc-star-twinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
    }

    25% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.95) rotate(-3deg);
    }

    75% {
        opacity: 0.9;
        transform: scale(1.05) rotate(3deg);
    }
}

/* White glow star effect - with lapis and gold accents */
.tdc-glow-star {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.9), 0 0 20px 6px rgba(135, 185, 235, 0.5), 0 0 30px 10px rgba(90, 159, 224, 0.25);
    animation: tdc-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

/* Vibrant Yellow Gold variant */
.tdc-glow-star--gold {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.95), 0 0 20px 6px rgba(255, 223, 0, 0.7), 0 0 35px 12px rgba(255, 215, 0, 0.4);
}

.tdc-glow-star--sm {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 15px 4px rgba(135, 185, 235, 0.4);
}

/* Small gold variant */
.tdc-glow-star--gold.tdc-glow-star--sm {
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9), 0 0 15px 4px rgba(255,223, 0, 0.6);
}

.tdc-glow-star--lg {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 1), 0 0 30px 10px rgba(135, 185, 235, 0.6), 0 0 45px 15px rgba(90, 159, 224, 0.3);
}

/* Large gold variant */
.tdc-glow-star--gold.tdc-glow-star--lg {
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 1), 0 0 30px 10px rgba(255, 223, 0, 0.7), 0 0 50px 18px rgba(255, 215, 0, 0.4);
}

@keyframes tdc-glow-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Remove old golden trail - now using shooting stars in JS */
.tdc-golden-trail {
    display: none;
}

/* Extra floating particles via CSS for more density */
.tdc-fairy-dust {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.tdc-fairy-dust-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: tdc-dust-float 12s ease-in-out infinite;
    pointer-events: none;
}

/* Vibrant Yellow Gold particle */
.tdc-fairy-dust-particle--gold {
    background: linear-gradient(135deg, #FFDF00, #FFD700);
    box-shadow: 0 0 10px 3px rgba(255, 223, 0, 0.7);
}

/* Lapis Lazuli particle */
.tdc-fairy-dust-particle--lapis {
    background: linear-gradient(135deg, #87B9EB, #4187CE);
    box-shadow: 0 0 8px 2px rgba(65, 135, 206, 0.5);
}

/* White/neutral particle */
.tdc-fairy-dust-particle--white {
    background: white;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);
}

@keyframes tdc-dust-float {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }

    15% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
        transform: translateY(-30px) scale(1);
    }

    85% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.3);
    }
}

/* Hero floating mini image wobble animation */
@keyframes heroFloatWobble {
    0%, 100% {
        transform: scale(1) translateY(0) rotate(0deg);
    }
    25% {
        transform: scale(1) translateY(-8px) rotate(1.5deg);
    }
    50% {
        transform: scale(1.02) translateY(-3px) rotate(-1deg);
    }
    75% {
        transform: scale(1) translateY(-10px) rotate(0.5deg);
    }
}

/* Dramatic entrance glow pulse */
@keyframes heroFloatGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 10px 30px rgba(255, 210, 80, 0.4))
                drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 15px 40px rgba(255, 210, 80, 0.6))
                drop-shadow(0 8px 25px rgba(0, 0, 0, 0.4))
                drop-shadow(0 0 20px rgba(255, 210, 80, 0.3));
    }
}

/* ===================================
   Hero Floating Image Effect
   =================================== */

/* Main hero image transition for scroll effect */
#hero-image-container #hero-oval-image,
#hero-image-container canvas {
    will-change: opacity, transform;
    transform-origin: center bottom;
}

/* Floating hero mini image container */
#hero-floating-container {
    will-change: opacity, transform;
    transform-origin: center center;
}

/* Glow effect inside floating container */
#hero-floating-container .relative > div:first-child {
    transition: opacity 0.3s ease-out;
}

/* Image/canvas inside floating container */
#hero-floating-container img,
#hero-floating-container canvas {
    animation: heroFloatGlowPulse 3s ease-in-out infinite;
    animation-play-state: paused;
}

/* Activate glow pulse when container is visible */
#hero-floating-container[style*="opacity: 1"] img,
#hero-floating-container[style*="opacity: 1"] canvas,
#hero-floating-container[style*="opacity:1"] img,
#hero-floating-container[style*="opacity:1"] canvas {
    animation-play-state: running;
}

/* ===================================
   Mini Hero Collected Stars Container
   =================================== */

.tdc-mini-hero-sparkles {
    position: absolute;
    inset: -15px;
    pointer-events: none;
    z-index: 5;
    /* Removed rotation animation - stars are now dynamically positioned */
}

/* Legacy sparkle styles removed - now using dynamic collected stars */
/* The .mini-hero-collected-star class is styled via JavaScript in starCollector.js */

/* Mobile adjustments for floating image */
@media (max-width: 768px) {
    #hero-floating-container {
        bottom: 1rem;
        right: 1rem;
    }
    
    #hero-floating-container img,
    #hero-floating-container canvas {
        width: 100px;
        max-height: 140px;
    }
    
    .tdc-mini-sparkle {
        --radius: 60px;
        width: 4px;
        height: 4px;
    }
    
    .tdc-mini-hero-sparkles {
        inset: -15px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    #hero-floating-container,
    #hero-image-container #hero-oval-image,
    #hero-image-container canvas {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    #hero-floating-container {
        display: none !important;
    }
    
    .tdc-mini-sparkle {
        animation: none !important;
    }
    
    .hero-speech-bubble {
        display: none !important;
    }
}

/* ===================================
   Hero Speech Bubble
   =================================== */

.hero-speech-bubble {
    position: absolute;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    color: #1A3A5C;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    pointer-events: none;
    z-index: 100;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 252, 0.98));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Main Hero Bubble - positioned to the left of hero head */
.hero-speech-bubble--main {
    top: 20%;
    left: -10%;
    padding: 14px 20px;
    border-radius: 20px 20px 20px 6px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    font-size: 17px;
    max-width: 280px;
    min-width: 200px;
    text-align: left;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* Main bubble tail - pointing right */
.hero-speech-bubble--main .bubble-tail {
    position: absolute;
    bottom: 8px;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid rgba(250, 250, 252, 0.98);
    filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.1));
}

/* Floating Mini Hero Bubble - positioned above the mini hero */
.hero-speech-bubble--floating {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0) scale(1);
    margin-bottom: 14px;
    padding: 10px 16px;
    border-radius: 16px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    font-size: 14px;
    max-width: 180px;
    min-width: 130px;
    text-align: center;
    opacity: 1;
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}

/* Floating bubble tail - pointing down */
.hero-speech-bubble--floating .bubble-tail {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid rgba(250, 250, 252, 0.98);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Pop-in animation for the bubble */
@keyframes heroSpeechBubbleIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }
    50% {
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtle floating animation when visible */
@keyframes heroSpeechBubbleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Gold shimmer effect for star messages */
@keyframes heroSpeechBubbleShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.hero-speech-bubble.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 250, 220, 0.95) 25%,
        rgba(255, 235, 180, 0.95) 50%,
        rgba(255, 250, 220, 0.95) 75%,
        rgba(255, 255, 255, 0.95) 100%
    );
    background-size: 200% 100%;
    animation: heroSpeechBubbleShimmer 2s ease-in-out infinite;
}

/* Animation states for bubbles */
.hero-speech-bubble--main.bubble-hidden {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
}

.hero-speech-bubble--main.bubble-fade-out {
    opacity: 0.3;
    transform: translateY(-3px) scale(0.98);
}

.hero-speech-bubble--floating.bubble-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(5px) scale(0.95);
}

.hero-speech-bubble--floating.bubble-fade-out {
    opacity: 0.3;
    transform: translateX(-50%) translateY(-3px) scale(0.98);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .hero-speech-bubble--main {
        top: 15%;
        left: -5%;
        padding: 12px 16px;
        font-size: 15px;
        max-width: 240px;
        min-width: 180px;
    }
}

/* Mobile adjustments for speech bubble */
@media (max-width: 768px) {
    .hero-speech-bubble--main {
        top: 5%;
        left: 5%;
        padding: 10px 14px;
        font-size: 13px;
        max-width: 180px;
        min-width: 140px;
        border-radius: 16px 16px 16px 4px;
    }
    
    .hero-speech-bubble--main .bubble-tail {
        bottom: 6px;
        right: -8px;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 10px solid rgba(250, 250, 252, 0.98);
    }
    
    .hero-speech-bubble--floating {
        padding: 8px 12px;
        font-size: 12px;
        max-width: 140px;
        min-width: 100px;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    
    .hero-speech-bubble--floating .bubble-tail {
        bottom: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid rgba(250, 250, 252, 0.98);
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .hero-speech-bubble--main {
        top: 15%;
        left: -2%;
        padding: 8px 12px;
        font-size: 11px;
        max-width: 150px;
        min-width: 110px;
    }
    
    .hero-speech-bubble--floating {
        padding: 6px 10px;
        font-size: 11px;
        max-width: 120px;
        min-width: 90px;
        margin-bottom: 8px;
    }
}

/* ============================================
   METODO SECTION - Video Container Styles
   ============================================ */

/* Main container for the method section image/video area */
.tdc-metodo-image-container {
    min-height: 400px;
    background: linear-gradient(135deg, #0A1628 0%, #0D1E35 100%);
}

/* Fade overlay from right to left (to blend with left content) */
.tdc-metodo-fade-overlay-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, 
        rgba(13, 30, 53, 0.95) 0%,
        rgba(13, 30, 53, 0.6) 10%,
        transparent 30%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 20;
}

/* Video loading spinner */
.tdc-video-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(135, 185, 235, 0.2);
    border-top-color: var(--tdc-gold-500);
    border-radius: 50%;
    animation: tdc-spinner-spin 1s linear infinite;
}

@keyframes tdc-spinner-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments for metodo section */
@media (max-width: 768px) {
    .tdc-metodo-image-container {
        min-height: 300px;
    }
    
    .tdc-metodo-fade-overlay-dark {
        background: linear-gradient(to bottom, 
            transparent 0%,
            transparent 70%,
            rgba(13, 30, 53, 0.8) 90%,
            rgba(13, 30, 53, 1) 100%
        );
    }
}