/* ═══════════════════════════════════════════
   WEDDING GALLERY V4 — MOBILE-FIRST
   Portrait hero. Scroll-pan landscapes.
   Clip-path reveals. Breathing sections.
   ═══════════════════════════════════════════ */

:root {
    --bg: #0a0908;
    --text: #ede8e0;
    --muted: rgba(237, 232, 224, .52);
    --accent: #c9a96e;
    /* kalire preloader palette — Jewel variant */
    --gold: #c9a96e;
    --gold-deep: #8a7348;
    --gold-mid: #b89555;
    --gold-soft: #e2cfa0;
    --gold-hi: #f0e4c4;
    --ruby: #a33d48;
    --emerald: #4a6b55;
    --copper: #b8734a;
    --saffron: #e0a84a;
    --sage: #7a8f72;
    --pad: clamp(1rem, 4vw, 2.5rem);
    --gap: clamp(.5rem, 1.6vw, .875rem);
    /*
      Type system — dark gold wedding, adult register
      display (ff-d): titles, breaths, names — invitation serif
      voice  (ff-v): narratives, whispers, UI — quiet modern sans
    */
    --ff-d: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --ff-v: 'Outfit', system-ui, -apple-system, sans-serif;
    --ff-b: var(--ff-v);
    --ff-a: var(--ff-v);
    --t-title: clamp(1.95rem, 6.5vw, 2.65rem);
    --t-voice: clamp(1rem, 2.7vw, 1.1rem);
    --t-whisper: clamp(.92rem, 2.4vw, 1.02rem);
    --t-breath: clamp(1.5rem, 4.4vw, 2rem);
    --t-punch: clamp(1.85rem, 6.2vw, 2.35rem);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --r: 3px;
}

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

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--ff-v);
    font-size: var(--t-voice);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* ═══════════ PRELOADER — Royal Cascade Kalire ═══════════ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    contain: layout style paint;
}

body.is-preloading {
    overflow: hidden;
    height: 100%;
}

.pre-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    width: 100%;
    max-width: 420px;
}

.pre-art {
    width: clamp(170px, 48vw, 240px);
    margin-bottom: 1.75rem;
}

.pre-art svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

#preloader .draw {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* charms start hidden — gems inside <use> ride along with charm opacity */
#preloader .charm {
    opacity: 0;
}

#preloader .sway-root > .gem {
    opacity: 0;
}

.pre-kicker {
    font-family: var(--ff-v);
    font-style: normal;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .55rem;
    opacity: 0;
}

.pre-names {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .15em;
    opacity: 0;
    margin: 0;
}

.pre-names .pn {
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: clamp(2rem, 7.8vw, 3rem);
    letter-spacing: 0.01em;
    line-height: 1.05;
}

.pre-names .pa {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 4.4vw, 1.65rem);
    color: var(--gold);
    padding: 0 0.08em;
}

.pre-where {
    margin-top: .9rem;
    font-family: var(--ff-v);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
}

/* ═══════════ HERO ═══════════
   Before (broken):
     photo ──fade ends──|── new black section starts  → hairline seam

   After:
     photo with fade painted over bottom half
     fade + solid black CONTINUE past the photo edge
     next section is already inside that same black
   ═══════════════════════════ */
.hero {
    position: relative;
    background: var(--bg);
    /* short black tail — fade eases into page bg, not a heavy band */
    padding-bottom: 8vh;
}

/* Photo only. overflow clips the image, NOT the fade. */
.hero-frame {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    background: var(--bg);
}

.hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
}

/* Soft top shade */
.hero-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 9, 8, .22) 0%, transparent 18%);
}

/* Fade is a SIBLING of the frame (child of .hero), so overflow:hidden
   on the photo cannot cut it off. Soft start → real darkness under title. */
.hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    /* face open; darkness builds only in the lower band */
    top: 58svh;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10, 9, 8, 0.08) 15%,
        rgba(10, 9, 8, 0.22) 32%,
        rgba(10, 9, 8, 0.48) 52%,
        rgba(10, 9, 8, 0.72) 72%,
        rgba(10, 9, 8, 0.9) 88%,
        var(--bg) 100%
    );
}

/* optional spacer if you want more runway without touching padding */
.hero-tail {
    display: none;
}

/* legacy hooks */
.hero-img {
    position: absolute;
    inset: 0;
}

.hero-img img {
    object-position: center 28%;
}

.hero-overlay {
    display: none;
}

/* ── Hero nameplate — option 05 one-line editorial ── */
.hero-title {
    position: absolute;
    left: 0;
    right: auto;
    bottom: auto;
    /* sits in the softer dark ramp, not a hard black bar */
    top: 78%;
    z-index: 3;
    padding: 0 var(--pad);
    max-width: 90%;
    text-align: left;
    pointer-events: none;
    animation: heroTitleIn 1.2s var(--ease) 0.3s both;
}

.hero-name {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 400;
    font-size: clamp(2.55rem, 9.5vw, 3.35rem);
    letter-spacing: 0.01em;
    line-height: 1.12;
    color: #f0ebe3;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 4px 28px rgba(0, 0, 0, 0.55);
}

