/* ==========================================================================
   Divinia Products — Coming Soon
   Palette per docs/decisions.md D-3: off-white marble canvas, gold accents,
   navy for contrast. The loader inverts to near-black so the reveal into the
   light page carries the drama.
   ========================================================================== */

:root {
    --ink:        #14110E;
    --ink-soft:   #201B15;
    --navy:       #101D2E;
    --navy-soft:  #1B2C42;

    --bone:       #F4F0E7;
    --marble:     #FAF7F1;
    --marble-hi:  #FFFDFA;

    --gold:       #BF9B30;
    --gold-lt:    #E8D48B;
    --gold-pale:  #F2E6BE;
    --gold-deep:  #8C6D1F;

    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html, body {
    height: 100%;
    margin: 0;
}

html.is-loading, body.is-locked {
    overflow: hidden;
}

body {
    background: var(--marble);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   Brand lockup — client artwork, medallion + wordmark in one file.
   Nothing beside it should repeat the brand name as text.
   -------------------------------------------------------------------------- */

.logo {
    display: block;
    height: auto;
    margin-inline: auto;
}

.logo--loader {
    width: clamp(132px, 21vw, 178px);
    /* Gold on near-black needs no help, but a faint glow separates it from the
       vignette and reads as candlelight on metal. */
    filter: drop-shadow(0 0 22px rgba(232, 212, 139, .22));
}

.logo--brand {
    width: clamp(84px, 12vw, 116px);
    /* The artwork is pale gold; on off-white marble it needs contrast help. */
    filter: saturate(1.12) contrast(1.06)
            drop-shadow(0 2px 10px rgba(140, 109, 31, .22));
}

/* The clip wipe is applied to a wrapper so the logo's own filters survive it. */
.loader__logo {
    clip-path: inset(100% 0 0 0);
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background:
        radial-gradient(120% 90% at 50% 40%, var(--ink-soft) 0%, var(--ink) 55%, #0B0906 100%);
}

.loader::after {
    /* faint gold dust in the dark */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 28%, rgba(232, 212, 139, .5), transparent),
        radial-gradient(1.5px 1.5px at 74% 18%, rgba(232, 212, 139, .35), transparent),
        radial-gradient(1.5px 1.5px at 62% 76%, rgba(232, 212, 139, .4), transparent),
        radial-gradient(1.5px 1.5px at 30% 82%, rgba(232, 212, 139, .3), transparent),
        radial-gradient(1.5px 1.5px at 88% 60%, rgba(232, 212, 139, .28), transparent);
    opacity: .8;
    pointer-events: none;
}

.loader__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    width: min(300px, 78vw);
}

.loader__meter {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 2.25rem 0 .9rem;
    background: rgba(232, 212, 139, .16);
    overflow: hidden;
}

.loader__meter-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-lt) 70%, var(--gold-pale));
    box-shadow: 0 0 12px rgba(232, 212, 139, .55);
    transform: scaleX(0);
    transform-origin: left center;
}

.loader__count {
    margin: 0;
    font-size: .68rem;
    font-weight: 200;
    letter-spacing: .34em;
    text-indent: .34em;
    color: rgba(242, 230, 190, .58);
    font-variant-numeric: tabular-nums;
}

.loader__pct { margin-left: .15em; }

/* --------------------------------------------------------------------------
   Reveal curtains — the loader lifts away in vertical panels
   -------------------------------------------------------------------------- */

.curtain {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    pointer-events: none;
    visibility: hidden;
}

.curtain__panel {
    flex: 1 1 0;
    background: var(--ink);
    transform: translateY(0);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Stage + background
   -------------------------------------------------------------------------- */

.stage {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vh, 4rem) var(--gutter);
    overflow: hidden;
}

.bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg__marble {
    position: absolute;
    inset: -6%;
    background:
        radial-gradient(58% 46% at 50% 42%, var(--marble-hi) 0%, transparent 62%),
        radial-gradient(80% 60% at 12% 8%,  #FFFFFF 0%, transparent 55%),
        radial-gradient(70% 60% at 88% 92%, #F0EADD 0%, transparent 58%),
        linear-gradient(160deg, var(--marble) 0%, var(--bone) 52%, #EFEADF 100%);
}

.bg__veins {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    mix-blend-mode: multiply;
}

.vein {
    opacity: 0;
    stroke-dasharray: var(--len, 3000);
    stroke-dashoffset: var(--len, 3000);
}

.bg__dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(72% 62% at 50% 46%, transparent 40%, rgba(20, 17, 14, .13) 100%);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.content {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.1rem, 3vh, 2rem);
}

/* Brand lockup */

.brand {
    display: flex;
    justify-content: center;
}

/* The box */

.box {
    position: relative;
    margin: 0;
    width: min(560px, 88%);
    aspect-ratio: 810 / 500;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.box__img {
    display: block;
    width: 100%;
    height: auto;
    /* The white studio background is keyed to alpha in the PNG itself.
       mix-blend-mode can't be used here: .box establishes its own stacking
       context for the 3D tilt, which isolates the blend. */
    filter: drop-shadow(0 26px 38px rgba(20, 17, 14, .3)) contrast(1.04) saturate(1.06);
}

.box__glow {
    position: absolute;
    inset: -18% -12%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(232, 212, 139, .38), transparent 70%);
    filter: blur(26px);
    opacity: 0;
}

/* The light sweep is masked to the box silhouette so it never shows as a
   rectangle over the transparent surround. */
.box__sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 253, 245, .5) 47%,
        rgba(242, 230, 190, .68) 50%,
        transparent 62%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: url("../img/box/box-closed-hero.webp");
    mask-image: url("../img/box/box-closed-hero.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.box__shadow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -4%;
    height: 7%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(20, 17, 14, .26), transparent 72%);
    filter: blur(13px);
}

/* Title */

.title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2rem, 6.4vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: .14em;
    text-indent: .14em;
    color: var(--gold);
}

/* The gradient is clipped per letter, not on the heading. Each .ch is an
   overflow:hidden mask for the reveal, which would otherwise cut the parent's
   background-clip:text painting and leave the letters invisible. */
.title .ch > i {
    background: linear-gradient(175deg,
        var(--gold-lt) 0%, var(--gold) 40%, var(--gold-deep) 76%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Per-letter masking for the stagger reveal */

.word {
    display: inline-block;
    white-space: nowrap;
}

.ch {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Descenders and the gradient's edge need a little room inside the mask. */
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

.ch > i {
    display: inline-block;
    font-style: inherit;
    transform: translateY(110%);
}

.ch--space {
    display: inline-block;
    width: .34em;
}

/* Gold rule */

.rule {
    position: relative;
    width: min(260px, 62%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(191, 155, 48, .85) 35%, rgba(191, 155, 48, .85) 65%, transparent);
    transform: scaleX(0);
}

.rule > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(191, 155, 48, .6);
    transform: rotate(45deg);
    opacity: 0;
}

/* Tagline */

.tagline {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(.95rem, 2.6vw, 1.25rem);
    letter-spacing: .05em;
    color: rgba(32, 27, 21, .72);
    opacity: 0;
}

/* Footer */

.foot {
    margin-top: clamp(.5rem, 2vh, 1.5rem);
    opacity: 0;
}

.foot__link {
    position: relative;
    display: inline-block;
    padding: .4rem .2rem;
    font-size: .6rem;
    font-weight: 300;
    letter-spacing: .4em;
    text-indent: .4em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy);
    transition: color .45s var(--ease-out);
}

.foot__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: .3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease-out), opacity .45s var(--ease-out);
}

.foot__link:hover,
.foot__link:focus-visible {
    color: var(--gold-deep);
}

.foot__link:hover::after,
.foot__link:focus-visible::after {
    transform: scaleX(1);
    opacity: .6;
}

:focus-visible {
    outline: 1px solid var(--gold-deep);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Custom cursor (pointer devices only)
   -------------------------------------------------------------------------- */

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 1px solid rgba(191, 155, 48, .55);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    display: none;
    will-change: transform;
}

.cursor::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: var(--gold);
    border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
    .cursor { display: block; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .title { letter-spacing: .1em; text-indent: .1em; }
    .box   { width: 94%; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .box { width: min(340px, 46%); }
    .content { gap: .8rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion — everything resolves to its final state, nothing moves.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ch > i         { transform: none !important; }
    .loader__logo   { clip-path: none !important; }
    .vein           { opacity: .5 !important; stroke-dashoffset: 0 !important; }
    .rule           { transform: scaleX(1) !important; }
    .rule > span    { opacity: 1 !important; }
    .tagline, .foot { opacity: 1 !important; }
    .box__glow      { opacity: .5 !important; }
    .box__sweep     { display: none; }
    .bg__dust       { display: none; }
    .cursor         { display: none !important; }

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