/* ============================================================
   SKY HIGH TUTOR — Premium Loading Experience
   ------------------------------------------------------------
   A reusable, theme-aware, accessibility-first loading system:
     • Cinematic first-visit preloader (logo reveal + progress)
     • Buttery liquid page-transition overlay between pages
     • Light & dark themes (system + [data-theme] override)
     • Fully responsive · GPU-friendly · reduced-motion safe

   Only paints transform / opacity / clip-path / filter to keep
   the whole sequence pinned at 60 FPS.

   Everything is namespaced under `sl-` (SkyLoader) so it never
   collides with the site's existing design system.
   ============================================================ */

/* ---- Loader Design Tokens (Dark = cinematic default) ---- */
.sl-root {
    --sl-bg-1: #0c0e1c;
    --sl-bg-2: #171a33;
    --sl-fg: #f5f6f8;
    --sl-muted: rgba(245, 246, 248, 0.5);
    --sl-hairline: rgba(245, 246, 248, 0.14);

    --sl-orange: #e65722;
    --sl-teal: #82b7c9;
    --sl-navy: #2d3661;

    /* The lifting curtain that reveals the page */
    --sl-panel: linear-gradient(180deg, #171a33 0%, #0c0e1c 100%);
    --sl-glow-a: rgba(230, 87, 34, 0.55);
    --sl-glow-b: rgba(130, 183, 201, 0.42);
    --sl-glow-c: rgba(45, 54, 97, 0.65);

    --sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sl-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Light theme overrides ---- */
@media (prefers-color-scheme: light) {
    .sl-root {
        --sl-bg-1: #f5f6f8;
        --sl-bg-2: #ffffff;
        --sl-fg: #2d3661;
        --sl-muted: rgba(45, 54, 97, 0.5);
        --sl-hairline: rgba(45, 54, 97, 0.14);
        --sl-panel: linear-gradient(180deg, #ffffff 0%, #eef0f6 100%);
        --sl-glow-a: rgba(230, 87, 34, 0.28);
        --sl-glow-b: rgba(130, 183, 201, 0.30);
        --sl-glow-c: rgba(45, 54, 97, 0.16);
    }
}

/* Manual overrides win over the system preference */
[data-theme="light"] .sl-root,
html.light .sl-root {
    --sl-bg-1: #f5f6f8;
    --sl-bg-2: #ffffff;
    --sl-fg: #2d3661;
    --sl-muted: rgba(45, 54, 97, 0.5);
    --sl-hairline: rgba(45, 54, 97, 0.14);
    --sl-panel: linear-gradient(180deg, #ffffff 0%, #eef0f6 100%);
    --sl-glow-a: rgba(230, 87, 34, 0.28);
    --sl-glow-b: rgba(130, 183, 201, 0.30);
    --sl-glow-c: rgba(45, 54, 97, 0.16);
}

[data-theme="dark"] .sl-root,
html.dark .sl-root {
    --sl-bg-1: #0c0e1c;
    --sl-bg-2: #171a33;
    --sl-fg: #f5f6f8;
    --sl-muted: rgba(245, 246, 248, 0.5);
    --sl-hairline: rgba(245, 246, 248, 0.14);
    --sl-panel: linear-gradient(180deg, #171a33 0%, #0c0e1c 100%);
    --sl-glow-a: rgba(230, 87, 34, 0.55);
    --sl-glow-b: rgba(130, 183, 201, 0.42);
    --sl-glow-c: rgba(45, 54, 97, 0.65);
}

/* Lock scroll while the loader owns the screen */
html.sl-locked,
html.sl-locked body {
    overflow: hidden !important;
    /* Keep the layout still — the scrollbar is hidden behind the overlay */
    touch-action: none;
}

/* ============================================================
   ROOT STAGE
   ============================================================ */
.sl-root {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    color: var(--sl-fg);
    font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
    background: var(--sl-bg-1);
    cursor: default;
    overflow: hidden;
    /* Promote to its own layer up front */
    will-change: opacity;
    -webkit-font-smoothing: antialiased;
}

.sl-root[hidden] {
    display: none;
}

/* The whole loader fades out as the very last beat */
.sl-root.is-done {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* ---- The lifting curtain (columns) ---- */
.sl-panels {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
    pointer-events: none;
}

.sl-panel {
    position: relative;
    flex: 1 1 0;
    background: var(--sl-panel);
    transform: translateY(0);
    /* liquid, staggered lift */
    transition: transform 0.95s var(--sl-ease);
    transition-delay: calc(var(--i, 0) * 60ms);
}

/* Curved leading edge → the "liquid" wave as the curtain lifts */
.sl-panel::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: 26vh;
    background: inherit;
    border-radius: 0 0 52% 52% / 0 0 100% 100%;
}

/* Enter-from-below staging for page transitions */
.sl-root.is-cover-start .sl-panel {
    transform: translateY(105%);
}

.sl-root.is-cover-start .sl-panel::after {
    top: 100%;
    bottom: auto;
    border-radius: 52% 52% 0 0 / 100% 100% 0 0;
}

/* Lift the curtain off the top → reveal the page */
.sl-root.is-reveal .sl-panel {
    transform: translateY(-106%);
}

.sl-root.is-reveal .sl-panel:nth-child(even) {
    transition-delay: calc(var(--i, 0) * 60ms + 40ms);
}

/* ============================================================
   AMBIENT BACKDROP — drifting gradient orbs + grain
   ============================================================ */
.sl-ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.sl-root.is-reveal .sl-ambient {
    opacity: 0;
}

.sl-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.9;
    mix-blend-mode: screen;
    will-change: transform;
}

.sl-orb--1 {
    width: 46vmax;
    height: 46vmax;
    left: -12vmax;
    top: -14vmax;
    background: radial-gradient(circle at 50% 50%, var(--sl-glow-a), transparent 68%);
    animation: sl-drift-a 14s var(--sl-ease-io) infinite alternate;
}

.sl-orb--2 {
    width: 40vmax;
    height: 40vmax;
    right: -12vmax;
    bottom: -12vmax;
    background: radial-gradient(circle at 50% 50%, var(--sl-glow-b), transparent 68%);
    animation: sl-drift-b 17s var(--sl-ease-io) infinite alternate;
}

.sl-orb--3 {
    width: 34vmax;
    height: 34vmax;
    left: 40%;
    top: 30%;
    background: radial-gradient(circle at 50% 50%, var(--sl-glow-c), transparent 70%);
    animation: sl-drift-c 20s var(--sl-ease-io) infinite alternate;
}

@media (prefers-color-scheme: light) {
    .sl-orb { mix-blend-mode: multiply; }
}
[data-theme="light"] .sl-orb,
html.light .sl-orb { mix-blend-mode: multiply; }
[data-theme="dark"] .sl-orb,
html.dark .sl-orb { mix-blend-mode: screen; }

@keyframes sl-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8vmax, 6vmax, 0) scale(1.14); }
}

@keyframes sl-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-7vmax, -5vmax, 0) scale(1); }
}

