/* ══════════════════════════════════════════════
   A Night to Remember · style.css
   Premium Romantic Cinematic System
   ══════════════════════════════════════════════ */

/* ─── Custom Properties ─── */
:root {
  /* Palette */
  --void:       #04030a;
  --deep:       #09071a;
  --surface:    #110f1e;
  --border:     rgba(180,140,90,.14);
  --border-hi:  rgba(212,175,110,.32);

  /* Gold */
  --g-dim:      #6a4e24;
  --g-mid:      #a87c28;
  --g-bright:   #d4af6e;
  --g-light:    #f0d898;
  --g-glow:     rgba(212,175,110,.16);

  /* Rose */
  --r-deep:     #2e081a;
  --r-mid:      #7a1c3a;
  --r-bright:   #c4516a;
  --r-glow:     rgba(196,81,106,.11);

  /* Text */
  --tx-hi:      #f5ede0;
  --tx-mid:     rgba(245,237,224,.62);
  --tx-lo:      rgba(245,237,224,.32);

  /* Fonts */
  --f-display:  'Cinzel', serif;
  --f-body:     'Cormorant Garamond', serif;
  --f-prose:    'EB Garamond', serif;

  /* Easing */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.7,0,.84,0);
  --ease-io:    cubic-bezier(.87,0,.13,1);

  /* Z-index layers */
  --z-canvas:   0;
  --z-scene:    10;
  --z-nav:      80;
  --z-lightbox: 200;
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:auto; -webkit-font-smoothing:antialiased; }

body {
  background: var(--void);
  color: var(--tx-hi);
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.75;
  overflow: hidden;        /* scenes handle overflow */
  cursor: auto;
}

img,video { display:block; max-width:100%; }
button { border:none; background:none; font:inherit; cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }

/* ─── Progress Bar ─── */
#progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: var(--z-nav);
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--g-mid), var(--g-light));
  transition: width .6s var(--ease-out);
}

/* ─── Scene Dots ─── */
#scene-dots {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-hi);
  transition: background .35s, transform .35s var(--ease-out);
  cursor: pointer;
  position: relative;
}
.dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}
.dot.active {
  background: var(--g-bright);
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--g-glow);
}

/* ─── Scenes ─── */
.scene {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-scene);
  opacity: 0;
  pointer-events: none;
  transition: none; /* GSAP handles transitions */
  overflow: hidden;
}
.scene.active {
  opacity: 1;
  pointer-events: all;
}

/* Canvas backgrounds */
.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
}

/* Shared inner layout */
.scene-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 760px;
  width: 100%;
}

/* ══════════════════════════════
   SCENE 0 — INTRO
════════════════════════════ */
#scene-0 { background: var(--void); }

.intro-eyebrow {
  font-family: var(--f-display);
  font-size: .6rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--g-mid);
  margin-bottom: 2rem;
  opacity: 0;
}
.intro-title {
  font-family: var(--f-body);
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: .15em;
  line-height: 1.1;
}
.intro-line-1 {
  font-size: clamp(3.2rem,9vw,6.5rem);
  letter-spacing: -.02em;
  color: var(--tx-hi);
  opacity: 0;
  transform: translateY(30px);
}
.intro-line-2 {
  font-size: clamp(2.6rem,7vw,5rem);
  font-style: italic;
  color: var(--g-light);
  opacity: 0;
  transform: translateY(30px);
}
.intro-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 2.2rem auto;
  opacity: 0;
}
.rule-dash {
  width: 60px; height: 1px;
  background: linear-gradient(90deg,transparent,var(--g-dim));
}
.intro-rule .rule-dash:last-child {
  background: linear-gradient(270deg,transparent,var(--g-dim));
}
.rule-gem {
  font-size: .4rem;
  color: var(--g-bright);
  opacity: .75;
}
.intro-begin {
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--tx-lo);
  opacity: 0;
  animation: pulse-fade 2.5s var(--ease-io) infinite;
}
@keyframes pulse-fade {
  0%,100% { opacity: .25; }
  50%      { opacity: .6; }
}

/* ══════════════════════════════
   SCENE 1 — COUNTDOWN
════════════════════════════ */
#scene-1 {
  background: transparent;
}
.countdown-wrap {
  position: relative;
  width: 140px; height: 140px;
}
.countdown-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: var(--border-hi);
  stroke-width: 1.5;
}
.ring-progress {
  fill: none;
  stroke: var(--g-bright);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset .1s linear;
}
.countdown-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 4rem;
  font-weight: 300;
  color: var(--g-light);
}
.countdown-label {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--tx-lo);
  white-space: nowrap;
}

