/* ═══════════════════════════════════════════════════════════════
   MEMORIAL TRIBUTE — memorial-tribute.css
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Palette ── */
  --bg:        #0d0a12;
  --surface-1: #15101f;
  --surface-2: #1c1528;
  --surface-3: #241c33;

  --gold:      #c8a96e;
  --gold-pale: #e8d5a8;
  --gold-deep: #a07840;
  --rose:      #b87070;
  --rose-pale: #d4a8a8;
  --ivory:     #f0ebe0;
  --muted:     rgba(240,235,224,0.50);
  --faint:     rgba(240,235,224,0.22);

  /* ── Card — SOLID, PREMIUM, FULLY OPAQUE ── */
  --card-bg:     linear-gradient(155deg, #1e1636 0%, #150f26 52%, #1b1232 100%);
  --card-border: rgba(200,169,110,0.20);
}

/* ─────────────────────────────────────────────────────────────
   BACK BUTTON
───────────────────────────────────────────────────────────── */
.back-btn {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  background: rgba(15, 10, 25, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200,169,110,0.18);
  border-radius: 100px;
  color: rgba(200,169,110,0.80);
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
.back-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.back-btn:hover {
  background: rgba(200,169,110,0.10);
  border-color: rgba(200,169,110,0.42);
  color: rgba(200,169,110,1);
  transform: translateX(-2px);
}
.back-btn:hover svg {
  transform: translateX(-3px);
}

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--ivory);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* ─────────────────────────────────────────────────────────────
   AMBIENT BACKGROUND
───────────────────────────────────────────────────────────── */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(90,55,120,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(100,50,60,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(40,25,60,0.35) 0%, transparent 70%),
    var(--bg);
}

.bg-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 70% 30%, rgba(120,80,40,0.12) 0%, transparent 65%);
  animation: bgPulse 40s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

.bg-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 24px 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─────────────────────────────────────────────────────────────
   CARD BASE — SOLID PREMIUM COLOUR
   No backdrop-filter. Fully opaque rich deep surface.
───────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;

  /* ── Deep, rich, multi-layer shadow — identical depth as mem-cards ── */
  box-shadow:
    0  1px  0   rgba(200,169,110,0.16) inset,   /* top gold sheen       */
    0 -1px  0   rgba(0,0,0,0.55)       inset,   /* base depth line      */
    0  0    0 1px rgba(0,0,0,0.50),              /* crisp hard edge      */
    0  2px  4px  rgba(0,0,0,0.70),               /* contact shadow       */
    0  6px  18px rgba(0,0,0,0.60),               /* near elevation       */
    0  20px 50px rgba(0,0,0,0.52),               /* mid elevation        */
    0  44px 88px rgba(0,0,0,0.40),               /* far elevation        */
    0  0   80px  rgba(45,20,75,0.18);             /* ambient purple bloom */

  animation: fadeIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.25s; }
.card:nth-child(4) { animation-delay: 0.35s; }
.card:nth-child(5) { animation-delay: 0.45s; }
.card:nth-child(6) { animation-delay: 0.55s; }

/* Hover: deepen shadow, brighten border */
.card:hover {
  border-color: rgba(200,169,110,0.34);
  box-shadow:
    0  1px  0   rgba(200,169,110,0.22) inset,
    0 -1px  0   rgba(0,0,0,0.55)       inset,
    0  0    0 1px rgba(0,0,0,0.55),
    0  2px  4px  rgba(0,0,0,0.75),
    0  8px  24px rgba(0,0,0,0.65),
    0  24px 60px rgba(0,0,0,0.58),
    0  52px 100px rgba(0,0,0,0.44),
    0  0   60px  rgba(140,100,50,0.12),
    0  0   100px rgba(45,20,75,0.20);
  transition: border-color 0.45s ease;
}

/* ─────────────────────────────────────────────────────────────
   HERO CARD
───────────────────────────────────────────────────────────── */
.hero-card {
  padding: 64px 40px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Radial warmth inside hero */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(140,90,40,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Top gold line */
.hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.70), transparent);
}

