/* ══════════════════════════════════════════════════════════════
   styles.css — 8 March Landing Page
   Dark Luxury + Spring warmth
   ══════════════════════════════════════════════════════════════ */

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

:root {
  /* Core palette */
  --c-void: #06060F;
  --c-dark: #0C0C1A;
  --c-surface: #141426;
  --c-card: #111120;

  /* Spring accents */
  --c-rose: #C8556A;
  --c-blush: #E8A0B0;
  --c-petal: #F5D5DC;
  --c-gold: #D4AF7A;
  --c-gold-lt: #EAD0A0;

  /* Text */
  --c-cream: #F4EDE4;
  --c-muted: #A09898;
  --c-faint: #5A5468;

  /* Typography */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Cormorant Garamond', Georgia, serif;
  --f-ui: 'Inter', system-ui, sans-serif;

  /* Spacing */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 32px;
  --gap-lg: 64px;
  --gap-xl: 96px;

  /* Z-index scale */
  --z-base: 10;
  --z-card: 20;
  --z-overlay: 30;
  --z-top: 50;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ─── BASE ──────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--c-void);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
}

/* Reduced motion — disable all animations */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--gap-lg) var(--gap-md);
}

/* Parallax background */
.hero-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(200, 85, 106, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(212, 175, 122, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20, 15, 40, 0.6) 0%, transparent 100%),
    linear-gradient(160deg, #08050F 0%, #0F0820 30%, #130A18 60%, #0A0812 100%);
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(200, 85, 106, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(212, 175, 122, 0.12) 0%, transparent 55%),
    linear-gradient(160deg, #08050F 0%, #0F0820 30%, #130A18 60%, #0A0812 100%);
  transform-origin: center;
  will-change: transform;
  transform: scale(1.05);
}

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

/* Large decorative date numbers */
.hero-date-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: clamp(28vw, 38vw, 560px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(200, 85, 106, 0.28);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  /* Additional glow behind the number */
  filter: drop-shadow(0 0 60px rgba(200, 85, 106, 0.18));
}

.hero-date-num {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

.hero-date-num.accent {
  -webkit-text-stroke: 2px rgba(200, 85, 106, 0.3);
  /* Also add a soft inner highlight */
  text-shadow:
    0 0 80px rgba(200, 85, 106, 0.2),
    0 0 160px rgba(200, 85, 106, 0.1);
}

.hero-date-num.reveal-up {
  opacity: 1;
  transform: translateY(0);
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: var(--z-base);
  text-align: center;
  width: 100%;
  max-width: 900px;
}

/* Eyebrow line */
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 28px;
}

.eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

/* Main title */
.hero-title {
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hero-line {
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-cream) 0%, rgba(244, 237, 228, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-line--accent {
  background: linear-gradient(135deg, var(--c-gold-lt) 0%, var(--c-rose) 60%, var(--c-blush) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}

/* Kinetic chars */
.kinetic-char {
  display: inline-block;
  transition: transform 0.25s var(--ease-out), opacity 0.25s ease;
  will-change: transform;
}

.hero-line:hover .kinetic-char {
  transform: translateY(var(--dy, -4px)) rotate(var(--r, -2deg));
}

.kinetic-space {
  display: inline-block;
  width: 0.28em;
}

/* Subtitle */
.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-style: italic;
  color: var(--c-muted);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

/* Meta row */
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.hero-meta-dot {
  color: var(--c-rose);
  opacity: 0.6;
}

/* Hero entry animations */
.hero-animate {
  opacity: 0;
  transform: translateY(22px);
  animation: heroFadeUp 0.9s var(--ease-out) forwards;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll CTA - guaranteed centered via flex */
.scroll-cta {
  position: relative;
  margin-top: auto;
  margin-bottom: 20px;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  text-align: center;
}

.scroll-cta:hover {
  opacity: 0.7;
}

.scroll-cta-label {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.scroll-cta-arrow {
  display: block;
  color: var(--c-gold);
  animation: arrowBob 2s ease-in-out infinite;
}

@keyframes arrowBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* ─── PETALS ─────────────────────────────────────────────────────────── */
.petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.petal {
  position: absolute;
  bottom: -20px;
  left: var(--d, 50%);
  width: var(--s, 8px);
  height: var(--s, 8px);
  background: var(--c-rose);
  border-radius: 50% 0 50% 0;
  opacity: 0;
  animation: petalFloat calc(8s + var(--i, 0) * 1.2s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}

.petal:nth-child(even) {
  background: var(--c-gold);
  border-radius: 0 50% 0 50%;
}

@keyframes petalFloat {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }

  8% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-105vh) rotate(380deg) translateX(calc(var(--i, 0) * 18px - 40px));
    opacity: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   GALLERY SECTION
   ══════════════════════════════════════════════════════════════ */
#gallery {
  padding: var(--gap-xl) var(--gap-md);
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(200, 85, 106, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(212, 175, 122, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-void) 0%, #0A0A18 100%);
  position: relative;
}

/* Gallery header */
.gallery-header {
  text-align: center;
  margin-bottom: var(--gap-lg);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.gallery-header.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-eyebrow {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 16px;
}

.gallery-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(135deg, var(--c-cream) 0%, var(--c-gold-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  line-height: 1.2;
}

.gallery-sub {
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: 32px;
}

/* Decorative divider */
.gallery-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--c-rose);
  opacity: 0.5;
}

.divider-line {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
}

.divider-flower {
  flex-shrink: 0;
}

/* Swipe hint (mobile only) */
.swipe-hint {
  display: none;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--c-faint);
  text-align: center;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .swipe-hint {
    display: block;
  }
}

/* ─── GALLERY GRID ───────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1200px) {

  /* Asymmetric layout: larger cards for first two */
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .portrait-card:nth-child(1),
  .portrait-card:nth-child(2) {
    grid-column: span 1;
  }
}

/* Mobile: horizontal scroll-snap carousel */
@media (max-width: 640px) {
  .gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--gap-md);
    gap: 16px;
    padding: 8px var(--gap-md) 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .portrait-card {
    flex: 0 0 72vw;
    max-width: 300px;
    scroll-snap-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   THEATRICAL CURTAIN CARDS (gallery items)
   Each card IS a pair of velvet curtain panels
   ══════════════════════════════════════════════════════════════ */

.portrait-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  will-change: transform, opacity;
  /* Outer shadow mimics curtain hanging in theatre */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.portrait-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--stagger, 0s);
}

.portrait-card:hover {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 32px color-mix(in srgb, var(--card-color, #C8556A) 25%, transparent);
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out);
  transform: translateY(-4px) scale(1.01);
}

/* ─── CURTAIN PANELS (cp = curtain panel) ─────────────────────── */

/* Both panels are absolute, each 50% wide */
.cp {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  /* slight overlap at seam */
  z-index: 10;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
  overflow: hidden;
}

.cp--left {
  left: 0;
  transform-origin: left;
}

.cp--right {
  right: 0;
  transform-origin: right;
}

/* Hover: panels breathe apart slightly */
.portrait-card:hover .cp--left {
  transform: translateX(-4%);
}

.portrait-card:hover .cp--right {
  transform: translateX(4%);
}

/* Velvet fabric built from layered CSS gradients */
.cp-fabric {
  position: absolute;
  inset: 0;

  background-image:
    /* 1. Vertical fold/pleat shadows (simulates gathered velvet fabric) */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 12px,
      rgba(0, 0, 0, 0.25) 12px,
      rgba(0, 0, 0, 0.25) 14px,
      transparent 14px,
      transparent 26px,
      rgba(255, 255, 255, 0.025) 26px,
      rgba(255, 255, 255, 0.025) 28px,
      transparent 28px,
      transparent 40px),

    /* 2. Horizontal sheen (satin/velvet gloss) */
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.025) 0px,
      transparent 4px,
      transparent 10px),

    /* 3. Rich velvet base — built entirely from the woman's color */
    linear-gradient(160deg,
      color-mix(in srgb, var(--card-color, #C8556A) 18%, #000) 0%,
      color-mix(in srgb, var(--card-color, #C8556A) 55%, #000) 30%,
      color-mix(in srgb, var(--card-color, #C8556A) 70%, #000) 55%,
      color-mix(in srgb, var(--card-color, #C8556A) 45%, #000) 80%,
      color-mix(in srgb, var(--card-color, #C8556A) 20%, #000) 100%);
}

.cp--left .cp-fabric {
  box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.55);
}

/* Right panel: darker on left edge */
.cp--right .cp-fabric {
  box-shadow: inset 20px 0 40px rgba(0, 0, 0, 0.55);
}

/* Top pelmet / cornice bar */
.cp-pelmet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 3;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card-color, #C8556A) 22%, #0A0008) 0%,
      color-mix(in srgb, var(--card-color, #C8556A) 8%, #080006) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--card-color, #D4AF7A) 35%, transparent);
}

/* Inner shadow for depth on panels */
.cp-shadow-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Gold tassel droppers hanging from pelmet */
.cp--left .cp-pelmet::after,
.cp--right .cp-pelmet::after {
  content: '';
  position: absolute;
  bottom: -18px;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, var(--card-color, var(--c-gold)) 0%, transparent 100%);
  opacity: 0.55;
  border-radius: 1px;
}

.cp--left .cp-pelmet::after {
  right: 6px;
}

.cp--right .cp-pelmet::after {
  left: 6px;
}

/* Center seam decoration */
.cp-seam {
  position: absolute;
  top: 22px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  z-index: 15;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card-color, #C8556A) 50%, #000) 0%,
      rgba(0, 0, 0, 0.5) 60%,
      transparent 100%);
  pointer-events: none;
}

/* ─── NAME LABEL ON CLOSED CURTAINS ──────────────────────────── */

.card-label {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  padding: 24px 12px;
}

.card-label-flower {
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--card-color, var(--c-gold));
  opacity: 0.8;
}

.card-label-name {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.card-label-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 8px;
  text-transform: uppercase;
}

/* Hint pulses softly */
@keyframes hintPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.55;
  }
}

.card-label-hint {
  animation: hintPulse 2.5s ease-in-out infinite;
}

/* ─── LIKE BUTTON (top-right on curtain card) ─────────────────── */

.like-btn {
  position: absolute;
  top: 28px;
  right: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--f-ui);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  min-width: 44px;
  min-height: 36px;
  justify-content: center;
}

.like-btn:hover {
  color: var(--c-rose);
  border-color: var(--c-rose);
  background: rgba(200, 85, 106, 0.15);
}

.like-btn.liked {
  color: var(--c-rose);
  border-color: rgba(200, 85, 106, 0.5);
  background: rgba(200, 85, 106, 0.18);
}

.like-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.like-btn.liked .like-icon {
  animation: heartBeat 0.35s var(--ease-out);
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.5);
  }

  65% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.like-count {
  font-size: 10px;
  min-width: 10px;
  text-align: center;
}

/* Burst particles */
.burst-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-rose);
  pointer-events: none;
  animation: burstOut 0.5s var(--ease-out) forwards;
}

@keyframes burstOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.portrait-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.portrait-card:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(var(--card-color-rgb, 200, 85, 106), 0.25),
    0 0 30px rgba(var(--card-color-rgb, 200, 85, 106), 0.1);
  transition:
    box-shadow 0.3s ease,
    transform 0.4s var(--ease-out);
}

/* ─── PHOTO PLACEHOLDER AREA ─────────────────────────────────────────── */
.card-portrait-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--card-bg, linear-gradient(145deg, #111 0%, #222 100%));
}

/* The gradient background artwork */
.card-portrait-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, linear-gradient(145deg, #111 0%, #222 100%));
}

/* Large decorative initial */
.portrait-initial {
  position: absolute;
  font-family: var(--f-display);
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 900;
  font-style: italic;
  color: rgba(255, 255, 255, 0.06);
  user-select: none;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Flower icon ring */
.portrait-flower-ring {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  color: var(--card-color, var(--c-rose));
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}

.portrait-card:hover .portrait-flower-ring {
  transform: scale(1.08) rotate(15deg);
  border-color: var(--card-color, var(--c-rose));
}

.portrait-flower-svg {
  width: 44px;
  height: 44px;
}

/* Glow pulse under the ring */
.portrait-glow {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-color, var(--c-rose)) 0%, transparent 70%);
  opacity: 0.12;
  filter: blur(20px);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.08;
    transform: scale(1);
  }

  50% {
    opacity: 0.18;
    transform: scale(1.2);
  }
}

