/* ==========================================================================
   Wedding Invitation · Stories
   Structure: tokens → base → layout → components → motion
   ========================================================================== */

/* Tokens */
:root {
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --color-page: #E9E3D9;
  --color-background: #F7F4EE;
  --color-paper: #F5F1EA;
  --color-ink: #4F443A;
  --color-muted: #857C6E;
  --color-accent: #8F8F78;
  --color-line: #D3CDBB;
  --color-on-photo: #FBF8F2;
  --floral-opacity: 0.42;
  --story-autoplay: 9s;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-page: #16120F; }
}
:root[data-theme="dark"] { --color-page: #16120F; }

/* Base */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  justify-content: center;
  background: var(--color-page);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.story-viewport {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  overflow: hidden;
  background: var(--color-background);
}

.story {
  position: absolute;
  inset: 0;
  color: var(--color-ink);
  background:
    radial-gradient(120% 70% at 50% 0%, #FBF9F5 0%, transparent 60%),
    radial-gradient(120% 60% at 50% 100%, #EAE2D5 0%, transparent 70%),
    var(--color-background);
}

.story[data-active-story="1"] .photo-gallery { display: none; }
.story[data-active-story="2"] .invitation { display: none; }

/* Progress bar */
.progress-bar {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.progress-bar__segment {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(79, 68, 58, 0.18);
}
.progress-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
}
.progress-bar__segment.is-complete .progress-bar__fill { transform: scaleX(1); }
.progress-bar__segment.is-active .progress-bar__fill { animation: progress-fill var(--story-autoplay) linear forwards; }
.progress-bar__segment:last-child.is-active .progress-bar__fill { animation: none; transform: scaleX(1); }

/* Header */
.story-header {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.story-header__monogram {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-accent);
  font-size: 14px;
  font-style: italic;
}
.story[data-active-story="2"] .story-header { color: var(--color-on-photo); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.story[data-active-story="2"] .story-header__monogram { background: rgba(251, 248, 242, 0.88); text-shadow: none; }
.story[data-active-story="2"] .progress-bar__segment { background: rgba(251, 248, 242, 0.38); }
.story[data-active-story="2"] .progress-bar__fill { background: var(--color-on-photo); }

/* Story 1 · Invitation */
.invitation {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(112px, 16dvh, 156px) 28px 56px;
  text-align: center;
}
.invitation > * {
  position: relative;
  z-index: 2;
  animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--enter-delay, 0s) both;
}
.invitation > :nth-child(3) { --enter-delay: 0.1s; }
.invitation > :nth-child(4) { --enter-delay: 0.2s; }
.invitation > :nth-child(5) { --enter-delay: 0.3s; }
.invitation > :nth-child(6) { --enter-delay: 0.4s; }
.invitation > :nth-child(7) { --enter-delay: 0.5s; }
.invitation > :nth-child(8) { --enter-delay: 0.55s; }
.invitation > :nth-child(n+9) { --enter-delay: 0.65s; }

.invitation__blessing { margin: 0 0 18px; color: var(--color-muted); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; }
.invitation__couple-names { margin: 0; font-size: clamp(52px, 16vw, 68px); font-weight: 400; line-height: 0.98; letter-spacing: 0.005em; }
.invitation__couple-names em { margin: 0 0.1em; color: var(--color-accent); font-size: 0.62em; font-style: italic; font-weight: 300; }
.invitation__announcement { margin: 20px 0 0; color: var(--color-muted); font-size: 20px; letter-spacing: 0.02em; }
.invitation__date { margin: 0; padding-left: 0.2em; font-size: clamp(30px, 9vw, 38px); font-weight: 400; letter-spacing: 0.2em; }
.invitation__time { margin: 8px 0 0; font-size: 22px; }
.invitation__venue-name { margin: 26px 0 0; font-size: 28px; font-weight: 400; }
.invitation__venue-address { margin: 4px 0 0; color: var(--color-muted); font-size: 19px; }
.invitation__quote { max-width: 330px; margin: 0; font-size: 22px; font-style: italic; font-weight: 300; line-height: 1.4; }
.invitation__quote-reference { margin: 14px 0 0; color: var(--color-muted); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; }

.divider { width: 64px; height: 1px; margin: 30px auto; background: var(--color-line); }

.invitation .continue-hint {
  margin: 24px 0 0;
  color: var(--color-muted);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.03em;
  pointer-events: none;
  animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s both;
}

/* Floral decoration */
.invitation > .floral-sprig {
  position: absolute;
  z-index: 1;
  width: 130px;
  color: var(--color-accent);
  opacity: var(--floral-opacity);
  pointer-events: none;
  animation: none;
}
.floral-sprig--top-left { top: 34px; left: -18px; transform: rotate(-8deg); }
.floral-sprig--bottom-right { bottom: 70px; right: -16px; transform: rotate(172deg); }

/* Story 2 · Photo gallery */
.photo-gallery { position: absolute; inset: 0; z-index: 3; background: #2A1F17; }
.photo-gallery::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(30, 20, 12, 0.62), transparent);
}
.photo-gallery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.photo-gallery__photo.is-visible { opacity: 1; animation: photo-drift 7s ease-out both; }
.photo-gallery__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px calc(52px + env(safe-area-inset-bottom, 0px));
  color: var(--color-on-photo);
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.photo-gallery__couple-names { margin: 0; font-size: clamp(38px, 11vw, 46px); font-weight: 400; line-height: 1.05; }
.photo-gallery__couple-names em { font-size: 0.7em; font-style: italic; font-weight: 300; opacity: 0.85; }
.photo-gallery__date { margin: 12px 0 0; padding-left: 0.22em; font-size: 20px; letter-spacing: 0.22em; }

/* Motion */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes photo-drift { from { transform: scale(1.07); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .invitation > *, .invitation .continue-hint, .progress-bar__fill, .photo-gallery__photo.is-visible { animation: none !important; }
  .photo-gallery__photo { transition: none; }
}