/* ══════════════════════════════
   SCENE 2 — HERO
════════════════════════════ */
#scene-2 { background: transparent; }

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
}
.orb-a {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--r-glow), transparent 70%);
  top: 10%; left: -10%;
  opacity: .6;
  animation: orb-drift-a 12s ease-in-out infinite alternate;
}
.orb-b {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--g-glow), transparent 70%);
  bottom: -10%; right: -10%;
  opacity: .5;
  animation: orb-drift-b 15s ease-in-out infinite alternate;
}
@keyframes orb-drift-a {
  to { transform: translate(6%, 8%); }
}
@keyframes orb-drift-b {
  to { transform: translate(-5%, -6%); }
}

.hero-inner { position: relative; z-index: 2; }

.hero-pre {
  font-family: var(--f-display);
  font-size: .6rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--g-mid);
  margin-bottom: 1.4rem;
  opacity: 0;
}
.hero-name {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(3.5rem,10vw,8rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tx-hi);
  opacity: 0;
  text-shadow: 0 0 80px var(--r-glow), 0 0 140px var(--g-glow);
}
.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 1.6rem auto;
  opacity: 0;
}
.hero-rule .rule-dash {
  width: 50px; height: 1px;
  background: linear-gradient(90deg,transparent,var(--g-dim));
}
.hero-rule .rule-dash:last-child {
  background: linear-gradient(270deg,transparent,var(--g-dim));
}
.hero-tagline {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tx-mid);
  margin-bottom: 3rem;
  opacity: 0;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 2.6rem;
  border: 1px solid var(--g-mid);
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--g-bright);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: border-color .4s, color .4s;
}
.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--g-dim), var(--r-deep));
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.hero-cta:hover::before { opacity: 1; }
.hero-cta:hover { border-color: var(--g-bright); }
.cta-text,.cta-arrow { position: relative; z-index: 1; }
.cta-arrow { transition: transform .3s var(--ease-out); }
.hero-cta:hover .cta-arrow { transform: translateY(3px); }

/* ══════════════════════════════
   FIXED CONTINUE BUTTON (scenes 3 & 4)
   Text-only, underlined, bottom-right
════════════════════════════ */
.scene-continue-fixed {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: none;
  border: none;
  font-family: var(--f-display);
  font-size: .65rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--g-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(212, 175, 110, 0.5);
  z-index: 200;
  cursor: pointer;
  opacity: 0;
  pointer-events: all;
  transition: color .3s, text-decoration-color .3s;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.scene-continue-fixed:hover {
  color: var(--g-light);
  text-decoration-color: var(--g-bright);
}
.scene-continue-fixed .continue-arrow {
  transition: transform .3s var(--ease-out);
}
.scene-continue-fixed:hover .continue-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
  .scene-continue-fixed {
    bottom: 20px;
    right: 16px;
    font-size: .58rem;
  }
}

/* ══════════════════════════════
   SCENE 3 — PHOTO GRID (formerly scene 4)
════════════════════════════ */
#scene-3 {
  background: transparent;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}
.photogrid-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 780px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.photogrid-header {
  text-align: center;
}
.photogrid-eyebrow {
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--g-mid);
  opacity: 0;
}

/* ── The grid ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  width: 100%;
}

/* ── Each framed photo ── */
.photo-frame {
  position: relative;
  opacity: 0;
  transform: translateY(24px);
}
.photo-frame-inner {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(212,175,110,.06),
    0 8px 32px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03);
  padding: 6px;               /* inner padding = visible frame */
  transition: border-color .4s, box-shadow .4s;
}
.photo-frame:hover .photo-frame-inner {
  border-color: var(--g-bright);
  box-shadow:
    0 0 0 1px rgba(212,175,110,.18),
    0 12px 48px rgba(0,0,0,.65),
    0 0 40px rgba(212,175,110,.08),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ── Image inside frame ── */
.photo-frame-inner img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  filter: brightness(.85) saturate(.85);
  transition: transform .65s var(--ease-out), filter .5s;
}
.photo-frame:hover .photo-frame-inner img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.05);
}

/* ── Caption overlay at bottom ── */
.photo-caption {
  position: absolute;
  bottom: 6px; left: 6px; right: 6px;
  padding: .55rem .7rem;
  background: linear-gradient(0deg,
    rgba(4,3,10,.85) 0%,
    rgba(4,3,10,.4)  60%,
    transparent 100%
  );
  font-family: var(--f-display);
  font-size: .42rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--g-bright);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
  border-radius: 0 0 2px 2px;
}
.photo-frame:hover .photo-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ── Continue button (photogrid) — inherits .scene-continue-fixed styles ── */
.photogrid-next {
  /* Uses .scene-continue-fixed positioning — no additional box styles needed */
}

/* Responsive */
@media (max-width: 520px) {
  .photo-grid { grid-template-columns: 1fr; gap: .8rem; }
  .photogrid-wrap { padding: 1.5rem 1rem; gap: 1.2rem; }
}
@media (max-width: 768px) {
  .photo-grid { gap: .7rem; }
}