@keyframes sl-drift-c {
    from { transform: translate3d(-4vmax, 2vmax, 0) scale(0.95); }
    to   { transform: translate3d(5vmax, -4vmax, 0) scale(1.2); }
}

/* Fine film grain for depth */
.sl-grain {
    position: absolute;
    inset: -50%;
    z-index: 3;
    opacity: 0.05;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation: sl-grain 0.5s steps(3) infinite;
}

@keyframes sl-grain {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-4%, 3%); }
    66%  { transform: translate(3%, -3%); }
    100% { transform: translate(-2%, 2%); }
}

/* ---- Floating particles ---- */
.sl-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.sl-root.is-reveal .sl-particles {
    opacity: 0;
}

.sl-particles i {
    position: absolute;
    left: var(--x);
    top: 108%;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--sl-fg);
    opacity: 0;
    box-shadow: 0 0 8px 1px currentColor;
    color: var(--sl-orange);
    animation: sl-float var(--dur) linear var(--delay) infinite;
}

@keyframes sl-float {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    12%  { opacity: var(--op, 0.6); }
    88%  { opacity: var(--op, 0.6); }
    100% { transform: translateY(-118vh) scale(1); opacity: 0; }
}

/* ============================================================
   INTRO STAGE — logo, wordmark, progress
   ============================================================ */
.sl-stage {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 24px;
    text-align: center;
    transition: transform 0.8s var(--sl-ease), opacity 0.6s ease;
}

/* Lift + fade the stage as the curtain opens */
.sl-root.is-reveal .sl-stage {
    transform: translateY(-40px);
    opacity: 0;
}

/* Only the full intro shows the stage */
.sl-root[data-mode="transition"] .sl-stage {
    display: none;
}

/* ---- Logo + orbiting ring ---- */
.sl-logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
}

.sl-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--sl-hairline);
    /* draw-in the ring */
    clip-path: circle(0% at 50% 50%);
    animation: sl-ring-draw 1.1s var(--sl-ease) 0.15s forwards,
               sl-spin 9s linear 1.2s infinite;
}

.sl-ring::before {
    /* the bright orbiting comet on the ring */
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--sl-orange);
    box-shadow: 0 0 14px 3px var(--sl-orange);
}

.sl-ring::after {
    /* a second, gently morphing ring for depth */
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed var(--sl-hairline);
    animation: sl-morph 6s ease-in-out infinite, sl-spin-rev 12s linear infinite;
}

