/* =============================================================================
   Base styles & custom overrides
   Tailwind handles layout — this file covers fonts, animations, and anything
   Tailwind can't express cleanly.
============================================================================= */

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Serif headings — Georgia is available on all major platforms */
h1, h2, h3, .font-serif {
    font-family: Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Lightbox
-------------------------------------------------------------------------- */
.lightbox-overlay {
    animation: fadeIn 0.2s ease;
}

.lightbox-content {
    animation: scaleIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Gallery thumbnails
-------------------------------------------------------------------------- */
@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

.gallery-thumb {
    position: relative;
    overflow: hidden;
    /* Warm shimmer while image loads; covered by the image once it arrives */
    background: linear-gradient(90deg, #eeece8 25%, #f5f3ef 50%, #eeece8 75%);
    background-size: 1600px 100%;
    animation: shimmer 1.6s infinite linear;
}

.gallery-thumb img {
    transition: transform 0.3s ease-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb:hover img {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Nav link underline
-------------------------------------------------------------------------- */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.2s ease;
    transform-origin: left;
}

.nav-link.active::after,
.nav-link:hover::after {
    transform: scaleX(1);
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Easing tokens
-------------------------------------------------------------------------- */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Page / section entrance
   Applied to the root div of About, Contact, PageView, GalleryPage
-------------------------------------------------------------------------- */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-enter {
    animation: pageEnter 0.35s var(--ease-out-quart) both;
}

/* --------------------------------------------------------------------------
   Gallery artwork entrance (staggered via inline animation-delay)
-------------------------------------------------------------------------- */
@keyframes artworkEnter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.artwork-enter {
    animation: artworkEnter 0.45s var(--ease-out-quart) both;
}

/* --------------------------------------------------------------------------
   Mobile nav menu entrance
-------------------------------------------------------------------------- */
@keyframes menuEnter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mobile-menu-enter {
    animation: menuEnter 0.2s var(--ease-out-quart) both;
}

/* --------------------------------------------------------------------------
   Lightbox image fade (prev / next navigation)
-------------------------------------------------------------------------- */
@keyframes lightboxImageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-image-enter {
    animation: lightboxImageEnter 0.2s ease-out both;
}

/* --------------------------------------------------------------------------
   Reduced motion — kill all animations for users who need it
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}