/* Photo placeholder gradient border hint */
.card-portrait-wrap::after {
  content: 'фото';
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  padding: 3px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}

/* Curtain reveal — slides up on scroll */
.card-curtain {
  position: absolute;
  inset: 0;
  background: var(--c-dark);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 0.85s var(--ease-out);
  z-index: var(--z-card);
}

.portrait-card.visible .card-curtain {
  transform: scaleY(0);
  transition-delay: var(--stagger, 0s);
}

/* Hover trait overlay */
.card-trait-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.6) 40%,
      transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
  z-index: var(--z-overlay);
  pointer-events: none;
}

.portrait-card:hover .card-trait-overlay,
.portrait-card:focus-within .card-trait-overlay {
  opacity: 1;
  transform: translateY(0);
}

.card-trait-text {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--card-color, var(--c-blush));
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* ─── CARD INFO BAR ──────────────────────────────────────────────────── */
.card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 8px;
  background: rgba(8, 8, 20, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.card-name-wrap {
  flex: 1;
  min-width: 0;
}

.card-name {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-flower-name {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--card-color, var(--c-rose));
  opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── LIKE BUTTON ───────────────────────────────────────────────────── */
.like-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--c-faint);
  font-family: var(--f-ui);
  font-size: 12px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  position: relative;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 36px;
  justify-content: center;
}

