/*
  ╔══════════════════════════════════════════════════════════╗
  ║   LUXURY CINEMATIC WEDDING FILM — CINEMASCOPE EDITION   ║
  ║   Color Grade : Kodak Vision 3 Simulation               ║
  ║   Format      : 2.39:1 Anamorphic CinemaScope           ║
  ║   Inspired by : ARRI Alexa 35 + Vintage Anamorphic      ║
  ╚══════════════════════════════════════════════════════════╝
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Montserrat:wght@200;300;400&display=swap');

:root {
    /* Kodak Vision 3 Palette */
    --kv3-shadow:  rgba(12, 8, 4, 1);
    --kv3-mid:     rgba(40, 28, 18, 0.8);
    --gold:        #C9A84C;
    --warm-white:  #FDF6E3;
    --flare-warm:  rgba(255, 190, 100, 0.18);
    --flare-blue:  rgba(180, 220, 255, 0.06);

    /* Fonts */
    --f-serif: 'Cormorant Garamond', serif;
    --f-sans:  'Montserrat', sans-serif;

    /* Timing */
    --dissolve:    2.5s;
    --slide-hold:  8s;
}

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

html, body {
    width: 100vw; height: 100vh;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
}

/* ── 2.39:1 CINEMASCOPE FRAME ───────────────────────── */
.cinema-frame {
    position: relative;
    width: 100vw;
    height: 41.84vw;           /* 100 / 2.39 = 41.84 */
    max-height: 100vh;
    max-width: 239.0vh;        /* 100vh * 2.39 */
    overflow: hidden;
    background: #000;
    /* Subtle outer glow for screen presence */
    box-shadow: 0 0 80px rgba(0,0,0,0.95), 0 0 200px rgba(0,0,0,0.8);
}

/* ── LETTERBOX BARS (CinemaScope feel on 16:9 screens) ── */
.cinema-frame::before,
.cinema-frame::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 4%;
    background: #000;
    z-index: 100;
    pointer-events: none;
}
.cinema-frame::before { top: 0; }
.cinema-frame::after  { bottom: 0; }

/* ── OPENING SLATE ──────────────────────────────────── */
#opening-slate {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    transition: opacity 1.8s ease;
}
#opening-slate.fade-out { opacity: 0; pointer-events: none; }

.slate-eyebrow {
    font-family: var(--f-sans);
    font-size: clamp(0.5rem, 0.7vw, 0.85rem);
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    animation: fadeUp 1.2s ease 1s forwards;
}
.slate-title {
    font-family: var(--f-serif);
    font-size: clamp(2.5rem, 5vw, 7rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--warm-white);
    opacity: 0;
    animation: fadeUp 1.4s ease 1.4s forwards;
}
.slate-title em {
    font-style: italic;
    color: var(--gold);
}
.slate-divider {
    width: 0;
    height: 1px;
    background: var(--gold);
    animation: expandLine 1s ease 2s forwards;
    opacity: 0.6;
}
.slate-sub {
    font-size: clamp(0.45rem, 0.6vw, 0.75rem);
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    opacity: 0;
    animation: fadeUp 1.2s ease 2.5s forwards;
}

/* ── SLIDESHOW CORE ──────────────────────────────────── */
#slideshow {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    /* Subtle cinematic "breathing" on the entire frame */
    animation: breathe 12s infinite ease-in-out;
}
@keyframes breathe {
    0%   { transform: scale(1)    translate(0, 0); }
    30%  { transform: scale(1.012) translate(0.3%, -0.2%); }
    60%  { transform: scale(1.008) translate(-0.2%, 0.3%); }
    100% { transform: scale(1)    translate(0, 0); }
}

/* ── INDIVIDUAL SLIDE ──────────────────────────────── */
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity var(--dissolve) ease-in-out;
}
.slide.active { opacity: 1; z-index: 10; }

/* Fade-to-black variant for emotional beats */
.slide.beat-fade { transition: opacity 4s ease-in-out; }

/* ── DUAL-LAYER IMAGE SYSTEM ─────────────────────────
   Layer 1: BG extension (blurred, colour-matched fill)
   Layer 2: Subject (full-visible, colour-graded)
──────────────────────────────────────────────────── */
.slide-bg {
    position: absolute;
    inset: -8%;
    width: 116%; height: 116%;
    object-fit: cover;
    filter:
        blur(55px)
        brightness(0.18)
        saturate(0.6)
        sepia(0.3);            /* crushed amber shadows */
    z-index: 1;
    transform: scale(1);
    transition: transform calc(var(--slide-hold) * 1.4) linear;
}
.slide.active .slide-bg { transform: scale(1.14); }

