/* ============================================================================
   THE LAUNCH — the interstitial behind "Kursları inceleyin"
   ----------------------------------------------------------------------------
   A rocket leaves a planet and the courses page arrives behind it. The scene
   runs for six seconds whether or not the destination is ready, so the page
   is prefetched underneath it and the wait buys something instead of costing
   something.

   Everything here animates transform and opacity only — no width, no filter,
   no blend modes — because this has to stay smooth on the old phones the
   brief names. The whole overlay is built on demand by js/oxf-launch.js, so
   a visitor who never presses the button never pays for any of it.

   Palette is the academy's own: navy space, tangerine and amber fire, ocean
   and meadow for the world below. No neon, no magenta, no cyan.
   ========================================================================= */

#oxf-launch {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 900;
    overflow: hidden;
    background: #071322;
    background: -webkit-radial-gradient(50% 78%, ellipse, #12345C 0%, #0A1B30 46%, #050D18 100%);
    background: radial-gradient(ellipse at 50% 78%, #12345C 0%, #0A1B30 46%, #050D18 100%);
    opacity: 0;
    -webkit-animation: lx-in .38s cubic-bezier(.22,1,.36,1) forwards;
    animation: lx-in .38s cubic-bezier(.22,1,.36,1) forwards;
    -webkit-tap-highlight-color: transparent;
}
@-webkit-keyframes lx-in { to { opacity: 1; } }
@keyframes lx-in { to { opacity: 1; } }

#oxf-launch.lx-out {
    -webkit-animation: lx-fade .45s cubic-bezier(.22,1,.36,1) forwards;
    animation: lx-fade .45s cubic-bezier(.22,1,.36,1) forwards;
}
@-webkit-keyframes lx-fade { to { opacity: 0; } }
@keyframes lx-fade { to { opacity: 0; } }

/* The whole scene creeps forward for six seconds. Barely visible on its own,
   but it is what stops the frame feeling like a still photograph. */
.lx-scene {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    -webkit-animation: lx-push 6s linear forwards;
    animation: lx-push 6s linear forwards;
}
@-webkit-keyframes lx-push { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.09); } }
@keyframes lx-push { from { transform: scale(1); } to { transform: scale(1.09); } }

