/* ==========================================================================
   Mailmyra — Acilis ekrani (GLOW)
   URETIM DOSYASI. GLOW konseptinin TEK kaynagi burasi; laboratuvar sayfasi
   da bu dosyayi link ediyor, boylece ikisi ayrisamaz.

   Desen: Framer "Web Preload" (Alireza Sinaei) bileseninin mekanigi
   olculup Mailmyra'ya uyarlandi — kod bizim.
     · duz lacivert zemin
     · iki dev radial isik (640px, blur 57px) yavas suzuluyor
     · logo 8 dikey serite bolunup harf harf asagidan suzuluyor
     · cikista panelin tamami yukari kayiyor
   ========================================================================== */

@font-face {
    font-family: "ClashDisplay-Semibold";
    src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2"),
         url("../fonts/ClashDisplay-Semibold.woff") format("woff");
    font-weight: 600;
    font-display: block;
}

:root {
    --mmp-navy: #00102b;
    --mmp-blue: #5a8ce2;
    --mmp-light: #89b4ef;
    --mmp-orange: #f2a573;
    --mmp-clash: 'ClashDisplay-Semibold', sans-serif;
    --mmp-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, monospace;
    --mml-t: 1;
}


/* --------------------------------------------------------------------------
   Katman
   -------------------------------------------------------------------------- */

.mml {
    position: fixed;
    inset: 0;
    z-index: 99000;
    overflow: hidden;
    background: var(--mmp-navy);
    --p: 0;
    transition: transform calc(720ms * var(--mml-t)) cubic-bezier(.76, 0, .24, 1);
}

.mml * {
    box-sizing: border-box;
}

/* katman kalkarken tiklamayi yutmasin */
.mml.is-out {
    pointer-events: none;
    transform: translateY(-100%);
}


/* Ust kenarda tam genislikte ilerleme cubugu */
.mml-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 55;
    background: rgba(255, 255, 255, .07);
    opacity: 0;
    transition: opacity calc(260ms * var(--mml-t)) ease;
}

.mml.is-in .mml-bar { opacity: 1; }

.mml.is-out .mml-bar {
    opacity: 0;
    transition-duration: calc(150ms * var(--mml-t));
}

.mml-bar i {
    display: block;
    height: 100%;
    background: var(--mmp-orange);
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    box-shadow: 0 0 18px rgba(242, 165, 115, .8);
}

.mml-bar b {
    position: absolute;
    top: -3px;
    left: calc(var(--p, 0) * 100%);
    width: 2px;
    height: 9px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 14px 2px rgba(242, 165, 115, .95);
    transition: opacity calc(200ms * var(--mml-t)) ease;
}

.mml.is-done .mml-bar b { opacity: 0; }


/* Sol ust kose etiketi */
.mml-tag {
    position: absolute;
    left: 34px;
    top: 30px;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mmp-mono);
    font-size: 11px;
    letter-spacing: .24em;
    color: rgba(255, 255, 255, .38);
    opacity: 0;
    transition: opacity calc(360ms * var(--mml-t)) ease calc(120ms * var(--mml-t));
}

.mml.is-in .mml-tag { opacity: 1; }

.mml.is-out .mml-tag {
    opacity: 0;
    transition-delay: 0ms;
    transition-duration: calc(150ms * var(--mml-t));
}

.mml-tag s {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mmp-orange);
    animation: mmlPulse calc(1300ms * var(--mml-t)) ease-in-out infinite;
}

@keyframes mmlPulse {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1); }
}

.mml.is-done .mml-tag s {
    animation: none;
    opacity: 1;
    background: #3e9f6e;
    box-shadow: 0 0 12px rgba(62, 159, 110, .9);
}


/* --------------------------------------------------------------------------
   GLOW
   -------------------------------------------------------------------------- */

.mml--glow {
    display: grid;
    place-items: center;
}

/* --- iki suzulen isik --- */
.mml-glow__orb {
    position: absolute;
    width: 640px;
    height: 640px;
    filter: blur(57px);
    pointer-events: none;
    opacity: 0;
    transition: opacity calc(700ms * var(--mml-t)) ease;
}

.mml.is-in .mml-glow__orb { opacity: 1; }

.mml.is-out .mml-glow__orb {
    opacity: 0;
    transition-duration: calc(300ms * var(--mml-t));
}

/* NOT: referansta zemin BEYAZ — isiklar tam doygun olabiliyor.
   Koyu lacivert uzerinde ayni doygunluk zemini tamamen yiyor, o yuzden
   renkler alfali. Zemin lacivert kalmali, isik sadece "nefes" olmali. */
