/* ============================================================
   intro.css — formül intro overlay (Delta Marine landing)
   Tüm kurallar .intro-overlay altında scope'lu; site CSS'ini etkilemez.
   ============================================================ */

body.intro-active {
    overflow: hidden;
}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    font-family: "Times New Roman", Georgia, serif;
    background: linear-gradient(180deg, #0a1a2f 0%, #08162a 100%);
    color: rgba(224, 235, 255, 0.92);
    transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);

    --bg: #0a1a2f;
    --ink: rgba(224, 235, 255, 0.92);
    --line: rgba(140, 175, 255, 0.06);

    --f-tiny: clamp(0.75rem, 0.60rem + 0.35vmin, 1.25rem);
    --f-small: clamp(0.90rem, 0.70rem + 0.45vmin, 1.50rem);
    --f-medium: clamp(1.10rem, 0.85rem + 0.60vmin, 1.90rem);
    --f-large: clamp(1.40rem, 1.00rem + 0.85vmin, 2.60rem);
    --f-xlarge: clamp(1.80rem, 1.20rem + 1.20vmin, 3.40rem);

    --formula-opacity: 0.90;
    --formula-shadow: 0 0 12px rgba(120, 165, 255, 0.04);
    --grid-size: clamp(42px, 4.2vmax, 60px);

    --page-pad-x: clamp(10px, 2.5vw, 34px);
    --page-pad-y: clamp(10px, 2.5vh, 28px);

    --manifesto-symbol: clamp(2.1rem, 1.2rem + 4.2vmin, 5rem);
    --manifesto-text: clamp(0.78rem, 0.74rem + 0.52vmin, 1.02rem);
    --brand-size: clamp(0.62rem, 0.56rem + 0.26vmin, 0.78rem);

    --drift-y-start: 2.1vh;
    --drift-y-end: -4.8vh;
}

.intro-overlay.is-dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-overlay * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.intro-overlay .scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 18%, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #0a1a2f 0%, #08162a 100%);
}

.intro-overlay .page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 18%, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #0a1a2f 0%, #08162a 100%);
    will-change: opacity, transform, filter;
}

.intro-overlay .grid-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, transparent 0%, var(--line) 50%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, var(--line) 50%, transparent 100%);
    background-size: 100% 1px, 1px 100%;
    opacity: 0.03;
    pointer-events: none;
}

.intro-overlay .grid-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    opacity: 0.12;
    pointer-events: none;
}

.intro-overlay .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--page-pad-y) var(--page-pad-x);
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
    transition: opacity 2.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter 2.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.intro-overlay .hero.is-leaving {
    opacity: 0.03;
    transform: scale(1.022);
    filter: blur(7px);
}