/* ══════════════════════════════
   SCENE 4 — MESSAGE SLIDER (formerly scene 5)
════════════════════════════ */
#scene-4 {
  background: transparent;
  align-items: center;
  justify-content: center;
}
.msgslider-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.msgslider-eyebrow {
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--g-mid);
  text-align: center;
  opacity: 0;
}

/* ── Slider viewport: clips overflow so slides don't bleed out ── */
.msgslider-viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

/* ── Track: holds all slides side by side ── */
.msgslider-track {
  display: flex;
  width: 100%;
  will-change: transform;
}

/* ── Individual slide ──
   Each slide is full-width, NOT absolutely positioned.
   The track translates to reveal one at a time.          */
.msg-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-height: 300px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ── Image side of slide ── */
.msg-slide-img-wrap {
  flex: 0 0 50%;
  width: 50%;
  overflow: hidden;
  background: var(--deep);
  position: relative;
}
.msg-slide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.8) saturate(.85);
  transition: filter .6s, transform .6s var(--ease-out);
}
.msg-slide.active .msg-slide-img-wrap img {
  filter: brightness(.95) saturate(1);
}

/* ── Text side of slide ── */
.msg-slide-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.8rem;
  gap: .8rem;
  background: linear-gradient(135deg,
    rgba(17,15,30,.96) 0%,
    rgba(9,7,26,.98) 100%
  );
  border-left: 1px solid var(--border);
}
.msg-slide-num {
  font-family: var(--f-display);
  font-size: .48rem;
  letter-spacing: .6em;
  color: var(--g-mid);
  opacity: .7;
}
.msg-slide-text {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tx-hi);
  line-height: 1.85;
}

/* ── Navigation bar: prev · pips · next ── */
.msgslider-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.msgslider-prev,
.msgslider-next {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--g-bright);
  background: rgba(212,175,110,.06);
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, transform .25s var(--ease-out);
  z-index: 5;
  position: relative;
}
.msgslider-prev:hover,
.msgslider-next:hover {
  background: rgba(212,175,110,.16);
  border-color: var(--g-bright);
  color: var(--g-light);
  transform: scale(1.1);
}

/* Pips */
.msgslider-pips {
  display: flex;
  gap: .55rem;
}
.msgslider-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-hi);
  transition: background .3s, transform .3s;
  cursor: pointer;
}
.msgslider-pip.active {
  background: var(--g-bright);
  transform: scale(1.35);
}

/* ── GSAP transition classes ── */
.msg-slide.is-entering {
  opacity: 0;
}
.msg-slide.is-active {
  opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
  .msg-slide { flex-direction: column; min-height: auto; }
  .msg-slide-img-wrap { flex: 0 0 200px; width: 100%; }
  .msg-slide-img-wrap img { height: 200px; }
  .msg-slide-content { padding: 1.4rem 1.2rem; }
  .msgslider-wrap { padding: 1.5rem 1rem; gap: 1rem; }
}

/* ══════════════════════════════
   SCENE 5 — FINAL (formerly scene 6)
════════════════════════════ */
#scene-5 { background: transparent; }
.final-inner { position:relative; z-index:2; }

.final-pre {
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--g-mid);
  margin-bottom: 1.2rem;
  opacity: 0;
}
.final-title {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(2.6rem,8vw,6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tx-hi);
  opacity: 0;
}
.final-heart {
  font-size: 2.5rem;
  color: var(--r-bright);
  margin: 1.2rem 0;
  opacity: 0;
  display: block;
  animation: heart-beat 2s ease-in-out infinite;
}
@keyframes heart-beat {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.final-tagline {
  font-family: var(--f-prose);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tx-mid);
  line-height: 1.9;
  margin-bottom: 2.5rem;
  opacity: 0;
}
.replay-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 2.4rem;
  border: 1px solid var(--g-mid);
  font-family: var(--f-display);
  font-size: .6rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--g-bright);
  opacity: 0;
  position: relative;
  overflow: hidden;
  transition: border-color .4s, color .4s;
}
.replay-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--g-dim), var(--r-deep));
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.replay-btn:hover::before { opacity: 1; }
.replay-btn:hover { border-color: var(--g-bright); }
.replay-icon,.replay-btn span:last-child { position:relative; z-index:1; }
.replay-icon { font-size: 1rem; }

/* .scene-continue-btn legacy removed — see .scene-continue-fixed above */

/* ─── Responsive ─── */
@media (max-width: 768px) {
  #scene-dots { right: .85rem; }
  .msg-grid     { grid-template-columns: repeat(2,1fr); gap:.6rem; }
  .orb-a,.orb-b { opacity:.35; }
  .story-ornament { display: none; }
  .hero-name { text-shadow: none; }
  .slider-prev { display: none; }
}

@media (max-width: 480px) {
  :root { font-size: 14px; }
  .msg-grid     { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; }
  .hero-cta     { padding:.75rem 1.8rem; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--g-dim); border-radius: 2px; }

/* ─── Selection ─── */
::selection { background: rgba(212,175,110,.18); color: var(--g-light); }