:root {
    --storefront-black: #070a08;
    --storefront-ink: #0b100d;
    --storefront-forest: #102219;
    --storefront-forest-soft: #173126;
    --storefront-plum: #1a121d;
    --storefront-purple: #78548a;
    --storefront-parchment: #eee3ca;
    --storefront-parchment-soft: #c6b99e;
    --storefront-muted: #8d8574;
    --storefront-brass: #c8a361;
    --storefront-brass-light: #e0bc78;
    --storefront-line: rgba(200, 163, 97, 0.22);
    --storefront-line-strong: rgba(200, 163, 97, 0.42);
    --storefront-success: #8fd6a0;
    --storefront-error: #eba0a0;
    --storefront-shell: 92rem;
    --storefront-serif: Georgia, "Times New Roman", serif;
    --storefront-sans: Inter, Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 75% 8%,
            rgba(120, 84, 138, 0.11),
            transparent 34rem
        ),
        radial-gradient(
            circle at 8% 55%,
            rgba(16, 49, 34, 0.45),
            transparent 42rem
        ),
        var(--storefront-black);
    color: var(--storefront-parchment);
    font-family: var(--storefront-sans);
}

body.storefront-lock-scroll {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

svg {
    display: block;
}

.storefront-shell {
    width: min(
        calc(100% - 3rem),
        var(--storefront-shell)
    );
    margin-inline: auto;
}

.storefront-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.storefront-skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem;
    transform: translateY(-200%);
    background: var(--storefront-brass);
    color: var(--storefront-black);
}

.storefront-skip-link:focus {
    transform: none;
}

.storefront-atmosphere {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.storefront-atmosphere span {
    position: absolute;
    border-radius: 50%;
    filter: blur(6rem);
    opacity: 0.15;
}

.storefront-atmosphere span:nth-child(1) {
    width: 30rem;
    height: 30rem;
    top: 15%;
    right: -12rem;
    background: var(--storefront-purple);
}

.storefront-atmosphere span:nth-child(2) {
    width: 34rem;
    height: 34rem;
    bottom: 10%;
    left: -16rem;
    background: #1c5036;
}

.storefront-atmosphere span:nth-child(3) {
    width: 24rem;
    height: 24rem;
    top: 65%;
    right: 20%;
    background: #4a2e51;
}

.storefront-announcement {
    position: relative;
    z-index: 40;
    border-bottom: 1px solid var(--storefront-line);
    background: #070907;
}

.storefront-announcement-inner {
    display: flex;
    min-height: 2.25rem;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.storefront-announcement p {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--storefront-parchment-soft);
    font-size: 0.69rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.storefront-announcement p span {
    color: var(--storefront-brass);
}

.storefront-announcement-inner > div {
    display: flex;
    gap: 1.25rem;
}

.storefront-announcement a {
    color: var(--storefront-muted);
    font-size: 0.7rem;
    text-decoration: none;
}

.storefront-announcement a:hover {
    color: var(--storefront-brass-light);
}

.storefront-header {
    position: sticky;
    z-index: 35;
    top: 0;
    border-bottom: 1px solid var(--storefront-line);
    background: rgba(7, 10, 8, 0.94);
    backdrop-filter: blur(1rem);
    transition:
        box-shadow 180ms ease,
        background 180ms ease;
}

.storefront-header.is-scrolled {
    background: rgba(7, 10, 8, 0.985);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32);
}

.storefront-header-main {
    display: grid;
    grid-template-columns:
        minmax(14rem, 0.8fr)
        minmax(18rem, 1.4fr)
        auto;
    gap: 2rem;
    align-items: center;
    min-height: 6.25rem;
}

.storefront-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    width: fit-content;
    color: var(--storefront-parchment);
    text-decoration: none;
}

.storefront-brand-mark {
    width: 3.35rem;
    height: 3.35rem;
    color: var(--storefront-brass);
}

.storefront-brand-mark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.storefront-brand-copy {
    display: grid;
    line-height: 0.94;
}

.storefront-brand-copy strong {
    font-family: var(--storefront-serif);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.storefront-brand-copy small {
    margin-top: 0.48rem;
    color: var(--storefront-muted);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.storefront-search-trigger {
    display: grid;
    grid-template-columns:
        1.2rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    padding: 0 0.9rem;
    border: 1px solid var(--storefront-line);
    background: rgba(255, 255, 255, 0.018);
    color: var(--storefront-muted);
    cursor: pointer;
    text-align: left;
}

.storefront-search-trigger:hover {
    border-color: var(--storefront-line-strong);
    color: var(--storefront-parchment-soft);
}

.storefront-search-trigger svg,
.storefront-icon-button svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.storefront-search-trigger kbd {
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--storefront-line);
    background: transparent;
    color: var(--storefront-muted);
    font-size: 0.62rem;
}

.storefront-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.storefront-icon-button {
    position: relative;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--storefront-parchment-soft);
    cursor: pointer;
    text-decoration: none;
}

.storefront-icon-button:hover {
    border-color: var(--storefront-line);
    color: var(--storefront-brass-light);
}

.storefront-basket-count {
    position: absolute;
    top: 0.15rem;
    right: 0.05rem;
    display: grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    padding: 0 0.2rem;
    border-radius: 50%;
    background: var(--storefront-brass);
    color: var(--storefront-black);
    font-size: 0.58rem;
    font-weight: 800;
}

.storefront-mobile-menu-button {
    display: none;
}

.storefront-navigation-row {
    border-top: 1px solid rgba(200, 163, 97, 0.1);
}

.storefront-primary-navigation {
    display: flex;
    min-height: 3.25rem;
    justify-content: center;
    align-items: stretch;
    gap: 0.4rem;
}

.storefront-nav-group {
    position: relative;
    display: flex;
}

.storefront-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.05rem;
    border: 0;
    background: transparent;
    color: var(--storefront-parchment-soft);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.storefront-nav-link:hover {
    color: var(--storefront-brass-light);
}

.storefront-mega-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    display: grid;
    grid-template-columns:
        minmax(16rem, 1.2fr)
        repeat(2, minmax(11rem, 0.8fr));
    gap: 2rem;
    width: min(54rem, calc(100vw - 3rem));
    padding: 2rem;
    transform:
        translate(-50%, 0.75rem);
    border: 1px solid var(--storefront-line-strong);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(120, 84, 138, 0.11),
            transparent 20rem
        ),
        #0a0e0b;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease;
}

.storefront-mega-menu.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.storefront-mega-menu-intro,
.storefront-mega-menu-links {
    display: grid;
    align-content: start;
    gap: 0.7rem;
}

.storefront-mega-menu-intro > span,
.storefront-mega-menu-links > span {
    color: var(--storefront-brass);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.storefront-mega-menu-intro strong {
    color: var(--storefront-parchment);
    font-family: var(--storefront-serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
}

.storefront-mega-menu-intro p,
.storefront-menu-empty {
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.76rem;
    line-height: 1.7;
}

.storefront-mega-menu-links a,
.storefront-text-link {
    color: var(--storefront-parchment-soft);
    font-size: 0.76rem;
    line-height: 1.6;
    text-decoration: none;
}

.storefront-mega-menu-links a:hover,
.storefront-text-link:hover {
    color: var(--storefront-brass-light);
}

.storefront-mobile-navigation {
    display: none;
}

.storefront-main {
    position: relative;
    min-height: 55vh;
}

.storefront-page-hero {
    padding: clamp(5rem, 9vw, 9rem) 0;
    border-bottom: 1px solid var(--storefront-line);
    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(120, 84, 138, 0.19),
            transparent 24rem
        ),
        linear-gradient(
            130deg,
            rgba(16, 49, 34, 0.45),
            rgba(7, 10, 8, 0.3)
        );
}

.storefront-page-hero.is-compact {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.storefront-eyebrow {
    display: block;
    margin-bottom: 1rem;
    color: var(--storefront-brass);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.storefront-page-hero h1 {
    max-width: 60rem;
    margin: 0;
    color: var(--storefront-parchment);
    font-family: var(--storefront-serif);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.storefront-page-hero p {
    max-width: 44rem;
    margin: 1.5rem 0 0;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.75;
}

.storefront-placeholder {
    padding: 7rem 0;
    text-align: center;
}

.storefront-placeholder span {
    color: var(--storefront-brass);
    font-size: 1.5rem;
}

.storefront-placeholder h2 {
    margin: 1rem 0;
    font-family: var(--storefront-serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
}

.storefront-placeholder p {
    max-width: 38rem;
    margin: auto;
    color: var(--storefront-muted);
    line-height: 1.7;
}

.storefront-mobile-drawer,
.storefront-search-dialog {
    position: fixed;
    z-index: 70;
    visibility: hidden;
    opacity: 0;
    transition:
        transform 180ms ease,
        opacity 180ms ease,
        visibility 180ms ease;
}

.storefront-mobile-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-rows:
        auto minmax(0, 1fr) auto;
    width: min(28rem, 92vw);
    transform: translateX(-100%);
    border-right: 1px solid var(--storefront-line-strong);
    background: #090d0a;
}

.storefront-mobile-drawer.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.storefront-mobile-drawer-header,
.storefront-mobile-drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--storefront-line);
}

.storefront-mobile-drawer-header > span {
    font-family: var(--storefront-serif);
    font-size: 1.25rem;
}

.storefront-mobile-drawer-content {
    overflow-y: auto;
    padding: 1.25rem;
}

.storefront-mobile-drawer-footer {
    border-top: 1px solid var(--storefront-line);
    border-bottom: 0;
}

.storefront-mobile-drawer-footer a {
    color: var(--storefront-muted);
    font-size: 0.72rem;
    text-decoration: none;
}

.storefront-overlay {
    position: fixed;
    z-index: 60;
    inset: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    backdrop-filter: blur(0.25rem);
    transition:
        opacity 160ms ease,
        visibility 160ms ease;
}

.storefront-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}

.storefront-search-dialog {
    top: 6vh;
    left: 50%;
    width: min(52rem, calc(100vw - 2rem));
    padding: 1.4rem;
    transform:
        translate(-50%, -1rem);
    border: 1px solid var(--storefront-line-strong);
    background: #0a0e0b;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.65);
}

.storefront-search-dialog.is-open {
    transform: translate(-50%, 0);
    visibility: visible;
    opacity: 1;
}

.storefront-search-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.storefront-search-dialog-header > div {
    display: grid;
    gap: 0.3rem;
}

.storefront-search-dialog-header span {
    color: var(--storefront-brass);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.storefront-search-dialog-header strong {
    font-family: var(--storefront-serif);
    font-size: 1.65rem;
    font-weight: 400;
}

.storefront-search-form {
    display: grid;
    grid-template-columns:
        1.3rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    border: 1px solid var(--storefront-line-strong);
    background: rgba(255, 255, 255, 0.02);
}

.storefront-search-form svg {
    width: 1.3rem;
    fill: none;
    stroke: var(--storefront-muted);
    stroke-width: 1.6;
}

.storefront-search-form input {
    width: 100%;
    min-height: 3.25rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--storefront-parchment);
}

.storefront-search-form button,
.storefront-newsletter-form button {
    min-height: 3.1rem;
    padding: 0 1.15rem;
    border: 1px solid var(--storefront-brass);
    background: var(--storefront-brass);
    color: var(--storefront-black);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.storefront-search-suggestions {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.storefront-search-suggestions > span {
    color: var(--storefront-muted);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.storefront-search-suggestions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.storefront-search-suggestions a {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--storefront-line);
    color: var(--storefront-parchment-soft);
    font-size: 0.68rem;
    text-decoration: none;
}

.storefront-notice {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: min(calc(100% - 3rem), var(--storefront-shell));
    margin: 1rem auto;
    padding: 0.85rem 1rem;
    border: 1px solid var(--storefront-line);
}

.storefront-notice p {
    margin: 0;
    font-size: 0.76rem;
}

.storefront-notice.is-success {
    border-color: rgba(143, 214, 160, 0.4);
    color: var(--storefront-success);
}

.storefront-notice.is-error {
    border-color: rgba(235, 160, 160, 0.4);
    color: var(--storefront-error);
}

.storefront-newsletter {
    border-top: 1px solid var(--storefront-line);
    border-bottom: 1px solid var(--storefront-line);
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(120, 84, 138, 0.15),
            transparent 24rem
        ),
        #0b100d;
}

.storefront-newsletter-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(20rem, 0.8fr);
    gap: 4rem;
    align-items: center;
    padding-block: clamp(4rem, 8vw, 7rem);
}

.storefront-newsletter h2 {
    max-width: 48rem;
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(2rem, 5vw, 3.7rem);
    font-weight: 400;
    line-height: 1.08;
}

.storefront-newsletter p {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--storefront-muted);
    line-height: 1.7;
}

.storefront-newsletter-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    padding: 0.35rem;
    border: 1px solid var(--storefront-line-strong);
}

.storefront-newsletter-form input {
    min-height: 3.2rem;
    padding: 0 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--storefront-parchment);
}

.storefront-footer {
    background: #070907;
}

.storefront-footer-grid {
    display: grid;
    grid-template-columns:
        minmax(16rem, 1.5fr)
        repeat(3, minmax(9rem, 0.7fr));
    gap: 4rem;
    padding-block: 4rem;
}

.storefront-footer-brand {
    display: grid;
    align-content: start;
    gap: 1.25rem;
}

.storefront-footer-brand p {
    max-width: 26rem;
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.78rem;
    line-height: 1.75;
}

.storefront-footer-links {
    display: grid;
    align-content: start;
    gap: 0.65rem;
}

