:root {
    --luxe-ease-out: cubic-bezier(.16, 1, .3, 1);
    --luxe-ease-in-out: cubic-bezier(.76, 0, .24, 1);
    --luxe-ink: #111827;
    --luxe-indigo: #4f46e5;
    --luxe-indigo-deep: #312e81;
    --luxe-paper: #f8fafc;
    --luxe-reveal-distance: 42px;
    --luxe-magnetic-x: 0px;
    --luxe-magnetic-y: 0px;
    --luxe-parallax-y: 0px;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

::selection {
    background: rgba(79, 70, 229, .88);
    color: #fff;
}

/* Page-transition curtain */
.luxe-page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: auto;
    color: #fff;
    background:
        radial-gradient(circle at 72% 24%, rgba(129, 140, 248, .36), transparent 30%),
        linear-gradient(135deg, #111827 0%, #312e81 48%, #4f46e5 100%);
    transform: translateY(0);
    transition: transform 1.05s var(--luxe-ease-in-out);
    will-change: transform;
}

.luxe-page-transition::before,
.luxe-page-transition::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.luxe-page-transition::before {
    inset: -30%;
    opacity: .28;
    background: repeating-linear-gradient(
        112deg,
        transparent 0,
        transparent 92px,
        rgba(255, 255, 255, .08) 93px,
        rgba(255, 255, 255, .08) 94px
    );
    animation: luxe-transition-lines 8s linear infinite;
}

.luxe-page-transition::after {
    left: 50%;
    top: 50%;
    width: min(64vw, 840px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    translate: -50% -50%;
    scale: .7;
    animation: luxe-transition-orbit 2.4s var(--luxe-ease-out) both;
}

.luxe-page-transition.is-cleared {
    transform: translateY(-101%);
    pointer-events: none;
}

.luxe-page-transition.is-cleared::before,
.luxe-page-transition.is-cleared::after {
    animation-play-state: paused;
}

.luxe-page-transition.is-leaving {
    transform: translateY(0);
    pointer-events: auto;
}

.luxe-transition-brand {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    transition:
        opacity .45s ease,
        translate .7s var(--luxe-ease-out);
}

.is-cleared .luxe-transition-brand {
    opacity: 0;
    translate: 0 -18px;
}

.luxe-transition-mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    font-family: "Libre Caslon Text", Georgia, serif;
    font-size: 20px;
    letter-spacing: -.06em;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .04);
    animation: luxe-mark-arrive 1.1s var(--luxe-ease-out) both;
}

.luxe-transition-brand .coralbliz-brand__emblem {
    animation: luxe-mark-arrive 1.1s var(--luxe-ease-out) both;
}

.luxe-transition-name {
    font-family: "Libre Caslon Text", Georgia, serif;
    font-size: clamp(28px, 4vw, 58px);
    line-height: 1;
    letter-spacing: .04em;
}

.luxe-transition-line {
    width: 124px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .22);
}

.luxe-transition-line::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(-101%);
    animation: luxe-loader-line 1.25s var(--luxe-ease-in-out) infinite;
}

@keyframes luxe-transition-lines {
    to { transform: translate3d(110px, -60px, 0); }
}

@keyframes luxe-transition-orbit {
    from { opacity: 0; scale: .72; }
    to { opacity: 1; scale: 1; }
}

@keyframes luxe-mark-arrive {
    from { opacity: 0; scale: .55; rotate: -24deg; }
    to { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes luxe-loader-line {
    0% { transform: translateX(-101%); }
    50%, 100% { transform: translateX(101%); }
}

/* Scroll progress and ambient pointer */
.luxe-scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #818cf8, #4f46e5 55%, #312e81);
    box-shadow: 0 0 18px rgba(79, 70, 229, .45);
    will-change: transform;
}

.luxe-cursor-ring,
.luxe-cursor-dot {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9997;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    translate: -50% -50%;
    will-change: transform, left, top, opacity;
}

.luxe-cursor-ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(79, 70, 229, .65);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px);
    transition:
        width .35s var(--luxe-ease-out),
        height .35s var(--luxe-ease-out),
        border-color .35s ease,
        background .35s ease,
        opacity .25s ease;
}

