/* =========================================================
   GUTSTER.de
   Grundgestaltung
   ========================================================= */

:root {
    --background: #07090d;
    --text: #f1f3f5;
    --soft-text: rgba(241, 243, 245, 0.62);

    --cyan: rgba(70, 205, 196, 0.42);
    --blue: rgba(79, 125, 255, 0.38);
    --violet: rgba(164, 91, 230, 0.34);
    --gold: rgba(240, 187, 91, 0.28);

    --button-border: rgba(255, 255, 255, 0.16);
    --button-background: rgba(255, 255, 255, 0.035);

    --font:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background: var(--background);
}

body {
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(20, 28, 42, 0.35),
            transparent 55%
        ),
        var(--background);

    color: var(--text);

    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   Hauptfläche
   ========================================================= */

#page {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 560px;

    overflow: hidden;
}


/* =========================================================
   Canvas
   ========================================================= */

#organicCanvas {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    z-index: 1;

    will-change: opacity;
}


/* =========================================================
   Dunkle Randabdunklung
   ========================================================= */

.vignette {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.16) 65%,
            rgba(0, 0, 0, 0.65) 100%
        );
}


/* =========================================================
   Inhalt
   ========================================================= */

.content {
    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        clamp(35px, 8vh, 90px)
        20px
        80px;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   Logo
   ========================================================= */

.brand {
    position: relative;

    margin-top: 5px;

    animation: brandAppear 2.5s ease-out both;
}

.brand h1 {
    margin: 0;

    color: rgba(255, 255, 255, 0.94);

    font-family:
        Verdana,
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(27px, 4vw, 48px);

    font-weight: normal;

    letter-spacing: 0.13em;

    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.08),
        0 0 50px rgba(100, 180, 220, 0.08);
}

.brand-line {
    width: 42px;
    height: 1px;

    margin: 17px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.48),
            transparent
        );

    animation: lineGrow 3s ease-out both;
}


/* =========================================================
   Uhr
   ========================================================= */

.clock {
    margin-top: clamp(45px, 9vh, 95px);

    color: rgba(255, 255, 255, 0.9);

    animation: clockAppear 3s ease-out both;
}

.clock-line {
    transition: opacity 0.4s ease;
}

.clock-time {
    font-size: clamp(29px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: 0.09em;

    font-weight: normal;
}

.clock-day {
    margin-top: 13px;

    font-size: clamp(15px, 2vw, 20px);

    color: rgba(255, 255, 255, 0.68);

    letter-spacing: 0.08em;
}

.clock-date {
    margin-top: 8px;

    font-size: clamp(12px, 1.5vw, 16px);

    color: rgba(255, 255, 255, 0.45);

    letter-spacing: 0.05em;
}


/* =========================================================
   Hauptbotschaft
   ========================================================= */

.message {
    max-width: 700px;

    margin:
        clamp(55px, 9vh, 95px)
        20px
        0;

    min-height: 31px;

    color: rgba(255, 255, 255, 0.78);

    font-size: clamp(14px, 1.6vw, 18px);

    line-height: 1.7;

    letter-spacing: 0.025em;

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

.message.changing {
    opacity: 0;
    transform: translateY(5px);
}


/* =========================================================
   Buttons
   ========================================================= */

.buttons {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 28px;

    pointer-events: auto;

    animation: buttonsAppear 4s ease-out both;
}

.good-button {
    appearance: none;

    border: 1px solid var(--button-border);

    border-radius: 50px;

    padding:
        10px
        17px;

    color: rgba(255, 255, 255, 0.65);

    background:
        var(--button-background);

    font-size: 11px;

    letter-spacing: 0.04em;

    cursor: pointer;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        background-color 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.good-button:hover {
    color: rgba(255, 255, 255, 0.95);

    border-color:
        rgba(255, 255, 255, 0.32);

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

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 25px rgba(50, 180, 190, 0.08);
}

.good-button:active {
    transform:
        translateY(0)
        scale(0.97);
}

.good-button:focus-visible {
    outline: 1px solid rgba(255,255,255,0.55);

    outline-offset: 4px;
}


/* =========================================================
   Kleiner Hinweis
   ========================================================= */

.hint {
    position: absolute;

    bottom: 65px;

    color:
        rgba(255, 255, 255, 0.28);

    font-size: 10px;

    letter-spacing: 0.08em;

    animation:
        hintPulse 7s ease-in-out infinite;
}


/* =========================================================
   Footer
   ========================================================= */

footer {
    position: absolute;

    z-index: 6;

    bottom: 17px;

    left: 0;

    width: 100%;

    text-align: center;

    color: rgba(255,255,255,0.20);

    font-size: 9px;

    letter-spacing: 0.07em;
}

.footer-dot {
    margin:
        0 7px;
}


/* =========================================================
   Animationen
   ========================================================= */

@keyframes brandAppear {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lineGrow {

    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 42px;
        opacity: 1;
    }
}

@keyframes clockAppear {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonsAppear {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hintPulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.9;
    }
}


/* =========================================================
   Kleine Displays
   ========================================================= */

@media (max-height: 650px) {

    .content {
        padding-top: 30px;
    }

    .clock {
        margin-top: 28px;
    }

    .message {
        margin-top: 30px;
    }

    .hint {
        display: none;
    }

}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 600px) {

    #page {
        min-height: 500px;
    }

    .content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .brand h1 {
        letter-spacing: 0.09em;
    }

    .clock-time {
        letter-spacing: 0.06em;
    }

    .buttons {
        max-width: 330px;
    }

    .good-button {
        padding: 9px 14px;
    }

}


/* =========================================================
   Nutzer möchte weniger Bewegung
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}