.storefront-footer-links > span {
    margin-bottom: 0.3rem;
    color: var(--storefront-brass);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.storefront-footer-links a {
    color: var(--storefront-muted);
    font-size: 0.74rem;
    text-decoration: none;
}

.storefront-footer-links a:hover {
    color: var(--storefront-parchment);
}

.storefront-footer-bottom {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto auto;
    gap: 2rem;
    align-items: center;
    min-height: 4rem;
    border-top: 1px solid var(--storefront-line);
    color: var(--storefront-muted);
    font-size: 0.66rem;
}

.storefront-footer-bottom p {
    margin: 0;
}

.storefront-footer-bottom nav {
    display: flex;
    gap: 1rem;
}

.storefront-footer-bottom a {
    text-decoration: none;
}

@media (max-width: 1050px) {
    .storefront-header-main {
        grid-template-columns:
            auto minmax(0, 1fr) auto;
        gap: 1rem;
    }

    .storefront-mobile-menu-button {
        display: grid;
    }

    .storefront-header-search,
    .storefront-navigation-row {
        display: none;
    }

    .storefront-brand {
        justify-self: center;
    }

    .storefront-mobile-navigation {
        display: grid;
        gap: 0.15rem;
    }

    .storefront-mobile-navigation > a,
    .storefront-mobile-category-list a {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--storefront-line);
        color: var(--storefront-parchment-soft);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .storefront-mobile-category-list {
        display: grid;
        margin-top: 1.2rem;
    }

    .storefront-mobile-category-list > span {
        margin-bottom: 0.45rem;
        color: var(--storefront-brass);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .storefront-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .storefront-shell {
        width: min(
            calc(100% - 2rem),
            var(--storefront-shell)
        );
    }

    .storefront-announcement-inner {
        justify-content: center;
    }

    .storefront-announcement-inner > div {
        display: none;
    }

    .storefront-announcement p {
        font-size: 0.58rem;
        text-align: center;
    }

    .storefront-header-main {
        min-height: 4.75rem;
    }

    .storefront-brand-mark {
        width: 2.6rem;
        height: 2.6rem;
    }

    .storefront-brand-copy strong {
        font-size: 0.84rem;
    }

    .storefront-brand-copy small {
        display: none;
    }

    .storefront-header-actions
    .storefront-icon-button:nth-child(2),
    .storefront-header-actions
    .storefront-icon-button:nth-child(3) {
        display: none;
    }

    .storefront-search-dialog {
        top: 1rem;
    }

    .storefront-search-form {
        grid-template-columns:
            1.3rem minmax(0, 1fr);
    }

    .storefront-search-form button {
        grid-column: 1 / -1;
    }

    .storefront-newsletter-inner,
    .storefront-footer-grid,
    .storefront-footer-bottom {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .storefront-newsletter-form {
        grid-template-columns: 1fr;
    }

    .storefront-footer-bottom {
        align-items: start;
        padding-block: 1.5rem;
    }

    .storefront-footer-bottom nav {
        flex-wrap: wrap;
    }
}

.admin-auth,
.admin-dashboard {
    min-height: 100vh;
    padding: clamp(1rem, 5vw, 4rem);
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(119, 81, 139, 0.18),
            transparent 30rem
        ),
        linear-gradient(
            145deg,
            #101b16,
            #090b0a 62%
        );
}

.admin-auth {
    display: grid;
    place-items: center;
}

.admin-auth-card {
    width: min(30rem, 100%);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid rgba(188, 150, 88, 0.42);
    background: rgba(6, 9, 7, 0.9);
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.55);
}

.admin-auth-card h1,
.admin-dashboard h1 {
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 4rem);
    font-weight: 400;
    line-height: 1;
}

.admin-eyebrow {
    margin: 0 0 1rem;
    color: var(--brass);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.admin-introduction {
    margin: 1.5rem 0 2rem;
    color: var(--muted-parchment);
    line-height: 1.7;
}

.admin-auth form {
    display: grid;
    gap: 0.75rem;
}

.admin-auth label {
    margin-top: 0.75rem;
    color: var(--parchment);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-auth input[type="email"],
.admin-auth input[type="password"],
.admin-auth input[type="text"] {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(188, 150, 88, 0.35);
    outline: none;
    background: rgba(255, 255, 255, 0.04);
    color: var(--parchment);
    font: inherit;
}

.admin-auth input:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(188, 150, 88, 0.12);
}

.remember-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.admin-auth button,
.admin-button,
.admin-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--brass);
    background: var(--brass);
    color: #090b0a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-secondary-button {
    margin: 0;
    background: transparent;
    color: var(--brass);
}

.return-store {
    display: inline-block;
    margin-top: 1.75rem;
    color: var(--muted-parchment);
}

.validation-summary,
.field-validation {
    color: #e2a6a6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}

.admin-dashboard {
    max-width: 90rem;
    margin: 0 auto;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(188, 150, 88, 0.25);
}

.admin-welcome {
    margin: 3rem 0;
    padding: 2rem;
    border-left: 3px solid var(--purple);
    background: rgba(255, 255, 255, 0.03);
}

.admin-welcome h2 {
    margin-top: 0;
}

.admin-welcome p {
    max-width: 50rem;
    color: var(--muted-parchment);
    line-height: 1.7;
}

.admin-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.admin-module {
    min-height: 15rem;
    padding: 1.75rem;
    border: 1px solid rgba(188, 150, 88, 0.22);
    background: rgba(6, 9, 7, 0.72);
}

.admin-module span {
    color: var(--purple);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.admin-module h2 {
    margin: 2rem 0 0.75rem;
    font-weight: 400;
}

.admin-module p {
    color: var(--muted-parchment);
    line-height: 1.6;
}

.admin-module strong {
    display: block;
    margin-top: 2rem;
    color: var(--brass);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 650px) {
    .admin-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* STOREFRONT ROUTE FOUNDATIONS START */

.storefront-placeholder-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.9rem;
    margin-top: 1.5rem;
    padding: 0 1rem;
    border: 1px solid var(--storefront-brass);
    color: var(--storefront-brass-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.storefront-placeholder-link:hover {
    background: var(--storefront-brass);
    color: var(--storefront-black);
}

.storefront-legal-content {
    min-height: 22rem;
    padding-block: clamp(3rem, 7vw, 6rem);
}

.storefront-reading-width {
    max-width: 52rem;
}

.storefront-legal-content p {
    margin: 0;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* STOREFRONT ROUTE FOUNDATIONS END */

/* CAVERN ENTRANCE START */

body.cavern-entrance-active {
    overflow: hidden;
}

.cavern-entrance {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: grid;
    overflow: hidden;
    place-items: center;
    background: #020302;
    opacity: 0;
    visibility: hidden;
    isolation: isolate;
    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}

.cavern-entrance.is-visible {
    opacity: 1;
    visibility: visible;
}

.cavern-entrance.is-hidden {
    display: none;
}

.cavern-entrance-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.045);
    filter:
        brightness(0.58)
        saturate(0.92);
    transition:
        transform 3.2s ease,
        filter 2s ease;
}

.cavern-entrance.is-magic-ready
.cavern-entrance-background {
    transform: scale(1);
    filter:
        brightness(0.78)
        saturate(1.06);
}

.cavern-entrance-vignette {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 22%,
            rgba(3, 4, 3, 0.18) 55%,
            rgba(2, 3, 2, 0.82) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(2, 3, 2, 0.36),
            transparent 28%,
            transparent 68%,
            rgba(2, 3, 2, 0.62)
        );
}

.cavern-light-rays {
    position: absolute;
    z-index: 2;
    top: -8%;
    left: 50%;
    width: min(92rem, 112vw);
    height: 74%;
    object-fit: contain;
    object-position: top center;
    pointer-events: none;
    opacity: 0;
    transform:
        translateX(-50%)
        scaleY(0.84);
    mix-blend-mode: screen;
    transition:
        opacity 1.4s ease,
        transform 1.8s ease;
}

.cavern-light-rays.is-gold {
    filter:
        brightness(0.72)
        saturate(0.85);
}

.cavern-light-rays.is-purple {
    filter:
        brightness(0.62)
        saturate(1.05);
}

.cavern-entrance.is-magic-ready
.cavern-light-rays.is-gold {
    opacity: 0.18;
    transform:
        translateX(-50%)
        scaleY(1);
}

.cavern-entrance.is-magic-ready
.cavern-light-rays.is-purple {
    opacity: 0.13;
    transform:
        translateX(-50%)
        scaleY(1.04);
}

.cavern-curtain {
    position: absolute;
    z-index: 20;
    top: 0;
    width: 57vw;
    max-width: none;
    height: 100vh;
    object-fit: fill;
    pointer-events: none;
    filter:
        brightness(0.74)
        saturate(1.08)
        drop-shadow(
            0 0 2.5rem
            rgba(0, 0, 0, 0.88)
        );
    transition:
        transform 1.65s
        cubic-bezier(0.77, 0, 0.175, 1),
        filter 1.2s ease;
    will-change: transform;
}

.cavern-curtain.is-left {
    left: -2vw;
    transform:
        translateX(0)
        scaleX(1.05);
    transform-origin: left center;
}

.cavern-curtain.is-right {
    right: -2vw;
    transform:
        translateX(0)
        scaleX(1.05);
    transform-origin: right center;
}

.cavern-entrance.is-entered
.cavern-curtain.is-left,
.cavern-entrance.is-leaving
.cavern-curtain.is-left {
    transform:
        translateX(-94%)
        scaleX(0.92);
}

.cavern-entrance.is-entered
.cavern-curtain.is-right,
.cavern-entrance.is-leaving
.cavern-curtain.is-right {
    transform:
        translateX(94%)
        scaleX(0.92);
}

.cavern-welcome-stage {
    position: relative;
    z-index: 12;
    display: grid;
    width: min(68rem, calc(100vw - 2rem));
    min-height: 100%;
    place-items: center;
    align-content: center;
    gap: clamp(0.5rem, 1.5vh, 1.2rem);
    padding:
        clamp(1rem, 3vw, 2rem)
        1rem;
    pointer-events: none;
}

.cavern-magic-stage {
    position: relative;
    width: min(45rem, 88vw);
    height: clamp(19rem, 48vh, 32rem);
}

.cavern-ritual-stage {
    position: absolute;
    z-index: 1;
    top: 49%;
    left: 50%;
    width: min(31rem, 72vw);
    aspect-ratio: 1;
    transform:
        translate(-50%, -50%)
        perspective(60rem)
        rotateX(66deg)
        scale(0.72);
    opacity: 0;
    transition:
        opacity 1.2s ease,
        transform 1.5s ease;
}

.cavern-entrance.is-magic-ready
.cavern-ritual-stage {
    transform:
        translate(-50%, -50%)
        perspective(60rem)
        rotateX(66deg)
        scale(1);
    opacity: 0.82;
}

.cavern-ritual-circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.cavern-ritual-circle.is-base {
    opacity: 0.74;
    filter:
        drop-shadow(
            0 0 1.4rem
            rgba(210, 164, 91, 0.2)
        );
    animation:
        cavern-ritual-rotate-base
        72s linear infinite;
}

.cavern-ritual-circle.is-glow {
    opacity: 0.42;
    filter:
        brightness(0.82)
        drop-shadow(
            0 0 1.2rem
            rgba(166, 84, 245, 0.5)
        );
    mix-blend-mode: screen;
    animation:
        cavern-ritual-rotate-glow
        46s linear infinite,
        cavern-ritual-pulse
        3.8s ease-in-out infinite;
}

.cavern-book-stage {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: min(33rem, 78vw);
    height: min(22rem, 36vh);
    transform:
        translate(-50%, -42%)
        translateY(1.5rem)
        scale(0.88);
    opacity: 0;
    transition:
        opacity 800ms ease,
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.cavern-entrance.is-visible
.cavern-book-stage {
    transform:
        translate(-50%, -42%)
        translateY(0)
        scale(1);
    opacity: 1;
}

.cavern-book-shadow {
    position: absolute;
    z-index: 0;
    right: 10%;
    bottom: 2%;
    left: 10%;
    height: 15%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.78);
    filter: blur(1.3rem);
}

.cavern-book-image {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(
            0 1rem 1.2rem
            rgba(0, 0, 0, 0.68)
        );
    transition:
        opacity 850ms ease,
        transform 1.1s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.1s ease;
}

.cavern-book-image.is-closed {
    opacity: 1;
    transform:
        translateY(0)
        scale(0.82)
        rotate(-1deg);
    animation:
        cavern-book-hover
        4.8s ease-in-out infinite;
}

.cavern-book-image.is-open {
    opacity: 0;
    transform:
        translateY(1rem)
        scale(0.72);
}

.cavern-entrance.is-book-open
.cavern-book-image.is-closed {
    opacity: 0;
    transform:
        translateY(-1rem)
        scale(0.72);
    filter:
        blur(0.3rem)
        drop-shadow(
            0 1rem 1.2rem
            rgba(0, 0, 0, 0.68)
        );
}

.cavern-entrance.is-book-open
.cavern-book-image.is-open {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
    animation:
        cavern-book-hover
        4.8s ease-in-out infinite;
}

.cavern-book-glow {
    position: absolute;
    z-index: 3;
    top: -11%;
    left: 50%;
    width: 74%;
    height: 92%;
    object-fit: contain;
    transform:
        translateX(-50%)
        translateY(1rem)
        scale(0.76);
    pointer-events: none;
    opacity: 0;
    filter:
        brightness(0.75)
        saturate(1.15)
        blur(0.08rem)
        drop-shadow(
            0 0 1.5rem
            rgba(155, 74, 239, 0.62)
        );
    mix-blend-mode: screen;
    transition:
        opacity 1.1s ease,
        transform 1.4s ease;
}

.cavern-entrance.is-magic-ready
.cavern-book-glow {
    opacity: 0.5;
    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
    animation:
        cavern-book-glow-pulse
        3.2s ease-in-out infinite;
}

.cavern-welcome-copy {
    position: relative;
    z-index: 8;
    display: grid;
    max-width: 48rem;
    justify-items: center;
    pointer-events: auto;
    text-align: center;
    opacity: 0;
    transform: translateY(1.2rem);
    transition:
        opacity 900ms ease,
        transform 900ms ease;
}

.cavern-entrance.is-copy-ready
.cavern-welcome-copy {
    opacity: 1;
    transform: none;
}

.cavern-welcome-copy > p {
    margin: 0 0 0.55rem;
    color: #deb96f;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-shadow:
        0 0 1rem
        rgba(210, 162, 90, 0.38);
    text-transform: uppercase;
}

.cavern-welcome-copy h1 {
    margin: 0;
    color: #f1e6ce;
    font-family: var(--storefront-serif);
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
    text-shadow:
        0 0.25rem 1.5rem
        rgba(0, 0, 0, 0.86);
}

.cavern-welcome-copy > strong {
    margin-top: 0.55rem;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    font-weight: 400;
    text-shadow:
        0 0.25rem 1rem
        rgba(0, 0, 0, 0.9);
}

.cavern-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.35rem;
}

.cavern-enter-button,
.cavern-skip-button {
    min-height: 3rem;
    padding: 0 1.25rem;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cavern-enter-button {
    border: 1px solid var(--storefront-brass);
    background:
        linear-gradient(
            135deg,
            #d1ad68,
            #a77f3f
        );
    color: #080a08;
    box-shadow:
        0 0 2rem
        rgba(200, 163, 97, 0.28);
}

.cavern-enter-button:hover {
    background:
        linear-gradient(
            135deg,
            #e7c780,
            #bd934c
        );
}

.cavern-skip-button {
    border: 1px solid transparent;
    background: transparent;
    color: #a99f8b;
}

.cavern-skip-button:hover {
    color: #eee3ca;
}

.cavern-procedural-fog {
    position: absolute;
    z-index: 7;
    right: -12%;
    bottom: -8%;
    left: -12%;
    height: 36%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.48;
    filter: blur(2.2rem);
}

.cavern-procedural-fog span {
    position: absolute;
    bottom: -10%;
    width: 60%;
    height: 82%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(143, 111, 157, 0.5),
            rgba(83, 65, 99, 0.26) 42%,
            transparent 72%
        );
    animation:
        cavern-fog-drift
        15s ease-in-out infinite alternate;
}

.cavern-procedural-fog span:nth-child(1) {
    left: -10%;
}

.cavern-procedural-fog span:nth-child(2) {
    left: 27%;
    opacity: 0.7;
    animation-delay: -5s;
}

.cavern-procedural-fog span:nth-child(3) {
    right: -12%;
    animation-delay: -9s;
}

.cavern-entrance-particles {
    position: absolute;
    z-index: 9;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cavern-entrance-particles span {
    position: absolute;
    bottom: -2rem;
    width: var(--particle-size, 0.3rem);
    height: var(--particle-size, 0.3rem);
    border-radius: 50%;
    opacity: 0;
    animation:
        cavern-particle-rise
        var(--particle-duration, 9s)
        linear infinite;
    animation-delay:
        var(--particle-delay, 0s);
}

.cavern-entrance-particles
span.is-gold {
    background: #ffe4a1;
    box-shadow:
        0 0 0.4rem #e9b95e,
        0 0 1rem
        rgba(226, 170, 75, 0.62);
}

.cavern-entrance-particles
span.is-purple {
    background: #dc9cff;
    box-shadow:
        0 0 0.4rem #b568ed,
        0 0 1rem
        rgba(151, 72, 215, 0.72);
}

.cavern-entrance-particles span:nth-child(1) {
    left: 8%;
    --particle-size: 0.25rem;
    --particle-duration: 9s;
    --particle-delay: -2s;
}

.cavern-entrance-particles span:nth-child(2) {
    left: 17%;
    --particle-size: 0.38rem;
    --particle-duration: 12s;
    --particle-delay: -8s;
}

.cavern-entrance-particles span:nth-child(3) {
    left: 27%;
    --particle-size: 0.18rem;
    --particle-duration: 8s;
    --particle-delay: -4s;
}

.cavern-entrance-particles span:nth-child(4) {
    left: 37%;
    --particle-size: 0.3rem;
    --particle-duration: 11s;
    --particle-delay: -6s;
}

.cavern-entrance-particles span:nth-child(5) {
    left: 46%;
    --particle-size: 0.22rem;
    --particle-duration: 9.5s;
    --particle-delay: -1s;
}

.cavern-entrance-particles span:nth-child(6) {
    left: 56%;
    --particle-size: 0.4rem;
    --particle-duration: 13s;
    --particle-delay: -10s;
}

.cavern-entrance-particles span:nth-child(7) {
    left: 64%;
    --particle-size: 0.2rem;
    --particle-duration: 8.5s;
    --particle-delay: -3s;
}

.cavern-entrance-particles span:nth-child(8) {
    left: 72%;
    --particle-size: 0.32rem;
    --particle-duration: 10s;
    --particle-delay: -7s;
}

.cavern-entrance-particles span:nth-child(9) {
    left: 81%;
    --particle-size: 0.21rem;
    --particle-duration: 9s;
    --particle-delay: -5s;
}

.cavern-entrance-particles span:nth-child(10) {
    left: 89%;
    --particle-size: 0.36rem;
    --particle-duration: 12s;
    --particle-delay: -9s;
}

.cavern-entrance-particles span:nth-child(11) {
    left: 33%;
    --particle-size: 0.16rem;
    --particle-duration: 7.5s;
    --particle-delay: -11s;
}

.cavern-entrance-particles span:nth-child(12) {
    left: 68%;
    --particle-size: 0.23rem;
    --particle-duration: 10.5s;
    --particle-delay: -2.5s;
}

.cavern-entrance.is-entered
.cavern-welcome-copy,
.cavern-entrance.is-leaving
.cavern-welcome-copy {
    opacity: 0;
    transform: translateY(-1rem);
    transition:
        opacity 450ms ease,
        transform 450ms ease;
}

.cavern-entrance.is-leaving {
    opacity: 0;
}

.storefront-replay-intro {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--storefront-muted);
    cursor: pointer;
    font-size: 0.66rem;
}

.storefront-replay-intro:hover {
    color: var(--storefront-brass-light);
}

@keyframes cavern-book-hover {
    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-0.45rem)
            scale(1.012);
    }
}

