/* ============================================
   INDEX PAGE STYLES
   Extracted from Index.razor inline <style> block
   All hard-coded hex colors replaced with design tokens
   Cache bust: v2026-01-30-normalize
   ============================================ */

/* ============================================
   HERO SECTION
   ============================================ */
.index-hero .hero-section {
    background: var(--gradient-hero);
    color: hsl(var(--primary-foreground));
    padding: var(--space-16) 0;
    margin-bottom: var(--space-8);
}

.index-hero .hero-title {
    font-size: var(--text-5xl);
    font-weight: bold;
    margin-bottom: var(--space-4);
}

.index-hero .hero-subtitle {
    font-size: var(--text-xl);
    margin-bottom: var(--space-8);
    opacity: 0.9;
}

.index-hero .hero-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.index-hero .feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
}

.index-hero .feature-item i {
    font-size: var(--text-2xl);
}

.index-hero .hero-demo-card {
    background: rgba(255, 255, 255, 0.95);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-lg);
}

/* ============================================
   KEY STAGE SELECTION
   ============================================ */
.key-stage-selection-section {
    padding: var(--space-16) 0;
    background: hsl(var(--background));
}

.adventure-level-card {
    background: hsl(var(--card));
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    border: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-xs);
    max-width: 800px;
    margin: 0 auto;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.adventure-level-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.adventure-level-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.adventure-level-card:hover::before {
    opacity: 1;
    animation: adventure-shimmer 1.5s ease-out;
}

@keyframes adventure-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

.key-stage-main-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-4);
    outline: none;
}

.key-stage-subtitle {
    font-size: var(--text-base);
    color: hsl(var(--muted-foreground));
    max-width: 600px;
    margin: 0 auto var(--space-12);
    line-height: var(--leading-normal);
}

/* Key Stage Grid */
.key-stage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.key-stage-selection-section .key-stage-card {
    background: hsl(var(--card));
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.key-stage-selection-section .key-stage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* Card Key Stage Backgrounds - using design token gradients */
.key-stage-selection-section .ks1-card {
    background: var(--gradient-ks1);
}

.key-stage-selection-section .ks2-card {
    background: var(--gradient-ks2);
}

.key-stage-selection-section .ks3-card {
    background: var(--gradient-ks3);
}

.key-stage-selection-section .ks4-card {
    background: var(--gradient-ks4);
}

/* Card Elements */
.key-stage-selection-section .card-icon {
    text-align: center;
    margin-bottom: var(--space-4);
}

.key-stage-selection-section .card-icon i {
    font-size: 3rem;
    color: hsl(var(--foreground));
}

.key-stage-selection-section .card-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: hsl(var(--foreground));
    text-align: center;
    margin-bottom: var(--space-1);
}

.key-stage-selection-section .card-subtitle {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    text-align: center;
    margin-bottom: var(--space-3);
}

.key-stage-selection-section .age-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    margin: 0 auto var(--space-4);
    background: rgba(255, 255, 255, 0.8);
}

.ks1-badge { color: hsl(var(--ks1-text)); }
.ks2-badge { color: hsl(var(--ks2-text)); }
.ks3-badge { color: hsl(var(--ks3-text)); }
.ks4-badge { color: hsl(var(--ks4-text)); }

.key-stage-selection-section .card-description {
    font-size: var(--text-sm);
    color: hsl(var(--card-foreground));
    text-align: center;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
}

/* Topics Section */
.topics-section {
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.topics-header {
    font-size: var(--text-xs);
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.topics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: center;
}

.topic-tag {
    font-size: var(--text-xs);
    color: hsl(var(--card-foreground));
    font-weight: 500;
}

.more-link {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
    justify-self: end;
    grid-column: 2;
}

/* Start Learning Button */
.start-learning-btn {
    background: hsl(var(--student-primary));
    color: hsl(var(--primary-foreground));
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-3xl);
    font-size: var(--text-sm);
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: auto;
}

.start-learning-btn:hover {
    background: hsl(var(--student-secondary));
    transform: translateY(-1px);
}

/* ============================================
   ASSESSMENT SECTION
   ============================================ */
.assessment-section {
    margin-top: var(--space-16);
    text-align: center;
}

.assessment-card {
    background: hsl(var(--card));
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    max-width: 100%;
    margin: 0 auto;
}

.assessment-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-3);
}

.assessment-subtitle {
    font-size: var(--text-base);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-6);
    line-height: var(--leading-normal);
}

