/* =================================================================
   WESTMORELAND GLASS COLLECTORS' CLUB
   Museum-Quality Custom Stylesheet
   ================================================================= */

/* -----------------------------------------------------------------
   1. FOUNDATION
   ----------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Page load transition */
body {
    opacity: 1;
    transition: opacity 0.7s ease;
}
body.is-loading {
    opacity: 0;
}

::selection {
    background: rgba(197, 165, 90, 0.25);
    color: #F5F0E8;
}

/* -----------------------------------------------------------------
   2. CUSTOM SCROLLBAR — Thin, gold accent
   ----------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: rgba(197, 165, 90, 0.25);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(197, 165, 90, 0.45);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 165, 90, 0.25) #0a0a0a;
}


/* -----------------------------------------------------------------
   3. KEN BURNS ANIMATIONS — Slow cinematic zoom/pan
   ----------------------------------------------------------------- */

@keyframes kenBurns0 {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}
@keyframes kenBurns1 {
    0%   { transform: scale(1.1)  translate(-1%, 0); }
    100% { transform: scale(1)    translate(1%, -2%); }
}
@keyframes kenBurns2 {
    0%   { transform: scale(1.05) translate(1%, -1%); }
    100% { transform: scale(1.15) translate(-1%, 1%); }
}

.ken-burns-0 {
    animation: kenBurns0 20s ease-in-out infinite alternate;
    will-change: transform;
}
.ken-burns-1 {
    animation: kenBurns1 22s ease-in-out infinite alternate;
    will-change: transform;
}
.ken-burns-2 {
    animation: kenBurns2 24s ease-in-out infinite alternate;
    will-change: transform;
}


/* -----------------------------------------------------------------
   4. SCROLL REVEAL ANIMATIONS
   ----------------------------------------------------------------- */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: scrollRevealIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scrollRevealIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger children: use animation-delay via inline style */
.scroll-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* JS-driven reveal class */
.reveal-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------------------------------
   5. GLASS CARD EFFECTS — Museum case styling
   ----------------------------------------------------------------- */

.glass-case {
    position: relative;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-case:hover {
    transform: translateY(-6px);
}

/* Glass glow — animated subtle box-shadow */
@keyframes glassGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(197, 165, 90, 0.0); }
    50%      { box-shadow: 0 0 50px rgba(197, 165, 90, 0.08); }
}
.glass-glow {
    animation: glassGlow 5s ease-in-out infinite;
}


/* -----------------------------------------------------------------
   6. NAVIGATION EFFECTS
   ----------------------------------------------------------------- */

/* Underline slide-in on nav links */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 1px;
    background: #C5A55A;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}


/* -----------------------------------------------------------------
   7. PARALLAX BACKGROUND
   ----------------------------------------------------------------- */

.parallax-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    will-change: transform;
}

/* Disable parallax on mobile (performance) */
@media (max-width: 1023px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}


/* -----------------------------------------------------------------
   8. SCROLL INDICATOR ANIMATION
   ----------------------------------------------------------------- */

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50%      { transform: translateY(6px); opacity: 0.8; }
}
.scroll-line {
    animation: scrollBounce 2.5s ease-in-out infinite;
}


/* -----------------------------------------------------------------
   9. TEXT REVEAL ANIMATION
   ----------------------------------------------------------------- */

@keyframes textRevealUp {
    0%   { clip-path: inset(100% 0 0 0); transform: translateY(20px); }
    100% { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}
.text-reveal {
    animation: textRevealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* -----------------------------------------------------------------
   10. LINE CLAMP UTILITY
   ----------------------------------------------------------------- */

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* -----------------------------------------------------------------
   11. PROSE / RICH TEXT STYLES
   ----------------------------------------------------------------- */

.prose h2,
.prose h3 {
    font-family: var(--font-display);
}
.prose a {
    color: var(--color-gold);
    text-decoration: underline;
    text-decoration-color: rgba(197, 165, 90, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s;
}
.prose a:hover {
    text-decoration-color: var(--color-gold);
}


/* -----------------------------------------------------------------
   12. HORIZONTAL SCROLL SNAP (Events on mobile)
   ----------------------------------------------------------------- */

.snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.snap-start {
    scroll-snap-align: start;
}

/* Hide scrollbar for horizontal scroll sections */
.snap-x::-webkit-scrollbar {
    display: none;
}
.snap-x {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* -----------------------------------------------------------------
   13. FOCUS STATES (Accessibility)
   ----------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid #C5A55A;
    outline-offset: 3px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}


/* -----------------------------------------------------------------
   14. REDUCED MOTION
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .ken-burns-0,
    .ken-burns-1,
    .ken-burns-2 {
        animation: none;
    }
    .parallax-bg {
        background-attachment: scroll;
    }
    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}


/* -----------------------------------------------------------------
   15. PRINT STYLES
   ----------------------------------------------------------------- */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    header, footer,
    .scroll-line,
    [x-data] button {
        display: none !important;
    }
    section {
        page-break-inside: avoid;
        padding: 1rem 0 !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    img {
        max-width: 100% !important;
        filter: grayscale(100%);
    }
    .bg-obsidian, .bg-charcoal-dark, .bg-charcoal {
        background: #fff !important;
    }
    .text-cream, .text-cream\/80, .text-cream\/60, .text-cream\/40 {
        color: #000 !important;
    }
    .text-gold, .text-gold\/50, .text-gold\/60 {
        color: #333 !important;
    }
}