@keyframes cavern-book-glow-pulse {
    0%,
    100% {
        opacity: 0.38;
        filter:
            brightness(0.7)
            saturate(1.1)
            blur(0.08rem)
            drop-shadow(
                0 0 1.2rem
                rgba(155, 74, 239, 0.48)
            );
    }

    50% {
        opacity: 0.62;
        filter:
            brightness(0.95)
            saturate(1.25)
            blur(0.06rem)
            drop-shadow(
                0 0 2.2rem
                rgba(168, 82, 250, 0.72)
            );
    }
}

@keyframes cavern-ritual-rotate-base {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cavern-ritual-rotate-glow {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes cavern-ritual-pulse {
    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.58;
    }
}

@keyframes cavern-fog-drift {
    from {
        transform:
            translate3d(-5%, 1%, 0)
            scale(0.98);
    }

    to {
        transform:
            translate3d(8%, -7%, 0)
            scale(1.1);
    }
}

@keyframes cavern-particle-rise {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(0.5);
        opacity: 0;
    }

    12% {
        opacity: 0.78;
    }

    70% {
        opacity: 0.46;
    }

    100% {
        transform:
            translate3d(
                var(--particle-drift, 2rem),
                -105vh,
                0
            )
            scale(1.1);
        opacity: 0;
    }
}

@media (max-width: 720px) {
    .cavern-curtain {
        width: 64vw;
    }

    .cavern-magic-stage {
        width: 96vw;
        height: clamp(17rem, 43vh, 25rem);
    }

    .cavern-book-stage {
        width: min(28rem, 94vw);
        height: min(19rem, 32vh);
    }

    .cavern-ritual-stage {
        width: min(25rem, 90vw);
    }

    .cavern-welcome-stage {
        justify-content: stretch;
        gap: 0.25rem;
        padding:
            1rem
            0.5rem;
    }

    .cavern-welcome-copy h1 {
        font-size: clamp(2.2rem, 11vw, 3.3rem);
    }

    .cavern-welcome-copy > strong {
        max-width: 90vw;
    }

    .cavern-welcome-actions {
        margin-top: 0.9rem;
    }

    .cavern-procedural-fog {
        height: 27%;
    }
}

@media (max-height: 720px) {
    .cavern-magic-stage {
        height: 18rem;
    }

    .cavern-book-stage {
        height: 15rem;
    }

    .cavern-welcome-copy h1 {
        font-size: clamp(2rem, 6vh, 3.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cavern-entrance *,
    .cavern-entrance {
        animation: none !important;
        transition-duration: 0.001ms !important;
    }

    .cavern-entrance {
        display: none !important;
    }
}

/* CAVERN ENTRANCE END */


/* MYSTICAL HOMEPAGE START */

.mystic-home-hero {
    position: relative;
    min-height: calc(100vh - 11.75rem);
    overflow: hidden;
    border-bottom: 1px solid var(--storefront-line);
    background:
        radial-gradient(
            circle at 73% 43%,
            rgba(116, 71, 137, 0.28),
            transparent 30rem
        ),
        radial-gradient(
            circle at 12% 50%,
            rgba(16, 75, 46, 0.29),
            transparent 35rem
        ),
        linear-gradient(
            118deg,
            #060c08,
            #090809 55%,
            #120b14
        );
}

.mystic-home-hero::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 72%,
            rgba(0, 0, 0, 0.58)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(205, 170, 101, 0.018) 0,
            rgba(205, 170, 101, 0.018) 1px,
            transparent 1px,
            transparent 6rem
        );
    content: "";
}

.mystic-home-sky span {
    position: absolute;
    z-index: 2;
    color: rgba(225, 188, 119, 0.72);
    animation:
        mystic-star-pulse 3.5s
        ease-in-out infinite;
}

.mystic-star.is-one {
    top: 17%;
    left: 7%;
}

.mystic-star.is-two {
    top: 11%;
    right: 24%;
    font-size: 1.5rem;
    animation-delay: -1s;
}

.mystic-star.is-three {
    top: 35%;
    right: 7%;
    animation-delay: -2s;
}

.mystic-star.is-four {
    bottom: 19%;
    left: 42%;
    animation-delay: -0.5s;
}

.mystic-star.is-five {
    right: 39%;
    bottom: 13%;
    font-size: 1.3rem;
    animation-delay: -2.6s;
}

.mystic-home-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(28rem, 1.05fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
    min-height: calc(100vh - 11.75rem);
    padding-block: clamp(5rem, 9vw, 9rem);
}

.mystic-home-copy {
    max-width: 48rem;
}

.mystic-home-copy h1 {
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.86;
}

.mystic-home-copy h1 em {
    display: block;
    color: var(--storefront-brass-light);
    font-weight: 400;
}

.mystic-home-copy > p:not(.storefront-eyebrow) {
    max-width: 40rem;
    margin: 2rem 0 0;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.8;
}

.mystic-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.3rem;
}

.mystic-altar {
    position: relative;
    min-height: 43rem;
}

.mystic-altar-arch {
    position: absolute;
    top: 2rem;
    right: 4%;
    bottom: 5rem;
    left: 4%;
    border: 1px solid rgba(205, 170, 101, 0.34);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    box-shadow:
        inset 0 0 5rem rgba(91, 53, 104, 0.19),
        0 0 4rem rgba(117, 75, 137, 0.12);
}

.mystic-altar-arch::before,
.mystic-altar-arch::after {
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(205, 170, 101, 0.13);
    border-bottom: 0;
    border-radius: inherit;
    content: "";
}

.mystic-arch-rune {
    position: absolute;
    color: rgba(215, 180, 111, 0.65);
    font-size: 1.2rem;
}

.mystic-arch-rune.is-one {
    top: 30%;
    left: -0.8rem;
}

.mystic-arch-rune.is-two {
    top: 10%;
    left: 50%;
}

.mystic-arch-rune.is-three {
    top: 30%;
    right: -0.8rem;
}

.mystic-altar-moon {
    position: absolute;
    top: 8rem;
    left: 50%;
    width: 17rem;
    height: 17rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 36% 31%,
            #f0dcad,
            #b99660 38%,
            rgba(111, 76, 67, 0.35) 69%,
            transparent 71%
        );
    filter:
        drop-shadow(
            0 0 3rem
            rgba(224, 188, 120, 0.22)
        );
}

.mystic-altar-moon span {
    position: absolute;
    top: -0.7rem;
    right: -0.2rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: #0e0a10;
}

.mystic-altar-table {
    position: absolute;
    right: 5%;
    bottom: 4rem;
    left: 5%;
    height: 8rem;
    transform:
        perspective(30rem)
        rotateX(58deg);
    background:
        linear-gradient(
            #3d2119,
            #130d0b
        );
    box-shadow:
        0 -1rem 3rem rgba(0, 0, 0, 0.42);
}

.mystic-altar-edge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.8rem;
    background:
        linear-gradient(
            90deg,
            #2f170f,
            #845534,
            #2f170f
        );
}

.mystic-altar-book {
    position: absolute;
    z-index: 3;
    bottom: 8.4rem;
    left: 50%;
    width: 12rem;
    height: 6rem;
    transform:
        translateX(-50%)
        perspective(20rem)
        rotateX(55deg);
    border: 1px solid #a57945;
    background: #2c122c;
    box-shadow:
        0 0 2rem rgba(102, 58, 119, 0.32);
}