.like-btn:hover {
  color: var(--c-rose);
  border-color: var(--c-rose);
  background: rgba(200, 85, 106, 0.08);
}

.like-btn.liked {
  color: var(--c-rose);
  border-color: rgba(200, 85, 106, 0.4);
  background: rgba(200, 85, 106, 0.1);
}

.like-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}

.like-btn.liked .like-icon {
  animation: heartBeat 0.35s var(--ease-out);
}

.like-btn:active .like-icon {
  transform: scale(0.85);
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.45);
  }

  65% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.like-count {
  font-size: 11px;
  line-height: 1;
  min-width: 12px;
  text-align: center;
}

/* Burst particles */
.burst-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-rose);
  pointer-events: none;
  animation: burstOut 0.5s var(--ease-out) forwards;
}

@keyframes burstOut {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Swipe dots (mobile) */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.swipe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-faint);
  transition: background 0.25s, transform 0.25s;
}

.swipe-dot.active {
  background: var(--c-rose);
  transform: scale(1.4);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
#footer {
  position: relative;
  padding: var(--gap-xl) var(--gap-md);
  text-align: center;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200, 85, 106, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(212, 175, 122, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0A0A18 0%, #08060F 100%);
  z-index: 0;
}

.footer-content {
  position: relative;
  z-index: var(--z-base);
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.footer-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flower decoration */
.footer-flower-deco {
  color: var(--c-rose);
  margin-bottom: 28px;
  opacity: 0.5;
  animation: footerFlowerSpin 20s linear infinite;
}

@keyframes footerFlowerSpin {
  to {
    transform: rotate(360deg);
  }
}

.footer-eyebrow {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 20px;
}

.footer-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-style: italic;
  background: linear-gradient(135deg, var(--c-cream) 0%, var(--c-blush) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 28px;
  line-height: 1.25;
}

.footer-message-wrap {
  margin-bottom: 36px;
}

.footer-message {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}

.footer-message--italic {
  font-style: italic;
  color: rgba(232, 160, 176, 0.75);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}

.br-desktop {
  display: none;
}

@media (min-width: 640px) {
  .br-desktop {
    display: block;
  }
}

.footer-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-line-deco {
  font-family: var(--f-body);
  color: var(--c-rose);
  opacity: 0.5;
  letter-spacing: 0.3em;
  font-size: 0.85rem;
}

.footer-team {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--c-gold);
}

.footer-year {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-faint);
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--c-void);
}