.candle-wrap {
  margin-bottom: 32px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Small hero candle video — blends seamlessly into card */
#heroCandleVid {
  width: 54px;
  height: 90px;
  object-fit: cover;
  border-radius: 0;
  border: none;
  outline: none;
  background: transparent;
  /* Fade edges so it bleeds into the card with no hard boundary */
  -webkit-mask-image: radial-gradient(
    ellipse 85% 80% at 50% 55%,
    black 30%, transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 85% 80% at 50% 55%,
    black 30%, transparent 100%
  );
  display: block;
}

.candle-flame {
  width: 10px;
  height: 16px;
  background: radial-gradient(ellipse at 50% 100%, #f5c842 0%, #e08030 50%, rgba(220,100,30,0) 100%);
  border-radius: 50% 50% 30% 30%;
  filter: blur(1.5px); /* static — not animated */
  animation: flameDance 2.5s ease-in-out infinite alternate;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

@keyframes flameDance {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-2deg); opacity: 0.9; }
  33%  { transform: scaleX(0.85) scaleY(1.1)  rotate( 2deg); opacity: 1; }
  66%  { transform: scaleX(1.1)  scaleY(0.95) rotate(-1deg); opacity: 0.95; }
  100% { transform: scaleX(0.9)  scaleY(1.08) rotate( 1deg); opacity: 1; }
}

.candle-body {
  width: 12px;
  height: 32px;
  background: linear-gradient(180deg, #f0e8d0 0%, #d4c8a0 40%, #b0a070 100%);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 0 16px rgba(200,160,60,0.35), 0 0 40px rgba(200,130,40,0.15);
  position: relative;
  z-index: 1;
}

.tribute-label {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 18px;
}

.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(44px, 10vw, 66px);
  line-height: 1.08;
  color: var(--ivory);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

.hero-name em {
  font-style: italic;
  color: var(--gold-pale);
}

.hero-dates {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 32px;
  opacity: 0.8;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.ornament-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}

.ornament-line.r {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}

.ornament-diamond {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.7;
}

.hero-epitaph {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.75;
  color: var(--gold-pale);
  max-width: 420px;
  margin: 0 auto;
  opacity: 0.88;
}

/* ─────────────────────────────────────────────────────────────
   PHOTO CARD
───────────────────────────────────────────────────────────── */
.photo-card {
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.photo-frame {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid rgba(200,169,110,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 4px rgba(200,169,110,0.08),
    0 0 0 1px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.60),
    0 12px 40px rgba(0,0,0,0.55),
    0 24px 60px rgba(0,0,0,0.40),
    0 0 60px rgba(200,140,60,0.08);
}

.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,169,110,0.08) 0%, transparent 55%);
  border-radius: inherit;
}

.photo-placeholder {
  font-size: 32px;
  opacity: 0.2;
}

.photo-upload-hint {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-top: 6px;
  opacity: 0.5;
  text-transform: uppercase;
}

.photo-info {
  text-align: center;
}

.photo-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ivory);
  margin-bottom: 8px;
}

.photo-info p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   SECTION CARD
───────────────────────────────────────────────────────────── */
.section-card {
  padding: 40px 40px 36px;
  position: relative;
  overflow: hidden;
}

/* Left accent bar */
.section-card::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
  opacity: 0.5;
}

.section-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  opacity: 0.65;
}

.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 28px;
  color: var(--ivory);
  margin-bottom: 18px;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.section-body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  min-height: 60px;
}

