/* ============================================================
   SANCTUM POLISH — Visual enhancement layer
   Loaded after inline styles to override and elevate.
   Gold/black/white palette only. Cormorant + Syne fonts.
   ============================================================ */

/* ============================================================
   SCROLL ANIMATIONS — More noticeable, premium-feeling
   ============================================================ */

/* Bigger translateY + subtle scale for dramatic entrance */
.fade-in {
    opacity: 0;
    transform: translateY(64px) scale(0.975);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delays — tuned for 1s base transition */
.fade-in.d1 { transition-delay: 0.12s; }
.fade-in.d2 { transition-delay: 0.24s; }
.fade-in.d3 { transition-delay: 0.36s; }
.fade-in.d4 { transition-delay: 0.48s; }
.fade-in.d5 { transition-delay: 0.60s; }

/* Wider slide for left variant */
.fade-left {
    opacity: 0;
    transform: translateX(-48px);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   BUTTONS — Glow, lift, edge highlight
   ============================================================ */

/* Base .btn — lift + edge glow on hover */
.btn {
    position: relative;
    overflow: hidden;
    transition:
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle inner sheen sweep */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(201, 169, 110, 0.08) 45%,
        rgba(201, 169, 110, 0.14) 55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn:not(.btn-loading):hover {
    transform: translateY(-3px);
}

.btn:not(.btn-loading):hover::after {
    opacity: 1;
}

/* Outline button hover — edge glow */
.btn:not(.btn-filled):hover {
    background: rgba(201, 169, 110, 0.06);
    border-color: rgba(201, 169, 110, 0.85);
    color: #d4b578;
    box-shadow:
        0 6px 28px rgba(201, 169, 110, 0.16),
        0 0 0 1px rgba(201, 169, 110, 0.25),
        inset 0 0 20px rgba(201, 169, 110, 0.04);
}

/* Filled button hover — gold bloom */
.btn.btn-filled:not(.btn-loading):hover {
    background: #d4b578;
    border-color: #d4b578;
    color: #0a0a0a;
    box-shadow:
        0 8px 36px rgba(201, 169, 110, 0.45),
        0 2px 12px rgba(201, 169, 110, 0.25),
        0 0 0 1px rgba(212, 181, 120, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Click snap */
.btn:active {
    transform: translateY(-1px) !important;
    transition: transform 0.08s ease !important;
}

/* ============================================================
   MEMBER LOGIN BUTTON (nav) — glow upgrade
   ============================================================ */

.btn-member-login {
    transition:
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-member-login:hover {
    border-color: var(--warm) !important;
    background: rgba(201, 169, 110, 0.09) !important;
    box-shadow:
        0 0 18px rgba(201, 169, 110, 0.18),
        0 0 0 1px rgba(201, 169, 110, 0.3) !important;
    transform: translateY(-1px);
}

/* ============================================================
   READ-ON LINKS — Brighter, more expressive hover
   ============================================================ */

.read-on {
    transition:
        color 0.3s ease,
        gap 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        text-shadow 0.3s ease !important;
}

.read-on:hover {
    opacity: 1 !important;
    color: #d4b578 !important;
    gap: 12px !important;
    border-color: rgba(201, 169, 110, 0.5) !important;
    text-shadow: 0 0 20px rgba(201, 169, 110, 0.35) !important;
}

/* ============================================================
   TIER ITEMS — Subtle gold slide on hover
   ============================================================ */

.tier-item {
    transition:
        border-color 0.35s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.35s ease !important;
}

.tier-item:hover {
    transform: translateX(8px);
    background: rgba(201, 169, 110, 0.02);
}

/* ============================================================
   NAV BACK LINK — gold on hover
   ============================================================ */

.nav-back {
    transition: color 0.25s ease, letter-spacing 0.25s ease !important;
}

.nav-back:hover {
    color: rgba(201, 169, 110, 0.65) !important;
}

/* ============================================================
   CONTENT BLOCKS (deep pages) — lift in on hover
   ============================================================ */

.content-block {
    transition: border-color 0.35s ease !important;
}

.content-block:hover {
    border-color: rgba(201, 169, 110, 0.12) !important;
}

/* ============================================================
   MODAL BOX — subtle gold shimmer on open
   ============================================================ */

.modal-overlay.open .modal-box,
.gate-modal-overlay.open .gate-modal-box {
    box-shadow:
        0 0 0 1px rgba(201, 169, 110, 0.1),
        0 32px 80px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(201, 169, 110, 0.04);
}

/* ============================================================
   PHILOSOPHY PULLQUOTE — subtle glow pulse
   ============================================================ */

.philosophy-pullquote {
    border-left-color: rgba(201, 169, 110, 0.7);
    text-shadow: 0 0 60px rgba(201, 169, 110, 0.08);
    transition: border-left-color 0.5s ease;
}

/* ============================================================
   PAGE TRANSITION OVERLAY — injected by sanctum-transitions.js
   ============================================================ */

#sanctum-page-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#sanctum-page-overlay.exiting {
    transition: opacity 0.32s cubic-bezier(0.7, 0, 1, 1);
}