/* ====== /happy-place ======
   Built 2026-09-19 on the site's system (no Figma frame); loads after
   home.css for the .hero pattern. The photographs are the page: a full-bleed
   hero with a slow drift, the intro, a 24-photo grid, one lightbox. */

/* ── 1 · Hero: the tiger looking back ─────────────────────────────── */
.hp-hero {
    isolation: isolate;
    min-height: 620px; align-items: flex-end;
    padding-block: var(--space-15);
    background: var(--primary-900);
}
.hp-hero__photo {                                   /* the photo, drifting; darkened toward the copy */
    position: absolute; inset: 0; z-index: -1;
    background: url('../../images/happy-place/hero.webp') 72% 30% / cover no-repeat;   /* the tiger's face in the right half, clear of the headline */
    animation: hp-drift 40s ease-in-out infinite alternate;
    will-change: transform;
}
.hp-hero__photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(21, 0, 27, .55) 0%, rgba(21, 0, 27, .2) 50%, rgba(21, 0, 27, 0) 70%),
        linear-gradient(180deg, rgba(21, 0, 27, .1) 0%, rgba(21, 0, 27, .3) 50%, rgba(21, 0, 27, .92) 100%);
}
@keyframes hp-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(1.5%, -1%); } }
.hp-hero__inner { gap: var(--space-4); }
.hp-hero__eyebrow { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
.hp-hero h1 { max-width: 18ch; font-size: var(--t-h1); line-height: var(--lh-tight); text-shadow: 0 2px 24px rgba(21, 0, 27, .7); }
.hp-hero__credit { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: .04em; color: var(--c-text-muted); }

/* ── 2 · Intro ────────────────────────────────────────────────────── */
.hp-intro { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.hp-intro__text { font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text); }
.hp-intro__place { margin-top: var(--space-5); font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }

/* ── 3 · The grid ─────────────────────────────────────────────────── */
.hp-gallery { background: var(--primary-800); padding-top: 0; }
.hp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hp-tile {
    display: block; width: 100%; height: 100%;
    border-radius: var(--radius-card); overflow: hidden;
    border: 1px solid rgba(171, 235, 240, .14);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .4);
    background: var(--primary-900);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: zoom-in;
}
.hp-tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .7s ease; }
/* the one portrait frame crops to the row's 3:2 like the rest; it opens whole in the lightbox */
.hp-tile:hover, .hp-tile:focus-visible { transform: translateY(-4px); border-color: rgba(171, 235, 240, .45); box-shadow: var(--gloss-edge), var(--gloss-glow), 0 24px 48px rgba(0, 0, 0, .5); }
.hp-tile:hover img { transform: scale(1.04); }

/* ── The lightbox ─────────────────────────────────────────────────── */
.hp-light {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: rgba(6, 0, 10, .94); color: var(--c-text);
    display: none;
}
.hp-light[open] { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; animation: hp-light-in .25s ease; }
@keyframes hp-light-in { from { opacity: 0; } to { opacity: 1; } }
.hp-light::backdrop { background: transparent; }
html:has(.hp-light[open]) { overflow: hidden; scrollbar-gutter: stable; }
.hp-light__figure { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-height: 100dvh; padding-block: var(--space-6); }
.hp-light__img { max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transition: opacity .2s ease; }
.hp-light__img.is-loading { opacity: .4; }
.hp-light__cap { display: flex; flex-direction: column; align-items: center; gap: var(--space-1, 4px); text-align: center; font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: .04em; color: var(--c-text-muted); }
.hp-light__count { color: var(--c-accent-cyan); }
.hp-light__nav {
    grid-row: 1; width: 40px; height: 40px; justify-self: center; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: var(--c-text); box-shadow: var(--gloss-edge);
}
.hp-light__nav--prev { grid-column: 1; }
.hp-light__nav--next { grid-column: 3; }
.hp-light__nav:hover, .hp-light__close:hover { background: var(--c-accent-cyan); color: var(--c-primary-dark); }
.hp-light__close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: var(--c-text); box-shadow: var(--gloss-edge);
}

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
    .hp-light[open] { grid-template-columns: 72px minmax(0, 1fr) 72px; }
    .hp-light__cap { flex-direction: row; gap: var(--space-4); align-items: baseline; }
}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .hp-hero { min-height: 774px; }
    .hp-hero h1 { font-size: var(--t-display-1); max-width: 14ch; }
    .hp-intro__text { max-width: 900px; }
    .hp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}