.mml-glow__orb--a {
    left: -24%;
    top: -6%;
    background: radial-gradient(60% 91% at 49.6% 52.3%,
            rgba(90, 140, 226, .5) 0%, rgba(0, 16, 43, 0) 100%);
    animation: mmlOrbA calc(14000ms * var(--mml-t)) ease-in-out infinite alternate;
}

.mml-glow__orb--b {
    right: -22%;
    bottom: -8%;
    /* turuncu bilerek maviden GUCLU: sicak taraf one ciksin */
    background: radial-gradient(60% 91% at 49.6% 52.3%,
            rgba(242, 165, 115, .62) 0%, rgba(0, 16, 43, 0) 100%);
    animation: mmlOrbB calc(17000ms * var(--mml-t)) ease-in-out infinite alternate;
}

@keyframes mmlOrbA {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(22vw, 14vh) scale(1.22); }
}

@keyframes mmlOrbB {
    from { transform: translate(0, 0) scale(1.1); }
    to   { transform: translate(-20vw, -16vh) scale(.92); }
}


/* --- merkez kompozisyon --- */
.mml-glow {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 6vw;
}

.mml-glow__top,
.mml-glow__sub {
    font-family: var(--mmp-mono);
    font-size: 12px;
    letter-spacing: .34em;
    color: rgba(255, 255, 255, .42);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity calc(560ms * var(--mml-t)) ease,
                transform calc(680ms * var(--mml-t)) cubic-bezier(.22, .61, .36, 1);
}

.mml-glow__top { margin-bottom: 26px; }

.mml-glow__sub {
    /* logonun KENDI slogani var ("we elevate your email identity"),
       bu satir onun hemen altina gelmesin diye bosluk arttirildi */
    margin-top: 46px;
    color: rgba(137, 180, 239, .72);
    transition-delay: calc(560ms * var(--mml-t));
}

.mml--glow.is-in .mml-glow__top,
.mml--glow.is-in .mml-glow__sub {
    opacity: 1;
    transform: none;
}

.mml--glow.is-out .mml-glow__top,
.mml--glow.is-out .mml-glow__sub {
    opacity: 0;
    transition-delay: 0ms;
    transition-duration: calc(180ms * var(--mml-t));
}

/* Buyuk baslik = GERCEK LOGO (logo-ikonsuz-white.svg).
   Harf harf animasyonu korunsun diye logo 8 dikey serite bolundu; her serit
   kendi penceresinden asagidan suzuluyor. Serit = bir "harf".
   Teknik: her seride ayni SVG arka plan olarak veriliyor, genisligi
   800% (8 serit) ve konumu --n ile kaydiriliyor → serit kendi dilimini
   gosteriyor. Kapsayicinin en-boy orani SVG'nin viewBox'i (617.52×117.01)
   ile AYNI olmali, yoksa logo ezilir. */
.mml-glow__title {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: min(64vw, 720px);
    aspect-ratio: 617.52 / 117.01;
}

.mml-glow__s {
    flex: 1 1 0;
    position: relative;
    overflow: hidden;
}

.mml-glow__s u {
    position: absolute;
    inset: 0;
    display: block;
    background-image: url("../img/logo/logo-ikonsuz-white.svg");
    background-repeat: no-repeat;
    /* 8 serit → gorsel serit genisliginin 8 kati */
    background-size: 800% 100%;
    /* n. dilimi getir: (n / (8-1)) × 100% */
    background-position: calc(var(--n) * 100% / 7) center;
    transform: translateY(112%);
    filter: blur(9px);
    opacity: 0;
    transition: transform calc(820ms * var(--mml-t)) cubic-bezier(.16, .84, .3, 1),
                filter calc(560ms * var(--mml-t)) ease,
                opacity calc(460ms * var(--mml-t)) ease;
    transition-delay: calc(var(--n) * 52ms * var(--mml-t));
}

.mml--glow.is-in .mml-glow__s u {
    transform: none;
    filter: blur(0);
    opacity: 1;
}

.mml--glow.is-out .mml-glow__s u {
    transform: translateY(-115%);
    opacity: 0;
    filter: blur(0);
    transition-duration: calc(420ms * var(--mml-t));
    transition-delay: calc(var(--n) * 26ms * var(--mml-t));
}

.mml--glow.is-out {
    transition-delay: calc(220ms * var(--mml-t));
}


/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .mml-tag { left: 22px; top: 22px; font-size: 10px; }

    .mml-glow__orb { width: 420px; height: 420px; filter: blur(46px); }

    .mml-glow__top,
    .mml-glow__sub { font-size: 10px; letter-spacing: .24em; }

    .mml-glow__title { width: 82vw; }
}


/* --------------------------------------------------------------------------
   Hareket azaltma tercihi
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mml,
    .mml * {
        animation: none !important;
        transition-duration: 120ms !important;
        transition-delay: 0ms !important;
        filter: none !important;
    }
}