html {
    height: 100dvh;
    width: 100dvw;
    margin: 0;
}
/* ROOT CONFIGURATION */
:root {
    --overlay-color: 0, 0, 0;
    --overlay-opacity: 0;
    --hue-shift: 0;
    --saturation-boost: 1;
    --brightness: 1;
    --anim-speed: 1;

    /* Parallax: 0-3 scale (0=none, 1=normal, 2=strong, 3=extreme) */
    --parallax-intensity: 1;

    /* Base multiplier for scroll effect (internal tuning) */
    --parallax-base: 80px;

    --fog-intensity: 0.5;
    --glow-intensity: 0.2;
    --depth-blur: 1;
}

body {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: white;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}
main {
    width: 100%;
    height: 98%;
    align-items: center;
    align-self: center;
    align-content: center;
    margin-bottom: 0;
    justify-content: center;
}
pageMain {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 95dvh;
    justify-content: center;
}
footer {
    flex-grow: 1;
    height: 1dvh;
    width: 100;
}
.the-long-night {
    /*Thousands of years ago there came a night that lasted a generation. Kings froze to death in their castles, same as the shepherds in their huts.  */
    display: flex;
}

/* Booking Widget Stuff*/
.bookingWidget {
    display: flex;

    height: auto;
    width: 100%;
}

.image {
    transition: fill 3s ease-in-out;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 80vh 1fr;
    grid-template-rows: 72vh 1fr;
    background-color: var(--trees);
}

[class*="section_"] {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 100%;
    width: 100%;
}

svg {
    width: 100%;
    height: 100%;
}

.section_sky {
    grid-column: 1 / -1;
    grid-row: 1;
}

.section_rl,
.section_ml,
.section_fl {
    grid-column: 1;
    grid-row: 1;
}

.section_rm,
.section_mm,
.section_fm {
    grid-column: 2;
    grid-row: 1;
}

.section_rr,
.section_mr,
.section_fr {
    grid-column: 3;
    grid-row: 1;
}

[class*="section_f"],
.section_trees {
    isolation: isolate;
}

.section_mfog {
    height: 30%;
    margin-top: 30vh;
}

.section_ffog {
    height: 30%;
    margin-top: auto;
}

.section_sun {
    height: 16vh;
    width: 16vh;
    margin: 4vh auto 0;
}

.gradient stop {
    transition: stop-color 3s ease-in-out;
}

.image-light {
    --rear_highlight: #ff8080;
    --rear_shadow: #c26d80;
    --mid_highlight: #ff6666;
    --mid_shadow: #824b6c;
    --fore_highlight: #ff4d4d;
    --fore_shadow: #623851;
    --trees: #412536;
    --sky-bottom: #ffad66;
    --sky-mid: #ff8080;
    --sky-top: #412536;
    --fog: #ffff66;
    --sun: #ff4f23;
}

.image-dark {
    --rear_highlight: #a5cfe6;
    --rear_shadow: #7095af;
    --mid_highlight: #88d1fb;
    --mid_shadow: #4b6c82;
    --fore_highlight: #87d5f7;
    --fore_shadow: #385162;
    --trees: #253641;
    --sky-bottom: #a1cde4;
    --sky-mid: #7eb9d8;
    --sky-top: #051f33;
    --fog: #c9dfff;
    --sun: #6daac2;
}

.image-light .moon {
    opacity: 0;
}

.image-dark .moon {
    opacity: 0.22;
}

.screen {
    mix-blend-mode: screen;
}

