/* ═══════════════════════════════════════════
   Lucas Albuquerque — Photography Portfolio
   Theme: Dark cinematic — warm ambers on charcoal
   ═══════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────── */
:root {
    /* Dark palette */
    --clr-bg:          hsl(220, 12%, 8%);
    --clr-bg-alt:      hsl(220, 10%, 12%);
    --clr-surface:     hsl(220, 10%, 14%);
    --clr-accent:      hsl(36, 65%, 55%);
    --clr-accent-soft: hsl(36, 40%, 42%);
    --clr-accent-deep: hsl(30, 50%, 40%);
    --clr-text:        hsl(40, 15%, 88%);
    --clr-text-muted:  hsl(220, 8%, 55%);
    --clr-border:      hsl(220, 10%, 18%);

    /* Frame (card bg) */
    --clr-frame:       hsl(220, 10%, 11%);
    --clr-frame-border:hsl(220, 8%, 20%);
    --frame-shadow:    0 4px 24px hsla(0, 0%, 0%, .35),
                       0 1px 6px  hsla(0, 0%, 0%, .25);

    /* Typography */
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Sizes */
    --photo-max-w: 520px;
    --navbar-h: 52px;

    /* Transitions */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset ─────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ff-body);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    line-height: 1.6;
    min-height: 100dvh;
    overflow-x: hidden;
    transition: opacity .4s var(--ease-out);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
}

/* ── Subtle background texture ─────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, hsla(36, 50%, 30%, .08), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 100%, hsla(220, 40%, 20%, .1), transparent 60%);
    pointer-events: none;
}

/* ── Loader ────────────────────────────── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg);
    transition: opacity .5s var(--ease-out), visibility .5s;
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader__camera {
    color: var(--clr-accent);
    animation: loaderPulse 1.6s var(--ease-out) infinite;
}

@keyframes loaderPulse {
    0%, 100% { opacity: .4; transform: scale(.95); }
    50%      { opacity: 1;  transform: scale(1.05); }
}

/* ── Navbar (fixed, compact) ───────────── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7000;
    height: var(--navbar-h);
    background: hsla(220, 12%, 8%, .82);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid hsla(220, 10%, 100%, .06);
    transition: box-shadow .3s var(--ease-out);
}

.navbar.is-scrolled {
    box-shadow: 0 2px 20px hsla(0, 0%, 0%, .4);
}

.navbar__inner {
    max-width: 900px;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar__icon {
    color: var(--clr-accent);
    flex-shrink: 0;
    transition: transform .3s var(--ease-out);
}

.navbar:hover .navbar__icon {
    transform: rotate(-6deg) scale(1.05);
}

.navbar__name {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: .03em;
    color: var(--clr-text);
}

/* ── Hero Section ──────────────────────── */
.hero {
    text-align: center;
    padding: calc(var(--navbar-h) + var(--space-xl)) var(--space-md) var(--space-xl);
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp .8s var(--ease-out) .3s forwards;
    position: relative;
}

/* Decorative divider line below hero */
.hero::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
    margin: var(--space-lg) auto 0;
}