/* ─────────────────────────────────────────────────────────────
   QUOTE CARD
───────────────────────────────────────────────────────────── */
.quote-card {
  padding: 48px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(100,65,20,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px;
  line-height: 0.4;
  color: var(--gold);
  opacity: 0.2;
  position: absolute;
  top: 32px;
  left: 32px;
  user-select: none;
}

.quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.65;
  color: var(--gold-pale);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.quote-author {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────
   GALLERY — STACKED DECK
───────────────────────────────────────────────────────────── */
.gallery-card {
  padding: 36px 36px 40px;
  position: relative;
  overflow: hidden;
}

.gallery-header {
  margin-bottom: 24px;
}

/* ── Single-image cinematic slider ───────────────────── */
.gallery-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 200px;
}

.gallery-thumb {
  display: none;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
}
.gallery-thumb.active      { display: block; animation: gSlideIn      0.55s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.gallery-thumb.leaving-left  { display: block; animation: gSlideOutLeft  0.40s cubic-bezier(0.55,0,1,0.45) both; }
.gallery-thumb.leaving-right { display: block; animation: gSlideOutRight 0.40s cubic-bezier(0.55,0,1,0.45) both; }
.gallery-thumb.entering-left  { display: block; animation: gSlideInLeft   0.55s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.gallery-thumb.entering-right { display: block; animation: gSlideInRight  0.55s cubic-bezier(0.25,0.46,0.45,0.94) both; }

@keyframes gSlideIn       { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@keyframes gSlideOutLeft  { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(-6%);  } }
@keyframes gSlideOutRight { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(6%);   } }
@keyframes gSlideInLeft   { from { opacity:0; transform:translateX(6%);  } to { opacity:1; transform:translateX(0);   } }
@keyframes gSlideInRight  { from { opacity:0; transform:translateX(-6%); } to { opacity:1; transform:translateX(0);   } }

.gallery-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Bleed bottom into card background */
.gallery-thumb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(transparent, #0e0b1a);
  border-radius: 0 0 16px 16px;
  pointer-events: none;
}

.gallery-thumb-cap {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--gold-pale);
  text-align: center;
  opacity: 0.80;
  padding: 0 20px;
}

/* Prev / Next arrows on strip */
.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.48);
  border: 1px solid rgba(200,169,110,0.22);
  color: var(--gold-pale);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-prev:hover, .gallery-next:hover { background: rgba(200,169,110,0.18); }

/* Dots */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}
.gallery-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.2;
  transition: opacity 0.3s, transform 0.3s;
  cursor: pointer;
}
.gallery-dot.active { opacity: 0.75; transform: scale(1.35); }

.deck-hint {
  text-align: center;
  margin-top: 14px;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.3;
}

/* ── Fullscreen lightbox ──────────────────────────────── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,4,14,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gallery-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.gallery-lightbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  /* Slow fade between images */
  transition: opacity 0.4s ease;
}
.gallery-lightbox img.fading { opacity: 0; }

.gallery-lbox-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 20px 28px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-pale);
  text-align: center;
}

/* Close / prev / next buttons */
.gallery-lbox-close,
.gallery-lbox-prev,
.gallery-lbox-next {
  position: absolute;
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(200,169,110,0.25);
  color: var(--gold-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.gallery-lbox-close:hover,
.gallery-lbox-prev:hover,
.gallery-lbox-next:hover { background: rgba(200,169,110,0.18); }

.gallery-lbox-close {
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  font-size: 16px;
}
.gallery-lbox-prev {
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  font-size: 20px;
}
.gallery-lbox-next {
  right: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  font-size: 20px;
}
.gallery-lbox-counter {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--gold);
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────
   CANDLE ROW — DUAL VIDEO SYSTEM
───────────────────────────────────────────────────────────── */

/* Card owns no padding — inner divs handle their own */
.candle-row {
  padding: 0;
  overflow: hidden;
  transition:
    box-shadow 1.4s ease,
    border-color 1.4s ease;
}

/* ── Unlit state ───────────────────────────────────────── */
.candle-unlit {
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.candle-unlit p {
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  min-width: 160px;
}

.light-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(200,169,110,0.12) 0%, rgba(160,120,64,0.08) 100%);
  border: 1px solid rgba(200,169,110,0.32);
  color: var(--gold-pale);
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.32);
}

