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

@property --academy-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@layer base {
    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }
}

@layer components {
    .academy-surface {
        @apply min-h-screen overflow-x-clip bg-gradient-to-br from-slate-50 via-gray-100 to-indigo-50/40;
    }

    .academy-site-footer {
        @apply mt-auto border-t border-gray-200/90 bg-white/70 shadow-[0_-1px_0_rgba(15,76,76,0.06)] backdrop-blur-sm print:hidden;
    }

    .academy-site-footer-grid {
        @apply grid gap-10 md:grid-cols-[minmax(0,1fr)_auto] md:items-start md:justify-between;
    }

    .academy-site-footer-divider {
        @apply my-8 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent;
    }

    .academy-panel {
        @apply rounded-xl border border-gray-200/90 bg-white shadow-sm;
    }

    .academy-panel-muted {
        @apply rounded-xl border border-gray-200/90 bg-gray-50/90 shadow-sm;
    }

    .academy-stat-card {
        @apply relative isolate overflow-hidden bg-white;
        border-radius: 1.25rem;
        box-shadow: 0 12px 32px rgba(15, 76, 76, 0.08);
    }

    .academy-stat-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 1.375rem;
        z-index: 0;
        background: conic-gradient(
            from var(--academy-ang, 0deg),
            #1f7d71,
            transparent 30%,
            #0f4c4c 50%,
            transparent 70%,
            #1f7d71
        );
        animation: academy-ang 6s linear infinite;
    }

    .academy-stat-card::after {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: 1.125rem;
        background: #fff;
        z-index: 0;
    }

    .academy-stat-card > * {
        @apply relative z-[1];
    }

    .academy-stat-icon {
        @apply grid h-12 w-12 shrink-0 place-items-center rounded-2xl text-white;
        background: linear-gradient(135deg, #1f7d71, #0f5c55);
        box-shadow: 0 10px 22px rgba(31, 125, 113, 0.32);
        animation: academy-bob 5s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .academy-stat-card::before {
            animation: none;
            background: linear-gradient(
                135deg,
                rgba(31, 125, 113, 0.55),
                rgba(15, 76, 76, 0.35)
            );
        }

        .academy-stat-icon {
            animation: none;
        }
    }

    .academy-card-dashed {
        @apply rounded-xl border border-dashed border-gray-300 bg-white/80 text-sm text-gray-600;
        @apply transition-[border-color,background-color,box-shadow] duration-300 ease-out;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-card-dashed:hover {
            @apply border-indigo-200 bg-white shadow-sm;
        }
    }

    .academy-panel-danger {
        @apply rounded-xl border border-red-100 bg-red-50/50 shadow-sm;
    }

    .academy-banner {
        @apply rounded-xl border px-4 py-3 text-sm;
        @apply transition-[box-shadow,transform] duration-300 ease-out;
    }

    .academy-banner-warn {
        @apply academy-banner border-amber-200 bg-amber-50 text-amber-950;
    }

    .academy-banner-success {
        @apply academy-banner border-green-200 bg-green-50 text-green-900;
    }

    .academy-banner-info {
        @apply academy-banner border-indigo-200 bg-indigo-50 text-indigo-950;
    }

    .academy-banner-success,
    .academy-banner-warn,
    .academy-banner-info {
        @apply academy-card-enter;
    }

    .academy-choice {
        @apply rounded-lg border border-gray-200 text-sm;
        @apply transition-[border-color,background-color,box-shadow,transform] duration-200 ease-out;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-choice:hover {
            @apply border-indigo-200 bg-indigo-50/40 shadow-sm;
        }
    }

    .academy-file-input {
        @apply block w-full text-sm text-gray-600;
    }

    .academy-file-input::file-selector-button {
        @apply me-3 rounded-[13px] border-0 bg-indigo-600 px-3 py-1.5 text-sm font-bold text-white;
        box-shadow: 0 8px 18px rgba(31, 125, 113, 0.28);
        transition:
            box-shadow 0.3s ease,
            transform 0.2s ease,
            background-color 0.3s ease;
    }

    .academy-file-input::file-selector-button:hover {
        @apply bg-indigo-700;
        transform: translateY(-1px);
    }

    .academy-list-row {
        @apply transition-colors duration-200 ease-out;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-list-row:hover {
            @apply bg-indigo-50/25;
        }
    }

    .academy-card,
    .academy-card-tilt {
        @apply relative overflow-hidden rounded-3xl border border-gray-200/90 bg-white shadow-sm;
        --mx: 50%;
        --my: 50%;
        transform-style: preserve-3d;
        transform-origin: center center;
        backface-visibility: hidden;
        transition:
            box-shadow 0.4s ease,
            border-color 0.4s ease;
    }

    .academy-card > *,
    .academy-card-tilt > * {
        @apply relative z-[1];
    }

    .academy-catalog-course-card.academy-card {
        @apply bg-white;
        background-image: radial-gradient(
            ellipse 100% 90% at 100% 100%,
            rgba(31, 125, 113, 0.18) 0%,
            rgba(15, 92, 85, 0.08) 38%,
            rgba(15, 76, 76, 0.03) 52%,
            transparent 58%
        );
        background-repeat: no-repeat;
    }

    .academy-catalog-course-card.academy-card[data-lane='gigcx'] {
        background-image: radial-gradient(
            ellipse 100% 90% at 100% 100%,
            rgba(71, 85, 105, 0.34) 0%,
            rgba(148, 163, 184, 0.18) 38%,
            transparent 58%
        );
    }

    [data-academy-card-body] {
        transform-style: preserve-3d;
        transition: transform 0.12s ease-out;
    }

    .academy-card-tilt::before,
    .academy-card-tilt[data-academy-tilt]::before,
    .academy-card.academy-card-tilt::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        background: radial-gradient(
            380px circle at var(--mx) var(--my),
            rgba(31, 125, 113, 0.16),
            transparent 45%
        );
    }

    .academy-card-tilt::after,
    .academy-card-tilt[data-academy-tilt]::after,
    .academy-card.academy-card-tilt::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        border-radius: 1.5rem;
        padding: 1.5px;
        transition: opacity 0.4s ease;
        background: radial-gradient(
            260px circle at var(--mx) var(--my),
            #1f7d71,
            transparent 60%
        );
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-card-tilt:hover,
        .academy-card-tilt.is-tilt-active,
        .academy-card-tilt[data-academy-tilt]:hover,
        .academy-card.academy-card-tilt:hover,
        .academy-card.academy-card-tilt.is-tilt-active {
            border-color: rgba(31, 125, 113, 0.4);
            box-shadow: 0 30px 60px rgba(15, 76, 76, 0.13);
        }

        .academy-card-tilt:hover::before,
        .academy-card-tilt:hover::after,
        .academy-card-tilt.is-tilt-active::before,
        .academy-card-tilt.is-tilt-active::after,
        .academy-card-tilt[data-academy-tilt]:hover::before,
        .academy-card-tilt[data-academy-tilt]:hover::after,
        .academy-card.academy-card-tilt:hover::before,
        .academy-card.academy-card-tilt:hover::after,
        .academy-card.academy-card-tilt.is-tilt-active::before,
        .academy-card.academy-card-tilt.is-tilt-active::after {
            opacity: 1;
        }
    }

    .academy-card-interactive {
        @apply cursor-pointer;
    }

    .academy-card-enter {
        opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-card-enter {
            @apply animate-card-enter;
        }

        .academy-stagger-grid > .academy-card-enter {
            animation: academy-slide-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
            animation-delay: calc(var(--i, 0) * 90ms);
        }

        .academy-stagger-list > .academy-card-enter {
            animation: academy-rise-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
            animation-delay: calc(var(--i, 0) * 90ms);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .academy-card-enter {
            opacity: 1;
        }
    }

    .academy-stagger-grid > *:nth-child(1) {
        --i: 0;
    }
    .academy-stagger-grid > *:nth-child(2) {
        --i: 1;
    }
    .academy-stagger-grid > *:nth-child(3) {
        --i: 2;
    }
    .academy-stagger-grid > *:nth-child(4) {
        --i: 3;
    }
    .academy-stagger-grid > *:nth-child(5) {
        --i: 4;
    }
    .academy-stagger-grid > *:nth-child(6) {
        --i: 5;
    }
    .academy-stagger-grid > *:nth-child(7) {
        --i: 6;
    }
    .academy-stagger-grid > *:nth-child(8) {
        --i: 7;
    }
    .academy-stagger-grid > *:nth-child(9) {
        --i: 8;
    }
    .academy-stagger-grid > *:nth-child(10) {
        --i: 9;
    }
    .academy-stagger-grid > *:nth-child(11) {
        --i: 10;
    }
    .academy-stagger-grid > *:nth-child(12) {
        --i: 11;
    }
    .academy-stagger-grid > *:nth-child(13) {
        --i: 12;
    }
    .academy-stagger-grid > *:nth-child(14) {
        --i: 13;
    }
    .academy-stagger-grid > *:nth-child(15) {
        --i: 14;
    }
    .academy-stagger-grid > *:nth-child(16) {
        --i: 15;
    }

    .academy-stagger-list > *:nth-child(1) {
        --i: 0;
    }
    .academy-stagger-list > *:nth-child(2) {
        --i: 1;
    }
    .academy-stagger-list > *:nth-child(3) {
        --i: 2;
    }
    .academy-stagger-list > *:nth-child(4) {
        --i: 3;
    }
    .academy-stagger-list > *:nth-child(5) {
        --i: 4;
    }
    .academy-stagger-list > *:nth-child(6) {
        --i: 5;
    }
    .academy-stagger-list > *:nth-child(7) {
        --i: 6;
    }
    .academy-stagger-list > *:nth-child(8) {
        --i: 7;
    }
    .academy-stagger-list > *:nth-child(9) {
        --i: 8;
    }
    .academy-stagger-list > *:nth-child(10) {
        --i: 9;
    }
    .academy-stagger-list > *:nth-child(11) {
        --i: 10;
    }
    .academy-stagger-list > *:nth-child(12) {
        --i: 11;
    }

    .academy-field {
        @apply rounded-lg border-gray-300 shadow-sm;
        @apply transition-[border-color,box-shadow] duration-200 ease-out;
        @apply focus:border-indigo-500 focus:ring-indigo-500 focus:shadow-md;
    }

    .academy-btn-fill {
        @apply relative z-[1] box-border shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden border-0;
        display: inline-flex;
        isolation: isolate;
        --rx: 50%;
        --ry: 50%;
        touch-action: manipulation;
        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.22s ease-out;
    }

    .academy-btn-fill:focus,
    .academy-btn-fill:focus-visible {
        outline: none;
    }

    .academy-btn-primary-sm,
    .academy-btn-secondary-sm {
        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.22s ease-out;
    }

    .academy-btn-fill::before,
    .academy-btn-primary-sm::before,
    .academy-btn-secondary-sm::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        clip-path: circle(0% at var(--rx) var(--ry));
        transition: clip-path 0.55s ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .academy-btn-fill:hover:not(:disabled)::before,
        .academy-btn-primary-sm:hover:not(:disabled)::before,
        .academy-btn-secondary-sm:hover:not(:disabled)::before {
            clip-path: circle(150% at var(--rx) var(--ry));
        }
    }

    .academy-btn-fill:disabled {
        @apply cursor-not-allowed opacity-40;
    }

    .academy-btn-navy {
        @apply academy-btn-fill rounded-[13px] bg-indigo-800 px-[22px] py-3.5 text-sm font-bold text-white;
        box-shadow: 0 8px 20px rgba(15, 76, 76, 0.22);
    }

    .academy-btn-navy::before,
    .academy-btn-primary-sm::before {
        background: linear-gradient(120deg, #1f7d71, #62aea1);
    }

    .academy-btn-navy:hover:not(:disabled),
    .academy-btn-navy:active:not(:disabled),
    .academy-btn-primary-sm:hover:not(:disabled),
    .academy-btn-primary-sm:active:not(:disabled) {
        @apply text-white;
        box-shadow: 0 8px 20px rgba(15, 76, 76, 0.22);
    }

    .academy-btn-teal {
        @apply academy-btn-fill rounded-[13px] bg-indigo-600 px-[22px] py-3.5 text-sm font-bold text-white;
        box-shadow: 0 8px 20px rgba(31, 125, 113, 0.24);
    }

    .academy-btn-teal::before {
        @apply bg-white;
    }

    .academy-btn-teal:hover:not(:disabled),
    .academy-btn-teal:active:not(:disabled) {
        @apply text-white;
        box-shadow: 0 8px 20px rgba(31, 125, 113, 0.24);
    }

    .academy-btn-ghost {
        @apply academy-btn-fill rounded-[13px] border border-gray-300 bg-white px-[22px] py-3.5 text-sm font-bold text-gray-800;
        box-shadow: 0 2px 8px rgba(15, 76, 76, 0.06);
    }

    .academy-btn-ghost::before,
    .academy-btn-secondary-sm::before {
        background: linear-gradient(
            120deg,
            rgba(230, 244, 241, 0.98),
            rgba(184, 221, 213, 0.92)
        );
    }

    .academy-btn-ghost:hover:not(:disabled),
    .academy-btn-ghost:active:not(:disabled),
    .academy-btn-secondary-sm:hover:not(:disabled),
    .academy-btn-secondary-sm:active:not(:disabled) {
        @apply border-indigo-300 text-indigo-900;
        box-shadow: 0 2px 8px rgba(15, 76, 76, 0.06);
    }

    .academy-btn-danger {
        @apply academy-btn-fill rounded-[13px] bg-red-600 px-[22px] py-3.5 text-sm font-bold text-white;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
    }

    .academy-btn-danger::before {
        background: linear-gradient(120deg, #f87171, #fecaca);
    }

    .academy-btn-danger:hover:not(:disabled),
    .academy-btn-danger:active:not(:disabled) {
        @apply text-white;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
    }

    .academy-btn-primary-sm {
        @apply academy-btn-fill rounded-[13px] bg-indigo-800 px-4 py-2 text-sm font-bold text-white;
        box-shadow: 0 8px 20px rgba(15, 76, 76, 0.22);
    }

    .academy-btn-secondary-sm {
        @apply academy-btn-fill rounded-[13px] border border-gray-300 bg-white px-3 py-1.5 text-sm font-bold text-gray-800;
        box-shadow: 0 2px 8px rgba(15, 76, 76, 0.06);
    }

    .academy-btn-ar {
        @apply grid h-[22px] w-[22px] place-items-center rounded-full bg-white/20;
        transition: transform 0.25s ease;
    }

    .academy-btn-fill:hover:not(:disabled) .academy-btn-ar {
        transform: translateX(3px) rotate(-45deg);
    }

    .academy-page-hero-bleed {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-top: -3rem;
        margin-bottom: 0.5rem;
    }

    @media (min-width: 640px) {
        .academy-page-hero-bleed {
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            width: calc(100% + 3rem);
            max-width: none;
        }
    }

    @media (min-width: 1024px) {
        .academy-page-hero-bleed {
            margin-left: -2rem;
            margin-right: -2rem;
            width: calc(100% + 4rem);
        }
    }

    .academy-page-hero-bleed .academy-page-hero {
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .academy-page-hero {
        @apply relative isolate overflow-hidden border-y border-indigo-500/25 text-white;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: center;
        padding: 2rem 1.25rem;
        background-color: #0f4c4c;
    }

    .academy-page-hero:not(.academy-page-hero-compact) {
        gap: 3rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        min-height: 18rem;
    }

    @media (min-width: 640px) {
        .academy-page-hero {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }

    @media (min-width: 768px) {
        .academy-page-hero {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.75fr);
            padding: 2.5rem 2rem;
        }

        .academy-page-hero:not(.academy-page-hero-compact) {
            padding-top: 5rem;
            padding-bottom: 5rem;
            min-height: 24rem;
        }
    }

    @media (min-width: 1024px) {
        .academy-page-hero {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    .academy-page-hero > *:not(.academy-page-hero-bg):not(
            .academy-page-hero-glow
        ):not(.academy-page-hero-grid) {
        @apply relative z-[1];
    }

    .academy-page-hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            140deg,
            #0f4c4c 0%,
            #0f5c55 42%,
            #1f7d71 100%
        );
    }

    .academy-page-hero-glow {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .academy-page-hero-glow::after {
        content: '';
        position: absolute;
        width: min(32rem, 90vw);
        height: min(32rem, 90vw);
        border-radius: 50%;
        right: -4rem;
        top: -6rem;
        background: radial-gradient(
            circle,
            rgba(98, 174, 161, 0.45),
            transparent 68%
        );
        animation: academy-hero-drift 10s ease-in-out infinite alternate;
    }

    .academy-page-hero-grid {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: linear-gradient(
                rgba(255, 255, 255, 0.055) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.055) 1px,
                transparent 1px
            );
        background-size: 34px 34px;
    }

    .academy-page-hero-content {
        @apply min-w-0;
    }

    .academy-page-hero-breadcrumb {
        @apply mb-2;
    }

    .academy-page-hero-breadcrumb-list {
        @apply flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs;
    }

    .academy-page-hero-breadcrumb-item {
        @apply inline-flex items-center gap-1.5;
    }

    .academy-page-hero-breadcrumb-link {
        @apply font-semibold text-indigo-200/90 transition-colors duration-200 hover:text-white;
    }

    .academy-page-hero-breadcrumb-current {
        @apply font-semibold text-white;
    }

    .academy-page-hero-breadcrumb-sep {
        @apply text-indigo-300/70;
    }

    .academy-page-hero-eyebrow {
        font-family:
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        @apply text-xs font-bold uppercase tracking-widest text-indigo-300;
    }

    .academy-page-hero-title {
        @apply mt-1 text-2xl font-extrabold tracking-tight text-white sm:text-3xl;
    }

    .academy-page-hero-description {
        @apply mt-2 max-w-xl text-sm leading-relaxed text-indigo-100/90 sm:text-base;
    }

    .academy-page-hero-actions {
        @apply mt-4 flex flex-wrap items-center gap-2;
    }

    .academy-page-hero-meta {
        @apply mt-5 flex flex-wrap gap-3;
    }

    .academy-page-hero-meta-item {
        @apply rounded-full border border-white/15 bg-white/10 px-3 py-1 text-xs;
    }

    .academy-page-hero-meta-item dt {
        @apply font-medium uppercase tracking-wide text-indigo-200/80;
    }

    .academy-page-hero-meta-item dd {
        @apply font-semibold text-white;
    }

    .academy-page-hero-visual-wrap {
        @apply hidden min-h-[7.5rem] md:block;
    }

    .academy-page-hero:not(.academy-page-hero-compact)
        .academy-page-hero-visual-wrap {
        @apply min-h-[15rem];
    }

    .academy-page-hero-compact {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        padding: 1.25rem 1.25rem;
        border-radius: 1.25rem;
        border: 1px solid rgba(31, 125, 113, 0.35);
        box-shadow: 0 12px 32px rgba(15, 76, 76, 0.12);
    }

    .academy-page-hero-compact .academy-page-hero-visual-wrap {
        @apply block min-h-[4.5rem] w-24;
    }

    .academy-page-hero-compact .academy-page-hero-title {
        @apply text-xl;
    }

    .academy-hero-visual {
        @apply relative mx-auto h-32 w-full max-w-[220px];
    }

    .academy-page-hero:not(.academy-page-hero-compact) .academy-hero-visual {
        @apply h-64 max-w-[280px];
    }

    .academy-hero-orb {
        @apply absolute rounded-full;
        background: rgba(98, 174, 161, 0.35);
    }

    .academy-hero-orb-a {
        width: 3.5rem;
        height: 3.5rem;
        left: 12%;
        top: 20%;
        animation: academy-hero-float 5s ease-in-out infinite;
    }

    .academy-hero-orb-b {
        width: 5rem;
        height: 5rem;
        right: 8%;
        top: 35%;
        animation: academy-hero-float 6.5s ease-in-out infinite reverse;
    }

    .academy-hero-orb-c {
        width: 2.5rem;
        height: 2.5rem;
        left: 42%;
        bottom: 12%;
        animation: academy-hero-float 4.5s ease-in-out infinite;
        animation-delay: -1.2s;
    }

    .academy-hero-ring {
        @apply absolute rounded-full border border-indigo-300/40;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .academy-hero-ring-1 {
        width: 7.5rem;
        height: 7.5rem;
        animation: academy-hero-pulse 3.2s ease-in-out infinite;
    }

    .academy-hero-ring-2 {
        width: 5.5rem;
        height: 5.5rem;
        animation: academy-hero-pulse 3.2s ease-in-out infinite;
        animation-delay: -0.8s;
    }

    .academy-hero-ring-3 {
        width: 3.5rem;
        height: 3.5rem;
        animation: academy-hero-pulse 3.2s ease-in-out infinite;
        animation-delay: -1.6s;
    }

    .academy-hero-core {
        @apply absolute rounded-full bg-indigo-400;
        width: 1.25rem;
        height: 1.25rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 20px rgba(98, 174, 161, 0.8);
    }

    .academy-hero-tile {
        @apply absolute rounded-2xl border border-white/20 bg-white/10;
        animation: academy-hero-float 4s ease-in-out infinite;
    }

    .academy-hero-tile-1 {
        width: 3.5rem;
        height: 4.5rem;
        left: 10%;
        top: 28%;
    }

    .academy-hero-tile-2 {
        width: 4rem;
        height: 3rem;
        right: 12%;
        top: 18%;
        animation-delay: -0.9s;
    }

    .academy-hero-tile-3 {
        width: 3rem;
        height: 3.5rem;
        left: 45%;
        bottom: 8%;
        animation-delay: -1.6s;
    }

    .academy-hero-svg {
        @apply h-full w-full;
    }

    .academy-hero-arc-track {
        stroke: rgba(255, 255, 255, 0.15);
    }

    .academy-hero-arc-fill {
        stroke: #62aea1;
        stroke-linecap: round;
        stroke-dasharray: 276;
        stroke-dashoffset: 80;
        transform-origin: center;
        animation: academy-hero-arc-spin 8s linear infinite;
    }

    .academy-hero-learning-pip {
        @apply absolute h-3 w-3 rounded-full bg-indigo-300;
        right: 28%;
        top: 22%;
        animation: academy-hero-pulse 2s ease-in-out infinite;
    }

    .academy-hero-star {
        @apply absolute text-xl text-indigo-300;
        animation: academy-hero-twinkle 2.5s ease-in-out infinite;
    }

    .academy-hero-star-1 {
        left: 18%;
        top: 18%;
    }

    .academy-hero-star-2 {
        right: 22%;
        top: 24%;
        animation-delay: -1.1s;
    }

    .academy-hero-medal {
        @apply absolute left-1/2 top-1/2 rounded-full border-4 border-indigo-300/50 bg-indigo-500/40;
        width: 4.5rem;
        height: 4.5rem;
        transform: translate(-50%, -50%);
        animation: academy-bob 5s ease-in-out infinite;
    }

    .academy-hero-bar {
        @apply absolute bottom-4 w-7 rounded-md bg-indigo-400/70;
        transform-origin: bottom;
        animation: academy-hero-bar 2.8s ease-in-out infinite;
    }

    .academy-hero-bar-1 {
        height: 3rem;
        left: 16%;
        animation-delay: 0s;
    }

    .academy-hero-bar-2 {
        height: 4.5rem;
        left: 34%;
        animation-delay: -0.4s;
    }

    .academy-hero-bar-3 {
        height: 3.5rem;
        left: 52%;
        animation-delay: -0.8s;
    }

    .academy-hero-bar-4 {
        height: 5rem;
        left: 70%;
        animation-delay: -1.2s;
    }

    .academy-hero-shield {
        @apply absolute left-1/2 top-1/2 rounded-2xl border-2 border-indigo-300/60 bg-indigo-600/30;
        width: 4.75rem;
        height: 5.25rem;
        transform: translate(-50%, -50%);
        clip-path: polygon(50% 0%, 100% 22%, 100% 72%, 50% 100%, 0% 72%, 0% 22%);
        animation: academy-bob 5s ease-in-out infinite;
    }

    .academy-hero-scan {
        @apply absolute left-1/2 top-0 h-1 w-28 -translate-x-1/2 rounded-full bg-indigo-300/70;
        animation: academy-hero-scan 3.5s ease-in-out infinite;
    }

    .academy-hero-check {
        @apply absolute h-2 w-8 rounded-full bg-indigo-300/70;
    }

    .academy-hero-check-1 {
        left: 20%;
        top: 28%;
        animation: academy-hero-check 2.4s ease-in-out infinite;
    }

    .academy-hero-check-2 {
        left: 30%;
        top: 48%;
        animation: academy-hero-check 2.4s ease-in-out infinite;
        animation-delay: -0.5s;
    }

    .academy-hero-check-3 {
        left: 40%;
        top: 68%;
        animation: academy-hero-check 2.4s ease-in-out infinite;
        animation-delay: -1s;
    }

    .academy-hero-scroll {
        @apply absolute left-1/2 top-1/2 rounded-lg border border-white/25 bg-white/10;
        width: 5.5rem;
        height: 4rem;
        transform: translate(-50%, -50%);
    }

    .academy-hero-seal {
        @apply absolute rounded-full border-4 border-indigo-300 bg-indigo-400/50;
        width: 2.25rem;
        height: 2.25rem;
        right: 24%;
        bottom: 22%;
        animation: academy-hero-pulse 3s ease-in-out infinite;
    }

    .academy-hero-node {
        @apply absolute h-3 w-3 rounded-full bg-indigo-300;
        box-shadow: 0 0 12px rgba(98, 174, 161, 0.9);
    }

    .academy-hero-node-1 {
        left: 16%;
        top: 50%;
    }

    .academy-hero-node-2 {
        left: 46%;
        top: 34%;
        animation: academy-hero-pulse 2.2s ease-in-out infinite;
    }

    .academy-hero-node-3 {
        right: 14%;
        top: 58%;
    }

    .academy-hero-path-line {
        @apply absolute left-[18%] right-[14%] top-1/2 h-0.5 bg-indigo-300/50;
        transform: translateY(-50%);
    }

    .academy-hero-play {
        @apply absolute left-1/2 top-1/2 rounded-full bg-indigo-400/80;
        width: 3.5rem;
        height: 3.5rem;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 24px rgba(98, 174, 161, 0.55);
        animation: academy-hero-pulse 2.8s ease-in-out infinite;
    }

    .academy-hero-play::after {
        content: '';
        position: absolute;
        left: 1.35rem;
        top: 1rem;
        border-style: solid;
        border-width: 0.65rem 0 0.65rem 1rem;
        border-color: transparent transparent transparent #fff;
    }

    .academy-hero-wave {
        @apply absolute h-10 w-10 rounded-full border border-indigo-300/35;
        animation: academy-hero-pulse 3.5s ease-in-out infinite;
    }

    .academy-hero-wave-1 {
        right: 16%;
        top: 22%;
    }

    .academy-hero-wave-2 {
        left: 14%;
        bottom: 16%;
        animation-delay: -1.4s;
    }

    .academy-hero-gear {
        @apply absolute left-1/2 top-1/2 rounded-full border-4 border-dashed border-indigo-300/70;
        animation: academy-hero-spin 12s linear infinite;
    }

    .academy-hero-gear-outer {
        width: 5.5rem;
        height: 5.5rem;
        transform: translate(-50%, -50%);
    }

    .academy-hero-gear-inner {
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
        animation-direction: reverse;
        animation-duration: 8s;
    }

    .academy-hero-avatar {
        @apply absolute left-1/2 top-1/2 rounded-full bg-indigo-400/80;
        width: 4rem;
        height: 4rem;
        transform: translate(-50%, -50%);
    }

    .academy-hero-avatar-ring {
        @apply absolute left-1/2 top-1/2 rounded-full border-2 border-indigo-200/50;
        width: 5.25rem;
        height: 5.25rem;
        transform: translate(-50%, -50%);
        animation: academy-hero-pulse 3s ease-in-out infinite;
    }

    .academy-hero-lock-body {
        @apply absolute left-1/2 top-[52%] rounded-lg bg-indigo-400/80;
        width: 3.25rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }

    .academy-hero-lock-shackle {
        @apply absolute left-1/2 rounded-full border-4 border-indigo-300;
        width: 2.25rem;
        height: 2.25rem;
        top: 26%;
        transform: translateX(-50%);
        border-bottom-color: transparent;
    }

    .academy-hero-board {
        @apply absolute left-1/2 top-1/2 rounded-xl border border-white/20 bg-white/10;
        width: 6rem;
        height: 4rem;
        transform: translate(-50%, -50%);
    }

    .academy-hero-chalk {
        @apply absolute rounded-sm bg-indigo-300;
        width: 2.5rem;
        height: 0.35rem;
        right: 18%;
        bottom: 28%;
        animation: academy-hero-float 4s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .academy-page-hero-glow::after,
        .academy-hero-visual *,
        .academy-hero-arc-fill {
            animation: none !important;
        }
    }
}

@keyframes academy-ang {
    to {
        --academy-ang: 360deg;
    }
}

@keyframes academy-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes academy-hero-drift {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-24px, 20px);
    }
}

@keyframes academy-hero-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes academy-hero-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes academy-hero-arc-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes academy-hero-twinkle {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes academy-hero-bar {
    0%,
    100% {
        transform: scaleY(0.72);
    }
    50% {
        transform: scaleY(1);
    }
}

@keyframes academy-hero-scan {
    0%,
    100% {
        top: 10%;
        opacity: 0.3;
    }
    50% {
        top: 78%;
        opacity: 0.9;
    }
}

@keyframes academy-hero-check {
    0%,
    100% {
        width: 1.5rem;
        opacity: 0.45;
    }
    50% {
        width: 2.5rem;
        opacity: 1;
    }
}

@keyframes academy-hero-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes academy-slide-in {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes academy-rise-in {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}