.mystic-altar-book span {
    position: absolute;
    inset: 0.7rem;
    border: 1px solid rgba(216, 173, 99, 0.57);
}

.mystic-altar-candle {
    position: absolute;
    z-index: 4;
    bottom: 9rem;
    width: 2.2rem;
    height: 8rem;
    background:
        linear-gradient(
            90deg,
            #8f744d,
            #e5d2a4,
            #887049
        );
}

.mystic-altar-candle.is-left {
    left: 20%;
}

.mystic-altar-candle.is-right {
    right: 18%;
    height: 11rem;
}

.mystic-altar-candle > span {
    position: absolute;
    top: -2.2rem;
    left: 50%;
    width: 1.1rem;
    height: 2.3rem;
    transform: translateX(-50%);
    border-radius: 70% 30% 65% 35%;
    background:
        radial-gradient(
            circle at 50% 70%,
            #fff5bd,
            #e6a647 52%,
            transparent 60%
        );
    filter:
        drop-shadow(
            0 0 0.8rem
            rgba(255, 184, 74, 0.9)
        );
    animation:
        mystic-flame 1.8s
        ease-in-out infinite alternate;
}

.mystic-altar-crystal {
    position: absolute;
    z-index: 4;
    right: 29%;
    bottom: 8.8rem;
    width: 3.5rem;
    height: 9rem;
    clip-path:
        polygon(
            50% 0,
            89% 28%,
            72% 100%,
            28% 100%,
            11% 28%
        );
    background:
        linear-gradient(
            120deg,
            #c8a1d4,
            #477961 54%,
            #17271e
        );
    box-shadow:
        0 0 2rem rgba(131, 84, 151, 0.35);
}

.cavern-hidden-rune {
    position: absolute;
    z-index: 8;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    background: transparent;
    color: rgba(222, 180, 104, 0.18);
    cursor: pointer;
    font-size: 1rem;
    text-shadow: 0 0 0 transparent;
    transition:
        color 220ms ease,
        text-shadow 220ms ease,
        transform 220ms ease;
}

.cavern-hidden-rune:hover,
.cavern-hidden-rune:focus,
.cavern-hidden-rune.is-discovered {
    color: #e4b96d;
    text-shadow:
        0 0 1rem rgba(228, 185, 109, 0.9);
    transform: scale(1.2);
}

.mystic-altar
.cavern-hidden-rune {
    right: 11%;
    bottom: 6.2rem;
}

.mystic-scroll-invitation {
    position: absolute;
    z-index: 5;
    bottom: 1.5rem;
    left: 50%;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    transform: translateX(-50%);
    color: var(--storefront-muted);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.mystic-scroll-invitation > span {
    width: 3rem;
    height: 1px;
    background: var(--storefront-line-strong);
}

.mystic-pathways,
.mystic-discoveries {
    padding-block: clamp(5rem, 10vw, 10rem);
}

.mystic-section-heading {
    max-width: 54rem;
    margin-bottom: 3rem;
}

.mystic-section-heading h2 {
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(2.8rem, 6vw, 5.6rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;
}

.mystic-section-heading > p:not(.storefront-eyebrow) {
    max-width: 40rem;
    margin: 1.3rem 0 0;
    color: var(--storefront-muted);
    font-size: 0.85rem;
    line-height: 1.8;
}

.mystic-section-heading.is-split {
    display: flex;
    max-width: none;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
}

.mystic-section-heading.is-split > div {
    max-width: 55rem;
}

.mystic-section-heading.is-split > a {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--storefront-line-strong);
    color: var(--storefront-parchment-soft);
    font-size: 0.65rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.mystic-pathway-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.mystic-pathway-card {
    position: relative;
    display: grid;
    min-height: 37rem;
    overflow: hidden;
    align-content: end;
    padding: 1.5rem;
    border: 1px solid var(--storefront-line);
    background: #0b100d;
    color: inherit;
    text-decoration: none;
    transition:
        transform 220ms ease,
        border-color 220ms ease;
}

.mystic-pathway-card:hover {
    transform: translateY(-0.4rem);
    border-color: var(--storefront-line-strong);
}

.mystic-pathway-card::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(5, 8, 6, 0.98) 5%,
            rgba(5, 8, 6, 0.28) 75%
        );
    content: "";
}

.mystic-pathway-card.is-apothecary {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(36, 115, 73, 0.36),
            transparent 16rem
        ),
        #0b100d;
}

.mystic-pathway-card.is-oracle {
    background:
        radial-gradient(
            circle at 50% 34%,
            rgba(121, 76, 143, 0.4),
            transparent 16rem
        ),
        #0c090e;
}

.mystic-pathway-card.is-library {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(146, 89, 44, 0.32),
            transparent 16rem
        ),
        #110d09;
}

.mystic-pathway-number {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    color: rgba(215, 177, 105, 0.42);
    font-family: var(--storefront-serif);
    font-size: 1.2rem;
}

.mystic-pathway-art {
    position: absolute;
    z-index: 1;
    top: 3rem;
    right: 2rem;
    left: 2rem;
    height: 19rem;
}

.mystic-bottle {
    position: absolute;
    bottom: 0;
    border: 1px solid rgba(219, 185, 120, 0.46);
    background:
        linear-gradient(
            120deg,
            rgba(134, 197, 157, 0.6),
            rgba(31, 77, 53, 0.36)
        );
    box-shadow:
        0 0 2rem rgba(43, 116, 77, 0.23);
}

.mystic-bottle::before {
    position: absolute;
    top: -2rem;
    left: 50%;
    width: 1.7rem;
    height: 2rem;
    transform: translateX(-50%);
    border: inherit;
    background: inherit;
    content: "";
}

.mystic-bottle.is-one {
    left: 11%;
    width: 5rem;
    height: 10rem;
    border-radius: 1rem 1rem 1.5rem 1.5rem;
}

.mystic-bottle.is-two {
    left: 41%;
    width: 6rem;
    height: 14rem;
    border-radius: 50% 50% 1rem 1rem;
}

.mystic-bottle.is-three {
    right: 10%;
    width: 4rem;
    height: 8rem;
    border-radius: 0.5rem 0.5rem 1.4rem 1.4rem;
}

.mystic-oracle-moon {
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 12rem;
    height: 12rem;
    transform: translateX(-50%);
    border: 1px solid rgba(222, 184, 112, 0.63);
    border-radius: 50%;
    box-shadow:
        0 0 3rem rgba(121, 76, 143, 0.35);
}

.mystic-oracle-moon::after {
    position: absolute;
    top: -0.5rem;
    right: -0.3rem;
    width: 11.5rem;
    height: 11.5rem;
    border-radius: 50%;
    background: #100b12;
    content: "";
}

.mystic-oracle-star {
    position: absolute;
    top: 6rem;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--storefront-brass-light);
    font-size: 1.4rem;
}

.mystic-book-stack {
    position: absolute;
    right: 15%;
    bottom: 2rem;
    left: 15%;
    height: 4rem;
    border: 1px solid #9a6a41;
    background: #351a2f;
    box-shadow:
        0 -4.3rem 0 -1rem #1d3829,
        0 -8.2rem 0 -1.5rem #462329;
}

.mystic-library-flame {
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 1.5rem;
    height: 3rem;
    transform: translateX(-50%);
    border-radius: 70% 30% 65% 35%;
    background:
        radial-gradient(
            circle at 50% 70%,
            #fff4bc,
            #d98c37 54%,
            transparent 60%
        );
    filter:
        drop-shadow(
            0 0 1rem
            rgba(240, 158, 62, 0.8)
        );
}

.mystic-pathway-card > div:last-child {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 0.65rem;
}

.mystic-pathway-card small,
.mystic-discovery-feature small,
.mystic-discovery-small small {
    color: var(--storefront-brass);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.mystic-pathway-card h3 {
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 400;
}

.mystic-pathway-card p {
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.75rem;
    line-height: 1.65;
}

.mystic-pathway-card strong {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.3rem;
    color: var(--storefront-brass-light);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.mystic-object-room {
    padding-block: clamp(5rem, 10vw, 10rem);
    border-block: 1px solid var(--storefront-line);
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(119, 72, 138, 0.16),
            transparent 31rem
        ),
        #090d0a;
}

.mystic-object-room-grid {
    display: grid;
    grid-template-columns:
        minmax(19rem, 0.7fr)
        minmax(0, 1.3fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.mystic-object-room-copy h2,
.mystic-seasonal-copy h2,
.mystic-quest-preview h2 {
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(2.7rem, 5vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;
}

.mystic-object-room-copy > p:not(.storefront-eyebrow),
.mystic-seasonal-copy > p:not(.storefront-eyebrow),
.mystic-quest-preview p {
    margin: 1.4rem 0 0;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: 1rem;
    line-height: 1.8;
}

.mystic-object-room-copy .storefront-button {
    margin-top: 2rem;
}

.mystic-object-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.mystic-object-card {
    display: grid;
    min-height: 17rem;
    place-items: center;
    align-content: center;
    gap: 0.55rem;
    padding: 1.2rem;
    border: 1px solid var(--storefront-line);
    background: rgba(255, 255, 255, 0.012);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.mystic-object-card:hover {
    transform: translateY(-0.3rem);
    border-color: var(--storefront-line-strong);
    background: rgba(200, 163, 97, 0.025);
}

.mystic-object-visual {
    position: relative;
    display: grid;
    width: 7rem;
    height: 8rem;
    place-items: center;
}

.mystic-object-card.is-crystal
.mystic-object-visual > span {
    width: 4rem;
    height: 7rem;
    clip-path:
        polygon(
            50% 0,
            91% 29%,
            73% 100%,
            27% 100%,
            9% 29%
        );
    background:
        linear-gradient(
            120deg,
            #d2aed9,
            #52836a 56%,
            #16271d
        );
    filter:
        drop-shadow(
            0 0 1.5rem
            rgba(119, 72, 138, 0.43)
        );
}

.mystic-object-card.is-candle
.mystic-object-visual > span {
    position: relative;
    width: 3rem;
    height: 7rem;
    background:
        linear-gradient(
            90deg,
            #977c51,
            #e2d1a4,
            #8b714b
        );
}

.mystic-object-card.is-candle
.mystic-object-visual > span::before {
    position: absolute;
    top: -2rem;
    left: 50%;
    width: 1.1rem;
    height: 2rem;
    transform: translateX(-50%);
    border-radius: 70% 30% 65% 35%;
    background:
        radial-gradient(
            circle at 50% 70%,
            #fff4bc,
            #dd9139 54%,
            transparent 61%
        );
    filter:
        drop-shadow(
            0 0 0.8rem
            rgba(243, 165, 67, 0.8)
        );
    content: "";
}

.mystic-object-card.is-card
.mystic-object-visual {
    width: 5rem;
    height: 7.5rem;
    border: 1px solid var(--storefront-brass);
    background: #221124;
    color: var(--storefront-brass-light);
    font-size: 3rem;
}

.mystic-object-card.is-herbs
.mystic-object-visual > span {
    position: relative;
    width: 0.6rem;
    height: 7rem;
    background: #5e7a54;
}

.mystic-object-card.is-herbs
.mystic-object-visual > span::before,
.mystic-object-card.is-herbs
.mystic-object-visual > span::after {
    position: absolute;
    width: 3rem;
    height: 1.4rem;
    border-radius: 100% 0;
    background: #517049;
    content: "";
}

.mystic-object-card.is-herbs
.mystic-object-visual > span::before {
    top: 1.5rem;
    right: 0;
    transform: rotate(-25deg);
}

.mystic-object-card.is-herbs
.mystic-object-visual > span::after {
    top: 3.5rem;
    left: 0;
    transform:
        rotate(25deg)
        scaleX(-1);
}

.mystic-object-card strong {
    font-family: var(--storefront-serif);
    font-size: 1.15rem;
    font-weight: 400;
}

.mystic-object-card small {
    color: var(--storefront-muted);
    font-size: 0.64rem;
}

.mystic-seasonal-story {
    padding-block: clamp(5rem, 10vw, 10rem);
    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(44, 113, 72, 0.22),
            transparent 30rem
        );
}

.mystic-seasonal-grid {
    display: grid;
    grid-template-columns:
        minmax(20rem, 0.9fr)
        minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.mystic-seasonal-art {
    position: relative;
    display: grid;
    min-height: 33rem;
    place-items: center;
    border: 1px solid var(--storefront-line);
    background:
        linear-gradient(
            140deg,
            rgba(43, 89, 59, 0.25),
            rgba(105, 60, 122, 0.16)
        );
}

.mystic-seasonal-wheel {
    position: relative;
    display: grid;
    width: 18rem;
    height: 18rem;
    place-items: center;
    border: 1px solid var(--storefront-brass);
    border-radius: 50%;
    animation:
        mystic-wheel-spin 42s
        linear infinite;
}

.mystic-seasonal-wheel::before,
.mystic-seasonal-wheel::after {
    position: absolute;
    inset: 2rem;
    transform: rotate(45deg);
    border: 1px solid rgba(205, 170, 101, 0.35);
    content: "";
}

.mystic-seasonal-wheel::after {
    inset: 4rem;
    border-radius: 50%;
}

.mystic-seasonal-wheel span {
    position: absolute;
    color: var(--storefront-brass-light);
}

.mystic-seasonal-wheel span:nth-child(1) {
    top: -0.7rem;
}

.mystic-seasonal-wheel span:nth-child(2) {
    right: -0.5rem;
}

.mystic-seasonal-wheel span:nth-child(3) {
    bottom: -0.7rem;
}

.mystic-seasonal-wheel span:nth-child(4) {
    left: -0.5rem;
}

.cavern-hidden-rune.is-seasonal {
    right: 1.5rem;
    bottom: 1.5rem;
}

.mystic-seasonal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.mystic-seasonal-links a {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--storefront-line-strong);
    color: var(--storefront-brass-light);
    font-size: 0.66rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.mystic-discoveries {
    border-top: 1px solid var(--storefront-line);
    background: #090d0a;
}

.mystic-discovery-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(17rem, 0.7fr);
    grid-template-rows:
        repeat(2, minmax(15rem, 1fr));
    gap: 1rem;
}

.mystic-discovery-feature,
.mystic-discovery-small {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--storefront-line);
    background: #0d130f;
    color: inherit;
    text-decoration: none;
}

.mystic-discovery-feature {
    grid-row: span 2;
    min-height: 36rem;
}

.mystic-discovery-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(113, 70, 132, 0.37),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #11170f,
            #0c090d
        );
}

.mystic-discovery-moon {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 14rem;
    height: 14rem;
    transform: translateX(-50%);
    border: 1px solid rgba(218, 181, 108, 0.62);
    border-radius: 50%;
}

.mystic-discovery-pedestal {
    position: absolute;
    right: 20%;
    bottom: 18%;
    left: 20%;
    height: 3rem;
    border-top: 1px solid #8f6440;
    background: #24160f;
}

.mystic-discovery-object {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--storefront-brass-light);
    font-size: 6rem;
    filter:
        drop-shadow(
            0 0 1.5rem
            rgba(218, 181, 108, 0.32)
        );
}