.luxe-cursor-dot {
    width: 5px;
    height: 5px;
    background: #4f46e5;
    transition:
        scale .3s var(--luxe-ease-out),
        opacity .25s ease;
}

.luxe-pointer-active .luxe-cursor-ring,
.luxe-pointer-active .luxe-cursor-dot {
    opacity: 1;
}

.luxe-cursor-ring.is-over-action {
    width: 58px;
    height: 58px;
    border-color: rgba(79, 70, 229, .32);
    background: rgba(79, 70, 229, .09);
}

.luxe-cursor-dot.is-over-action {
    scale: .45;
}

/* Customer navigation */
header[data-customer-header] {
    transition:
        background-color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        translate .6s var(--luxe-ease-out);
}

header[data-customer-header] > div {
    transition:
        height .55s var(--luxe-ease-out),
        max-width .55s var(--luxe-ease-out);
}

header[data-customer-header].is-scrolled {
    border-color: rgba(203, 213, 225, .78);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 36px rgba(15, 23, 42, .075);
}

header[data-customer-header].is-scrolled > div {
    height: 4.25rem;
}

header[data-customer-header] a,
header[data-customer-header] summary {
    transition:
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease,
        translate .35s var(--luxe-ease-out);
}

header[data-customer-header] nav > a:hover,
header[data-customer-header] nav > details > summary:hover {
    translate: 0 -2px;
}

header[data-customer-header] details[open] > div {
    transform-origin: 90% 0;
    animation: luxe-menu-open .38s var(--luxe-ease-out) both;
}

@keyframes luxe-menu-open {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Word-by-word title choreography */
.luxe-title {
    visibility: visible;
}

.luxe-word-shell {
    display: inline-block;
    overflow: hidden;
    padding-bottom: .08em;
    margin-bottom: -.08em;
    vertical-align: bottom;
}

.luxe-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(112%) rotate(2deg);
    transform-origin: 0 100%;
    transition:
        opacity .82s ease,
        transform 1.05s var(--luxe-ease-out);
    transition-delay: var(--luxe-word-delay, 0ms);
    will-change: transform, opacity;
}

.luxe-title.is-revealed .luxe-word {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* Scroll reveal system */
.luxe-motion-enabled .luxe-reveal {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, var(--luxe-reveal-distance), 0);
    transition:
        opacity .9s ease var(--luxe-delay, 0ms),
        filter 1s ease var(--luxe-delay, 0ms),
        transform 1.15s var(--luxe-ease-out) var(--luxe-delay, 0ms);
    will-change: opacity, filter, transform;
}

.luxe-motion-enabled .luxe-reveal[data-luxe-direction="left"] {
    transform: translate3d(calc(var(--luxe-reveal-distance) * -1), 0, 0);
}

.luxe-motion-enabled .luxe-reveal[data-luxe-direction="right"] {
    transform: translate3d(var(--luxe-reveal-distance), 0, 0);
}

.luxe-motion-enabled .luxe-reveal[data-luxe-direction="scale"] {
    transform: scale(.94);
}

.luxe-motion-enabled .luxe-reveal.is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* Cinematic media */
.luxe-hero {
    isolation: isolate;
}

.luxe-hero-media {
    --luxe-hero-scale: 1.075;
    scale: var(--luxe-hero-scale);
    animation: luxe-hero-drift 14s cubic-bezier(.2, .55, .35, 1) both;
    will-change: scale, translate;
}

@keyframes luxe-hero-drift {
    from { scale: 1.13; translate: 0 12px; }
    to { scale: var(--luxe-hero-scale); translate: 0 0; }
}