/* “This is” — quieter italic lead-in */
.hero-name .hero-soft {
    font-style: italic;
    font-weight: 400;
    font-size: 0.68em;
    letter-spacing: 0.02em;
    color: rgba(237, 232, 224, 0.7);
    vertical-align: baseline;
}

.hero-name .hero-who {
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    color: #f5efe6;
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title {
        animation: none;
    }
}

.hero-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 var(--pad) 12vh;
    z-index: 2;
    text-align: center;
}

.hero-kicker {
    font-family: var(--ff-v);
    font-style: normal;
    font-size: .75rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0;
    margin-bottom: .4rem;
}

.hero-title {
    font-family: var(--ff-d);
    font-size: clamp(2.1rem, 8vw, 3.4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(24px);
}

.hero-title em {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

.scroll-cue {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: var(--accent);
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: .3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(.5);
    }
}

/* ═══════════ ACT SECTIONS — tight openers, photos run ═══════════ */
.act {
    padding: 2.4rem var(--pad) 1.15rem;
    text-align: center;
}

.act--compact {
    padding-top: 1.25rem;
}

/* Chapter marker only — not a full-screen stop */
.act-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 0 0 1rem;
    box-sizing: border-box;
}

.act-open--solo {
    padding-bottom: 1.15rem;
}

.act-label {
    margin-bottom: .4rem;
}

.act-label span {
    font-family: var(--ff-v);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--gold);
    text-transform: uppercase;
    opacity: 0;
}

.act-title {
    font-family: var(--ff-d);
    font-size: var(--t-title);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.12;
    margin: 0 auto .55rem;
    max-width: 16ch;
    color: rgba(245, 239, 230, 0.96);
    opacity: 0;
    transform: translateY(16px);
}

/* Sangeet open — soft question, then a controlled wink */
.act-open--sangeet {
    padding: 0.35rem 0 1.85rem;
}

.act-title--ask {
    max-width: min(28ch, 92vw);
    font-size: clamp(1.5rem, 5.4vw, 2.05rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: rgba(237, 232, 224, 0.72);
    margin-bottom: 0.55rem;
}

.act-punch {
    font-family: var(--ff-d);
    font-size: var(--t-punch);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0 auto;
    color: var(--gold-soft);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(10px);
}

.act-narrative {
    font-family: var(--ff-v);
    font-style: normal;
    font-size: var(--t-voice);
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: rgba(237, 232, 224, .78);
    max-width: 32ch;
    margin: 0 auto;
    opacity: 0;
}

/* Narrative hinge between full-frames (e.g. day → night) */
.whisper--bridge {
    font-family: var(--ff-d);
    font-style: italic;
    font-size: clamp(1.2rem, 3.8vw, 1.55rem);
    font-weight: 400;
    color: rgba(237, 232, 224, 0.78);
    max-width: 18ch;
    padding: 1.1rem 0 1.35rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.whisper {
    font-family: var(--ff-v);
    font-style: normal;
    font-size: var(--t-whisper);
    font-weight: 300;
    color: rgba(237, 232, 224, .55);
    line-height: 1.4;
    max-width: 30ch;
    margin: 0 auto;
    padding: .45rem 0 1.05rem;
    opacity: 0;
    text-align: center;
}

/* ═══════════════════════════════════
   PAN-FRAME — The core mobile innovation
   Landscape image in a tall portrait window.
   Image pans horizontally as you scroll vertically.
   ═══════════════════════════════════ */
.pan-frame {
    position: relative;
    width: 100%;
    height: 68vh;
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--r);
    margin: 0 auto var(--gap);
}

.pan-frame--tall {
    height: 80vh;
}

/* Tighter portrait crop — subject fills the phone window */
.pan-frame--close {
    height: 72vh;
    min-height: 380px;
}

.pan-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    /* wider than container for panning room */
    height: 100%;
    object-fit: cover;
    /* --focus-y set from data-focus-y (default 50). Locks vertical crop
       so tall phone frames don't park on empty floor / sky. */
    object-position: center var(--focus-y, 50%);
    will-change: transform;
}

/* Starting positions now set dynamically by JS based on data-focus-x */

/* ═══════════════════════════════════
   FULL-FRAME — Show entire photo (no crop)
   Natural aspect ratio, letterbox only if needed.
   ═══════════════════════════════════ */
.full-frame {
    width: 100%;
    /* comfy stack — more air than pan-frame gap */
    margin: 0 auto clamp(1.15rem, 3.8vw, 1.85rem);
    border-radius: var(--r);
    overflow: hidden;
    background: #000;
}

/* last full-frame in an act: keep a little extra tail before breath */
.act .full-frame:last-child {
    margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}

.full-frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ═══════════════════════════════════
   PORTRAIT-FRAME — Full-bleed portrait images
   These fill the phone screen edge-to-edge.
   ═══════════════════════════════════ */
.portrait-frame {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--r);
    margin-bottom: var(--gap);
    opacity: 0;
    transform: translateY(16px);
}