.mystic-discovery-feature > div:last-child {
    position: absolute;
    z-index: 3;
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
}

.mystic-discovery-feature h3,
.mystic-discovery-small h3 {
    margin: 0.5rem 0;
    font-family: var(--storefront-serif);
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: 400;
}

.mystic-discovery-feature p,
.mystic-discovery-small p {
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.72rem;
    line-height: 1.6;
}

.mystic-discovery-small {
    grid-template-columns:
        4rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
}

.mystic-discovery-small > span {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid var(--storefront-line-strong);
    border-radius: 50%;
    color: var(--storefront-brass-light);
    font-size: 1.2rem;
}

.mystic-quest-preview {
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--storefront-line);
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(116, 70, 137, 0.22),
            transparent 25rem
        ),
        #0b0a0c;
}

.mystic-quest-preview-inner {
    display: grid;
    grid-template-columns:
        14rem minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    max-width: 70rem;
}

.mystic-quest-symbol {
    position: relative;
    display: grid;
    width: 14rem;
    height: 14rem;
    place-items: center;
    border: 1px solid var(--storefront-brass);
    border-radius: 50%;
    color: var(--storefront-brass-light);
    box-shadow:
        0 0 4rem rgba(113, 70, 132, 0.2);
}

.mystic-quest-symbol::before,
.mystic-quest-symbol::after {
    position: absolute;
    inset: 2rem;
    transform: rotate(45deg);
    border: 1px solid rgba(205, 170, 101, 0.35);
    content: "";
}

.mystic-quest-symbol span:first-child {
    font-size: 4rem;
}

.mystic-quest-symbol span:last-child {
    position: absolute;
}

.mystic-quest-preview small {
    display: block;
    margin-top: 1rem;
    color: var(--storefront-brass);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mystic-final-invitation {
    padding-block: clamp(7rem, 14vw, 14rem);
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(116, 70, 137, 0.27),
            transparent 30rem
        );
}

.mystic-final-invitation > div {
    display: grid;
    justify-items: center;
}

.mystic-final-symbol {
    margin-bottom: 1rem;
    color: var(--storefront-brass-light);
    font-size: 1.8rem;
}