.slide-img {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    object-fit: contain;
    /*
      KODAK VISION 3 CSS SIMULATION
      – Warm champagne highlights (sepia lift)
      – Crushed deep amber shadows (contrast)
      – Rich, accurate skin tones (slight saturation boost)
      – Soft highlight rolloff (brightness pull-down)
    */
    filter:
        contrast(1.12)
        saturate(1.18)
        brightness(0.93)
        sepia(0.08)
        drop-shadow(0 0 0px transparent);
    transform: scale(1);
    transform-origin: center center;
    transition: transform var(--slide-hold) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide.active .slide-img { transform: scale(1.08); }

/* ── ANAMORPHIC LENS FLARE ───────────────────────────
   Horizontal oval streak — signature of anamorphic glass
──────────────────────────────────────────────────── */
.anam-flare {
    position: absolute;
    top: 50%;
    left: -20%;
    width: 140%;
    height: 3px;
    z-index: 25;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--flare-blue) 20%,
        rgba(255, 200, 130, 0.25) 50%,
        var(--flare-blue) 80%,
        transparent 100%
    );
    transform: translateY(-50%);
    filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    border-radius: 50%;
    transition: opacity 3s ease;
}
.slide.active .anam-flare { animation: flareSlide 8s ease-in-out forwards; }

@keyframes flareSlide {
    0%   { opacity: 0;    top: 55%; }
    15%  { opacity: 0.9;  top: 48%; }
    50%  { opacity: 0.5;  top: 50%; }
    85%  { opacity: 0.7;  top: 52%; }
    100% { opacity: 0;    top: 45%; }
}

/* Corner warm light leak */
.light-leak {
    position: absolute;
    z-index: 22;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 2s ease 0.5s;
    border-radius: 50%;
}
.light-leak.top-right {
    top: -15%; right: -15%;
    width: 50%; height: 70%;
    background: radial-gradient(circle, rgba(255,170,80,0.15) 0%, transparent 70%);
}
.light-leak.bottom-left {
    bottom: -20%; left: -10%;
    width: 45%; height: 60%;
    background: radial-gradient(circle, rgba(255,140,60,0.08) 0%, transparent 70%);
}
.slide.active .light-leak { opacity: 1; }

/* ── HALATION (blown highlight glow) ────────────────── */
.halation {
    position: absolute;
    inset: 0;
    z-index: 21;
    background: radial-gradient(
        circle at 65% 35%,
        rgba(255, 230, 180, 0.04) 0%,
        transparent 55%
    );
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ── GLOBAL CINEMATIC OVERLAYS ──────────────────────── */
/* Vignette — pulls eye to centre */
.vignette {
    position: absolute;
    inset: 0;
    z-index: 30;
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%,
            transparent 40%,
            rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* Kodak warm shadow lift overlay */
.grade-overlay {
    position: absolute;
    inset: 0;
    z-index: 31;
    background: linear-gradient(
        to bottom,
        rgba(8, 5, 2, 0.08) 0%,
        transparent 30%,
        transparent 70%,
        rgba(6, 3, 0, 0.35) 100%
    );
    pointer-events: none;
}

/* Film grain */
.film-grain {
    position: absolute;
    inset: 0;
    z-index: 32;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: grainShift 0.08s steps(1) infinite;
}
@keyframes grainShift {
    0%  { background-position: 0 0; }
    25% { background-position: -50px 30px; }
    50% { background-position: 20px -40px; }
    75% { background-position: 60px 10px; }
}

/* Dust particles canvas */
#dust-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 29;
    pointer-events: none;
    opacity: 0.55;
}

/* ── LUXURY TYPOGRAPHY ──────────────────────────────── */
.title-card {
    position: absolute;
    bottom: 11%;
    left: 7%;
    z-index: 40;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 2.5s ease 1.2s,
        transform 3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
}
.slide.active .title-card {
    opacity: 1;
    transform: translateY(0);
}

.title-eyebrow {
    font-family: var(--f-sans);
    font-size: clamp(0.5rem, 0.65vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: all 2s ease 1.8s;
}
.slide.active .title-eyebrow {
    opacity: 0.85;
    transform: translateY(0);
}

.title-main {
    font-family: var(--f-serif);
    font-size: clamp(2rem, 3.5vw, 5rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--warm-white);
    line-height: 1.05;
    text-shadow: 0 2px 30px rgba(0,0,0,0.7);
}
.title-main em {
    font-style: italic;
    font-weight: 300;
    color: rgba(255,245,230,0.85);
}

/* Thin gold rule above text */
.title-rule {
    width: 0;
    height: 1px;
    background: var(--gold);
    margin-bottom: 1rem;
    opacity: 0.5;
    transition: width 2s ease 2s;
}
.slide.active .title-rule { width: 60px; }

/* ── CONTROLS ───────────────────────────────────────── */
#play-btn {
    position: fixed;
    top: 38px; right: 44px;
    z-index: 300;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-family: var(--f-sans);
    font-size: clamp(0.55rem, 0.7vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    transition: color 0.5s ease, text-shadow 0.5s ease;
    padding: 0;
}
#play-btn:hover,
#play-btn.live {
    color: var(--gold);
    text-shadow: 0 0 14px rgba(201,168,76,0.4);
}

/* YouTube player hidden */
#yt-player {
    position: fixed;
    top: -9999px; left: -9999px;
    pointer-events: none;
    opacity: 0;
}

/* ── KEYFRAME ANIMATIONS ─────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes expandLine {
    from { width: 0; opacity: 0; }
    to   { width: 120px; opacity: 0.6; }
}