/* ═══════════════════════════════════════════════════
   MILD 2 WILD — LUXE LAYER
   Visual-only upgrades. Load after styles.css.
   ═══════════════════════════════════════════════════ */

/* ── Body grain + diamond mesh ────────────────────── */
body.luxe {
    background-color: var(--noir-pure);
    background-image:
        /* Faint diamond mesh — matches debossed box pattern */
        repeating-linear-gradient(45deg,  rgba(212,168,67,0.018) 0 1px, transparent 1px 38px),
        repeating-linear-gradient(-45deg, rgba(212,168,67,0.018) 0 1px, transparent 1px 38px);
    background-attachment: fixed;
}

/* ── Subtle warm vignette over everything ─────────── */
body.luxe::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    background: radial-gradient(ellipse at center,
        transparent 50%,
        rgba(0,0,0,0.35) 100%);
    mix-blend-mode: multiply;
}

/* ── Cubic-bezier luxe curve ──────────────────────── */
:root {
    --ease-luxe: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ═══════════════════════════════════════════════════
   HERO CINEMATIC
   ═══════════════════════════════════════════════════ */

/* God-rays — volumetric beams from upper-right (matches door light) */
.hero-godrays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.5;
}
.hero-godrays::before,
.hero-godrays::after {
    content: '';
    position: absolute;
    top: -10%;
    right: 18%;
    width: 60%;
    height: 130%;
    background: conic-gradient(from 200deg at 50% 0%,
        transparent 0deg,
        rgba(245, 213, 116, 0.06) 8deg,
        rgba(212, 168, 67, 0.10) 12deg,
        rgba(245, 213, 116, 0.04) 18deg,
        transparent 28deg,
        transparent 320deg,
        rgba(245, 213, 116, 0.04) 340deg,
        rgba(212, 168, 67, 0.08) 348deg,
        rgba(245, 213, 116, 0.05) 354deg,
        transparent 360deg);
    transform-origin: 50% 0%;
    filter: blur(20px);
    animation: godraysBreath 9s ease-in-out infinite;
}
.hero-godrays::after {
    right: 10%;
    width: 50%;
    opacity: 0.6;
    filter: blur(35px);
    animation-duration: 13s;
    animation-direction: reverse;
}
@keyframes godraysBreath {
    0%,100% { transform: rotate(0deg)   scale(1);    opacity: 0.85; }
    50%     { transform: rotate(1.5deg) scale(1.04); opacity: 1; }
}

/* Sparkle flinters — slow, golden, occasional */
.hero-sparkle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #F5D574 50%, transparent 80%);
    box-shadow: 0 0 8px rgba(245,213,116,0.9), 0 0 18px rgba(212,168,67,0.6);
    opacity: 0;
    pointer-events: none;
    animation: sparkleFlash 7s ease-in-out infinite;
}
@keyframes sparkleFlash {
    0%, 75%, 100% { opacity: 0; transform: scale(0.5); }
    80%           { opacity: 1; transform: scale(1.2); }
    85%           { opacity: 0.5; transform: scale(1); }
    90%           { opacity: 0;   transform: scale(0.6); }
}

/* Hero card fan — breathing */
.hero-card-fan {
    animation: cardFanBreath 8s ease-in-out infinite;
}
@keyframes cardFanBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.012); }
}
.hero-card-fan .card-front {
    animation: cardFrontSway 9s ease-in-out infinite;
}
@keyframes cardFrontSway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(-1deg) translateY(-3px); }
}
.hero-card-fan .card-back-2 {
    animation: cardBack2Sway 11s ease-in-out infinite;
}
@keyframes cardBack2Sway {
    0%, 100% { transform: rotate(6deg) translateX(10%) translateY(3%); }
    50%      { transform: rotate(7deg) translateX(12%) translateY(2%); }
}
.hero-card-fan .card-back-3 {
    animation: cardBack3Sway 11s ease-in-out 0.4s infinite;
}
@keyframes cardBack3Sway {
    0%, 100% { transform: rotate(-9deg)  translateX(-14%) translateY(2%); }
    50%      { transform: rotate(-10deg) translateX(-16%) translateY(3%); }
}
.hero-card-fan:hover {
    animation-play-state: paused;
}