.portrait-frame.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.portrait-frame--hero {
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    width: calc(100% + 2 * var(--pad));
    border-radius: 0;
    margin-bottom: 1.5rem;
}

.portrait-frame--small {
    max-width: 260px;
    margin: 0 auto var(--gap);
}

/* ═══════════════════════════════════
   REVEAL-FRAME — Clip-path reveals
   Circle or vertical split, animated on scroll.
   ═══════════════════════════════════ */
.reveal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--r);
    margin-bottom: var(--gap);
}

/* Circle: starts as tiny dot, expands to full */
.reveal-frame[data-reveal="circle"] {
    clip-path: circle(0% at 50% 50%);
}

.reveal-frame[data-reveal="circle"].revealed {
    clip-path: circle(75% at 50% 50%);
    transition: clip-path 1.2s var(--ease);
}

/* Vertical split: two halves open like doors */
.reveal-frame[data-reveal="vertical-split"] {
    clip-path: inset(0 50% 0 50%);
}

.reveal-frame[data-reveal="vertical-split"].revealed {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s var(--ease);
}

/* ═══════════════════════════════════
   PAIR-FRAME — Two images side by side
   Gemini-paired images shown together.
   ═══════════════════════════════════ */
.pair-frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.pair-img {
    aspect-ratio: 1 / 1;
    /* square crop for pairs — shows faces */
    overflow: hidden;
    border-radius: var(--r);
    opacity: 0;
    transform: translateY(12px);
}

.pair-img.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ═══════════════════════════════════
   BREATH — type owns the black beat
   ═══════════════════════════════════ */
.breath {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 38vh;
    padding: 2.25rem var(--pad);
    text-align: center;
    gap: 1rem;
}

.breath--img {
    min-height: auto;
    padding: 2.5rem var(--pad) 2rem;
}

.breath--tall {
    padding: 2.25rem var(--pad) 3rem;
}

.breath-text {
    font-family: var(--ff-d);
    font-size: var(--t-breath);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.28;
    color: rgba(237, 232, 224, .8);
    max-width: 16ch;
    opacity: 0;
    transform: translateY(12px);
}

/* breath after a photo inside the section — keep type close to that image */
.breath--img .reveal-frame,
.breath--img .portrait-frame,
.breath--img .full-frame {
    margin-bottom: .85rem;
    width: 100%;
}

.breath--img .full-frame {
    /* slightly more air under a wide night plate before the line */
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════
   GOODBYE — Fade to pure black
   ═══════════════════════════════════ */
.goodbye-frame {
    position: relative;
    width: calc(100% + 2 * var(--pad));
    margin-left: calc(-1 * var(--pad));
    height: 85vh;
    overflow: hidden;
}

.goodbye-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% 30%;
    /* Center on the forehead kiss */
    position: absolute;
    top: 0;
    left: 0;
}

.goodbye-dark {
    position: absolute;
    inset: 0;
    background: var(--bg);
    opacity: 0;
}

.goodbye-frame.dimmed img {
    /* no darkening — let the moment breathe */
}

.goodbye-frame.dimmed .goodbye-dark {
    opacity: 0;
}

.goodbye-text {
    position: absolute;
    bottom: 14vh;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--ff-d);
    font-size: var(--t-breath);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.28;
    padding: 0 var(--pad);
    opacity: 0;
    transform: translateY(16px);
    z-index: 2;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0, 0, 0, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}

.lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lightbox img {
    max-width: 94vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r);
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.lightbox.open img {
    pointer-events: auto;
}

.lb-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    font-size: 1.75rem;
    opacity: .6;
    z-index: 10;
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.25rem;
    opacity: .4;
    z-index: 10;
    padding: .75rem;
}

.lb-prev {
    left: .25rem;
}

.lb-next {
    right: .25rem;
}

.lb-count {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .7rem;
    color: var(--muted);
    letter-spacing: .1em;
    z-index: 1;
    pointer-events: none;
}

/* ═══════════ DESKTOP 768+ ═══════════ */
@media (min-width: 768px) {
    .pan-frame {
        height: 75vh;
    }

    .pan-frame--tall {
        height: 90vh;
    }

    .portrait-frame--hero {
        max-width: 500px;
        margin: 0 auto 1.5rem;
        border-radius: var(--r);
        width: 100%;
    }

    .portrait-frame--small {
        max-width: 320px;
    }

    .act {
        max-width: 720px;
        margin: 0 auto;
        padding-top: 3rem;
    }

    .breath {
        min-height: 44vh;
    }

    .pair-img {
        aspect-ratio: 3 / 2;
    }
}

/* ═══════════ LARGE DESKTOP 1200+ ═══════════ */
@media (min-width: 1200px) {
    .pan-frame {
        height: 80vh;
    }

    .act {
        max-width: 820px;
    }

    .portrait-frame--hero {
        max-width: 560px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    #preloader .charm,
    #preloader .gem,
    #preloader .pre-kicker,
    #preloader .pre-names,
    #preloader .pre-where {
        opacity: 1;
    }
}