/* =========================================================
   Niedomrok — Coming Soon
   Palette:
     --black        : true black (background)
     --silver       : silver/light gray (H1, text)
     --blood        : deep dark red (H2)
     --blood-muted  : muted red (links)
     --blood-bright : brightened red (hover)
   ========================================================= */
:root {
    --black: #000000;
    --silver: #cfd2d6;
    --silver-dim: #8b8e93;
    --blood: #6e0d12;
    --blood-muted: #9a2a2a;
    --blood-bright: #d43f3f;
    /* Deep, bloody shade for the large heading — more legible than --blood,
       still dark (about 2.7:1 on black). */
    --blood-title: #a3141b;

    --fog: rgba(0, 0, 0, 0.92);

    /* Base spotlight radius — animated with "breathing" in script.js */
    --r: 260px;

    --font-display: "Cinzel", "Times New Roman", serif;
    --font-body: "Oswald", "Arial Narrow", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--black);
    color: var(--silver);
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.04em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* =========================================================
   BACKGROUND — band artwork behind the black / fog
   ========================================================= */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.backdrop__image {
    position: absolute;
    top: 0;
    left: 0; /* width/height set in JS to the zoomed artwork frame */
    background-image: url("Background.webp");
    background-size: cover;
    background-position: center top;
    /* slightly warm, faded tone — like an old photograph */
    filter: grayscale(0.25) sepia(0.22) contrast(1.06) brightness(0.9)
        saturate(0.85);
    /* Horizontal parallax controlled from script.js via a compositor-only
       transform (panning within the frame — never exposes black edges).
       Size is set in JS (background zoom = range of motion). */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Film grain — layered over the artwork, beneath the fog.
   This way the grain is only visible within the spotlight opening. */
.backdrop__grain {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.3;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: grain-shift 0.6s steps(3) infinite;
    will-change: transform;
}

/* Subtle grain shimmer — like a moving film frame */
@keyframes grain-shift {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-4%, 3%);
    }
    66% {
        transform: translate(3%, -2%);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Fog — a black veil with a round opening (spotlight) around the cursor.
   Outside the spotlight the background is practically black. */
.backdrop__fog {
    position: absolute;
    inset: 0;
    /* Own compositing layer so its per-frame repaint doesn't dirty siblings. */
    transform: translateZ(0);
    will-change: transform;
    /* Transparent at the spotlight center → full black outside it.
       The artwork underneath shows through only via the transparent center. */
    background: radial-gradient(
        circle var(--r, 260px) at var(--mx, 50%) var(--my, 45%),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 60%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* On touch the spotlight drifts on its own (handled in script.js);
   a slightly larger opening for readability on small screens. */
@media (hover: none), (pointer: coarse) {
    .backdrop__fog {
        --r: 220px;
    }

    /* Mid-range mobile GPUs (e.g. Kirin/Mali) choke on stacked full-screen
       blend layers recompositing every frame over the moving spotlight —
       trim the load to keep the animation smooth. */
    .backdrop__flicker {
        display: none;
    }
    .backdrop__grain {
        inset: 0;
        animation: none;
    }

    /* Per-frame blur is very expensive on mobile during the intro — use a
       lighter opacity/slide reveal that looks nearly identical. */
    .reveal-line {
        animation-name: reveal-in-lite;
    }
}

.backdrop__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        140% 120% at 50% 50%,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* --- ATMOSPHERE: ash particles ------------------------ */
.backdrop__ash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* embers glow even over black */
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* --- ATMOSPHERE: subtle projection flicker -------------- */
.backdrop__flicker {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    mix-blend-mode: multiply;
    animation: flicker 7s steps(1) infinite;
}

/* Irregular, barely perceptible dimming. */
@keyframes flicker {
    0%, 4%, 8%, 30%, 50%, 70%, 100% { opacity: 0; }
    2% { opacity: 0.12; }
    6% { opacity: 0.06; }
    41% { opacity: 0.1; }
    42% { opacity: 0; }
    58% { opacity: 0.08; }
    83% { opacity: 0.14; }
    84% { opacity: 0.02; }
}

/* =========================================================
   PAGE LAYOUT
   ========================================================= */
.page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 6vh, 4rem);
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 5vw, 3rem);
    text-align: center;
}

/* 1. Header ------------------------------------------------ */
.header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.header__logo {
    width: clamp(140px, 22vw, 260px);
    height: auto;
    filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.9));
    user-select: none;
}