/* Gold-leaf glint sweep across the front card */
.hero-card-fan .card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 230, 160, 0.12) 47%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 230, 160, 0.12) 53%,
        transparent 70%);
    mix-blend-mode: screen;
    transform: translateX(-120%);
    animation: cardGlint 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cardGlint {
    0%, 85%, 100% { transform: translateX(-120%); }
    92%           { transform: translateX(120%); }
}

/* Logo reveal mask sweep at load */
.hero-left h1 img {
    -webkit-mask-image: linear-gradient(110deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
            mask-image: linear-gradient(110deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-size: 250% 100%;
            mask-size: 250% 100%;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    animation: logoReveal 2s var(--ease-luxe) 0.4s forwards;
}
@keyframes logoReveal {
    0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
    100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   FILIGREE DIVIDERS
   ═══════════════════════════════════════════════════ */

.luxe-divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 0;
}
.luxe-divider .line {
    flex: 1;
    height: 1px;
    background: var(--gold-border-gradient);
    opacity: 0.55;
}
.luxe-divider .ornament {
    width: 28px;
    height: 28px;
    color: var(--gold-mid);
    flex-shrink: 0;
}

/* Section-break full-width filigree (replaces .gold-divider visually but doesn't break existing markup) */
.luxe-section-break {
    position: relative;
    height: 1px;
    background: var(--gold-border-gradient);
    opacity: 0.4;
    overflow: visible;
}
.luxe-section-break::before {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--noir-pure);
    color: var(--gold-mid);
    padding: 0 1.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
}

/* Upgrade plain .gold-divider w-24 instances — keep them as short golden lines (no override needed) */

/* ═══════════════════════════════════════════════════
   BUTTON UPGRADE — METALLIC SWEEP
   ═══════════════════════════════════════════════════ */

.btn-gold {
    overflow: hidden;
    position: relative;
    transition: all 0.4s var(--ease-luxe);
}
.btn-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 35%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 65%);
    animation: btnSweep 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnSweep {
    0%, 80%, 100% { left: -100%; }
    90%           { left: 100%; }
}
.btn-gold:hover::before {
    animation-duration: 1.2s;
}
.btn-gold:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.btn-outline-gold {
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-luxe);
}
.btn-outline-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(212, 168, 67, 0.15),
        transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.btn-outline-gold:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   TIER CARD UPGRADE — 3D TILT + CURSOR GLOW
   ═══════════════════════════════════════════════════ */

.tier-card {
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-luxe), box-shadow 0.6s var(--ease-luxe), border-color 0.4s ease;
}
.tier-card .tier-name,
.tier-card .tier-price-now,
.tier-card .tier-eyebrow {
    transform: translateZ(20px);
    transition: transform 0.6s var(--ease-luxe);
}

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

/* Gold edge glow on hover */
.tier-card:hover {
    border-color: var(--gold-mid);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(212, 168, 67, 0.12),
        inset 0 0 60px rgba(212, 168, 67, 0.03);
}

/* ═══════════════════════════════════════════════════
   EDITORIAL TYPE
   ═══════════════════════════════════════════════════ */

.luxe-pullquote {
    position: relative;
    max-width: 36ch;
    margin: 0 auto;
    padding: 2rem 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.25;
    color: #e8d9a8;
    text-align: center;
}
.luxe-pullquote::before,
.luxe-pullquote::after {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 4rem;
    color: var(--gold-mid);
    opacity: 0.55;
    line-height: 1;
}
.luxe-pullquote::before { content: '“'; top: -0.1rem;     left: -0.2rem; }
.luxe-pullquote::after  { content: '”'; bottom: -0.6rem;  right: -0.2rem; }