.fog {
    fill: url(#gradient-fog);
    opacity: 0.22;
}

.moon {
    isolation: isolate;
    opacity: 0.22;
    mix-blend-mode: multiply;
    transition: opacity 3s ease-in-out;
}

.moon-grey1 {
    fill: #757575;
}

.moon-grey2 {
    fill: #595959;
}

.moon-grey3 {
    fill: #b2b2b2;
}

.moon-grey4 {
    fill: #ddd;
}

path,
polygon {
    transition: fill 3s ease-in-out;
}

.image {
    transition: background-color 3s ease-in-out;
}

.switch {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.switch span {
    filter: saturate(0);
    background-color: transparent;
    opacity: 0.5;
    padding: 0.25rem;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    transition:
        border-bottom-color 3s ease-in-out,
        filter 3s ease-in-out,
        opacity 3s ease-in-out;
}

.switch span:first-child {
    margin-right: 1rem;
}

[aria-checked="false"] span:first-child {
    filter: none;
    opacity: 1;
    border-color: white;
}

[aria-checked="true"] span:last-child {
    filter: none;
    opacity: 1;
    border-color: white;
}
/* CSS CUSTOM PROPERTIES - ANIMATABLE WITH @property */
@property --scroll {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --overlay-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --hue-shift {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --sway {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --parallax-intensity {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

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

/* HIDDEN RADIO INPUTS */
.theme-input {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    z-index: -9999;
}

/* SCENE CONTAINER */
.scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* LAYERS CONTAINER */
.scene__layers {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: end;
    container-type: inline-size;
    background: var(--bg-gradient);
    transition: background 1.5s ease;
    animation: scrollProgress linear;
    animation-timeline: scroll(root);
}

@keyframes scrollProgress {
    from {
        --scroll: 0;
    }

    to {
        --scroll: 1;
    }
}

.scene__layers::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--atmosphere-glow);
    opacity: var(--glow-intensity);
    pointer-events: none;
    z-index: 100;
    transition: all 1.5s ease;
}

.scene__layers::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--fog-gradient);
    opacity: calc(var(--fog-intensity) * (0.5 + var(--scroll) * 0.5));
    pointer-events: none;
    z-index: 99;
    transition: background 1.5s ease;
}

/* OVERLAY */
.scene__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--overlay-color), var(--overlay-opacity));
    pointer-events: none;
    z-index: 150;
    transition: background 0.5s ease;
}

/* LAYER - Base Styles */
.layer {
    display: block;
    grid-area: 1 / 1;
    width: 140%;
    margin-left: -20%;
    height: var(--h);
    background: var(--color);
    clip-path: var(--shape);
    transform-origin: center bottom;
    position: relative;

    /* Parallax calculation with proper depth separation */
    --parallax-offset: calc(
        var(--scroll) * (var(--layer-depth, 0.5) - 0.5) *
            var(--parallax-intensity) * var(--parallax-base) * 2
    );

    /* Fallback for older browsers */
    transform: translate(
            var(--sway, 0%),
            calc(var(--base-y) + var(--parallax-offset))
        )
        scale(var(--cloud-scale));
    will-change: transform;

    filter: blur(calc(var(--blur, 0px) * var(--depth-blur)))
        saturate(calc(var(--sat, 1) * var(--saturation-boost)))
        brightness(var(--brightness)) hue-rotate(calc(var(--hue-shift) * 1deg));

    transition:
        clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1),
        background 1s ease,
        filter 0.5s ease;
}

/* Modern browser override */
@supports (translate: 0 0) {
    .layer {
        transform: none;
        translate: var(--sway, 0%) calc(var(--base-y) + var(--parallax-offset));
        scale: var(--cloud-scale);
        will-change: translate, scale;
    }
}

/*SCROLL HINT*/
.scroll-hint {
    position: absolute;
    z-index: 25;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    animation:
        fadeUp 1.5s ease 0.8s forwards,
        float 3s ease-in-out 2s infinite;
}

.scroll-hint__text {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.6;
}

.scroll-hint__icon {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    position: relative;
}

.scroll-hint__icon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    animation: scrollPulse 2s ease-in-out infinite;
}

/* CONTENT */
.content {
    position: relative;
    z-index: 10;
}

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.hero__title {
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 200;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: fadeUp 1.5s ease 0.2s forwards;
}

.hero__subtitle {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    margin-top: 1.5rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1.5s ease 0.5s forwards;
    font-weight: 300;
}

.section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
}

.card {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    max-width: 650px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    animation: cardReveal linear;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
}
.bigCard {
    flex-grow: 5;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 90%;
    min-height: 40dvh;
    height: 50dvh;
    max-height: 70dvh;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    animation: cardReveal linear;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
    vertical-align: middle;
    padding: 2em;
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        filter: blur(10px);
    }

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

.card__title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.card__content {
    font-size: 0.95rem;
    line-height: 1.9;
    opacity: 0.85;
}

.card__content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
}

.card__content strong {
    color: hsl(45, 100%, 70%);
    font-weight: 500;
}

/* ANIMATIONS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes float {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

@keyframes scrollPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(8px);
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    html body {
        height: fit-content;
    }
    :root {
        --depth-blur: 0.5;
        --parallax-base: 50px;
    }

    .card {
        padding: 2rem;
        margin: 1rem;
    }
}

@media (max-width: 480px) {
    :root {
        --parallax-intensity: 0.7;
        --parallax-base: 40px;
        --depth-blur: 0.35;
    }

    .hero__title {
        letter-spacing: 0.15em;
    }
}

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

.image[data-state="image-dark"] {
    /* top */
}
.image[data-state="image-dark"] {
    /* 33% */
}
.image[data-state="image-light"] {
    /* 66% */
}
.image[data-state="image-light"] {
    /* bottom */
}