/* =========================================================
   AMATH DESIGNS
   SMOKE LOGO REVEAL
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.amath-smoke-section {
    position: relative;

    width: 100%;
    min-height: 700px;

    margin-top: 50px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;

    background: #050505;
}


/* =========================================================
   BACKGROUND
========================================================= */

.amath-smoke-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-color: #050505;

    transition:
        background-color 2.2s ease;

    will-change: background-color;
}


/*
   Dunkler Gradient liegt über der eigentlichen
   Hintergrundfarbe.

   Dadurch kann später sauber von Schwarz zu
   #b9792b überblendet werden.
*/

.amath-smoke-background::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.015) 30%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #0a0a0a 50%,
            #050505 100%
        );

    opacity: 1;

    transition:
        opacity 2.2s ease;

    will-change: opacity;
}


/* =========================================================
   HINTERGRUND WIRD GOLD/BRAUN
========================================================= */

.amath-smoke-section.smoke-out
.amath-smoke-background,

.amath-smoke-section.animation-finished
.amath-smoke-background {
    background-color: #b9792b;
}


.amath-smoke-section.smoke-out
.amath-smoke-background::before,

.amath-smoke-section.animation-finished
.amath-smoke-background::before {
    opacity: 0;
}


/* =========================================================
   VIDEO – GRUNDEINSTELLUNGEN
========================================================= */

.amath-smoke-video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 120%;
    height: 120%;

    object-fit: cover;

    transform:
        translate(-50%, -50%)
        scale(1.05);

    opacity: 0;

    pointer-events: none;

    mix-blend-mode: screen;

    will-change:
        opacity,
        transform,
        filter;
}


/* =========================================================
   RAUCH HINTER DEM LOGO
========================================================= */

.amath-smoke-back {
    z-index: 1;
}


/* =========================================================
   RAUCH VOR DEM LOGO
========================================================= */

.amath-smoke-front {
    z-index: 4;
}


/* =========================================================
   RAUCH LAYER 1
========================================================= */

.smoke-layer-1 {
    transform:
        translate(-50%, -50%)
        scale(1.20);

    filter:
        blur(3px)
        contrast(1.15)
        brightness(0.90);
}


/* =========================================================
   RAUCH LAYER 2
========================================================= */

.smoke-layer-2 {
    transform:
        translate(-52%, -48%)
        scale(1.35);

    filter:
        blur(8px)
        contrast(1.10)
        brightness(1.20);
}


/* =========================================================
   RAUCH LAYER 3
   Vordergrund – etwas unschärfer
========================================================= */

.smoke-layer-3 {
    transform:
        translate(-48%, -52%)
        scale(1.50);

    filter:
        blur(12px)
        contrast(1.10)
        brightness(1.15);
}


/* =========================================================
   RAUCH STARTET ERST WENN SECTION SICHTBAR IST
========================================================= */

.amath-smoke-section.is-visible
.smoke-layer-1 {
    animation:
        smokeFade1 8s ease forwards;
}


.amath-smoke-section.is-visible
.smoke-layer-2 {
    animation:
        smokeFade2 7s ease forwards;
}


.amath-smoke-section.is-visible
.smoke-layer-3 {
    animation:
        smokeFade3 6s ease forwards;
}


/* =========================================================
   RAUCH LAYER 1 ANIMATION
========================================================= */

@keyframes smokeFade1 {

    0% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    35% {
        opacity: 1;
    }

    70% {
        opacity: 0.70;
    }

    100% {
        opacity: 0.35;
    }
}


/* =========================================================
   RAUCH LAYER 2 ANIMATION
========================================================= */

@keyframes smokeFade2 {

    0% {
        opacity: 0;
    }

    9% {
        opacity: 0.95;
    }

    35% {
        opacity: 0.90;
    }

    70% {
        opacity: 0.50;
    }

    100% {
        opacity: 0.20;
    }
}


/* =========================================================
   RAUCH LAYER 3 ANIMATION
========================================================= */

@keyframes smokeFade3 {

    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.90;
    }

    30% {
        opacity: 0.85;
    }

    65% {
        opacity: 0.45;
    }

    100% {
        opacity: 0.15;
    }
}