.mystic-final-invitation h2 {
    max-width: 70rem;
    margin: 0;
    font-family: var(--storefront-serif);
    font-size: clamp(3rem, 8vw, 7.2rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.94;
}

.mystic-final-invitation
p:not(.storefront-eyebrow) {
    max-width: 39rem;
    margin: 1.5rem 0 2rem;
    color: var(--storefront-parchment-soft);
    font-family: var(--storefront-serif);
    font-size: 1.05rem;
    line-height: 1.8;
}

@keyframes cavern-book-float {
    50% {
        transform: translateY(-0.6rem);
    }
}

@keyframes cavern-book-open {
    to {
        transform:
            rotateX(-175deg)
            translateY(-0.8rem);
    }
}

@keyframes cavern-page-turn {
    0% {
        transform: rotateY(0);
        opacity: 1;
    }

    100% {
        transform: rotateY(-180deg);
        opacity: 1;
    }
}

@keyframes cavern-book-light {
    to {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes cavern-welcome-appear {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cavern-mist-drift {
    to {
        transform: translateX(14rem);
    }
}

@keyframes cavern-particle-float {
    50% {
        transform: translateY(-1.2rem);
        opacity: 0.45;
    }
}

@keyframes mystic-star-pulse {
    50% {
        transform: scale(0.72);
        opacity: 0.35;
    }
}

@keyframes mystic-flame {
    from {
        transform:
            translateX(-50%)
            rotate(-5deg)
            scale(0.94);
    }

    to {
        transform:
            translateX(-50%)
            rotate(6deg)
            scale(1.06);
    }
}

@keyframes mystic-wheel-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1050px) {
    .mystic-home-hero-grid,
    .mystic-object-room-grid,
    .mystic-seasonal-grid {
        grid-template-columns: 1fr;
    }

    .mystic-altar {
        min-height: 36rem;
    }

    .mystic-pathway-grid {
        grid-template-columns: 1fr;
    }

    .mystic-pathway-card {
        min-height: 29rem;
    }

    .mystic-discovery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .mystic-discovery-feature {
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .cavern-spellbook {
        height: 14rem;
    }

    .cavern-welcome-stage {
        gap: 0.5rem;
    }

    .cavern-welcome-copy h1 {
        font-size: 2.7rem;
    }

    .mystic-home-hero {
        min-height: auto;
    }

    .mystic-home-hero-grid {
        min-height: auto;
        padding-block: 5rem 8rem;
    }

    .mystic-home-copy h1 {
        font-size: clamp(3.6rem, 17vw, 6rem);
    }

    .mystic-altar {
        min-height: 28rem;
        transform: scale(0.82);
        margin-inline: -4rem;
    }

    .mystic-pathway-card {
        min-height: 27rem;
    }

    .mystic-object-grid {
        grid-template-columns: 1fr;
    }

    .mystic-seasonal-art {
        min-height: 24rem;
    }

    .mystic-seasonal-wheel {
        width: 14rem;
        height: 14rem;
    }

    .mystic-section-heading.is-split {
        display: grid;
    }

    .mystic-discovery-feature {
        min-height: 30rem;
    }

    .mystic-quest-preview-inner {
        grid-template-columns: 1fr;
    }

    .mystic-quest-symbol {
        width: 10rem;
        height: 10rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cavern-entrance,
    .cavern-entrance *,
    .mystic-home-hero *,
    .mystic-seasonal-wheel {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .cavern-entrance {
        display: none;
    }
}

/* MYSTICAL HOMEPAGE END */

/* CLOSED CURTAIN REVEAL V2 START */

.cavern-curtain-layer,
.cavern-closed-curtain-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cavern-curtain-layer {
    z-index: 19;
}

.cavern-closed-curtain-layer {
    z-index: 22;
}

.cavern-curtain {
    position: absolute;
    top: 0;
    width: min(54vw, 64rem);
    height: 100vh;
    object-fit: contain;
    pointer-events: none;
    opacity: 1;
    filter:
        brightness(0.78)
        saturate(1.04)
        drop-shadow(
            0 0 2.5rem
            rgba(0, 0, 0, 0.86)
        );
    transition:
        opacity 700ms ease,
        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);
    will-change:
        opacity,
        transform;
}

.cavern-curtain.is-left {
    left: -3.5vw;
    right: auto;
    object-position: left top;
    transform:
        translateX(-5%)
        scale(1.02);
    transform-origin: left top;
}

.cavern-curtain.is-right {
    right: -3.5vw;
    left: auto;
    object-position: right top;
    transform:
        translateX(5%)
        scale(1.02);
    transform-origin: right top;
}

.cavern-curtain-closed {
    position: absolute;
    top: -2vh;
    width: 51.25vw;
    height: 104vh;
    object-fit: fill;
    pointer-events: none;
    filter:
        brightness(0.73)
        saturate(1.08)
        drop-shadow(
            0 0 2.2rem
            rgba(0, 0, 0, 0.92)
        );
    transition:
        transform 1.75s
        cubic-bezier(0.77, 0, 0.175, 1),
        filter 1.3s ease;
    will-change: transform;
}

.cavern-curtain-closed.is-left {
    left: -0.6vw;
    transform:
        translateX(0)
        scaleX(1.015);
    transform-origin: left center;
}

.cavern-curtain-closed.is-right {
    right: -0.6vw;
    transform:
        translateX(0)
        scaleX(1.015);
    transform-origin: right center;
}

.cavern-curtain-centre-shadow {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2.5rem;
    pointer-events: none;
    opacity: 0.92;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, 0.78) 47%,
            rgba(0, 0, 0, 0.9) 50%,
            rgba(0, 0, 0, 0.78) 53%,
            transparent
        );
    filter: blur(0.45rem);
    transition:
        opacity 350ms ease;
}

.cavern-welcome-stage {
    z-index: 25;
}

.cavern-entrance.is-curtains-opening
.cavern-curtain-centre-shadow {
    opacity: 0;
}

.cavern-entrance.is-curtains-opening
.cavern-curtain-closed.is-left,
.cavern-entrance.is-curtains-open
.cavern-curtain-closed.is-left {
    transform:
        translateX(-101%)
        scaleX(0.92);
}

.cavern-entrance.is-curtains-opening
.cavern-curtain-closed.is-right,
.cavern-entrance.is-curtains-open
.cavern-curtain-closed.is-right {
    transform:
        translateX(101%)
        scaleX(0.92);
}

.cavern-entrance.is-curtains-open
.cavern-curtain.is-left {
    transform:
        translateX(0)
        scale(1);
}

.cavern-entrance.is-curtains-open
.cavern-curtain.is-right {
    transform:
        translateX(0)
        scale(1);
}

/*
 * Once the visitor enters, the decorative tied-back curtains
 * also move slightly outward as the complete intro fades away.
 */

.cavern-entrance.is-entered
.cavern-curtain.is-left,
.cavern-entrance.is-leaving
.cavern-curtain.is-left {
    transform:
        translateX(-14%)
        scale(1);
}

.cavern-entrance.is-entered
.cavern-curtain.is-right,
.cavern-entrance.is-leaving
.cavern-curtain.is-right {
    transform:
        translateX(14%)
        scale(1);
}

@media (max-width: 720px) {
    .cavern-curtain-closed {
        width: 51.5vw;
    }

    .cavern-curtain {
        width: 63vw;
    }

    .cavern-curtain.is-left {
        left: -9vw;
    }

    .cavern-curtain.is-right {
        right: -9vw;
    }
}

@media (max-height: 650px) {
    .cavern-curtain {
        width: min(48vw, 48rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cavern-curtain,
    .cavern-curtain-closed,
    .cavern-curtain-centre-shadow {
        animation: none !important;
        transition-duration: 0.001ms !important;
    }
}

/* CLOSED CURTAIN REVEAL V2 END */

/* CURTAIN RESET AND SEAM FIX START */

.cavern-entrance.is-resetting
.cavern-curtain,
.cavern-entrance.is-resetting
.cavern-curtain-closed,
.cavern-entrance.is-resetting
.cavern-curtain-centre-shadow {
    transition: none !important;
}

.cavern-entrance.is-resetting
.cavern-curtain-closed.is-left {
    transform:
        translateX(0)
        scaleX(1.02);
}

.cavern-entrance.is-resetting
.cavern-curtain-closed.is-right {
    transform:
        translateX(0)
        scaleX(1.02);
}

.cavern-entrance.is-resetting
.cavern-curtain-centre-shadow {
    opacity: 0.72;
}

/* CURTAIN RESET AND SEAM FIX END */

/* ENTRANCE SEQUENCE ALIGNMENT V3 START */

/*
 * These values deliberately remain separate for every curtain asset.
 * They can be adjusted independently after the live visual review.
 */

.cavern-entrance {
    --closed-left-width: 51.45vw;
    --closed-left-height: 104vh;
    --closed-left-x: -0.85vw;
    --closed-left-y: -2vh;
    --closed-left-scale-x: 1.025;

    --closed-right-width: 51.55vw;
    --closed-right-height: 104vh;
    --closed-right-x: -0.9vw;
    --closed-right-y: -2vh;
    --closed-right-scale-x: 1.025;

    --open-left-width: 55vw;
    --open-left-height: 103vh;
    --open-left-x: -6.2vw;
    --open-left-y: -1.5vh;
    --open-left-scale: 1.015;

    --open-right-width: 55vw;
    --open-right-height: 103vh;
    --open-right-x: -6.3vw;
    --open-right-y: -1.5vh;
    --open-right-scale: 1.015;
}


/* ------------------------------------------------------------
   CLOSED CURTAINS
   ------------------------------------------------------------ */

.cavern-curtain-closed {
    top: auto;
    bottom: auto;
    object-fit: fill;
}

.cavern-curtain-closed.is-left {
    top: var(--closed-left-y);
    left: var(--closed-left-x);
    width: var(--closed-left-width);
    height: var(--closed-left-height);
    transform:
        translateX(0)
        scaleX(
            var(--closed-left-scale-x)
        );
}

.cavern-curtain-closed.is-right {
    top: var(--closed-right-y);
    right: var(--closed-right-x);
    width: var(--closed-right-width);
    height: var(--closed-right-height);
    transform:
        translateX(0)
        scaleX(
            var(--closed-right-scale-x)
        );
}


/*
 * Slight overlap removes any visible centre slit caused by antialiasing
 * or uneven alpha at the inside edges.
 */

.cavern-curtain-closed.is-left {
    clip-path:
        inset(
            0
            -0.75vw
            0
            0
        );
}

.cavern-curtain-closed.is-right {
    clip-path:
        inset(
            0
            0
            0
            -0.75vw
        );
}


/* ------------------------------------------------------------
   TIED-BACK / OPEN CURTAINS
   ------------------------------------------------------------ */

.cavern-curtain {
    top: auto;
    bottom: auto;
    object-fit: contain;
    opacity: 0;
    transition:
        opacity 900ms ease,
        transform 1.35s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s ease;
}

.cavern-curtain.is-left {
    top: var(--open-left-y);
    left: var(--open-left-x);
    width: var(--open-left-width);
    height: var(--open-left-height);
    transform:
        translateX(-4%)
        scale(
            var(--open-left-scale)
        );
}

.cavern-curtain.is-right {
    top: var(--open-right-y);
    right: var(--open-right-x);
    width: var(--open-right-width);
    height: var(--open-right-height);
    transform:
        translateX(4%)
        scale(
            var(--open-right-scale)
        );
}


/*
 * Fade the tied-back state in while the closed panels still overlap it.
 * This prevents a visible single-frame asset replacement.
 */

.cavern-entrance.is-curtains-opening
.cavern-curtain,
.cavern-entrance.is-curtains-open
.cavern-curtain {
    opacity: 1;
}

.cavern-entrance.is-curtains-opening
.cavern-curtain.is-left,
.cavern-entrance.is-curtains-open
.cavern-curtain.is-left {
    transform:
        translateX(0)
        scale(
            var(--open-left-scale)
        );
}

.cavern-entrance.is-curtains-opening
.cavern-curtain.is-right,
.cavern-entrance.is-curtains-open
.cavern-curtain.is-right {
    transform:
        translateX(0)
        scale(
            var(--open-right-scale)
        );
}


/*
 * Closed curtain travel starts only after the tied-back artwork has
 * begun fading in underneath it.
 */

.cavern-curtain-closed {
    transition:
        transform 1.8s
        cubic-bezier(0.77, 0, 0.175, 1),
        filter 1.2s ease;
}

.cavern-entrance.is-curtains-opening
.cavern-curtain-closed.is-left,
.cavern-entrance.is-curtains-open
.cavern-curtain-closed.is-left {
    transform:
        translateX(-103%)
        scaleX(0.91);
}

.cavern-entrance.is-curtains-opening
.cavern-curtain-closed.is-right,
.cavern-entrance.is-curtains-open
.cavern-curtain-closed.is-right {
    transform:
        translateX(103%)
        scaleX(0.91);
}


/* ------------------------------------------------------------
   BOOK TIMING
   ------------------------------------------------------------ */

/*
 * The book no longer appears merely because the entrance is visible.
 * It receives its own explicit timeline state.
 */

.cavern-book-stage,
.cavern-entrance.is-visible
.cavern-book-stage {
    opacity: 0;
    transform:
        translate(-50%, -38%)
        translateY(2.2rem)
        scale(0.78);
}

.cavern-entrance.is-book-ready
.cavern-book-stage {
    opacity: 1;
    transform:
        translate(-50%, -42%)
        translateY(0)
        scale(1);
}


/*
 * Closed book remains visible for a clear hold before the transition.
 */

.cavern-book-image.is-closed {
    opacity: 1;
    transform:
        translateY(0)
        scale(0.84)
        rotate(-1deg);
}

.cavern-book-image.is-open {
    opacity: 0;
    transform:
        translateY(1rem)
        scale(0.78);
}


/*
 * A short magical flash masks the closed/open asset transition.
 */

.cavern-book-stage::after {
    position: absolute;
    z-index: 6;
    top: 47%;
    left: 50%;
    width: 48%;
    aspect-ratio: 1.7;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(246, 221, 255, 0.96),
            rgba(193, 115, 255, 0.72) 23%,
            rgba(119, 51, 187, 0.24) 52%,
            transparent 72%
        );
    content: "";
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(0.45);
    filter: blur(0.55rem);
    mix-blend-mode: screen;
}

.cavern-entrance.is-book-opening
.cavern-book-stage::after {
    animation:
        cavern-book-transition-flash
        900ms ease-out both;
}


/*
 * The book replacement begins during the centre of the flash.
 */

.cavern-entrance.is-book-open
.cavern-book-image.is-closed {
    opacity: 0;
    transform:
        translateY(-0.8rem)
        scale(0.7);
    filter:
        blur(0.25rem)
        brightness(1.35)
        drop-shadow(
            0 1rem 1.2rem
            rgba(0, 0, 0, 0.68)
        );
}

.cavern-entrance.is-book-open
.cavern-book-image.is-open {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}


/* ------------------------------------------------------------
   MAGIC AND COPY
   ------------------------------------------------------------ */

.cavern-ritual-stage,
.cavern-book-glow,
.cavern-light-rays {
    transition-delay: 0ms;
}

.cavern-welcome-copy {
    visibility: hidden;
    pointer-events: none;
}

.cavern-entrance.is-copy-ready
.cavern-welcome-copy {
    visibility: visible;
    pointer-events: auto;
}


/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */

/*
 * Replay and initial activation must establish the complete closed
 * state without visually animating back into it.
 */

.cavern-entrance.is-resetting,
.cavern-entrance.is-resetting *,
.cavern-entrance.is-resetting
.cavern-curtain,
.cavern-entrance.is-resetting
.cavern-curtain-closed {
    animation: none !important;
    transition: none !important;
}

.cavern-entrance.is-resetting
.cavern-curtain {
    opacity: 0;
}

.cavern-entrance.is-resetting
.cavern-curtain-closed.is-left {
    transform:
        translateX(0)
        scaleX(
            var(--closed-left-scale-x)
        );
}

.cavern-entrance.is-resetting
.cavern-curtain-closed.is-right {
    transform:
        translateX(0)
        scaleX(
            var(--closed-right-scale-x)
        );
}

.cavern-entrance.is-resetting
.cavern-book-stage {
    opacity: 0;
    transform:
        translate(-50%, -38%)
        translateY(2.2rem)
        scale(0.78);
}

.cavern-entrance.is-resetting
.cavern-welcome-copy {
    opacity: 0;
    visibility: hidden;
}


/* ------------------------------------------------------------
   ANIMATION
   ------------------------------------------------------------ */

@keyframes cavern-book-transition-flash {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    38% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.05);
    }

    65% {
        opacity: 0.72;
        transform:
            translate(-50%, -50%)
            scale(1.4);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.8);
    }
}


/* ------------------------------------------------------------
   RESPONSIVE ALIGNMENT
   ------------------------------------------------------------ */

@media (max-width: 720px) {
    .cavern-entrance {
        --closed-left-width: 52vw;
        --closed-left-height: 103vh;
        --closed-left-x: -1vw;
        --closed-left-y: -1.5vh;

        --closed-right-width: 52vw;
        --closed-right-height: 103vh;
        --closed-right-x: -1vw;
        --closed-right-y: -1.5vh;

        --open-left-width: 69vw;
        --open-left-height: 102vh;
        --open-left-x: -17vw;
        --open-left-y: -1vh;

        --open-right-width: 69vw;
        --open-right-height: 102vh;
        --open-right-x: -17vw;
        --open-right-y: -1vh;
    }
}

/* ENTRANCE SEQUENCE ALIGNMENT V3 END */

/* CURTAINS-FIRST SEQUENCE START */

/*
 * Nothing belonging to the magical welcome sequence may appear
 * until the closed curtains have completely opened.
 */

.cavern-book-stage,
.cavern-ritual-stage,
.cavern-light-rays,
.cavern-book-glow,
.cavern-welcome-copy {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * The closed book is introduced only after the curtains have reached
 * their open position and the tied-back curtains have settled.
 */

.cavern-entrance.is-curtains-open.is-book-ready
.cavern-book-stage {
    opacity: 1;
    visibility: visible;
    transform:
        translate(-50%, -42%)
        translateY(0)
        scale(1);
}

/*
 * Ritual circle, rays and magical glow remain hidden until their own
 * later stage, even though the curtains are already open.
 */

.cavern-entrance.is-curtains-open.is-magic-ready
.cavern-ritual-stage {
    opacity: 0.82;
    visibility: visible;
}

.cavern-entrance.is-curtains-open.is-magic-ready
.cavern-light-rays {
    visibility: visible;
}

.cavern-entrance.is-curtains-open.is-magic-ready
.cavern-light-rays.is-gold {
    opacity: 0.18;
}

.cavern-entrance.is-curtains-open.is-magic-ready
.cavern-light-rays.is-purple {
    opacity: 0.13;
}

.cavern-entrance.is-curtains-open.is-magic-ready
.cavern-book-glow {
    opacity: 0.5;
    visibility: visible;
    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
    animation:
        cavern-book-glow-pulse
        3.2s ease-in-out infinite;
}

/*
 * Copy is the final beat and cannot become interactive early.
 */

.cavern-entrance.is-curtains-open.is-copy-ready
.cavern-welcome-copy {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/*
 * During reset and while the curtains are closed, explicitly suppress
 * every later layer to prevent stale classes or replay frames leaking.
 */

.cavern-entrance.is-resetting
.cavern-book-stage,
.cavern-entrance.is-resetting
.cavern-ritual-stage,
.cavern-entrance.is-resetting
.cavern-light-rays,
.cavern-entrance.is-resetting
.cavern-book-glow,
.cavern-entrance.is-resetting
.cavern-welcome-copy {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
    transition: none !important;
}

/* CURTAINS-FIRST SEQUENCE END */

/* CURTAIN VIEWPORT SIZING V4 START */

/*
 * Desktop alignment.
 *
 * Curtains deliberately extend beyond every viewport edge so neither
 * transparent antialiasing nor browser scaling can expose a top gap.
 */

.cavern-entrance {
    --closed-left-width: 51.7vw;
    --closed-left-height: 108dvh;
    --closed-left-x: -1.15vw;
    --closed-left-y: -4dvh;
    --closed-left-scale-x: 1.025;

    --closed-right-width: 51.7vw;
    --closed-right-height: 108dvh;
    --closed-right-x: -1.15vw;
    --closed-right-y: -4dvh;
    --closed-right-scale-x: 1.025;

    --open-left-width: 53vw;
    --open-left-height: 106dvh;
    --open-left-x: -5vw;
    --open-left-y: -3dvh;
    --open-left-scale: 1;

    --open-right-width: 53vw;
    --open-right-height: 106dvh;
    --open-right-x: -5vw;
    --open-right-y: -3dvh;
    --open-right-scale: 1;
}

.cavern-closed-curtain-layer,
.cavern-curtain-layer {
    inset: 0;
    width: 100vw;
    height: 100dvh;
}

.cavern-curtain-closed {
    max-width: none;
    object-fit: fill;
    object-position: center;
}

.cavern-curtain {
    max-width: none;
    object-fit: contain;
}

.cavern-curtain.is-left {
    object-position: left top;
}

.cavern-curtain.is-right {
    object-position: right top;
}


/*
 * Portrait phones require a separate composition.
 *
 * The closed panels remain almost exactly half-screen. The tied-back
 * curtains are narrower than the previous 69vw rule so they frame the
 * cavern instead of consuming most of the mobile viewport.
 */

@media (
    max-width: 720px
) and (
    orientation: portrait
) {
    .cavern-entrance {
        --closed-left-width: 52.25vw;
        --closed-left-height: 108dvh;
        --closed-left-x: -1.4vw;
        --closed-left-y: -4dvh;
        --closed-left-scale-x: 1.02;

        --closed-right-width: 52.25vw;
        --closed-right-height: 108dvh;
        --closed-right-x: -1.4vw;
        --closed-right-y: -4dvh;
        --closed-right-scale-x: 1.02;

        --open-left-width: 54vw;
        --open-left-height: 103dvh;
        --open-left-x: -14vw;
        --open-left-y: -1.5dvh;
        --open-left-scale: 1;

        --open-right-width: 54vw;
        --open-right-height: 103dvh;
        --open-right-x: -14vw;
        --open-right-y: -1.5dvh;
        --open-right-scale: 1;
    }

    .cavern-curtain {
        object-fit: contain;
    }

    .cavern-curtain.is-left {
        object-position: left top;
    }

    .cavern-curtain.is-right {
        object-position: right top;
    }

    .cavern-curtain-centre-shadow {
        width: 1.25rem;
    }
}


/*
 * Mobile landscape is much closer to desktop proportions but still
 * needs slightly larger closed panels to prevent edge gaps.
 */

@media (
    max-width: 960px
) and (
    orientation: landscape
) {
    .cavern-entrance {
        --closed-left-width: 51.8vw;
        --closed-left-height: 110dvh;
        --closed-left-x: -1.25vw;
        --closed-left-y: -5dvh;

        --closed-right-width: 51.8vw;
        --closed-right-height: 110dvh;
        --closed-right-x: -1.25vw;
        --closed-right-y: -5dvh;

        --open-left-width: 51vw;
        --open-left-height: 108dvh;
        --open-left-x: -4vw;
        --open-left-y: -4dvh;

        --open-right-width: 51vw;
        --open-right-height: 108dvh;
        --open-right-x: -4vw;
        --open-right-y: -4dvh;
    }
}


/*
 * Fallback for browsers that do not yet expose dynamic viewport units.
 */

@supports not (height: 100dvh) {
    .cavern-closed-curtain-layer,
    .cavern-curtain-layer {
        height: 100vh;
    }

    .cavern-entrance {
        --closed-left-height: 108vh;
        --closed-left-y: -4vh;

        --closed-right-height: 108vh;
        --closed-right-y: -4vh;

        --open-left-height: 106vh;
        --open-left-y: -3vh;

        --open-right-height: 106vh;
        --open-right-y: -3vh;
    }
}

/* CURTAIN VIEWPORT SIZING V4 END */

/* FINAL CURTAIN RESPONSIVE OVERRIDE START */

@media (min-width: 721px) {
    .cavern-entrance {
        --closed-left-width: 51.8vw !important;
        --closed-left-height: 110dvh !important;
        --closed-left-x: -1.4vw !important;
        --closed-left-y: -5dvh !important;

        --closed-right-width: 51.8vw !important;
        --closed-right-height: 110dvh !important;
        --closed-right-x: -1.4vw !important;
        --closed-right-y: -5dvh !important;

        --open-left-width: 53vw !important;
        --open-left-height: 108dvh !important;
        --open-left-x: -5vw !important;
        --open-left-y: -4dvh !important;

        --open-right-width: 53vw !important;
        --open-right-height: 108dvh !important;
        --open-right-x: -5vw !important;
        --open-right-y: -4dvh !important;
    }
}

@media (max-width: 720px) and (orientation: portrait) {
    .cavern-entrance {
        --closed-left-width: 53vw !important;
        --closed-left-height: 112dvh !important;
        --closed-left-x: -2vw !important;
        --closed-left-y: -6dvh !important;

        --closed-right-width: 53vw !important;
        --closed-right-height: 112dvh !important;
        --closed-right-x: -2vw !important;
        --closed-right-y: -6dvh !important;

        --open-left-width: 46vw !important;
        --open-left-height: 106dvh !important;
        --open-left-x: -15vw !important;
        --open-left-y: -3dvh !important;

        --open-right-width: 46vw !important;
        --open-right-height: 106dvh !important;
        --open-right-x: -15vw !important;
        --open-right-y: -3dvh !important;
    }

    .cavern-curtain-closed {
        object-fit: fill !important;
    }

    .cavern-curtain {
        object-fit: contain !important;
    }
}

/* FINAL CURTAIN RESPONSIVE OVERRIDE END */

/* DEDICATED MOBILE ENTRANCE START */

/*
 * Desktop and mobile entrances are now completely independent.
 */

.mobile-cavern-entrance {
    display: none;
}

@media (max-width: 720px) {
    .cavern-entrance[
        data-cavern-mode="desktop"
    ] {
        display: none !important;
    }

    .mobile-cavern-entrance {
        position: fixed;
        z-index: 500;
        inset: 0;
        display: grid;
        overflow: hidden;
        width: 100vw;
        height: 100dvh;
        place-items: center;
        background: #030303;
        opacity: 0;
        visibility: hidden;
        isolation: isolate;
        transition:
            opacity 350ms ease,
            visibility 350ms ease;
    }

    .mobile-cavern-entrance.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .mobile-cavern-entrance.is-hidden {
        display: none !important;
    }

    .mobile-cavern-background {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        transform: scale(1.12);
        filter:
            brightness(0.56)
            saturate(0.95);
        transition:
            transform 3s ease,
            filter 2s ease;
    }

    .mobile-cavern-entrance.is-curtains-open
    .mobile-cavern-background {
        transform: scale(1.04);
        filter:
            brightness(0.78)
            saturate(1.08);
    }

    .mobile-cavern-shade {
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.42),
                transparent 25%,
                transparent 62%,
                rgba(0, 0, 0, 0.72)
            ),
            radial-gradient(
                ellipse at center,
                transparent 20%,
                rgba(0, 0, 0, 0.6) 100%
            );
    }

    .mobile-cavern-rays {
        position: absolute;
        z-index: 2;
        top: -6dvh;
        left: 50%;
        width: 145vw;
        height: 70dvh;
        object-fit: contain;
        transform:
            translateX(-50%)
            scaleY(0.85);
        opacity: 0;
        pointer-events: none;
        filter: brightness(0.75);
        mix-blend-mode: screen;
        transition:
            opacity 1.2s ease,
            transform 1.4s ease;
    }

    .mobile-cavern-entrance.is-magic-ready
    .mobile-cavern-rays {
        opacity: 0.16;
        transform:
            translateX(-50%)
            scaleY(1);
    }

    .mobile-cavern-open-curtains,
    .mobile-cavern-closed-curtains {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
        pointer-events: none;
    }

    .mobile-cavern-open-curtains {
        z-index: 12;
    }

    .mobile-cavern-closed-curtains {
        z-index: 18;
    }

    /*
     * Open curtains deliberately frame only the outer edges.
     */

    .mobile-open-curtain {
        position: absolute;
        top: -2dvh;
        width: 64vw;
        height: 104dvh;
        object-fit: contain;
        opacity: 0;
        filter:
            brightness(0.8)
            saturate(1.05)
            drop-shadow(
                0 0 1.5rem
                rgba(0, 0, 0, 0.85)
            );
        transition:
            opacity 700ms ease,
            transform 1.1s ease;
    }

    .mobile-open-curtain.is-left {
        left: -24vw;
        object-position: left top;
        transform: translateX(-5%);
    }

    .mobile-open-curtain.is-right {
        right: -24vw;
        object-position: right top;
        transform: translateX(5%);
    }

    .mobile-cavern-entrance.is-curtains-opening
    .mobile-open-curtain,
    .mobile-cavern-entrance.is-curtains-open
    .mobile-open-curtain {
        opacity: 1;
        transform: translateX(0);
    }

    /*
     * Closed curtains fill each half independently.
     */

    .mobile-closed-curtain {
        position: absolute;
        top: -5dvh;
        width: 52vw;
        height: 110dvh;
        max-width: none;
        object-fit: fill;
        filter:
            brightness(0.74)
            saturate(1.08)
            drop-shadow(
                0 0 1.8rem
                rgba(0, 0, 0, 0.92)
            );
        transition:
            transform 1.75s
            cubic-bezier(0.77, 0, 0.175, 1);
        will-change: transform;
    }

    .mobile-closed-curtain.is-left {
        left: -1.4vw;
        transform:
            translateX(0)
            scaleX(1.03);
        transform-origin: left center;
    }

    .mobile-closed-curtain.is-right {
        right: -1.4vw;
        transform:
            translateX(0)
            scaleX(1.03);
        transform-origin: right center;
    }

    .mobile-cavern-entrance.is-curtains-opening
    .mobile-closed-curtain.is-left,
    .mobile-cavern-entrance.is-curtains-open
    .mobile-closed-curtain.is-left {
        transform:
            translateX(-104%)
            scaleX(0.9);
    }

    .mobile-cavern-entrance.is-curtains-opening
    .mobile-closed-curtain.is-right,
    .mobile-cavern-entrance.is-curtains-open
    .mobile-closed-curtain.is-right {
        transform:
            translateX(104%)
            scaleX(0.9);
    }

    .mobile-curtain-seam {
        position: absolute;
        z-index: 3;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1.5rem;
        transform: translateX(-50%);
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(0, 0, 0, 0.88),
                transparent
            );
        filter: blur(0.3rem);
        transition: opacity 300ms ease;
    }

    .mobile-cavern-entrance.is-curtains-opening
    .mobile-curtain-seam {
        opacity: 0;
    }

    .mobile-cavern-content {
        position: relative;
        z-index: 14;
        display: grid;
        width: 100%;
        height: 100dvh;
        grid-template-rows:
            minmax(0, 1fr)
            auto;
        align-items: center;
        padding:
            max(1rem, env(safe-area-inset-top))
            1rem
            max(1.5rem, env(safe-area-inset-bottom));
        pointer-events: none;
    }

    .mobile-cavern-magic {
        position: relative;
        align-self: end;
        width: 100%;
        height: min(52dvh, 29rem);
        opacity: 0;
        visibility: hidden;
    }

    .mobile-cavern-entrance.is-book-ready
    .mobile-cavern-magic {
        opacity: 1;
        visibility: visible;
    }

    .mobile-ritual-stage {
        position: absolute;
        z-index: 1;
        top: 54%;
        left: 50%;
        width: min(82vw, 25rem);
        aspect-ratio: 1;
        opacity: 0;
        transform:
            translate(-50%, -50%)
            perspective(40rem)
            rotateX(66deg)
            scale(0.72);
        transition:
            opacity 1s ease,
            transform 1.2s ease;
    }

    .mobile-cavern-entrance.is-magic-ready
    .mobile-ritual-stage {
        opacity: 0.76;
        transform:
            translate(-50%, -50%)
            perspective(40rem)
            rotateX(66deg)
            scale(1);
    }

    .mobile-ritual {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-ritual.is-base {
        opacity: 0.68;
        animation:
            mobile-ritual-base
            70s linear infinite;
    }

    .mobile-ritual.is-glow {
        opacity: 0.4;
        mix-blend-mode: screen;
        animation:
            mobile-ritual-glow
            45s linear infinite,
            mobile-ritual-pulse
            3.4s ease-in-out infinite;
    }

    .mobile-book-stage {
        position: absolute;
        z-index: 4;
        top: 48%;
        left: 50%;
        width: min(92vw, 30rem);
        height: min(34dvh, 20rem);
        transform:
            translate(-50%, -44%)
            translateY(1.5rem)
            scale(0.82);
        opacity: 0;
        transition:
            opacity 750ms ease,
            transform 900ms
            cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-cavern-entrance.is-book-ready
    .mobile-book-stage {
        opacity: 1;
        transform:
            translate(-50%, -44%)
            translateY(0)
            scale(1);
    }

    .mobile-book,
    .mobile-book-glow {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-book {
        z-index: 2;
        transition:
            opacity 750ms ease,
            transform 900ms ease,
            filter 750ms ease;
        filter:
            drop-shadow(
                0 0.8rem 1.2rem
                rgba(0, 0, 0, 0.78)
            );
    }

    .mobile-book.is-closed {
        opacity: 1;
        transform: scale(0.82);
    }

    .mobile-book.is-open {
        opacity: 0;
        transform:
            translateY(0.6rem)
            scale(0.76);
    }

    .mobile-cavern-entrance.is-book-open
    .mobile-book.is-closed {
        opacity: 0;
        transform:
            translateY(-0.7rem)
            scale(0.7);
        filter:
            blur(0.18rem)
            brightness(1.35);
    }

    .mobile-cavern-entrance.is-book-open
    .mobile-book.is-open {
        opacity: 1;
        transform: scale(1);
    }

    .mobile-book-glow {
        z-index: 3;
        top: -12%;
        left: 10%;
        width: 80%;
        opacity: 0;
        filter:
            brightness(0.8)
            drop-shadow(
                0 0 1.5rem
                rgba(163, 73, 242, 0.62)
            );
        mix-blend-mode: screen;
        transition:
            opacity 1s ease,
            transform 1.2s ease;
        transform: scale(0.75);
    }

    .mobile-cavern-entrance.is-magic-ready
    .mobile-book-glow {
        opacity: 0.48;
        transform: scale(1);
    }

    .mobile-book-flash {
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 50%;
        width: 55%;
        aspect-ratio: 1.6;
        transform:
            translate(-50%, -50%)
            scale(0.4);
        border-radius: 50%;
        background:
            radial-gradient(
                ellipse,
                rgba(252, 235, 255, 0.95),
                rgba(187, 101, 247, 0.72) 30%,
                rgba(118, 48, 175, 0.22) 56%,
                transparent 74%
            );
        opacity: 0;
        filter: blur(0.45rem);
        mix-blend-mode: screen;
    }

    .mobile-cavern-entrance.is-book-opening
    .mobile-book-flash {
        animation:
            mobile-book-flash
            850ms ease-out both;
    }

    .mobile-book-shadow {
        position: absolute;
        z-index: 0;
        right: 13%;
        bottom: 4%;
        left: 13%;
        height: 11%;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.78);
        filter: blur(1rem);
    }

    .mobile-cavern-copy {
        display: grid;
        max-width: 31rem;
        justify-self: center;
        justify-items: center;
        padding-inline: 0.5rem;
        pointer-events: none;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.8rem);
        transition:
            opacity 700ms ease,
            transform 700ms ease;
    }

    .mobile-cavern-entrance.is-copy-ready
    .mobile-cavern-copy {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .mobile-cavern-copy > p {
        margin: 0 0 0.35rem;
        color: #dfbb74;
        font-size: 0.54rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .mobile-cavern-copy h1 {
        margin: 0;
        color: #f0e5cd;
        font-family: var(--storefront-serif);
        font-size: clamp(2.1rem, 10vw, 3.3rem);
        font-weight: 400;
        line-height: 1;
        text-shadow:
            0 0.3rem 1rem
            rgba(0, 0, 0, 0.9);
    }

    .mobile-cavern-copy > strong {
        max-width: 90vw;
        margin-top: 0.45rem;
        color: var(--storefront-parchment-soft);
        font-family: var(--storefront-serif);
        font-size: 0.95rem;
        font-weight: 400;
    }

    .mobile-cavern-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.8rem;
    }

    .mobile-cavern-actions
    .cavern-enter-button,
    .mobile-cavern-actions
    .cavern-skip-button {
        min-height: 2.7rem;
        padding-inline: 0.9rem;
        font-size: 0.58rem;
    }

    .mobile-cavern-fog {
        position: absolute;
        z-index: 10;
        right: -25%;
        bottom: -5%;
        left: -25%;
        height: 24%;
        pointer-events: none;
        opacity: 0.42;
        filter: blur(1.8rem);
    }

    .mobile-cavern-fog span {
        position: absolute;
        bottom: 0;
        width: 70%;
        height: 100%;
        border-radius: 50%;
        background:
            radial-gradient(
                ellipse,
                rgba(136, 105, 151, 0.46),
                rgba(76, 59, 90, 0.2) 48%,
                transparent 72%
            );
        animation:
            mobile-fog-drift
            13s ease-in-out infinite alternate;
    }

    .mobile-cavern-fog span:first-child {
        left: -5%;
    }

    .mobile-cavern-fog span:last-child {
        right: -5%;
        animation-delay: -6s;
    }

    .mobile-cavern-entrance.is-entered
    .mobile-cavern-copy {
        opacity: 0;
        transform: translateY(-0.7rem);
    }

    .mobile-cavern-entrance.is-leaving {
        opacity: 0;
    }

    .mobile-cavern-entrance.is-resetting,
    .mobile-cavern-entrance.is-resetting * {
        animation: none !important;
        transition: none !important;
    }

    @keyframes mobile-book-flash {
        0% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(0.35);
        }

        38% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                scale(1);
        }

        100% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(1.7);
        }
    }

    @keyframes mobile-ritual-base {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes mobile-ritual-glow {
        to {
            transform: rotate(-360deg);
        }
    }

    @keyframes mobile-ritual-pulse {
        50% {
            opacity: 0.62;
        }
    }

    @keyframes mobile-fog-drift {
        from {
            transform:
                translateX(-5%)
                scale(0.96);
        }

        to {
            transform:
                translateX(8%)
                translateY(-8%)
                scale(1.08);
        }
    }
}