.assessment-btn {
    background: hsl(var(--card));
    color: hsl(var(--primary));
    border: 2px solid hsl(var(--primary));
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-3xl);
    font-size: var(--text-base);
    font-weight: 500;
    transition: all 0.2s ease;
}

.assessment-btn:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* ============================================
   DEMO LINKS
   ============================================ */
.demo-links-card {
    background: hsl(var(--secondary));
    padding: var(--space-8);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
}

.demo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: hsl(var(--muted-foreground));
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.demo-link:hover {
    background: hsl(var(--card));
    color: hsl(var(--primary));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.demo-link i {
    font-size: var(--text-4xl);
}

.demo-link span {
    font-weight: 500;
}

/* ============================================
   ACHIEVEMENT BADGE
   ============================================ */
.achievement-badge {
    background: linear-gradient(135deg, hsl(var(--student-accent)), hsl(var(--hard)));
    color: hsl(var(--foreground));
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin: var(--space-4) 0;
    box-shadow: 0 4px 20px hsl(var(--student-accent) / 0.3);
}

.xp-display {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    opacity: 0.9;
}

/* ============================================
   MAGIC BUTTON STYLES
   ============================================ */
.btn-magic {
    background: var(--gradient-hero);
    border: none;
    color: hsl(var(--primary-foreground));
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px hsl(var(--primary) / 0.3);
}

.btn-magic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsl(var(--primary) / 0.4);
    color: hsl(var(--primary-foreground));
}

.magic-button {
    position: relative;
    overflow: hidden;
}

.magic-button:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: index-shimmer 0.8s ease-out;
}

@keyframes index-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.magic-glow {
    box-shadow: 0 4px 20px hsl(var(--primary) / 0.15);
    transition: all 0.3s ease;
}

.magic-glow:hover {
    box-shadow: 0 8px 30px hsl(var(--primary) / 0.25);
    transform: translateY(-2px);
}

.sparkle-button {
    position: relative;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    transition: all 0.3s ease;
}

.sparkle-button:hover {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.8), hsl(var(--primary)));
    transform: scale(1.05);
}

.button-sparkle:hover {
    animation: index-sparkle 0.6s ease-in-out;
}

@keyframes index-sparkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* Hover & interaction effects */
.hover-magic:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.magic-hover {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.magic-hover:hover {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1.1);
}

/* Pulse glow */
.index-hero .pulse-glow {
    animation: index-pulse-glow 2s infinite;
}

@keyframes index-pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; text-shadow: 0 0 20px hsl(var(--student-accent) / 0.6); }
}