.luxe-pullquote-attr {
    display: block;
    margin-top: 1rem;
    font-family: 'DM Mono', monospace;
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* Drop cap */
.luxe-dropcap::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-mid);
    font-weight: 400;
    margin-right: 0.4rem;
    line-height: 0.9;
}
/* Fallback for browsers without initial-letter */
@supports not (initial-letter: 3) {
    .luxe-dropcap::first-letter {
        float: left;
        font-size: 4.5rem;
        line-height: 0.85;
        font-family: 'Cormorant Garamond', serif;
        color: var(--gold-mid);
        margin: 0.2rem 0.5rem 0 0;
        font-weight: 400;
    }
}

/* Roman numeral pill (replaces 01/02/03 boxes) */
.roman-step {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-deep);
    position: relative;
    background: linear-gradient(135deg, rgba(212,168,67,0.04), transparent);
}
.roman-step::before,
.roman-step::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
}
.roman-step::before { top: -1px; left: -1px;  border-top: 1px solid var(--gold-mid);    border-left: 1px solid var(--gold-mid); }
.roman-step::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold-mid); border-right: 1px solid var(--gold-mid); }
.roman-step .num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--gold-light);
    letter-spacing: 0.05em;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   IMAGERY POLISH
   ═══════════════════════════════════════════════════ */

.tier-card .aspect-\[16\/10\] {
    position: relative;
    overflow: hidden;
}
.tier-card .aspect-\[16\/10\]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}
.tier-card .aspect-\[16\/10\] img {
    transition: transform 1.2s var(--ease-luxe), filter 0.6s ease;
}
.tier-card:hover .aspect-\[16\/10\] img {
    transform: scale(1.05);
    filter: brightness(1.05) saturate(1.1);
}

/* ═══════════════════════════════════════════════════
   STAT BAND — refined
   ═══════════════════════════════════════════════════ */

.ks-stat-band {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212,168,67,0.06), transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(212,168,67,0.04), transparent 60%),
        linear-gradient(180deg, var(--noir-rich) 0%, var(--noir-pure) 100%);
}

.ks-countdown-block .unit {
    background: linear-gradient(180deg, rgba(212,168,67,0.04) 0%, rgba(0,0,0,0.4) 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-luxe);
}
.ks-countdown-block .unit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245,213,116,0.15), transparent 40%);
    opacity: 0.5;
    pointer-events: none;
}
.ks-countdown-block .unit .n {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════
   USP STRIP — illuminated icons
   ═══════════════════════════════════════════════════ */

section[style*="var(--noir-rich)"] .w-12.h-12.border {
    transition: all 0.5s var(--ease-luxe);
    position: relative;
    overflow: visible;
}
section[style*="var(--noir-rich)"] .w-12.h-12.border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--gold-deep), transparent 60%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}
section[style*="var(--noir-rich)"] .w-12.h-12.border:hover::before {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   STAGGERED REVEAL (slower, more refined)
   ═══════════════════════════════════════════════════ */

[data-aos] {
    transition-timing-function: var(--ease-luxe) !important;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADERS — engraved feel
   ═══════════════════════════════════════════════════ */

.luxe-section-title {
    position: relative;
    display: inline-block;
}
.luxe-section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -3rem;
    width: 2rem;
    height: 1px;
    background: var(--gold-border-gradient);
    transform: translateY(-50%);
}
.luxe-section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -3rem;
    width: 2rem;
    height: 1px;
    background: var(--gold-border-gradient);
    transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════
   GLOW ACCENTS — corner gold leaf
   ═══════════════════════════════════════════════════ */

.luxe-corner-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    pointer-events: none;
    opacity: 0.4;
    filter: blur(40px);
}
.luxe-corner-glow.top-left {
    top: 0; left: 0;
    background: radial-gradient(circle at top left, rgba(212,168,67,0.3), transparent 70%);
}
.luxe-corner-glow.bottom-right {
    bottom: 0; right: 0;
    background: radial-gradient(circle at bottom right, rgba(212,168,67,0.3), transparent 70%);
}

/* ═══════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — kill all the loop animations
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}