@media (min-width: 721px) {
    .mobile-cavern-entrance {
        display: none !important;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 720px) {
        .mobile-cavern-entrance,
        .mobile-cavern-content,
        .mobile-cavern-open-curtains,
        .mobile-cavern-closed-curtains {
            height: 100vh;
        }

        .mobile-open-curtain {
            height: 104vh;
            top: -2vh;
        }

        .mobile-closed-curtain {
            height: 110vh;
            top: -5vh;
        }
    }
}

/* DEDICATED MOBILE ENTRANCE END */

/* MOBILE OPEN CURTAIN PRESENCE START */

@media (max-width: 720px) {
    /*
     * Make the tied-back curtains substantial enough to frame the
     * portrait composition after the closed panels have opened.
     */

    .mobile-open-curtain {
        top: -4dvh;
        width: 78vw;
        height: 108dvh;
        max-width: none;
        object-fit: contain;
        filter:
            brightness(0.82)
            saturate(1.08)
            drop-shadow(
                0 0 1.8rem
                rgba(0, 0, 0, 0.88)
            );
    }

    .mobile-open-curtain.is-left {
        left: -25vw;
        object-position: left top;
    }

    .mobile-open-curtain.is-right {
        right: -25vw;
        object-position: right top;
    }

    /*
     * Keep the curtains strongly visible once the opening starts,
     * without making the centre too cramped.
     */

    .mobile-cavern-entrance.is-curtains-opening
    .mobile-open-curtain,
    .mobile-cavern-entrance.is-curtains-open
    .mobile-open-curtain {
        opacity: 1;
    }

    /*
     * Slightly darken the outermost edge so the curtains feel like
     * framing rather than flat images pasted over the background.
     */

    .mobile-cavern-open-curtains::before,
    .mobile-cavern-open-curtains::after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        width: 16vw;
        pointer-events: none;
        content: "";
    }

    .mobile-cavern-open-curtains::before {
        left: 0;
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.72),
                transparent
            );
    }

    .mobile-cavern-open-curtains::after {
        right: 0;
        background:
            linear-gradient(
                -90deg,
                rgba(0, 0, 0, 0.72),
                transparent
            );
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 720px) {
        .mobile-open-curtain {
            top: -4vh;
            height: 108vh;
        }
    }
}