/* The logo is always visible on black, and the spotlight "cuts it out" —
   within the cursor opening the logo disappears, revealing the background beneath. */
.reveal-active .header__logo {
    -webkit-mask-image: radial-gradient(
        circle var(--r, 260px) at var(--lx, 50%) var(--ly, 50%),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: radial-gradient(
        circle var(--r, 260px) at var(--lx, 50%) var(--ly, 50%),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 60%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* 2. Hero -------------------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: clamp(0.4rem, 1.5vh, 1rem);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 7vw, 4.75rem);
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--silver);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}

.hero__subtitle {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 4.75rem);
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--blood-title);
    /* Tight dark outline (letter sharpness) + bloody glow (depth). */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 26px rgba(110, 13, 18, 0.55);
}

/* Like the logo: the hero text is cut out by the spotlight — within the
   cursor opening the letters fade, revealing the artwork beneath. */
.reveal-active .hero__title,
.reveal-active .hero__subtitle {
    -webkit-mask-image: radial-gradient(
        circle var(--r, 260px) at var(--lx, 50%) var(--ly, 50%),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: radial-gradient(
        circle var(--r, 260px) at var(--lx, 50%) var(--ly, 50%),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 60%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* --- Text emergence (blur → sharp) ------------
   Note: we don't animate letter-spacing or width so the text
   doesn't momentarily wrap to two lines on small screens. */
.reveal-line {
    animation: reveal-in 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--delay, 0s);
}

@keyframes reveal-in {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translateY(14px);
    }
    55% { opacity: 1; }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Lightweight reveal for touch devices — no per-frame blur (see media query). */
@keyframes reveal-in-lite {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ornament — a thin line + a sharp twig.
   After the title appears, the whole ornament unfolds from the center outward. */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1.2rem);
    margin-top: clamp(0.75rem, 2vh, 1.5rem);
    color: var(--blood-muted);
    transform: scaleX(0);
    transform-origin: center center;
    animation: ornament-open 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 0.9s;
}

@keyframes ornament-open {
    to { transform: scaleX(1); }
}

.ornament__line {
    display: block;
    width: clamp(2rem, 10vw, 6rem);
    height: 1px;
    background: linear-gradient(
        to var(--dir, right),
        transparent,
        var(--blood-muted)
    );
}

.ornament__line:last-child {
    background: linear-gradient(to left, transparent, var(--blood-muted));
}

.ornament__branch {
    color: var(--blood-muted);
    opacity: 0.9;
}

/* 3. Social ------------------------------------------------ */
.social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vh, 1.75rem);
}

.social__title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.7rem, 2.4vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--silver-dim);
    padding-left: 0.42em; /* tracking compensation */
}

.social__icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 5vw, 2.75rem);
}

.social__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--silver);
    border-radius: 50%;
    transition: color 0.3s ease, transform 0.3s ease,
        filter 0.3s ease;
}

/* Bloody hover — glow + a dripping drop */
.social__link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 82%;
    width: 3px;
    height: 0;
    background: linear-gradient(var(--blood-bright), rgba(212, 63, 63, 0));
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%);
    opacity: 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.social__link:hover,
.social__link:focus-visible {
    color: var(--blood-bright);
    transform: translateY(-2px);
    filter: drop-shadow(0 0 14px rgba(212, 63, 63, 0.7));
    outline: none;
}

.social__link:hover::after,
.social__link:focus-visible::after {
    height: 18px;
    opacity: 0.85;
}

/* 4. Contact / Footer ------------------------------------- */
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    width: 100%;
}

.contact__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.75rem, 2.6vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--silver-dim);
    padding-left: 0.3em;
}

.contact__email {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.15rem, 4.4vw, 2rem);
    letter-spacing: 0.06em;
    color: var(--blood-muted);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.contact__email:hover,
.contact__email:focus-visible {
    color: var(--blood-bright);
    text-shadow: 0 0 22px rgba(212, 63, 63, 0.55);
    outline: none;
}

.contact__copy {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    letter-spacing: 0.14em;
    color: rgba(139, 142, 147, 0.6);
    margin-top: clamp(0.5rem, 2vh, 1rem);
}

/* =========================================================
   ACCESSIBILITY — reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Atmosphere disabled */
    .backdrop__ash,
    .backdrop__flicker {
        display: none;
    }

    /* Elements hidden by their initial state — restore visibility */
    .ornament { transform: none; }
}