.intro-overlay .hero .formula-field {
    transition: opacity 2.1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 2.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.intro-overlay .hero.is-leaving .formula-field {
    opacity: 0.10;
    filter: blur(2.2px);
}

.intro-overlay .manifesto {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vh, 34px) clamp(16px, 6vw, 64px) clamp(20px, 6vh, 46px);
    opacity: 0;
    transform: scale(1.018);
    pointer-events: none;
    transition: opacity 2.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.intro-overlay .manifesto.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.intro-overlay .formula-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-overlay .formula {
    position: absolute;
    color: rgba(224, 235, 255, var(--formula-opacity));
    opacity: 0;
    filter: blur(0.05px);
    animation: introDrift linear infinite;
    white-space: nowrap;
    text-shadow: var(--formula-shadow);
    max-width: 85vw;
    transform-origin: center center;
    will-change: transform, opacity;
}

.intro-overlay .formula.tiny   { font-size: var(--f-tiny); }
.intro-overlay .formula.small  { font-size: var(--f-small); }
.intro-overlay .formula.medium { font-size: var(--f-medium); }
.intro-overlay .formula.large  { font-size: var(--f-large); }
.intro-overlay .formula.xlarge { font-size: var(--f-xlarge); }

.intro-overlay .formula .katex,
.intro-overlay .dim-equation .katex,
.intro-overlay .manifesto-text .katex,
.intro-overlay .mega-symbol .katex {
    font-size: 1em !important;
}

.intro-overlay .formula.matrix .katex {
    font-size: 0.86em !important;
}

@keyframes introDrift {
    0%   { transform: translateY(var(--drift-y-start)); opacity: 0; }
    10%  { opacity: 0.38; }
    50%  { opacity: 0.93; }
    90%  { opacity: 0.20; }
    100% { transform: translateY(var(--drift-y-end)); opacity: 0; }
}

.intro-overlay .hint {
    position: absolute;
    bottom: clamp(14px, 2.2vh, 22px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    font-size: clamp(0.58rem, 0.54rem + 0.18vmin, 0.76rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(200, 220, 255, 0.28);
    transition: opacity 0.5s ease;
    animation: introNoteFade 3s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

.intro-overlay.on-page-2 .hint {
    opacity: 0;
    animation: none;
}

.intro-overlay.on-page-2 .hint.continue-hint {
    opacity: 0.42;
    animation: introNoteFade 3s ease-in-out 2.6s infinite;
}

@keyframes introNoteFade {
    0%, 100% { opacity: 0.20; }
    50% { opacity: 0.58; }
}

.intro-overlay .hint.continue-hint {
    opacity: 0;
    pointer-events: none;
}

.intro-overlay .manifesto-box {
    position: relative;
    z-index: 4;
    width: min(1000px, 100%);
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.intro-overlay .mega-symbols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vmin, 1.8rem);
    margin-bottom: clamp(0.5rem, 1.6vmin, 1rem);
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(22px);
    will-change: transform, opacity;
}

.intro-overlay .mega-symbol {
    font-size: var(--manifesto-symbol);
    line-height: 1;
    font-weight: 400;
    color: rgba(235, 242, 255, 0.88);
    text-shadow:
        0 0 6px rgba(190, 215, 255, 0.06),
        0 0 18px rgba(120, 170, 255, 0.06);
}

.intro-overlay .manifesto-text {
    font-size: var(--manifesto-text);
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: rgba(230, 238, 255, 0.82);
    max-width: min(640px, 88vw);
    padding-inline: 0.4rem;
    opacity: 0;
    transform: translateY(22px);
    will-change: transform, opacity;
}

.intro-overlay .manifesto-text em {
    font-style: italic;
    color: rgba(245, 248, 255, 0.94);
}

.intro-overlay .brand {
    position: absolute;
    bottom: clamp(16px, 2.5vh, 24px);
    left: 50%;
    transform: translateX(-50%) translateY(22px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: var(--brand-size);
    color: rgba(220, 232, 255, 0.52);
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity;
}

.intro-overlay .dim-equation {
    position: absolute;
    color: rgba(210, 225, 255, 0.06);
    font-size: clamp(0.70rem, 0.66rem + 0.24vmin, 0.96rem);
    pointer-events: none;
    white-space: nowrap;
    max-width: 40vw;
}

.intro-overlay .eq-a { top: 14%; left: 8%; }
.intro-overlay .eq-b { top: 18%; right: 9%; }
.intro-overlay .eq-c { bottom: 22%; left: 11%; }
.intro-overlay .eq-d { bottom: 16%; right: 13%; }

.intro-overlay #page-2.in-view .reveal-stage-1 {
    animation: introRevealUp 1.35s ease-out 0.45s forwards;
}

.intro-overlay #page-2.in-view .reveal-stage-2 {
    animation: introRevealUp 1.10s ease-out 1.65s forwards;
}

.intro-overlay #page-2.in-view .reveal-stage-3 {
    animation: introRevealBrand 1.00s ease-out 2.45s forwards;
}

.intro-overlay #page-2.in-view .mega-symbol {
    animation: introPulseSlow 5.8s ease-in-out 2.1s infinite;
}

.intro-overlay #page-2.in-view .mega-symbol:nth-child(2) { animation-delay: 2.25s; }
.intro-overlay #page-2.in-view .mega-symbol:nth-child(3) { animation-delay: 2.4s; }