.hero__title {
    font-family: var(--ff-display);
    font-weight: 300;
    font-size: clamp(2.8rem, 8vw, 5rem);
    letter-spacing: .1em;
    text-transform: lowercase;
    color: var(--clr-text);
    line-height: 1.35;
    padding-bottom: .1em;
    background: linear-gradient(135deg, var(--clr-text) 40%, var(--clr-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__quote {
    font-family: var(--ff-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: hsl(40, 12%, 68%);
    margin-top: var(--space-sm);
    letter-spacing: .02em;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

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

/* ── Gallery ───────────────────────────── */
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-md) var(--space-lg);
    max-width: calc(var(--photo-max-w) + var(--space-md) * 2);
    margin: 0 auto;
}

/* ── Photo Card ────────────────────────── */
.photo-card {
    width: 100%;
    max-width: var(--photo-max-w);
    background: var(--clr-frame);
    border: 1px solid var(--clr-frame-border);
    border-radius: 6px;
    padding: 14px 14px 18px;
    box-shadow: var(--frame-shadow);
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Entrance animation */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease-out),
                transform .6s var(--ease-out),
                box-shadow .3s var(--ease-out),
                border-color .3s var(--ease-out);
}

.photo-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.photo-card:hover {
    box-shadow: 0 8px 36px hsla(0, 0%, 0%, .45),
                0 2px 10px hsla(0, 0%, 0%, .25);
    border-color: hsla(36, 65%, 55%, .25);
}

/* Subtle amber glow on hover */
.photo-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 6px;
    background: linear-gradient(135deg, hsla(36, 65%, 55%, .08), transparent 60%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
    pointer-events: none;
    z-index: 1;
}

.photo-card:hover::before {
    opacity: 1;
}

.photo-card__img-wrap {
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
    background: var(--clr-bg-alt);
    aspect-ratio: auto;
    position: relative;
    z-index: 2;
}

.photo-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}

.photo-card:hover .photo-card__img {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.photo-card__caption {
    position: relative;
    z-index: 2;
    font-family: var(--ff-body);
    font-size: .85rem;
    font-weight: 400;
    color: var(--clr-text-muted);
    margin-top: 12px;
    line-height: 1.55;
    text-align: center;
}

.photo-card__date {
    position: relative;
    z-index: 2;
    display: block;
    font-size: .72rem;
    font-weight: 300;
    color: var(--clr-accent-soft);
    margin-top: 6px;
    text-align: center;
    letter-spacing: .04em;
}

/* ── Sentinel & Scroll Loader ──────────── */
.sentinel {
    height: 1px;
}

.scroll-loader {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: var(--space-md) 0 var(--space-xl);
}

.scroll-loader.is-active {
    display: flex;
}

.scroll-loader__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-accent-soft);
    animation: dotBounce .9s var(--ease-out) infinite;
}

.scroll-loader__dot:nth-child(2) { animation-delay: .15s; }
.scroll-loader__dot:nth-child(3) { animation-delay: .3s; }

@keyframes dotBounce {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40%           { opacity: 1;  transform: scale(1.2); }
}

/* ── Empty State ───────────────────────── */
.empty-state {
    text-align: center;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--clr-text-muted);
    padding: var(--space-xl) var(--space-md);
}

/* ── Footer ────────────────────────────── */
.footer {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    font-size: .75rem;
    color: var(--clr-text-muted);
    letter-spacing: .04em;
    border-top: 1px solid var(--clr-border);
    margin-top: var(--space-lg);
}

/* ── Lightbox ──────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: hsla(220, 12%, 4%, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease-out), visibility .35s;
}

.lightbox[open],
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 2rem;
    color: hsla(0, 0%, 100%, .7);
    transition: color .2s, transform .2s;
    line-height: 1;
    z-index: 1;
}

.lightbox__close:hover {
    color: #fff;
    transform: scale(1.15);
}

.lightbox__img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 4px;
    box-shadow: 0 12px 60px hsla(0, 0%, 0%, .6);
    transform: scale(.95);
    transition: transform .4s var(--ease-out);
}

.lightbox.is-open .lightbox__img {
    transform: scale(1);
}

.lightbox__caption {
    color: hsla(0, 0%, 100%, .65);
    font-size: .9rem;
    margin-top: var(--space-sm);
    text-align: center;
    max-width: 520px;
}

/* ── Responsive tweaks ─────────────────── */
@media (max-width: 560px) {
    :root {
        --photo-max-w: 100%;
        --navbar-h: 46px;
    }

    .navbar__name {
        font-size: .95rem;
    }

    .navbar__icon {
        width: 22px;
        height: 22px;
    }

    .hero {
        padding-top: calc(var(--navbar-h) + var(--space-lg));
        padding-bottom: var(--space-lg);
    }

    .hero__title {
        letter-spacing: .06em;
    }

    .gallery {
        padding: 0 var(--space-sm) var(--space-lg);
    }

    .photo-card {
        padding: 10px 10px 14px;
        border-radius: 4px;
    }
}

/* tablets & medium */
@media (min-width: 561px) and (max-width: 900px) {
    .hero__title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
}

/* ── Utility: reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}