:root {
    --preloader-gold: #d8b66b;
    --preloader-gold-light: #f4e5bd;
    --preloader-gold-deep: #725322;
    --preloader-ink: #050504;
    --preloader-ease: cubic-bezier(.22, 1, .36, 1);
}

.cinematic-preloader {
    z-index: 5000;
    display: grid;
    place-items: center;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    color: #f3eee3;
    background:
        radial-gradient(circle at 50% 42%, rgba(120, 88, 36, .14), transparent 28%),
        radial-gradient(circle at 50% 120%, rgba(197, 151, 67, .1), transparent 35%),
        linear-gradient(145deg, #080806 0%, var(--preloader-ink) 52%, #090806 100%);
    opacity: 1;
    visibility: visible;
    transition: none;
}

.cinematic-preloader::before,
.cinematic-preloader::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.cinematic-preloader::before {
    inset: -20%;
    z-index: -3;
    width: auto;
    aspect-ratio: auto;
    background: conic-gradient(from 215deg at 50% 46%, transparent 0 35%, rgba(220, 180, 99, .045) 43%, transparent 49% 73%, rgba(255, 234, 181, .035) 79%, transparent 85%);
    filter: blur(28px);
    transform: rotate(-8deg);
    animation: none;
}

.cinematic-preloader::after {
    inset: 0;
    z-index: 20;
    background: #f8e9bd;
    opacity: 0;
    mix-blend-mode: screen;
}

.cinematic-preloader.is-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-ambient,
.preloader-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.preloader-ambient {
    z-index: -1;
    overflow: hidden;
}

.preloader-grain {
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.75'/%3E%3C/svg%3E");
}

.preloader-orbit {
    position: absolute;
    top: 42%;
    left: 50%;
    border: 1px solid rgba(222, 187, 112, .08);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.preloader-orbit-one {
    width: min(82vw, 760px);
    aspect-ratio: 1;
}

.preloader-orbit-two {
    width: min(58vw, 520px);
    aspect-ratio: 1;
    border-color: rgba(255, 236, 190, .055);
}

.preloader-shell {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(92vw, 680px);
    padding: clamp(24px, 4vh, 48px) clamp(18px, 4vw, 42px) max(22px, env(safe-area-inset-bottom));
    text-align: center;
}

.preloader-kicker {
    margin: 0 0 2px;
    color: rgba(225, 204, 160, .52);
    font-family: "Cinzel", serif;
    font-size: clamp(.48rem, .8vw, .62rem);
    letter-spacing: .38em;
    text-transform: uppercase;
}

.preloader-logo {
    width: clamp(210px, 34vw, 390px);
    height: auto;
    margin: 0 auto clamp(13px, 2.7vh, 28px);
    opacity: .92;
    filter: sepia(.1) brightness(1.08) drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
    mix-blend-mode: screen;
}

.preloader-flash-unit {
    position: relative;
    z-index: 4;
    width: clamp(58px, 8vh, 78px);
    height: clamp(23px, 3.2vh, 31px);
    margin: clamp(-7px, -1vh, -3px) auto 8px;
    filter: drop-shadow(0 8px 13px rgba(0, 0, 0, .75));
}

.flash-housing {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(238, 214, 162, .2);
    border-radius: 6px 6px 10px 10px;
    background: linear-gradient(145deg, #24221e, #090908 58%, #17140f);
    box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -6px 13px rgba(0,0,0,.55);
}

.flash-bulb {
    width: 72%;
    height: 48%;
    border: 1px solid rgba(255, 232, 183, .3);
    border-radius: 3px;
    background: radial-gradient(ellipse, rgba(255,255,255,.8), rgba(246,218,153,.26) 36%, rgba(95,72,35,.24) 70%);
    box-shadow: inset 0 0 7px rgba(255,255,255,.2), 0 0 8px rgba(218,169,74,.08);
    opacity: .58;
    animation: flashUnitPulse 2.8s ease-in-out infinite;
}

.preloader-lens {
    position: relative;
    width: clamp(190px, 28vh, 282px);
    max-width: 58vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, .72));
    transform: translateZ(0);
    transform-origin: center;
    contain: layout style;
    will-change: transform, opacity;
}

.lens-halo,
.lens-housing,
.lens-knurl,
.lens-ring,
.lens-glass,
.lens-aperture,
.lens-flash,
.lens-focus-markers {
    position: absolute;
    border-radius: 50%;
}

.lens-halo {
    inset: -20%;
    background: radial-gradient(circle, rgba(224, 177, 79, .18), rgba(151, 104, 35, .045) 43%, transparent 68%);
    opacity: .7;
    filter: blur(9px);
}

.lens-housing {
    inset: 3%;
    overflow: hidden;
    border: 1px solid rgba(246, 224, 173, .18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 18% 74%, rgba(226, 180, 91, .12)),
        radial-gradient(circle at 47% 44%, #26231e 0 8%, #11110f 46%, #050504 72%);
    box-shadow:
        inset 0 0 0 5px rgba(5, 5, 4, .9),
        inset 0 0 0 9px rgba(215, 181, 111, .08),
        inset 0 0 28px rgba(0, 0, 0, .9),
        0 0 0 1px rgba(255, 255, 255, .025),
        0 0 45px rgba(188, 138, 48, .11);
}

.lens-webgl {
    position: absolute;
    inset: 5%;
    z-index: 4;
    display: block;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity .45s ease;
}

.preloader-lens.is-webgl .lens-webgl {
    opacity: 1;
}

.preloader-lens.is-webgl .lens-glass {
    opacity: .16;
}

.lens-knurl {
    inset: 1%;
    opacity: .6;
    background: repeating-conic-gradient(from 1deg, rgba(238, 213, 157, .16) 0 .8deg, transparent 1deg 4deg);
    mask: radial-gradient(circle, transparent 0 83%, #000 84% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 83%, #000 84% 100%);
}

.lens-ring-outer {
    inset: 12%;
    border: 1px solid rgba(224, 191, 121, .2);
    background: repeating-conic-gradient(from 0deg, rgba(245, 222, 169, .12) 0 .7deg, transparent 1deg 8deg);
    mask: radial-gradient(circle, transparent 0 88%, #000 89% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 88%, #000 89% 100%);
}

.lens-ring-inner {
    inset: 20%;
    border: 1px solid rgba(242, 217, 157, .12);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .86), 0 0 10px rgba(217, 167, 64, .07);
}

.lens-glass {
    inset: 23%;
    overflow: hidden;
    border: 1px solid rgba(238, 214, 157, .2);
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 231, 177, .23), transparent 8%),
        radial-gradient(circle at 56% 59%, #050604 0 22%, #10130f 34%, #15130d 51%, #050504 72%);
    box-shadow:
        inset 8px 10px 20px rgba(255, 239, 198, .06),
        inset -13px -12px 28px rgba(0, 0, 0, .95),
        0 0 22px rgba(198, 150, 55, .08);
}

.lens-reflection {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
}

.lens-reflection-one {
    top: 9%;
    left: 17%;
    width: 48%;
    height: 22%;
    background: linear-gradient(145deg, rgba(255, 242, 207, .28), rgba(210, 161, 72, .05) 55%, transparent);
    transform: rotate(-24deg);
}

.lens-reflection-two {
    right: 9%;
    bottom: 17%;
    width: 31%;
    height: 42%;
    background: linear-gradient(165deg, transparent, rgba(218, 171, 78, .16));
    transform: rotate(20deg);
}

.lens-aperture {
    inset: 28%;
    background: repeating-conic-gradient(from 8deg, #10110e 0 14deg, #050504 15deg 29deg);
    box-shadow: inset 0 0 12px #000, 0 0 18px rgba(221, 171, 69, .12);
}

.lens-aperture::after {
    content: "";
    position: absolute;
    inset: 36%;
    border-radius: 50%;
    background: #020202;
    box-shadow: 0 0 12px rgba(236, 193, 102, .1);
}

.lens-flash {
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle, #fff 0 3%, #ffecc0 7%, rgba(228, 176, 70, .72) 17%, transparent 51%);
    mix-blend-mode: screen;
}

.lens-focus-markers {
    inset: 0;
    opacity: .4;
    background: repeating-conic-gradient(from 0deg, rgba(241, 221, 178, .65) 0 .6deg, transparent .8deg 30deg);
    mask: radial-gradient(circle, transparent 0 94%, #000 95% 96%, transparent 97%);
    -webkit-mask: radial-gradient(circle, transparent 0 94%, #000 95% 96%, transparent 97%);
}

.preloader-actions {
    display: grid;
    justify-items: center;
    width: min(100%, 520px);
    margin-top: clamp(20px, 3.5vh, 38px);
}

.sound-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 388px);
    padding: 4px;
    border: 1px solid rgba(235, 210, 156, .13);
    border-radius: 17px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 16px 46px rgba(0, 0, 0, .24);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.sound-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(231, 222, 204, .48);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.sound-option svg {
    width: 18px;
    flex: 0 0 18px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sound-option svg path:first-child {
    stroke: none;
}

.sound-option span {
    display: grid;
    gap: 1px;
}

.sound-option strong,
.sound-option small {
    font-family: "Cairo", sans-serif;
    line-height: 1.2;
}

.sound-option strong {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .045em;
}

.sound-option small {
    color: inherit;
    font-size: .52rem;
    letter-spacing: .02em;
    opacity: .64;
}

.sound-option.is-active {
    color: var(--preloader-gold-light);
    border-color: rgba(224, 189, 116, .24);
    background: linear-gradient(135deg, rgba(224, 187, 107, .13), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 7px 20px rgba(0, 0, 0, .24);
}

.enter-experience {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(100%, 388px);
    min-height: 58px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(240, 213, 153, .36);
    border-radius: 17px;
    color: #f6e9c9;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .08), transparent 28%),
        linear-gradient(135deg, rgba(152, 108, 39, .5), rgba(69, 47, 18, .42));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 15px 46px rgba(0, 0, 0, .35), 0 0 32px rgba(199, 149, 57, .08);
    font-family: "Cinzel", serif;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .4s var(--preloader-ease), border-color .4s ease, box-shadow .4s ease;
}

.enter-experience::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -30%;
    width: 18%;
    height: 340%;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .36), transparent);
    filter: blur(3px);
    transform: rotate(17deg);
    transition: left .8s var(--preloader-ease);
}

.enter-experience svg {
    width: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .4s var(--preloader-ease);
}

.enter-experience:hover,
.enter-experience:focus-visible {
    border-color: rgba(247, 221, 162, .66);
    box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 18px 54px rgba(0, 0, 0, .42), 0 0 40px rgba(199, 149, 57, .14);
    transform: translate3d(0, -2px, 0);
    outline: none;
}

.enter-experience:hover::before,
.enter-experience:focus-visible::before {
    left: 116%;
}

.enter-experience:hover svg,
.enter-experience:focus-visible svg {
    transform: translate3d(4px, 0, 0);
}

.sound-option:focus-visible {
    outline: 1px solid rgba(246, 222, 169, .7);
    outline-offset: 2px;
}

.preloader-note {
    margin-top: 11px;
    color: rgba(221, 210, 188, .38);
    font-family: "Cairo", sans-serif;
    font-size: .54rem;
    letter-spacing: .055em;
}

.cinematic-preloader.is-entering .preloader-kicker,
.cinematic-preloader.is-entering .preloader-logo,
.cinematic-preloader.is-entering .preloader-actions {
    animation: preloaderContentOut .55s var(--preloader-ease) forwards;
}

.cinematic-preloader.is-entering .preloader-logo {
    animation-delay: .05s;
}

.cinematic-preloader.is-entering .preloader-actions {
    animation-delay: .08s;
}

.cinematic-preloader.is-entering .preloader-lens {
    animation: lensAdvance 2s var(--preloader-ease) both;
}

.cinematic-preloader.is-entering .lens-knurl,
.cinematic-preloader.is-entering .lens-ring-outer {
    animation: lensRotate 1.7s cubic-bezier(.3, .05, .2, 1) both;
}

.cinematic-preloader.is-entering .lens-ring-inner,
.cinematic-preloader.is-entering .lens-reflection-one,
.cinematic-preloader.is-entering .lens-reflection-two {
    animation: lensCounterRotate 1.65s cubic-bezier(.25, .08, .15, 1) both;
}

.cinematic-preloader.is-entering .lens-aperture {
    animation: apertureFocus 1.52s var(--preloader-ease) .2s both;
}

.cinematic-preloader.is-entering .lens-halo {
    animation: haloBloom 1.75s ease-in-out both;
}

.cinematic-preloader.is-entering .preloader-orbit-one {
    animation: orbitExpand 1.55s var(--preloader-ease) .3s both;
}

.cinematic-preloader.is-entering .preloader-orbit-two {
    animation: orbitExpand 1.4s var(--preloader-ease) .48s both;
}

.cinematic-preloader.is-entering .lens-flash {
    animation: lensFlash .28s ease-out .03s both;
}

.cinematic-preloader.is-entering .flash-bulb {
    animation: flashUnitBurst .34s ease-out .02s both;
}

.cinematic-preloader.is-entering::before {
    animation: goldenWhoosh 1.15s var(--preloader-ease) .34s both;
}

.cinematic-preloader.is-entering::after {
    animation: preloaderFlash .34s ease-out .02s both;
}

.cinematic-preloader.is-exiting {
    animation: preloaderExit .4s var(--preloader-ease) 1.6s both;
}

@keyframes preloaderContentOut {
    to { opacity: 0; transform: translate3d(0, 8px, 0); filter: blur(5px); }
}

@keyframes lensAdvance {
    0% { transform: scale(1); }
    20% { transform: scale(.96); }
    48% { transform: scale(1.3); }
    78% { transform: scale(3.8); }
    100% { transform: scale(12); }
}

@keyframes lensRotate {
    0% { transform: rotate(0deg); }
    70% { transform: rotate(176deg); }
    100% { transform: rotate(238deg); }
}

@keyframes lensCounterRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-148deg); }
}