/* Rainbow text */
.index-hero .rainbow-text-slow {
    color: hsl(var(--primary));
    background: linear-gradient(45deg,
        hsl(var(--destructive)),
        hsl(var(--success)),
        hsl(var(--primary)),
        hsl(var(--student-success)),
        hsl(var(--student-accent)),
        hsl(var(--student-primary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: index-rainbow-shift-slow 4s ease-in-out infinite;
    user-select: none;
}

@keyframes index-rainbow-shift-slow {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(60deg); }
}

/* Fade in up animation */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: index-fadeInUp 0.8s ease-out forwards;
}

@keyframes index-fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating numbers */
.floating-numbers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-number {
    position: absolute;
    font-size: var(--text-4xl);
    opacity: 0.1;
    animation: index-float-around 15s infinite linear;
}

.floating-number:nth-child(1) { left: 10%; animation-delay: 0s; }
.floating-number:nth-child(2) { left: 25%; animation-delay: 3s; }
.floating-number:nth-child(3) { left: 50%; animation-delay: 6s; }
.floating-number:nth-child(4) { left: 75%; animation-delay: 9s; }
.floating-number:nth-child(5) { left: 90%; animation-delay: 12s; }

@keyframes index-float-around {
    0% { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* Celebration wiggle */
.celebration-wiggle:hover {
    animation: index-wiggle 0.5s ease-in-out;
}

@keyframes index-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Icon animations */
.pulse-icon {
    animation: index-pulse-icon 2s infinite;
}

.bounce-icon {
    animation: index-bounce-icon 2s infinite;
}

.rotate-icon {
    animation: index-rotate-icon 3s infinite;
}

@keyframes index-pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes index-bounce-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes index-rotate-icon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Magic portal shimmer */
.magic-portal {
    position: relative;
    overflow: hidden;
}

.magic-portal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: index-magic-shimmer 3s infinite;
}

@keyframes index-magic-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

/* Mega celebration */
.mega-celebration:hover {
    animation: index-mega-celebration 0.6s ease-in-out;
    transform-origin: center;
}

@keyframes index-mega-celebration {
    0% { transform: scale(1); }
    25% { transform: scale(1.05) rotate(-2deg); }
    50% { transform: scale(1.1) rotate(2deg); }
    75% { transform: scale(1.05) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Encouraging text */
.encouraging-text {
    background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid hsl(var(--primary));
    position: relative;
}

.encouraging-text::before {
    content: '\1F4AB';
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: var(--text-2xl);
    animation: index-float-gentle 2s ease-in-out infinite;
}

@keyframes index-float-gentle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Encouragement badges */
.encouragement-badges {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.encouragement-badge {
    background: linear-gradient(135deg, hsl(var(--ks1-bg)), hsl(var(--ks1)));
    color: hsl(var(--ks1-text));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-3xl);
    font-size: var(--text-sm);
    font-weight: 500;
    animation: index-gentle-pulse 3s ease-in-out infinite;
    box-shadow: 0 2px 8px hsl(var(--ks1) / 0.3);
}

.encouragement-badge:nth-child(1) { animation-delay: 0s; }
.encouragement-badge:nth-child(2) { animation-delay: 1s; }
.encouragement-badge:nth-child(3) { animation-delay: 2s; }

@keyframes index-gentle-pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* Motivational text */
.motivational-text {
    position: relative;
    padding: var(--space-4);
}

.motivational-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
    transform: translateX(-50%);
}

/* Personality text */
.personality-text {
    position: relative;
}

.personality-text em {
    color: hsl(var(--student-primary));
    font-style: italic;
    font-weight: 500;
    text-shadow: 0 1px 2px hsl(var(--foreground) / 0.1);
}

/* Celebration hover tooltip */
.celebration-hover:hover::after {
    content: attr(data-celebration);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-hero);
    color: hsl(var(--primary-foreground));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-3xl);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    animation: index-tooltip-bounce 0.3s ease-out;
    box-shadow: var(--shadow-lg);
}

@keyframes index-tooltip-bounce {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Celebration click sparkle */
.celebration-click {
    position: relative;
    overflow: hidden;
}

.celebration-click:active::after {
    content: '\2728';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-4xl);
    animation: index-click-sparkle 0.6s ease-out;
    pointer-events: none;
}

@keyframes index-click-sparkle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

/* Link sparkles */
.celebration-link {
    position: relative;
    overflow: hidden;
}

.link-sparkles {
    position: absolute;
    top: -5px;
    right: -5px;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: var(--text-xl);
}

.celebration-link:hover .link-sparkles {
    opacity: 1;
    animation: index-sparkle-dance 1s ease-in-out infinite;
}

@keyframes index-sparkle-dance {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.2); }
}

/* Friendly wobble */
.friendly-wobble {
    animation: index-friendly-wobble 3s ease-in-out infinite;
}

@keyframes index-friendly-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    75% { transform: rotate(-0.5deg); }
}

/* Wiggle icon */
.wiggle-icon {
    animation: index-wiggle-icon 2s ease-in-out infinite;
}

@keyframes index-wiggle-icon {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

/* Button celebrate animation */
.start-learning-btn:hover {
    animation: index-button-celebrate 0.5s ease-in-out;
}

@keyframes index-button-celebrate {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.03) rotate(-1deg); }
    50% { transform: scale(1.05) rotate(1deg); }
    75% { transform: scale(1.03) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Wiggle animation */
.wiggle-animation {
    animation: index-wiggle-fast 0.3s ease-in-out infinite;
}

@keyframes index-wiggle-fast {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Bounce gentle */
.index-hero .animate-bounce-gentle {
    animation: index-bounce-gentle 2s ease-in-out infinite;
}

@keyframes index-bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .key-stage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .key-stage-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .key-stage-main-title {
        font-size: var(--text-3xl);
    }

    .key-stage-selection-section .key-stage-card {
        min-height: auto;
        padding: var(--space-6) var(--space-5);
    }

    .assessment-card {
        padding: var(--space-6) var(--space-5);
    }

    .adventure-level-card {
        padding: var(--space-6) var(--space-5);
    }
}

@media (max-width: 768px) {
    .index-hero .hero-title {
        font-size: var(--text-4xl);
    }

    .index-hero .hero-features {
        margin-top: var(--space-8);
    }

    .index-hero .feature-item {
        justify-content: center;
    }

    .floating-numbers {
        display: none;
    }

    .celebration-hover:hover::after {
        display: none;
    }

    .encouragement-badges {
        flex-direction: column;
        align-items: center;
    }
}