/* ------------------------------------------------------------------
   Leony Cuau Family Fund — landing
   Aesthetic: minimalist, premium, deep love & quiet luxury.
   Palette: ink black, warm cream, soft gilded champagne.
------------------------------------------------------------------ */

:root {
    --ink:        #0a0a0a;
    --ink-soft:   #14110f;
    --cream:      #f1ead9;
    --cream-soft: rgba(241, 234, 217, 0.78);
    --gilt:       #c9a96a;
    --gilt-soft:  rgba(201, 169, 106, 0.55);

    --slide-count: 1;            /* set from template */
    --slide-duration: 9s;        /* per-photo screen time */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ink);
    color: var(--cream);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;          /* single landing — no scroll */
}

/* ------------------------------------------------------------------
   The rotating photo stage
------------------------------------------------------------------ */

.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--ink);
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    /* Two background URLs per slide; the media query below swaps which
       one is used based on the viewport's orientation. Browsers only
       actually fetch the URL that ends up applied. */
    background-image: var(--bg-l);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity, transform;
    transform: scale(1.05);
    /* Cinematic color grade — every photo reads like a still from one film. */
    filter: brightness(0.72) contrast(1.06) saturate(0.85) sepia(0.12);
    animation:
        slide-fade calc(var(--slide-duration) * var(--slide-count)) infinite ease-in-out,
        slide-pan  calc(var(--slide-duration) * var(--slide-count)) infinite ease-in-out;
    animation-delay: calc(var(--i) * var(--slide-duration));
}

@media (orientation: portrait) {
    .slide { background-image: var(--bg-p); }
}

@keyframes slide-fade {
    0%   { opacity: 0; }
    /* fade in / hold / fade out, then stay hidden until next cycle */
    6%   { opacity: 1; }
    14%  { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes slide-pan {
    0%   { transform: scale(1.05) translate3d(0, 0, 0); }
    20%  { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
    100% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* ------------------------------------------------------------------
   Firelight fallback — shown when no Tigris photos exist yet.
   Slow, living embers in deep black. Ties to Galeano's "fueguitos".
------------------------------------------------------------------ */

.stage--ember {
    background:
        radial-gradient(ellipse at 50% 55%, #1a0e06 0%, #0a0604 55%, #050302 100%);
}

.ember {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: 0.55;
    will-change: transform, opacity;
}

.ember--a {
    width: 55vmax;
    height: 55vmax;
    left: -10vmax;
    top: -10vmax;
    background: radial-gradient(circle, rgba(201, 137, 60, 0.55), rgba(201, 137, 60, 0) 65%);
    animation: ember-drift-a 22s ease-in-out infinite alternate;
}

.ember--b {
    width: 65vmax;
    height: 65vmax;
    right: -15vmax;
    bottom: -20vmax;
    background: radial-gradient(circle, rgba(217, 109, 38, 0.45), rgba(217, 109, 38, 0) 65%);
    animation: ember-drift-b 28s ease-in-out infinite alternate;
}

.ember--c {
    width: 45vmax;
    height: 45vmax;
    left: 25vmax;
    bottom: -10vmax;
    background: radial-gradient(circle, rgba(201, 169, 106, 0.35), rgba(201, 169, 106, 0) 65%);
    animation: ember-drift-c 18s ease-in-out infinite alternate;
}

@keyframes ember-drift-a {
    from { transform: translate(0, 0)     scale(1);    opacity: 0.50; }
    to   { transform: translate(6vw, 4vh) scale(1.15); opacity: 0.70; }
}
@keyframes ember-drift-b {
    from { transform: translate(0, 0)       scale(1);    opacity: 0.40; }
    to   { transform: translate(-5vw, -3vh) scale(1.10); opacity: 0.60; }
}
@keyframes ember-drift-c {
    from { transform: translate(0, 0)      scale(0.95); opacity: 0.30; }
    to   { transform: translate(4vw, -5vh) scale(1.10); opacity: 0.55; }
}

/* Softens the photo so the typography always reads. */
.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,0.15) 0%,
            rgba(0,0,0,0.55) 60%,
            rgba(0,0,0,0.85) 100%),
        linear-gradient(180deg,
            rgba(10,10,10,0.55) 0%,
            rgba(10,10,10,0.20) 35%,
            rgba(10,10,10,0.20) 65%,
            rgba(10,10,10,0.75) 100%);
}

/* Faint film grain — pure CSS, no extra request. */
.grain {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
    animation: grain-drift 9s steps(6) infinite;
}

@keyframes grain-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 1%); }
    50%  { transform: translate(1%, -2%); }
    75%  { transform: translate(2%, 2%); }
    100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------
   Foreground content
------------------------------------------------------------------ */

.content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr auto;
    align-items: center;
    justify-items: center;
    padding: clamp(24px, 5vw, 64px);
    text-align: center;
}

.brand {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: rise 1.8s ease-out both;
}

.brand__emblem-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    animation: emblem-in 2.2s 0.1s ease-out both;
}

.brand__emblem {
    display: block;
    width: clamp(72px, 9vw, 120px);
    height: auto;
    filter:
        drop-shadow(0 2px 18px rgba(201, 169, 106, 0.32))
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
    animation: emblem-breathe 9s 2.4s ease-in-out infinite;
}

@keyframes emblem-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes emblem-breathe {
    0%, 100% { filter: drop-shadow(0 2px 18px rgba(201, 169, 106, 0.32))
                       drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)); }
    50%      { filter: drop-shadow(0 2px 26px rgba(201, 169, 106, 0.55))
                       drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)); }
}

.brand__title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--cream);
    text-shadow: 0 1px 30px rgba(0,0,0,0.55);
}

.brand__rule {
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gilt-soft), transparent);
    margin: 4px 0;
}

.brand__sub {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--cream-soft);
}

.poem {
    grid-row: 3;
    width: min(38rem, calc(100vw - 2.5rem));
    max-width: 38rem;
    margin-top: clamp(16px, 3vh, 40px);
    margin-inline: auto;
    animation: rise 2.4s 0.3s ease-out both;
}

.poem__text {
    margin: 0;
    border: none;
    padding: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.02rem, 1.8vw, 1.2rem);
    line-height: 1.9;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
    color: var(--cream-soft);
    text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}

.poem__text p {
    margin: 0;
}

.poem__rule {
    width: 40px;
    height: 1px;
    margin: 22px auto 14px;
    background: linear-gradient(90deg, transparent, var(--gilt-soft), transparent);
}

.poem__author {
    display: block;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 0.66rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gilt);
    padding-left: 0.42em; /* optical centering for tracked uppercase */
}

@media (min-width: 768px) {
    .poem {
        width: min(44rem, calc(100vw - 4rem));
        max-width: 44rem;
    }
}

/* Long poem: allow gentle scroll on short viewports */
@media (max-height: 740px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .content {
        height: auto;
        min-height: 100%;
        padding-bottom: 48px;
    }
}

.foot {
    grid-row: 4;
    align-self: end;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(241, 234, 217, 0.4);
    animation: rise 2.4s 0.6s ease-out both;
}

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

/* ------------------------------------------------------------------
   Accessibility: respect user motion preferences
------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .slide {
        animation: slide-fade calc(var(--slide-duration) * var(--slide-count)) infinite linear;
        transform: none;
    }
    .grain { animation: none; }
    .ember { animation: none; }
    .brand, .poem, .foot { animation: none; }
    .brand__emblem-wrap, .brand__emblem { animation: none; }
}