@keyframes apertureFocus {
    0% { transform: rotate(0) scale(1); filter: brightness(1); }
    33% { transform: rotate(23deg) scale(.73); filter: brightness(1.25); }
    56% { transform: rotate(37deg) scale(.9); }
    100% { transform: rotate(64deg) scale(.24); filter: brightness(2); }
}

@keyframes haloBloom {
    0% { opacity: .7; transform: scale(.85); }
    58% { opacity: 1; transform: scale(1.32); }
    100% { opacity: 0; transform: scale(1.72); }
}

@keyframes orbitExpand {
    0% { opacity: .2; transform: translate3d(-50%, -50%, 0) scale(.7); }
    55% { opacity: .65; }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.46); }
}

@keyframes lensFlash {
    0% { opacity: 0; transform: scale(.35); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: scale(2.1); }
}

@keyframes flashUnitPulse {
    0%, 100% { opacity: .42; filter: brightness(.8); }
    50% { opacity: .78; filter: brightness(1.2); box-shadow: inset 0 0 9px rgba(255,255,255,.3), 0 0 14px rgba(218,169,74,.18); }
}

@keyframes flashUnitBurst {
    0% { opacity: .58; filter: brightness(1); transform: scale(1); }
    18% { opacity: 1; filter: brightness(5); transform: scale(1.08); box-shadow: 0 0 25px #fff6d9, 0 0 65px rgba(230,184,87,.9); }
    100% { opacity: .15; filter: brightness(.8); transform: scale(.96); }
}

@keyframes goldenWhoosh {
    0% { opacity: .2; transform: rotate(-16deg) scale(.65); }
    52% { opacity: 1; transform: rotate(8deg) scale(1); }
    100% { opacity: 0; transform: rotate(24deg) scale(1.35); }
}

@keyframes preloaderFlash {
    0% { opacity: 0; }
    24% { opacity: .84; }
    100% { opacity: 0; }
}

@keyframes preloaderExit {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@media (max-height: 720px) {
    .preloader-shell { padding-top: 18px; }
    .preloader-kicker { display: none; }
    .preloader-logo { width: 240px; margin-bottom: 7px; }
    .preloader-flash-unit { margin-bottom: 4px; }
    .preloader-lens { width: min(31vh, 210px); }
    .preloader-actions { margin-top: 14px; }
}

@media (max-width: 520px) {
    .preloader-shell { width: 100%; padding-right: 16px; padding-left: 16px; }
    .preloader-lens { max-width: 62vw; }
    .sound-option { gap: 8px; padding: 6px 9px; }
    .sound-option small { font-size: .48rem; }
    .enter-experience { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-preloader.is-entering .preloader-kicker,
    .cinematic-preloader.is-entering .preloader-logo,
    .cinematic-preloader.is-entering .preloader-actions,
    .cinematic-preloader.is-entering .preloader-lens,
    .cinematic-preloader.is-entering .lens-knurl,
    .cinematic-preloader.is-entering .lens-ring-outer,
    .cinematic-preloader.is-entering .lens-ring-inner,
    .cinematic-preloader.is-entering .lens-reflection-one,
    .cinematic-preloader.is-entering .lens-reflection-two,
    .cinematic-preloader.is-entering .lens-aperture,
    .cinematic-preloader.is-entering .lens-halo,
    .cinematic-preloader.is-entering .preloader-orbit,
    .cinematic-preloader.is-entering .lens-flash,
    .cinematic-preloader.is-entering .flash-bulb,
    .cinematic-preloader.is-entering::before,
    .cinematic-preloader.is-entering::after {
        animation: none !important;
    }

    .cinematic-preloader.is-exiting {
        animation: preloaderExit .25s ease 1.75s both;
    }
}