@keyframes sl-ring-draw {
    from { clip-path: circle(0% at 50% 50%); opacity: 0; }
    to   { clip-path: circle(75% at 50% 50%); opacity: 1; }
}

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

@keyframes sl-spin-rev {
    to { transform: rotate(-360deg); }
}

@keyframes sl-morph {
    0%, 100% { border-radius: 50%; transform: scale(1); }
    50%      { border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%; transform: scale(1.05); }
}

/* Reveal the logo through an expanding circular mask + soft glow */
.sl-logo-mask {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    clip-path: circle(0% at 50% 50%);
    animation: sl-logo-reveal 1s var(--sl-ease) 0.35s forwards;
}

.sl-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 22px rgba(230, 87, 34, 0.35));
}

/* Sweeping specular glare across the logo */
.sl-logo-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
    transform: translateX(-140%);
    animation: sl-glare 2.4s ease-in-out 1.1s infinite;
    mix-blend-mode: overlay;
}

@keyframes sl-logo-reveal {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(72% at 50% 50%); }
}

@keyframes sl-glare {
    0%   { transform: translateX(-140%); }
    55%  { transform: translateX(140%); }
    100% { transform: translateX(140%); }
}

/* ---- Animated wordmark (letters split by JS) ---- */
.sl-word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
    font-size: clamp(0.68rem, 2.4vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

.sl-word span {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    animation: sl-letter 0.7s var(--sl-ease) forwards;
    animation-delay: calc(0.9s + var(--i) * 0.045s);
}

.sl-word span.sl-space {
    width: 0.5em;
}

@keyframes sl-letter {
    to { transform: translateY(0); opacity: 1; }
}

/* ---- Progress: hairline track + counter ---- */
.sl-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(240px, 62vw);
    opacity: 0;
    animation: sl-fade-in 0.6s ease 1s forwards;
}

.sl-track {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--sl-hairline);
    border-radius: 2px;
    overflow: hidden;
}

.sl-bar {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--sl-orange), var(--sl-teal));
    box-shadow: 0 0 14px var(--sl-glow-a);
    /* JS updates --p (0 → 1); the smooth easing lives here */
    transform: scaleX(var(--p, 0));
    transition: transform 0.4s var(--sl-ease);
}

.sl-count {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--sl-muted);
}

.sl-count-num {
    min-width: 2.4ch;
    text-align: right;
    color: var(--sl-fg);
}

@keyframes sl-fade-in {
    to { opacity: 1; }
}

/* ============================================================
   TRANSITION MODE — compact mark for page-to-page navigation
   ============================================================ */
.sl-mark {
    position: relative;
    z-index: 6;
    display: none;
    place-items: center;
    width: 62px;
    height: 62px;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.45s ease, transform 0.6s var(--sl-ease);
}

.sl-root[data-mode="transition"] .sl-mark {
    display: grid;
}

.sl-root[data-mode="transition"].is-cover-in .sl-mark {
    opacity: 1;
    transform: scale(1);
}

.sl-root.is-reveal .sl-mark {
    opacity: 0;
    transform: scale(0.9);
}

.sl-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(230, 87, 34, 0.3));
}

.sl-mark::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid var(--sl-hairline);
    border-top-color: var(--sl-orange);
    animation: sl-spin 0.9s linear infinite;
}

/* Screen-reader only announcement */
.sl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .sl-logo-wrap { width: 140px; height: 140px; }
    .sl-logo-mask { width: 82px; height: 82px; }
    .sl-stage { gap: 26px; }
    .sl-orb { filter: blur(46px); }
    .sl-panel::after { height: 18vh; }
}

/* ============================================================
   REDUCED MOTION — dignified, near-instant, no choreography
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .sl-orb,
    .sl-grain,
    .sl-particles,
    .sl-ring,
    .sl-ring::after,
    .sl-logo-glare,
    .sl-mark::after {
        animation: none !important;
    }

    .sl-particles { display: none; }

    .sl-ring { clip-path: circle(75% at 50% 50%); opacity: 1; }
    .sl-logo-mask { clip-path: circle(72% at 50% 50%); animation: none; }
    .sl-logo-glare { display: none; }

    .sl-word span {
        transform: none;
        opacity: 1;
        animation: none;
    }

    .sl-progress { opacity: 1; animation: none; }

    /* Curtain simply cross-fades instead of sweeping */
    .sl-panel,
    .sl-stage,
    .sl-ambient,
    .sl-mark {
        transition: opacity 0.3s ease !important;
    }

    .sl-panel { transform: none !important; }
    .sl-panel::after { display: none; }

    .sl-root.is-reveal .sl-panels { opacity: 0; }
    .sl-root.is-cover-start .sl-panel { transform: none !important; }
    .sl-root[data-mode="transition"] .sl-mark { opacity: 1; transform: none; }
}