.luxe-parallax-media {
    scale: 1.045;
    translate: 0 var(--luxe-parallax-y);
    transition:
        scale 1.2s var(--luxe-ease-out),
        filter .8s ease;
    will-change: translate, scale;
}

article:hover .luxe-parallax-media,
a:hover > .luxe-parallax-media {
    scale: 1.085;
}

.luxe-image-frame {
    position: relative;
    overflow: hidden;
}

.luxe-image-frame::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(110deg, #f8fafc, #eef2ff);
    transform: scaleX(1);
    transform-origin: 100% 50%;
    transition: transform 1.15s var(--luxe-ease-in-out);
}

.luxe-image-frame.is-image-revealed::after {
    transform: scaleX(0);
}

/* Cards get restrained depth and a moving light reflection */
.luxe-interactive-card {
    position: relative;
    isolation: isolate;
    transition:
        translate .55s var(--luxe-ease-out),
        box-shadow .55s var(--luxe-ease-out),
        border-color .4s ease;
}

.luxe-interactive-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        420px circle at var(--luxe-spot-x, 50%) var(--luxe-spot-y, 50%),
        rgba(99, 102, 241, .12),
        transparent 46%
    );
    transition: opacity .5s ease;
}

.luxe-interactive-card > * {
    position: relative;
    z-index: 1;
}

.luxe-interactive-card:hover {
    translate: 0 -5px;
    border-color: rgba(99, 102, 241, .3);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .13);
}

.luxe-interactive-card:hover::after {
    opacity: 1;
}

/* Buttons and links */
.luxe-magnetic {
    position: relative;
    overflow: hidden;
    translate: var(--luxe-magnetic-x) var(--luxe-magnetic-y);
    transition:
        translate .5s var(--luxe-ease-out),
        color .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
    will-change: translate;
}

.luxe-magnetic::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .3) 50%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .85s var(--luxe-ease-out);
}

.luxe-magnetic:hover::after {
    transform: translateX(130%);
}

.luxe-magnetic > * {
    position: relative;
    z-index: 1;
}

main a[class*="bg-primary"]:hover,
main button[class*="bg-primary"]:hover,
main a[class*="bg-brand"]:hover,
main button[class*="bg-brand"]:hover {
    box-shadow: 0 14px 34px rgba(79, 70, 229, .25);
}

/* Form polish */
main input,
main select,
main textarea {
    transition:
        border-color .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        translate .35s var(--luxe-ease-out);
}

main input:focus,
main select:focus,
main textarea:focus {
    translate: 0 -1px;
}

main details > summary {
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

main details[open] > :not(summary) {
    animation: luxe-details-open .48s var(--luxe-ease-out) both;
}

@keyframes luxe-details-open {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb arrival */
nav[aria-label="Breadcrumb"] {
    animation: luxe-breadcrumb-enter .85s var(--luxe-ease-out) both;
}

@keyframes luxe-breadcrumb-enter {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Footer softly resolves into view */
footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    right: -140px;
    top: -220px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(79, 70, 229, .11);
    border-radius: 50%;
    pointer-events: none;
}

@media (max-width: 767px) {
    :root {
        --luxe-reveal-distance: 26px;
    }

    .luxe-page-transition::after {
        width: 94vw;
    }

    .luxe-cursor-ring,
    .luxe-cursor-dot {
        display: none;
    }

    .luxe-interactive-card:hover {
        translate: 0 -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .luxe-page-transition,
    .luxe-scroll-progress,
    .luxe-cursor-ring,
    .luxe-cursor-dot {
        display: none !important;
    }

    .luxe-reveal,
    .luxe-word {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .luxe-parallax-media,
    .luxe-hero-media,
    .luxe-magnetic,
    .luxe-interactive-card {
        translate: 0 0 !important;
        scale: 1 !important;
    }

    .luxe-image-frame::after {
        display: none;
    }
}