::-webkit-scrollbar-thumb {
  background: var(--c-rose);
  border-radius: 2px;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #hero {
    padding: var(--gap-lg) var(--gap-sm);
  }

  #gallery {
    padding: var(--gap-lg) var(--gap-sm);
  }

  #footer {
    padding: var(--gap-lg) var(--gap-sm);
  }

  .gallery-title {
    font-size: 1.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   CURTAIN LIGHTBOX
   Two theatrical panels slide apart left & right, revealing
   the full-screen portrait behind them.
   ══════════════════════════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  /* Transparent by default: curtains close OVER the gallery page */
  background: transparent;
  transition: background 0.3s ease;
}

/* After curtains fully close (JS adds .lb-dark), go dark for flower + photo stages */
.lightbox.lb-dark {
  background: #080008;
}

.lightbox[hidden] {
  display: none;
}

/* The two curtain panels */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 20;
  /* Base fold-shadow overlays — color set directly by JS via style.backgroundImage */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 18px,
      rgba(0, 0, 0, 0.30) 18px,
      rgba(0, 0, 0, 0.30) 20px,
      transparent 20px,
      transparent 36px,
      rgba(255, 255, 255, 0.02) 36px,
      rgba(255, 255, 255, 0.02) 38px,
      transparent 38px,
      transparent 54px),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.025) 0px,
      transparent 4px,
      transparent 10px),
    /* neutral fallback before JS sets the real color */
    linear-gradient(160deg, #0a0008 0%, #220010 55%, #0a0008 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.curtain--left {
  left: 0;
  transform-origin: left;
  border-right: 2px solid color-mix(in srgb, var(--lb-color, #C8556A) 40%, transparent);
  /* Rope/gold trim on inside edge */
  box-shadow:
    inset -8px 0 20px rgba(0, 0, 0, 0.5),
    4px 0 20px rgba(0, 0, 0, 0.4);
}

.curtain--right {
  right: 0;
  transform-origin: right;
  border-left: 2px solid color-mix(in srgb, var(--lb-color, #C8556A) 40%, transparent);
  box-shadow:
    inset 8px 0 20px rgba(0, 0, 0, 0.5),
    -4px 0 20px rgba(0, 0, 0, 0.4);
}

/* Top pelmet bar */
.curtain--left::before,
.curtain--right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--lb-color, #3A1030) 30%, #1A0818) 0%,
      #1A0818 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--lb-color, #D4AF7A) 30%, transparent);
}

/* Tassel decoration */
.curtain--left::after,
.curtain--right::after {
  content: '';
  position: absolute;
  top: 24px;
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, var(--lb-color, var(--c-gold)) 0%, transparent 100%);
  opacity: 0.6;
  border-radius: 1px;
}

.curtain--left::after {
  right: 0;
}

.curtain--right::after {
  left: 0;
}

/* ─── NEW CURTAIN STATES ────────────────────────────────────────
   Default: curtains are OFF-SCREEN (open).
   .curtains-closed: slide in from sides to cover screen.
   ────────────────────────────────────────────────────────────── */

/* Default = OPEN (off-screen) */
.curtain--left {
  transform: translateX(-100%);
}

.curtain--right {
  transform: translateX(100%);
}

/* CLOSED — curtains slide to center */
.lightbox.curtains-closed .curtain--left {
  transform: translateX(0);
}

.lightbox.curtains-closed .curtain--right {
  transform: translateX(0);
}

/* Portrait revealed behind curtains */
.lightbox-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease 1.4s;
  /* delay until curtains are open */
}

.lightbox.is-open .lightbox-content {
  opacity: 1;
}

/* Full-screen gradient background */
.lightbox-portrait-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* bg set dynamically by JS */
  background: linear-gradient(145deg, #111 0%, #222 100%);
  transition: background 0.3s;
}

/* Large initial letter in background */
.lightbox-initial {
  position: absolute;
  font-family: var(--f-display);
  font-size: min(60vw, 60vh);
  font-weight: 900;
  font-style: italic;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Flower icon ring (larger) */
.lightbox-flower-ring {
  position: relative;
  z-index: 2;
  width: min(25vw, 200px);
  height: min(25vw, 200px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  animation: lbFlowerSpin 20s linear infinite;
}

.lightbox-flower-ring .portrait-flower-svg {
  width: 55%;
  height: 55%;
}

@keyframes lbFlowerSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Radial glow */
.lightbox-glow {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.12;
  filter: blur(40px);
  animation: glowPulse 3s ease-in-out infinite;
}

/* Photo overlay (if real photo exists) */
.lightbox-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Info panel at bottom */
.lightbox-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(24px, 5vw, 60px) clamp(24px, 8vw, 100px);
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transform: translateY(20px);
  transition: transform 0.5s var(--ease-out) 0.7s;
}

.lightbox.is-open .lightbox-info {
  transform: translateY(0);
}

.lightbox-flower-label {
  font-family: var(--f-ui);
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* color set dynamically */
  color: var(--c-gold);
  opacity: 0.9;
}

.lightbox-name {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(135deg, #fff 0%, var(--c-blush) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lightbox-trait {
  font-family: var(--f-body);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  line-height: 1.5;
}

/* Decorative heart */
.lightbox-heart {
  margin-top: 8px;
  color: var(--c-rose);
  width: 28px;
  height: 28px;
  opacity: 0.7;
  animation: heartBeat 2s ease-in-out infinite;
}

.lightbox-heart svg {
  width: 100%;
  height: 100%;
}

/* ── Back to main button ── */
.lightbox-back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-8px);
  /* Appear after curtains open */
  transition:
    opacity 0.4s ease 2.2s,
    transform 0.4s ease 2.2s,
    background 0.2s,
    border-color 0.2s;
}

.lightbox.is-open .lightbox-back {
  opacity: 1;
  transform: translateX(0);
}

.lightbox-back:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.lightbox-back svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Clicking backdrop closes */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX — X CLOSE BUTTON
   ══════════════════════════════════════════════════════════════ */

.lb-close {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 50;
  /* above curtains */
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, background 0.2s, transform 0.2s;
  pointer-events: none;
}

/* Show after lightbox is open (not hidden) */
.lightbox:not([hidden]) .lb-close {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

.lb-close:hover {
  background: rgba(200, 85, 106, 0.4);
  border-color: var(--lb-color, var(--c-rose));
  transform: scale(1.08);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — FLOWER STAGE (shown on CLOSED curtains)
   ══════════════════════════════════════════════════════════════ */

.lb-flower-stage {
  position: absolute;
  inset: 0;
  z-index: 25;
  /* above curtains */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}

.lb-flower-stage.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Flower button */
.lb-flower-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  outline-offset: 8px;
}

/* Flower ring (same as card ring, but larger) */
.lb-flower-ring {
  position: relative;
  z-index: 2;
  width: clamp(120px, 18vw, 180px);
  height: clamp(120px, 18vw, 180px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  color: var(--lb-color, var(--c-rose));
  transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}

.lb-flower-ring .portrait-flower-svg {
  width: 55%;
  height: 55%;
}

.lb-flower-btn:hover .lb-flower-ring {
  transform: scale(1.1) rotate(25deg);
  border-color: var(--lb-color, var(--c-rose));
  box-shadow: 0 0 40px rgba(var(--lb-color, 200, 85, 106), 0.3);
}

/* Radial glow behind ring */
.lb-flower-glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(30px);
  animation: glowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* Pulsing outer ring (click invitation) */
.lb-pulse-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid var(--lb-color, var(--c-rose));
  opacity: 0;
  animation: lbPulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes lbPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.85);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Info text below the flower */
.lb-stage-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lb-stage-flower {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  /* Darker than curtain so it doesn't blend — same hue, much darker */
  color: color-mix(in srgb, var(--lb-color, var(--c-gold)) 80%, #000);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7);
}

.lb-stage-name {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.6);
}

.lb-stage-trait {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.lb-tap-hint {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 24px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  animation: hintPulse 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — PHOTO AREA (behind open curtains)
   ══════════════════════════════════════════════════════════════ */

.lb-photo-area {
  position: absolute;
  inset: 0;
  z-index: 8;
  /* below curtains */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lb-photo-area.visible {
  opacity: 1;
}

/* Gradient background fallback */
.lb-photo-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0A0A1F 0%, #1A0A18 100%);
}

/* Portrait photo — full body, no cropping */
.lb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Shift slightly to the left to make room for text on the right */
  object-position: 20% center;
}

/* Info panel on the right */
.lb-photo-info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  padding: 60px 40px;
  /* Deep vertical vignette from right to ensure text readability */
  background: linear-gradient(to left,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.75) 60%,
      rgba(0, 0, 0, 0.4) 85%,
      transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  transform: translateX(40px);
  opacity: 0;
  transition:
    transform 0.6s var(--ease-out) 0.5s,
    opacity 0.6s ease 0.5s;
}

.lb-photo-area.visible .lb-photo-info {
  transform: translateX(0);
  opacity: 1;
}

.lb-photo-flower {
  font-family: var(--f-ui);
  font-size: 14px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--lb-color, var(--c-gold));
  margin-bottom: 8px;
}

.lb-photo-name {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 12px;
}

.lb-photo-trait {
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  max-width: 340px;
  line-height: 1.6;
}