/* MOBILE OPEN CURTAIN PRESENCE END */

/* WELCOME PERFUME FONT START */

@font-face {
    font-family: "LT Perfume";
    src:
        url("/fonts/LTPerfume-2.ttf")
        format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

/*
 * Entrance welcome title only.
 */

.cavern-welcome-copy h1,
.mobile-cavern-copy h1 {
    color: #d9ae5f;
    font-family:
        "LT Perfume",
        var(--storefront-serif),
        serif;
    font-weight: 400;
    letter-spacing: 0.015em;
    text-shadow:
        0 0.08rem 0
        rgba(255, 235, 177, 0.34),
        0 0.25rem 0.75rem
        rgba(120, 76, 18, 0.72),
        0 0 1.6rem
        rgba(211, 156, 59, 0.28),
        0 0.35rem 1.5rem
        rgba(0, 0, 0, 0.94);
}

/*
 * Slightly rebalance the decorative font on portrait screens.
 */

@media (max-width: 720px) {
    .mobile-cavern-copy h1 {
        font-size:
            clamp(
                2.45rem,
                12vw,
                3.9rem
            );
        line-height: 0.92;
        letter-spacing: 0.01em;
    }
}

/* WELCOME PERFUME FONT END */

/* ENTRANCE PATH PERFUME STYLE START */

.cavern-welcome-copy > p,
.mobile-cavern-copy > p {
    color: #d9ae5f;
    font-family:
        "LT Perfume",
        var(--storefront-serif),
        serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
    text-shadow:
        0 0.08rem 0
        rgba(255, 235, 177, 0.28),
        0 0.2rem 0.65rem
        rgba(120, 76, 18, 0.66),
        0 0 1rem
        rgba(211, 156, 59, 0.22),
        0 0.25rem 1rem
        rgba(0, 0, 0, 0.92);
}

.cavern-welcome-copy > p {
    font-size:
        clamp(
            1.05rem,
            1.7vw,
            1.45rem
        );
    line-height: 1;
}

@media (max-width: 720px) {
    .mobile-cavern-copy > p {
        margin-bottom: 0.5rem;
        font-size:
            clamp(
                1rem,
                5.2vw,
                1.35rem
            );
        line-height: 1;
        letter-spacing: 0.055em;
    }
}

/* ENTRANCE PATH PERFUME STYLE END */

/* FULL ENTRANCE TYPING SEQUENCE START */

/*
 * All three entrance lines use the Perfume font and are revealed
 * sequentially like magical writing.
 */

.cavern-welcome-copy > p,
.cavern-welcome-copy > h1,
.cavern-welcome-copy > strong,
.mobile-cavern-copy > p,
.mobile-cavern-copy > h1,
.mobile-cavern-copy > strong {
    position: relative;
    display: block;
    width: max-content;
    max-width: 94vw;
    overflow: hidden;
    margin-inline: auto;
    color: #dfb965;
    font-family:
        "LT Perfume",
        var(--storefront-serif),
        serif;
    font-weight: 400;
    white-space: nowrap;
    clip-path:
        inset(
            0 100% 0 0
        );
    text-shadow:
        0 0.08rem 0
        rgba(255, 239, 184, 0.32),
        0 0.25rem 0.75rem
        rgba(116, 69, 12, 0.72),
        0 0 1.35rem
        rgba(218, 164, 64, 0.3),
        0 0.35rem 1.25rem
        rgba(0, 0, 0, 0.94);
}

.cavern-welcome-copy > p,
.mobile-cavern-copy > p {
    margin-bottom: 0.55rem;
    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.25rem
        );
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: none;
}

.cavern-welcome-copy > h1,
.mobile-cavern-copy > h1 {
    margin-block: 0;
    font-size:
        clamp(
            3rem,
            6vw,
            5.4rem
        );
    line-height: 0.95;
    letter-spacing: 0.005em;
}

.cavern-welcome-copy > strong,
.mobile-cavern-copy > strong {
    margin-top: 0.7rem;
    color: #ead7a8;
    font-size:
        clamp(
            1.2rem,
            2vw,
            1.7rem
        );
    line-height: 1.05;
    letter-spacing: 0.015em;
}


/* FIRST LINE */

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > p,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > p {
    animation:
        cavern-type-line
        1.55s
        steps(23, end)
        150ms
        both;
}


/* SECOND LINE */

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > h1,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > h1 {
    animation:
        cavern-type-line
        1.55s
        steps(17, end)
        1.9s
        both;
}


/* THIRD LINE */

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > strong,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > strong {
    animation:
        cavern-type-line
        2.25s
        steps(36, end)
        3.65s
        both;
}


/* MAGICAL TYPE CURSOR */

.cavern-welcome-copy > p::after,
.cavern-welcome-copy > h1::after,
.cavern-welcome-copy > strong::after,
.mobile-cavern-copy > p::after,
.mobile-cavern-copy > h1::after,
.mobile-cavern-copy > strong::after {
    display: inline-block;
    width: 0.07em;
    height: 0.83em;
    margin-left: 0.1em;
    vertical-align: -0.02em;
    background:
        linear-gradient(
            to bottom,
            #ffe9ad,
            #bd72ed
        );
    box-shadow:
        0 0 0.6rem
        rgba(190, 102, 244, 0.78);
    content: "";
    opacity: 0;
}

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > p::after,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > p::after {
    animation:
        cavern-type-caret
        600ms step-end
        150ms 3;
}

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > h1::after,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > h1::after {
    animation:
        cavern-type-caret
        600ms step-end
        1.9s 3;
}

.cavern-entrance.is-copy-ready
.cavern-welcome-copy > strong::after,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-copy > strong::after {
    animation:
        cavern-type-caret
        600ms step-end
        3.65s 4;
}


/* BUTTONS WAIT UNTIL ALL TEXT HAS FINISHED */

.cavern-welcome-actions,
.mobile-cavern-actions {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
}

.cavern-entrance.is-copy-ready
.cavern-welcome-actions,
.mobile-cavern-entrance.is-copy-ready
.mobile-cavern-actions {
    animation:
        cavern-actions-arrive
        650ms ease
        6.05s
        forwards;
}


/* PURPLE ENTER BUTTON */

.cavern-enter-button,
.mobile-cavern-actions
.cavern-enter-button {
    border:
        1px solid
        rgba(225, 188, 255, 0.82);
    background:
        linear-gradient(
            135deg,
            #ad5adb,
            #7833a3 52%,
            #4d1d70
        );
    color: #fff7ff;
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.24),
        0 0.35rem 1rem
        rgba(0, 0, 0, 0.55),
        0 0 1.8rem
        rgba(157, 72, 211, 0.45);
    text-shadow:
        0 1px 0
        rgba(34, 7, 48, 0.82);
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.cavern-enter-button:hover,
.cavern-enter-button:focus-visible,
.mobile-cavern-actions
.cavern-enter-button:hover,
.mobile-cavern-actions
.cavern-enter-button:focus-visible {
    background:
        linear-gradient(
            135deg,
            #c76df0,
            #9144ba 52%,
            #622784
        );
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.3),
        0 0.45rem 1.2rem
        rgba(0, 0, 0, 0.58),
        0 0 2.4rem
        rgba(181, 91, 234, 0.62);
    transform: translateY(-0.12rem);
}


/* MOBILE TEXT SIZING */

@media (max-width: 720px) {
    .mobile-cavern-copy > p {
        font-size:
            clamp(
                1.35rem,
                6.4vw,
                1.8rem
            );
    }

    .mobile-cavern-copy > h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.2rem
            );
    }

    .mobile-cavern-copy > strong {
        font-size:
            clamp(
                0.9rem,
                4.25vw,
                1.18rem
            );
    }
}


/* RESET FOR REPLAY */

.cavern-entrance.is-resetting
.cavern-welcome-copy > p,
.cavern-entrance.is-resetting
.cavern-welcome-copy > h1,
.cavern-entrance.is-resetting
.cavern-welcome-copy > strong,
.mobile-cavern-entrance.is-resetting
.mobile-cavern-copy > p,
.mobile-cavern-entrance.is-resetting
.mobile-cavern-copy > h1,
.mobile-cavern-entrance.is-resetting
.mobile-cavern-copy > strong {
    animation: none !important;
    clip-path:
        inset(
            0 100% 0 0
        ) !important;
}


/* ANIMATIONS */

@keyframes cavern-type-line {
    from {
        clip-path:
            inset(
                0 100% 0 0
            );
    }

    to {
        clip-path:
            inset(
                0 0 0 0
            );
    }
}

@keyframes cavern-type-caret {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes cavern-actions-arrive {
    from {
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cavern-welcome-copy > p,
    .cavern-welcome-copy > h1,
    .cavern-welcome-copy > strong,
    .mobile-cavern-copy > p,
    .mobile-cavern-copy > h1,
    .mobile-cavern-copy > strong {
        animation: none !important;
        clip-path: none !important;
    }

    .cavern-welcome-copy > p::after,
    .cavern-welcome-copy > h1::after,
    .cavern-welcome-copy > strong::after,
    .mobile-cavern-copy > p::after,
    .mobile-cavern-copy > h1::after,
    .mobile-cavern-copy > strong::after {
        display: none;
    }

    .cavern-welcome-actions,
    .mobile-cavern-actions {
        animation: none !important;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

/* FULL ENTRANCE TYPING SEQUENCE END */


/* MATCH ENTRANCE SUPPORTING LINE SIZE START */

.cavern-welcome-copy > strong {
    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.25rem
        );
    line-height: 1;
    letter-spacing: 0.025em;
}

@media (max-width: 720px) {
    .mobile-cavern-copy > strong {
        font-size:
            clamp(
                1.35rem,
                6.4vw,
                1.8rem
            );
        line-height: 1;
        letter-spacing: 0.02em;
    }
}

/* MATCH ENTRANCE SUPPORTING LINE SIZE END */