@keyframes introRevealUp {
    0% { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes introRevealBrand {
    0% { opacity: 0; transform: translateX(-50%) translateY(22px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes introPulseSlow {
    0%, 100% { opacity: 0.68; transform: scale(1); }
    50% { opacity: 0.96; transform: scale(1.02); }
}

@media (min-width: 3000px), (min-height: 1700px) {
    .intro-overlay {
        --f-tiny: 1.10rem;
        --f-small: 1.30rem;
        --f-medium: 1.70rem;
        --f-large: 2.30rem;
        --f-xlarge: 3.20rem;

        --manifesto-symbol: clamp(3.0rem, 2.0rem + 4.0vmin, 6.5rem);
        --manifesto-text: clamp(1.00rem, 0.90rem + 0.50vmin, 1.40rem);
        --brand-size: clamp(0.90rem, 0.80rem + 0.30vmin, 1.10rem);
    }

    .intro-overlay .manifesto-box {
        width: min(1200px, 100%);
    }
}

@media (min-aspect-ratio: 16/9) {
    .intro-overlay {
        --grid-size: clamp(48px, 3.8vmax, 68px);
        --f-medium: clamp(0.86rem, 0.92rem + 0.28vmin, 1.18rem);
        --f-large: clamp(1.00rem, 1.06rem + 0.35vmin, 1.38rem);
        --f-xlarge: clamp(1.08rem, 1.14rem + 0.42vmin, 1.52rem);
    }
    .intro-overlay .formula-field { transform: scale(0.985); }
}

@media (min-aspect-ratio: 21/9) {
    .intro-overlay .formula-field { transform: scale(0.95); }
    .intro-overlay .f-stress-matrix { left: 69% !important; top: 26.5% !important; }
    .intro-overlay .f-navier { left: 6% !important; width: auto; }
    .intro-overlay .f-bottom-stokes { left: 51% !important; }
}

@media (max-aspect-ratio: 4/5) {
    .intro-overlay {
        --grid-size: clamp(40px, 3.4vmax, 52px);
        --f-tiny: clamp(0.58rem, 0.62rem + 0.18vmin, 0.82rem);
        --f-small: clamp(0.68rem, 0.74rem + 0.22vmin, 0.94rem);
        --f-medium: clamp(0.78rem, 0.84rem + 0.28vmin, 1.08rem);
        --f-large: clamp(0.88rem, 0.94rem + 0.34vmin, 1.22rem);
        --f-xlarge: clamp(0.96rem, 1.02rem + 0.40vmin, 1.30rem);
    }
    .intro-overlay .formula-field { transform: scale(0.96); }
    .intro-overlay .f-bernoulli    { left: 43% !important; top: 18.2% !important; }
    .intro-overlay .f-stress-law   { left: 38% !important; top: 34.8% !important; }
    .intro-overlay .f-stress-matrix{ left: 58% !important; top: 28.5% !important; }
    .intro-overlay .f-tau-gamma    { left: 73% !important; top: 40.3% !important; }
    .intro-overlay .f-navier       { left: 4.5% !important; top: 46.5% !important; }
    .intro-overlay .f-divu         { left: 53% !important; top: 50.8% !important; }
    .intro-overlay .f-laplace      { left: 69% !important; top: 53% !important; }
    .intro-overlay .f-bottom-div   { left: 5% !important; top: 86.6% !important; }
    .intro-overlay .f-bottom-stokes{ left: 42% !important; top: 88.3% !important; }
    .intro-overlay .dim-equation { max-width: 55vw; }
}

@media (max-height: 760px) {
    .intro-overlay {
        --drift-y-start: 1.8vh;
        --drift-y-end: -4vh;
    }
    .intro-overlay .formula-field { transform: scale(0.96); }
    .intro-overlay .manifesto-box { min-height: 68svh; }
}

@media (max-width: 768px) {
    .intro-overlay .formula-field { transform: scale(0.93); }
    .intro-overlay .brand { letter-spacing: 0.16em; }
    .intro-overlay .eq-a { top: 11%; left: 7%; }
    .intro-overlay .eq-b { top: 19%; right: 6%; }
    .intro-overlay .eq-c { bottom: 22%; left: 8%; }
    .intro-overlay .eq-d { bottom: 14%; right: 8%; }
}