/* =========================================================
   ZUSÄTZLICHER DICHTER NEBEL

   Dieser Nebel startet NICHT beim Laden der Webseite,
   sondern erst durch .is-visible.
========================================================= */

.amath-smoke-section::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(170, 170, 170, 0.18) 28%,
            rgba(100, 100, 100, 0.10) 48%,
            transparent 72%
        );

    filter: blur(50px);

    opacity: 0.95;

    animation: none;

    will-change: opacity;
}


/* Nebel erst beim Scrollen zur Section starten */

.amath-smoke-section.is-visible::after {
    animation:
        fogClear 6s ease forwards;
}


/* =========================================================
   NEBEL LICHTET SICH
========================================================= */

@keyframes fogClear {

    0% {
        opacity: 0.95;
    }

    25% {
        opacity: 0.90;
    }

    45% {
        opacity: 0.68;
    }

    70% {
        opacity: 0.30;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   LICHTSCHEIN HINTER DEM LOGO
========================================================= */

.amath-smoke-glow {
    position: absolute;

    width: min(700px, 90vw);

    aspect-ratio: 1 / 0.6;

    z-index: 2;

    border-radius: 50%;

    opacity: 0;

    transform:
        scale(0.70);

    background:
        radial-gradient(
            ellipse at center,

            rgba(100, 180, 255, 0.18) 0%,

            rgba(80, 150, 255, 0.09) 25%,

            rgba(255, 255, 255, 0.025) 48%,

            transparent 72%
        );

    filter:
        blur(45px);

    transition:
        opacity 2.5s ease 1.2s,
        transform 4s cubic-bezier(.2, .8, .2, 1) 1s;

    pointer-events: none;

    will-change:
        opacity,
        transform;
}


/* Lichtschein erscheint */

.amath-smoke-section.is-visible
.amath-smoke-glow {
    opacity: 1;

    transform:
        scale(1.15);
}


/* Lichtschein verschwindet später wieder */

.amath-smoke-section.smoke-out
.amath-smoke-glow,

.amath-smoke-section.animation-finished
.amath-smoke-glow {
    opacity: 0;

    transform:
        scale(1.05);

    transition:
        opacity 1.8s ease,
        transform 1.8s ease;
}


/* =========================================================
   LOGO WRAPPER
========================================================= */

.amath-smoke-logo-wrap {
    position: relative;

    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: center;

    width:
        min(650px, 80vw);

    opacity: 0;

    filter:
        blur(35px);

    transform:
        translateY(30px)
        scale(0.82);

    transition:
        opacity 2.5s ease 2.2s,
        filter 3s ease 2.2s,
        transform 3s cubic-bezier(.16, 1, .3, 1) 2.2s;

    will-change:
        opacity,
        filter,
        transform;
}


/* =========================================================
   LOGO WRAPPER WIRD SICHTBAR
========================================================= */

.amath-smoke-section.is-visible
.amath-smoke-logo-wrap {
    opacity: 1;

    filter:
        blur(0);

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LOGO
========================================================= */

.amath-smoke-logo {
    display: block;

    width: 100%;
    height: auto;

    max-width: 620px;

    user-select: none;

    pointer-events: none;

    transform:
        scale(0.98);

    filter:
        brightness(1.6)
        contrast(0.75)
        drop-shadow(
            0 0 8px
            rgba(80, 170, 255, 0)
        )
        drop-shadow(
            0 0 18px
            rgba(80, 170, 255, 0)
        );

    will-change:
        filter,
        transform;
}


/* =========================================================
   BLAUER NEONSCHEIN

   Startet erst gleichzeitig mit dem Logo-Reveal.
========================================================= */

.amath-smoke-section.is-visible
.amath-smoke-logo {
    animation:
        amathBlueGlow
        3.2s
        ease
        2.2s
        forwards;
}


/* =========================================================
   NEON ANIMATION
========================================================= */

@keyframes amathBlueGlow {

    0% {
        transform:
            scale(0.98);

        filter:
            brightness(1.6)
            contrast(0.80)
            drop-shadow(
                0 0 0
                rgba(90, 180, 255, 0)
            );
    }


    40% {
        transform:
            scale(1);

        filter:
            brightness(1.35)
            contrast(1)
            drop-shadow(
                0 0 10px
                rgba(238, 160, 6, 0.95)
            )
            drop-shadow(
                0 0 25px
                rgba(238, 169, 7, 0.7)
            )
            drop-shadow(
                0 0 45px
                rgba(255, 183, 50, 0.35)
            );
    }


    65% {
        filter:
            brightness(1.18)
            contrast(1)
            drop-shadow(
                0 0 9px
                rgba(255, 197, 90, 0.65)
            )
            drop-shadow(
                0 0 20px
                rgba(255, 203, 70, 0.35)
            );
    }


    100% {
        transform:
            scale(1);

        filter:
            brightness(1)
            contrast(1)
            drop-shadow(
                0 0 5px
                rgba(255, 162, 90, 0.15)
            );
    }
}


/* =========================================================
   LOGO NACH DER ANIMATION

   KEINE Bewegung mehr.
   KEINE Atemanimation.
========================================================= */

.amath-smoke-section.animation-finished
.amath-smoke-logo {
    animation:
        none !important;

    transform:
        scale(1) !important;

    filter:
        brightness(1)
        contrast(1)
        drop-shadow(
            0 0 4px
            rgba(90, 180, 255, 0.10)
        );
}


.amath-smoke-section.animation-finished
.amath-smoke-logo-wrap {
    opacity: 1;

    filter:
        blur(0);

    transform:
        translateY(0)
        scale(1) !important;
}


/* =========================================================
   DEKORATIONSLINIE
========================================================= */

.amath-smoke-line {
    position: absolute;

    z-index: 6;

    bottom: 70px;
    left: 50%;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        rgba(255, 255, 255, 0.42);

    opacity: 0;

    transition:
        width 2s ease 2.2s,
        opacity 1s ease 2s;
}


/* Linie sichtbar */

.amath-smoke-section.is-visible
.amath-smoke-line {
    width:
        min(380px, 45vw);

    opacity: 1;
}


/* =========================================================
   RAUCH NACH LOGO-REVEAL AUSBLENDEN

   JavaScript setzt .smoke-out.
========================================================= */

.amath-smoke-section.smoke-out
.amath-smoke-video {
    animation:
        none !important;

    opacity:
        0 !important;

    transition:
        opacity 1.8s ease !important;
}


/* =========================================================
   VIDEO NACH DEM AUSBLENDEN VERSTECKEN

   JavaScript pausiert das Video und setzt .smoke-paused.
========================================================= */

.amath-smoke-section.smoke-paused
.amath-smoke-video {
    visibility:
        hidden;
}


/* =========================================================
   ENDZUSTAND
========================================================= */

.amath-smoke-section.animation-finished {
    background:
        #b9792b;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .amath-smoke-section {
        min-height:
            780px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .amath-smoke-section {
        min-height:
            600px;
    }


    .amath-smoke-logo-wrap {
        width:
            min(520px, 78vw);
    }


    .amath-smoke-video {
        width:
            150%;

        height:
            120%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .amath-smoke-section {
        min-height:
            500px;

        margin-top:
            30px;
    }


    .amath-smoke-logo-wrap {
        width:
            76vw;
    }


    .amath-smoke-video {
        width:
            190%;

        height:
            110%;
    }


    .amath-smoke-glow {
        width:
            95vw;

        filter:
            blur(35px);
    }


    .amath-smoke-line {
        bottom:
            45px;
    }


    .amath-smoke-section::after {
        filter:
            blur(35px);
    }

}


/* =========================================================
   REDUCED MOTION / BARRIEREFREIHEIT
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .amath-smoke-video {
        display:
            none !important;
    }


    .amath-smoke-section::after {
        display:
            none;
    }


    .amath-smoke-glow {
        display:
            none;
    }


    .amath-smoke-background {
        background-color:
            #b9792b;

        transition:
            none;
    }


    .amath-smoke-background::before {
        opacity:
            0;

        transition:
            none;
    }


    .amath-smoke-logo-wrap {
        opacity:
            1;

        filter:
            none;

        transform:
            none;

        transition:
            none;
    }


    .amath-smoke-logo {
        animation:
            none !important;

        transform:
            none !important;

        filter:
            none;

        transition:
            none;
    }


    .amath-smoke-line {
        width:
            min(380px, 45vw);

        opacity:
            1;

        transition:
            none;
    }

}