/* ── Deep field ─────────────────────────────────────────────────────────── */
.lx-neb {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: lx-neb 6s ease-out forwards;
    animation: lx-neb 6s ease-out forwards;
}
@-webkit-keyframes lx-neb { 12% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lx-neb { 12% { opacity: 1; } 100% { opacity: 1; } }

.lx-neb-a {
    width: 72vmax; height: 72vmax; left: -22vmax; top: -18vmax;
    background: -webkit-radial-gradient(circle, rgba(35,119,174,.30) 0%, rgba(35,119,174,0) 68%);
    background: radial-gradient(circle, rgba(35,119,174,.30) 0%, rgba(35,119,174,0) 68%);
}
.lx-neb-b {
    width: 58vmax; height: 58vmax; right: -20vmax; top: 4vmax;
    background: -webkit-radial-gradient(circle, rgba(239,162,43,.17) 0%, rgba(239,162,43,0) 66%);
    background: radial-gradient(circle, rgba(239,162,43,.17) 0%, rgba(239,162,43,0) 66%);
}
.lx-neb-c {
    width: 64vmax; height: 64vmax; left: 18vmax; bottom: -30vmax;
    background: -webkit-radial-gradient(circle, rgba(47,143,85,.16) 0%, rgba(47,143,85,0) 64%);
    background: radial-gradient(circle, rgba(47,143,85,.16) 0%, rgba(47,143,85,0) 64%);
}

.lx-star {
    position: absolute;
    border-radius: 50%;
    background: #FFF8EC;
    opacity: .2;
    -webkit-animation: lx-twinkle 3.4s ease-in-out infinite;
    animation: lx-twinkle 3.4s ease-in-out infinite;
}
@-webkit-keyframes lx-twinkle { 0%,100% { opacity: .18; } 50% { opacity: .95; } }
@keyframes lx-twinkle { 0%,100% { opacity: .18; } 50% { opacity: .95; } }

/* Once the engine lights, the field starts running past the window. */
.lx-streak {
    position: absolute;
    width: 2px;
    border-radius: 2px;
    background: -webkit-linear-gradient(top, rgba(255,248,236,0), rgba(255,248,236,.85), rgba(255,248,236,0));
    background: linear-gradient(180deg, rgba(255,248,236,0), rgba(255,248,236,.85), rgba(255,248,236,0));
    opacity: 0;
    -webkit-animation: lx-streak 6s linear forwards;
    animation: lx-streak 6s linear forwards;
}
@-webkit-keyframes lx-streak {
    0%, 24%  { opacity: 0; -webkit-transform: translate3d(0,-40vh,0) scaleY(.2); }
    34%      { opacity: .5; }
    92%      { opacity: .7; }
    100%     { opacity: 0; -webkit-transform: translate3d(0,130vh,0) scaleY(1); }
}
@keyframes lx-streak {
    0%, 24%  { opacity: 0; transform: translate3d(0,-40vh,0) scaleY(.2); }
    34%      { opacity: .5; }
    92%      { opacity: .7; }
    100%     { opacity: 0; transform: translate3d(0,130vh,0) scaleY(1); }
}

/* ── The world it leaves ────────────────────────────────────────────────── */
/* A wide shallow ellipse, not a circle sized in vw. The circle version filled
   two thirds of the frame with flat green and the scene stopped reading as
   space at all; what is wanted is a horizon, so only a 13vh cap shows and it
   scales with the height of the window rather than its width. */
.lx-planet {
    position: absolute;
    left: -50%;
    bottom: -47vh;
    width: 200%; height: 55vh;
    border-radius: 50%;
    background: -webkit-radial-gradient(50% 30%, ellipse, #37A063 0%, #2F8F55 34%, #22703F 62%, #14512C 100%);
    background: radial-gradient(ellipse at 50% 30%, #37A063 0%, #2F8F55 34%, #22703F 62%, #14512C 100%);
    -webkit-box-shadow: 0 -2px 0 2px rgba(111,179,222,.30), 0 -2px 0 10px rgba(111,179,222,.10);
    box-shadow: 0 -2px 0 2px rgba(111,179,222,.30), 0 -2px 0 10px rgba(111,179,222,.10);
    -webkit-animation: lx-world 6s cubic-bezier(.4,0,.55,1) forwards;
    animation: lx-world 6s cubic-bezier(.4,0,.55,1) forwards;
}
/* The planet falls away as the rocket climbs — the only cue that says the
   camera is travelling rather than the rocket shrinking. */
@-webkit-keyframes lx-world {
    0%, 22% { -webkit-transform: translate3d(0,0,0); }
    100%    { -webkit-transform: translate3d(0,24vh,0); }
}
@keyframes lx-world {
    0%, 22% { transform: translate3d(0,0,0); }
    100%    { transform: translate3d(0,24vh,0); }
}
.lx-cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,248,236,.13);
}

.lx-moon {
    position: absolute;
    right: 12vw; top: 14vh;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: -webkit-radial-gradient(38% 34%, circle, #F6EBD6 0%, #D9C7A8 58%, #A99375 100%);
    background: radial-gradient(circle at 38% 34%, #F6EBD6 0%, #D9C7A8 58%, #A99375 100%);
    opacity: 0;
    -webkit-animation: lx-neb 6s ease-out forwards;
    animation: lx-neb 6s ease-out forwards;
}
.lx-moon i {
    position: absolute;
    border-radius: 50%;
    background: rgba(120,102,80,.34);
}

.lx-ring {
    position: absolute;
    left: 9vw; top: 20vh;
    width: 40px; height: 40px;
    opacity: 0;
    -webkit-animation: lx-neb 6s ease-out forwards;
    animation: lx-neb 6s ease-out forwards;
}
.lx-ring b {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background: -webkit-radial-gradient(36% 30%, circle, #E2701F 0%, #BC560F 60%, #8E3D08 100%);
    background: radial-gradient(circle at 36% 30%, #E2701F 0%, #BC560F 60%, #8E3D08 100%);
}
.lx-ring s {
    position: absolute;
    top: 50%; left: -46%;
    width: 192%; height: 26%;
    margin-top: -13%;
    border: 2px solid rgba(239,162,43,.55);
    border-radius: 50%;
    -webkit-transform: rotate(-19deg);
    transform: rotate(-19deg);
}

/* ── The rocket ─────────────────────────────────────────────────────────── */
.lx-ship {
    position: absolute;
    left: 50%;
    bottom: 22vh;
    width: 96px;
    margin-left: -48px;
    text-align: center;
    -webkit-animation: lx-fly 6s cubic-bezier(.45,0,.75,.6) forwards;
    animation: lx-fly 6s cubic-bezier(.45,0,.75,.6) forwards;
}
@-webkit-keyframes lx-fly {
    0%   { -webkit-transform: translate3d(0,0,0); }
    7%   { -webkit-transform: translate3d(-2px,0,0); }
    10%  { -webkit-transform: translate3d(2px,1px,0); }
    13%  { -webkit-transform: translate3d(-2px,0,0); }
    16%  { -webkit-transform: translate3d(2px,1px,0); }
    19%  { -webkit-transform: translate3d(-1px,0,0); }
    22%  { -webkit-transform: translate3d(0,1px,0) scale(1.03); }
    32%  { -webkit-transform: translate3d(0,-5vh,0) scale(1); }
    52%  { -webkit-transform: translate3d(0,-19vh,0) scale(.96); }
    72%  { -webkit-transform: translate3d(0,-44vh,0) scale(.86); }
    88%  { -webkit-transform: translate3d(0,-78vh,0) scale(.70); }
    96%  { -webkit-transform: translate3d(0,-112vh,0) scale(.58); opacity: 1; }
    100% { -webkit-transform: translate3d(0,-140vh,0) scale(.50); opacity: 0; }
}
@keyframes lx-fly {
    0%   { transform: translate3d(0,0,0); }
    7%   { transform: translate3d(-2px,0,0); }
    10%  { transform: translate3d(2px,1px,0); }
    13%  { transform: translate3d(-2px,0,0); }
    16%  { transform: translate3d(2px,1px,0); }
    19%  { transform: translate3d(-1px,0,0); }
    22%  { transform: translate3d(0,1px,0) scale(1.03); }
    32%  { transform: translate3d(0,-5vh,0) scale(1); }
    52%  { transform: translate3d(0,-19vh,0) scale(.96); }
    72%  { transform: translate3d(0,-44vh,0) scale(.86); }
    88%  { transform: translate3d(0,-78vh,0) scale(.70); }
    96%  { transform: translate3d(0,-112vh,0) scale(.58); opacity: 1; }
    100% { transform: translate3d(0,-140vh,0) scale(.50); opacity: 0; }
}

.lx-ship img, .lx-ship svg {
    display: block;
    width: 72px; height: 72px;
    margin: 0 auto;
    /* The Noto rocket is drawn on a 45 degree diagonal. Left alone it climbs
       sideways; turned, its nose points where it is actually going. */
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.lx-ship svg { -webkit-transform: none; transform: none; }
.lx-ship picture { display: block; }

/* Exhaust: two stacked cones, the inner one hotter, both flickering out of
   step so the flame never looks like a single pulsing shape. */
.lx-flame {
    position: absolute;
    left: 50%; top: 62px;
    width: 26px; margin-left: -13px;
    height: 54px;
    border-radius: 50% 50% 46% 46% / 26% 26% 74% 74%;
    background: -webkit-linear-gradient(top, #EFA22B 0%, #E2701F 46%, rgba(188,86,15,0) 100%);
    background: linear-gradient(180deg, #EFA22B 0%, #E2701F 46%, rgba(188,86,15,0) 100%);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-animation: lx-burn 6s linear forwards, lx-flicker .11s ease-in-out infinite;
    animation: lx-burn 6s linear forwards, lx-flicker .11s ease-in-out infinite;
}
.lx-flame.lx-core {
    width: 12px; margin-left: -6px;
    height: 32px;
    background: -webkit-linear-gradient(top, #FFF8EC 0%, #FACF8C 40%, rgba(239,162,43,0) 100%);
    background: linear-gradient(180deg, #FFF8EC 0%, #FACF8C 40%, rgba(239,162,43,0) 100%);
    -webkit-animation: lx-burn 6s linear forwards, lx-flicker .08s ease-in-out infinite reverse;
    animation: lx-burn 6s linear forwards, lx-flicker .08s ease-in-out infinite reverse;
}
@-webkit-keyframes lx-burn {
    0%   { -webkit-transform: scaleY(0);   opacity: 0; }
    6%   { -webkit-transform: scaleY(.35); opacity: 1; }
    20%  { -webkit-transform: scaleY(1);   opacity: 1; }
    72%  { -webkit-transform: scaleY(1.5); opacity: 1; }
    100% { -webkit-transform: scaleY(1.7); opacity: .9; }
}
@keyframes lx-burn {
    0%   { transform: scaleY(0);   opacity: 0; }
    6%   { transform: scaleY(.35); opacity: 1; }
    20%  { transform: scaleY(1);   opacity: 1; }
    72%  { transform: scaleY(1.5); opacity: 1; }
    100% { transform: scaleY(1.7); opacity: .9; }
}
@-webkit-keyframes lx-flicker { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes lx-flicker { 0%,100% { opacity: 1; } 50% { opacity: .72; } }

/* Ignition smoke: rolls outward off the pad, then is left behind. */
.lx-puff {
    position: absolute;
    left: 50%; bottom: 20vh;
    border-radius: 50%;
    background: rgba(255,248,236,.22);
    opacity: 0;
    -webkit-animation: lx-puff 6s ease-out forwards;
    animation: lx-puff 6s ease-out forwards;
}
@-webkit-keyframes lx-puff {
    0%, 4% { opacity: 0; -webkit-transform: translate3d(0,0,0) scale(.2); }
    12%    { opacity: .9; }
    46%    { opacity: .22; }
    100%   { opacity: 0; -webkit-transform: translate3d(var(--dx,0), 8vh, 0) scale(3.4); }
}
@keyframes lx-puff {
    0%, 4% { opacity: 0; transform: translate3d(0,0,0) scale(.2); }
    12%    { opacity: .9; }
    46%    { opacity: .22; }
    100%   { opacity: 0; transform: translate3d(var(--dx,0), 8vh, 0) scale(3.4); }
}

/* Sparks thrown off the nozzle as it climbs. */
.lx-spark {
    position: absolute;
    left: 50%; bottom: 20vh;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #FACF8C;
    opacity: 0;
    -webkit-animation: lx-spark 6s ease-out forwards;
    animation: lx-spark 6s ease-out forwards;
}
@-webkit-keyframes lx-spark {
    0%, 8% { opacity: 0; -webkit-transform: translate3d(0,0,0); }
    14%    { opacity: 1; }
    100%   { opacity: 0; -webkit-transform: translate3d(var(--dx,0), 22vh, 0); }
}
@keyframes lx-spark {
    0%, 8% { opacity: 0; transform: translate3d(0,0,0); }
    14%    { opacity: 1; }
    100%   { opacity: 0; transform: translate3d(var(--dx,0), 22vh, 0); }
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */
.lx-copy {
    position: absolute;
    left: 0; right: 0; bottom: 12vh;
    text-align: center;
    padding: 0 24px;
    color: #FFF8EC;
    font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
.lx-title {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}
.lx-sub {
    display: block;
    margin-top: 8px;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #C3D4E4;
    min-height: 20px;
}

.lx-bar {
    width: 200px;
    margin: 16px auto 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,248,236,.20);
    overflow: hidden;
}
.lx-bar i {
    display: block;
    width: 100%; height: 100%;
    background: #EFA22B;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: lx-bar 6s linear forwards;
    animation: lx-bar 6s linear forwards;
}
@-webkit-keyframes lx-bar { to { -webkit-transform: scaleX(1); } }
@keyframes lx-bar { to { transform: scaleX(1); } }

.lx-skip {
    position: absolute;
    right: 16px; top: 16px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255,248,236,.34);
    border-radius: 999px;
    background: rgba(255,248,236,.08);
    color: #FFF8EC;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: background .18s cubic-bezier(.22,1,.36,1);
    transition: background .18s cubic-bezier(.22,1,.36,1);
}
.lx-skip:hover { background: rgba(255,248,236,.18); }

@media (max-width: 599px) {
    .lx-title { font-size: 21px; }
    /* On a tall narrow screen the pad sat right on the caption. */
    .lx-ship { width: 78px; margin-left: -39px; bottom: 31vh; }
    .lx-ship img, .lx-ship svg { width: 58px; height: 58px; }
    .lx-flame { top: 50px; }
    .lx-moon { width: 38px; height: 38px; right: 8vw; }
}

/* Nothing here is information, so a reader who has asked for stillness gets
   the destination instead of the show — js/oxf-launch.js navigates straight
   through and this block is the belt to that braces. */
/* ── asked for stillness ─────────────────────────────────────────────────
   This used to hide the whole thing, which is defensible — nothing here is
   information — but it also makes the button look broken to the one person
   who cannot tell the difference between "respected your setting" and
   "stopped working". A still frame is not motion: the scene is composed at
   the point the flight would have reached, held briefly, and nothing moves.
   js/oxf-launch.js shortens the hold to match. */
@media (prefers-reduced-motion: reduce) {
    #oxf-launch, #oxf-launch * {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
    #oxf-launch { opacity: 1; }
    .lx-scene { -webkit-transform: none; transform: none; }
    .lx-neb, .lx-moon, .lx-ring { opacity: 1; }
    .lx-star { opacity: .75; }
    /* The two things that only exist to convey speed. */
    .lx-streak, .lx-puff, .lx-spark { display: none; }
    /* Mid-climb, where the frame reads best as a launch rather than a rocket
       parked on the ground. */
    .lx-ship {
        -webkit-transform: translate3d(0, -24vh, 0) scale(.94);
        transform: translate3d(0, -24vh, 0) scale(.94);
    }
    .lx-flame {
        -webkit-transform: scaleY(1.2);
        transform: scaleY(1.2);
        opacity: 1;
    }
    .lx-bar i { -webkit-transform: scaleX(1); transform: scaleX(1); }
}