.light-btn:hover {
  background: linear-gradient(135deg, rgba(200,169,110,0.20) 0%, rgba(160,120,64,0.15) 100%);
  border-color: rgba(200,169,110,0.60);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.55),
    0 0 32px rgba(200,150,60,0.20),
    0 0 0 1px rgba(0,0,0,0.32);
  color: var(--gold-pale);
}

/* ── Lit state — warm glow radiates from card ─────────── */
.candle-row.lit {
  border-color: rgba(200,140,60,0.30);
  box-shadow:
    0  1px  0   rgba(220,160,80,0.20) inset,
    0 -1px  0   rgba(0,0,0,0.55)      inset,
    0  0    0 1px rgba(0,0,0,0.50),
    0  2px  4px  rgba(0,0,0,0.70),
    0  6px  18px rgba(0,0,0,0.60),
    0  20px 50px rgba(0,0,0,0.52),
    0  44px 88px rgba(0,0,0,0.40),
    0  0   80px  rgba(220,110,20,0.22),   /* warm amber outer glow */
    0  0  140px  rgba(200,80,10,0.12),    /* wide warm spread */
    0  0  220px  rgba(45,20,75,0.15);     /* ambient purple bloom */
}

/* ── Candle theater ────────────────────────────────────── */
.candle-theater {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 44px 28px 36px;
  position: relative;
  animation: fadeIn 0.5s ease both;
}

/* Show/hide with state class */
.candle-row.lit  .candle-unlit   { display: none; }
.candle-row.lit  .candle-theater { display: flex; }

/* Ambient glow blob behind the video frame */
.candle-ambient-glow {
  position: absolute;
  width: 280px;
  height: 220px;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(230,120,30,0.26) 0%,
    rgba(200,80,10,0.10)  45%,
    transparent 72%
  );
  border-radius: 50%;
  animation: glowBreath 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes glowBreath {
  0%   { opacity: 0.65; transform: translateX(-50%) scaleX(0.94) scaleY(0.90); }
  100% { opacity: 1.00; transform: translateX(-50%) scaleX(1.06) scaleY(1.10); }
}

/* ── Video frame — sits on top of the solid card bg ───── */
/*    You can SEE the video against the card's dark surface */
.candle-video-frame {
  position: relative;
  width: 200px;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: #080608;

  border: 1px solid rgba(200,140,60,0.22);
  box-shadow:
    0 0  40px rgba(220,120,30,0.30),   /* close warm glow */
    0 0  80px rgba(190,80,10,0.16),    /* wide warm spread */
    0 0 130px rgba(160,60,0,0.08),     /* far warm ambient */
    0 8px 40px rgba(0,0,0,0.72),       /* depth shadow below */
    0 24px 60px rgba(0,0,0,0.52);      /* far depth shadow */

  z-index: 1;
}

/* Both videos absolutely stacked — cross-fade handles the cut */
.candle-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* GPU-composited opacity transition for buttery cross-fade */
  transition: opacity 0.22s ease;
}

#candleLightVid {
  opacity: 1;
  z-index: 2;
}

#candleLoopVid {
  opacity: 0;
  z-index: 1;
}

/* Caption text */
.candle-memorial-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-pale);
  opacity: 0.70;
  text-align: center;
  z-index: 1;
  animation: fadeIn 0.8s ease 0.4s both;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   CANDLE PAGE GLOW OVERLAY
   Fixed layer above bg-canvas, below content.
   Radiates from the candle card's position — updated by JS.
───────────────────────────────────────────────────────────── */
#candlePageGlow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
  opacity: 0;
  /* Delayed slow bloom — starts after candle video begins */
  transition: opacity 4s cubic-bezier(0.16,1,0.3,1) 1.2s;

  /* Large upward-reaching radial — bright at candle, fades to nothing far away */
  background: radial-gradient(
    ellipse 130% 110% at var(--glow-x, 50%) var(--glow-y, 70%),
    rgba(230,140,30,0.32)  0%,
    rgba(210,100,20,0.20) 18%,
    rgba(180,70,10,0.10)  36%,
    rgba(150,50,5,0.04)   54%,
    transparent           72%
  );

  animation: pageGlowBreath 6s ease-in-out infinite alternate;
  animation-play-state: paused;
}

#candlePageGlow.active {
  opacity: 1;
  animation-play-state: running;
}

@keyframes pageGlowBreath {
  0%   { opacity: 0.75; }
  100% { opacity: 1.00; }
}

/* ─────────────────────────────────────────────────────────────
   LEAVE A MEMORY CARD
───────────────────────────────────────────────────────────── */
.memory-card {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.memory-card-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
}

/* Auth prompt */
.memory-auth {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.memory-auth p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--ivory);
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.3);
  align-self: flex-start;
}

.google-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 4px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
}

.google-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Memory form — hidden until signed in */
.memory-form {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.memory-form.visible { display: flex; }

.memory-textarea {
  width: 100%;
  min-height: 96px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,169,110,0.18);
  border-radius: 14px;
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  padding: 14px 18px;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.memory-textarea::placeholder {
  color: rgba(240,235,224,0.18);
  font-style: italic;
}

.memory-textarea:focus {
  border-color: rgba(200,169,110,0.36);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.05);
}

.memory-submit {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(200,169,110,0.13) 0%, rgba(160,120,64,0.08) 100%);
  border: 1px solid rgba(200,169,110,0.30);
  color: var(--gold-pale);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.memory-submit:hover {
  background: linear-gradient(135deg, rgba(200,169,110,0.22) 0%, rgba(160,120,64,0.15) 100%);
  border-color: rgba(200,169,110,0.50);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Memories list */
.memory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memory-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(200,169,110,0.10);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: fadeIn 0.5s ease both;
}

.memory-item-name {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
}

.memory-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Action buttons row (Edit + Delete) */
.memory-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.memory-edit-btn,
.memory-delete-btn {
  background: none;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.memory-edit-btn {
  border: 1px solid rgba(200,169,110,0.20);
  color: var(--gold);
  opacity: 0.55;
}
.memory-edit-btn:hover {
  opacity: 1;
  border-color: rgba(200,169,110,0.50);
}

.memory-delete-btn {
  border: 1px solid rgba(184,112,112,0.22);
  color: var(--rose);
  opacity: 0.45;
}
.memory-delete-btn:hover {
  opacity: 1;
  border-color: rgba(184,112,112,0.55);
  color: var(--rose-pale);
}

.memory-item-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gold-pale);
  opacity: 0.82;
}

.memory-edit-area {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,169,110,0.25);
  border-radius: 10px;
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  padding: 10px 14px;
  resize: none;
  outline: none;
  min-height: 72px;
}
.memory-edit-area:focus {
  border-color: rgba(200,169,110,0.45);
}

.memory-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}
.memory-save-btn,
.memory-cancel-btn {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.memory-save-btn {
  background: linear-gradient(135deg, rgba(200,169,110,0.18), rgba(160,120,64,0.12));
  border: 1px solid rgba(200,169,110,0.40);
  color: var(--gold-pale);
}
.memory-save-btn:hover {
  border-color: rgba(200,169,110,0.65);
}
.memory-cancel-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
}
.memory-cancel-btn:hover {
  border-color: rgba(255,255,255,0.22);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.footer-note {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.30);
  padding: 12px 0;
  animation: fadeIn 1.2s ease 0.9s both;
}
.footer-contact-note {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(240,235,224,0.20);
  padding-bottom: 32px;
}
.footer-contact-note a {
  color: rgba(200,169,110,0.38);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-contact-note a:hover { color: rgba(200,169,110,0.75); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .page        { padding: 48px 14px 80px; gap: 16px; }
  .hero-card   { padding: 48px 28px 44px; }
  .section-card, .quote-card { padding: 32px 28px; }
  .candle-unlit { padding: 24px 28px; }
  .photo-frame { width: 160px; height: 160px; }
  .gallery-card { padding: 28px 24px; }

  .candle-video-frame {
    width: 170px;
    height: 290px;
  }

  .candle-ambient-glow {
    width: 220px;
    height: 180px;
  }
}