/* ── For Sisi · Warm Ember (candlelit ivory + garnet + gold) ──────────── */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 16%, #fffdf8 0%, #f7eedd 44%, #efe0cb 74%, #e6d2b8 100%);
  color: #6e1620;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  z-index: 1;
  -webkit-font-smoothing: antialiased;
}

/* warm candle glow that keeps the light alive */
.sunbeam {
  position: absolute;
  top: -28vh;
  left: 50%;
  width: 92vh;
  height: 92vh;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 197, 138, 0.5) 0%, rgba(232, 197, 138, 0) 62%);
  pointer-events: none;
  animation: breathe 16s ease-in-out infinite;
  z-index: 1;
}
@keyframes breathe {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.95; transform: translateX(-50%) scale(1.07); }
}

/* ── Scenes (crossfade) ───────────────────────────────────────────────── */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  padding: 6vmin;
  box-sizing: border-box;
}
/* Symmetric ease so the two layers' opacities always sum to ~1 — a clean
   dissolve with no mid-crossfade brightening or background bleed-through. */
.sceneIn { z-index: 2; animation: sFadeIn 2s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.sceneOut { z-index: 1; animation: sFadeOut 2s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
@keyframes sFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Photo scenes ─────────────────────────────────────────────────────── */
.photoFrame { position: absolute; inset: 0; overflow: hidden; }
.photoFrame img,
.photoFrame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.photoBackdrop {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(1.05) brightness(0.96);
  opacity: 0.5;
  z-index: -1;
}
/* blurred motion backdrop behind portrait video, mirroring .photoBackdrop */
.photoFrame video.videoBackdrop {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  filter: blur(40px) saturate(1.05) brightness(0.96);
  opacity: 0.5;
  z-index: -1;
}
/* ── Anime outer treatment (gated by .animeFrame; remove class to roll back) ── */
/* dreamy sunset sky wash in the letterbox space, sitting over the blurred
   backdrop but behind the crisp photo/video */
.animeFrame .photoFrame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 70% at 50% 6%, rgba(255, 224, 160, 0.34) 0%, rgba(255, 224, 160, 0) 52%),
    linear-gradient(180deg, rgba(58, 74, 107, 0.42) 0%, rgba(122, 106, 134, 0.16) 32%, rgba(200, 127, 115, 0.16) 62%, rgba(255, 215, 154, 0.38) 100%);
}
/* deepen + warm the blur so the side space reads as sky, not a smeared photo */
.animeFrame .photoBackdrop,
.animeFrame .photoFrame video.videoBackdrop {
  filter: blur(48px) saturate(1.25) brightness(0.82) hue-rotate(-4deg);
  opacity: 0.62;
}
/* the photo/video floats as a softly lit panel on the sky */
.animeFrame .photoFrame img.kenburns,
.animeFrame .photoFrame video[data-main="true"] {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 1.6vmin rgba(255, 224, 160, 0.5))
    drop-shadow(0 1.4vmin 4.5vmin rgba(20, 8, 10, 0.5));
}

/* ── Cozy Japanese room (gated by .animeHouse) ─────────────────────────────
   Switch OUTER_THEME in Slideshow.tsx to roll this back. */
.room {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* shoji paper wall with warm wood lattice */
.roomWall {
  position: absolute;
  inset: 0;
  background-color: #f1e4ca;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 244, 222, 0.9) 0%, rgba(241, 228, 202, 0) 60%),
    repeating-linear-gradient(0deg, transparent 0 10.5vh, rgba(120, 80, 45, 0.16) 10.5vh 11vh),
    repeating-linear-gradient(90deg, transparent 0 8.5vw, rgba(120, 80, 45, 0.16) 8.5vw 9vw);
  box-shadow: inset 0 0 0 1.4vmin #8a5a2e, inset 0 0 0 2.4vmin #6e4422;
}
/* tatami / wood floor band */
.roomFloor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 21vh;
  background:
    linear-gradient(180deg, #c79a6a 0%, #b07d4e 60%, #9a6a40 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 58, 30, 0.22) 0 0.2vw, transparent 0.2vw 13vw),
    linear-gradient(180deg, #c79a6a 0%, #b07d4e 60%, #9a6a40 100%);
  box-shadow: inset 0 0.5vmin 1.4vmin rgba(60, 36, 18, 0.4), inset 0 0 0 1.4vmin #6e4422;
  border-top: 0.5vmin solid #5b3a1c;
}
/* decorations */
.deco { position: absolute; filter: drop-shadow(0 0.6vmin 1vmin rgba(40, 20, 10, 0.3)); }
.deco svg { width: 100%; height: auto; display: block; }
.lanternL { top: 2vh; left: 4vw; width: 7vmin; animation: sway 7s ease-in-out infinite; }
.lanternR { top: 2vh; right: 4vw; width: 7vmin; animation: sway 8s ease-in-out infinite reverse; }
.ramen { bottom: 3vh; left: 16vw; width: 13vmin; }
.sushiSet { bottom: 2.5vh; right: 15vw; width: 15vmin; }
.sushiSet span { position: absolute; }
.sushiSet .nigiriA { width: 9vmin; left: 0; bottom: 0; }
.sushiSet .nigiriB { width: 8vmin; right: 1vmin; bottom: 2.6vmin; }
.sushiSet .makiA { width: 5.5vmin; right: 4vmin; bottom: 0; }
.onigiri { bottom: 3.5vh; left: 30vw; width: 6.5vmin; }
.makiB { bottom: 4vh; right: 30vw; width: 5vmin; }
/* the two dogs flank the room at the far lower corners so the centered picture
   frame passes between them and never covers them */
.dogLeft { bottom: 1.5vh; left: 2.5vw; width: 15vmin; }
.dogRight { bottom: 1.5vh; right: 2.5vw; width: 15vmin; transform: scaleX(-1); }
.dango { bottom: 4vh; left: 12vw; width: 4vmin; animation: sway 6s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.steam { animation: steamRise 3.4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes steamRise {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-2px); }
}
/* every scene shares the room — drop the full-bleed gradients so it never pops in/out */
.animeHouse .placeholder { background: transparent; }

/* lift the centered content a touch so the big frame floats above the floor + dogs */
.animeHouse .scene { padding-bottom: 13vmin; }

/* the photo/video hangs as a frame that HUGS the image (image stays big), room fills the rest */
.animeHouse .framedMedia {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 84vh;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #2a1a12;
  box-shadow:
    0 0 0 0.7vmin #c79a55,
    0 0 0 1.6vmin #8a5a2e,
    0 0 0 2.1vmin #5b3a1c,
    0 3vmin 7vmin rgba(20, 8, 10, 0.5);
}
/* image sizes itself naturally so the frame wraps tight — no letterbox, no shrink */
.animeHouse .framedMedia img.kenburns,
.animeHouse .framedMedia video[data-main="true"] {
  position: static;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
}
/* no blurred backdrop needed once the frame hugs the picture */
.animeHouse .framedMedia .photoBackdrop,
.animeHouse .framedMedia video.videoBackdrop {
  display: none;
}
.animeHouse .framedMedia .caption {
  padding: 7vmin 4vmin 3vmin;
  line-height: 1.2;
}
.animeHouse .framedMedia .openingText { line-height: 1.25; }

/* title / chapter / closing cards: a framed paper sign hung in the room */
.animeHouse .framedCard {
  position: relative;
  display: inline-block;
  max-width: 72vw;
  padding: 7vmin 9vmin;
  background: radial-gradient(120% 130% at 50% 0%, #fff8e8 0%, #f6ead0 68%, #efdcbd 100%);
  border-radius: 5px;
  box-shadow:
    0 0 0 0.7vmin #c79a55,
    0 0 0 1.6vmin #8a5a2e,
    0 0 0 2.1vmin #5b3a1c,
    0 3vmin 7vmin rgba(20, 8, 10, 0.5);
}

/* legibility scrim over the hero photo — family stays visible up top, words sit in a calm dark band below */
.heroScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 7, 9, 0.16) 0%, rgba(18, 7, 9, 0) 26%, rgba(18, 7, 9, 0) 46%, rgba(18, 7, 9, 0.34) 70%, rgba(18, 7, 9, 0.74) 88%, rgba(18, 7, 9, 0.9) 100%);
}

/* opening title — a quiet lower band, a person's name, not a logo lockup */
.openingText {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8vmin;
  z-index: 2;
  text-align: center;
  padding: 0 8vmin;
}
.openingText .name {
  font-weight: 400;
  font-size: clamp(32px, 5.8vmin, 84px);
  letter-spacing: 0;
  color: #fdf3e6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 16px rgba(16, 5, 7, 0.55);
}
.openingText .nick {
  color: #f6dcc0;
  font-size: clamp(24px, 3.6vmin, 50px);
  margin-top: 0.8vmin;
  text-shadow: 0 1px 10px rgba(16, 5, 7, 0.7);
}
.openingText .years {
  color: #e8cfa6;
  letter-spacing: 0.32em;
  font-size: clamp(15px, 2.2vmin, 30px);
  margin-top: 2vmin;
  text-shadow: 0 1px 10px rgba(16, 5, 7, 0.7);
}
.openingText .tagline {
  color: #eed9c0;
  font-size: clamp(19px, 2.8vmin, 38px);
  margin-top: 1.6vmin;
  text-shadow: 0 1px 10px rgba(16, 5, 7, 0.7);
}

.kenburns { animation: kenburns 9s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.13) translate(-1.5%, -1.5%); }
}

.caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 9vmin 6vmin 6vmin;
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.4vmin, 64px);
  color: #fff7ec;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 24px rgba(20, 8, 10, 0.8);
  letter-spacing: 0.4px;
  /* soft warm-dark glow rising from the bottom so the words read over any photo */
  background: radial-gradient(120% 150% at 50% 130%, rgba(18, 7, 9, 0.72) 0%, rgba(18, 7, 9, 0.34) 38%, rgba(18, 7, 9, 0) 70%);
}

/* ── Placeholder panels (before real photos) — warm, varied, not pink ──── */
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder .ph-caption {
  position: absolute;
  bottom: 9vmin;
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(18px, 2.6vmin, 36px);
  color: #7a3a28;
  opacity: 0.72;
}
.tone-dawn  { background: radial-gradient(120% 100% at 50% 28%, #fffaf0, #f3e4c6 60%, #e6cfa4); }
.tone-blush { background: radial-gradient(120% 100% at 42% 34%, #fdf6ec, #ecd9c0 58%, #d9bd9c); }
.tone-peach { background: radial-gradient(120% 100% at 60% 30%, #fdf2e3, #eec79a 60%, #d59668); }
.tone-rose  { background: radial-gradient(120% 100% at 45% 38%, #f6e4de, #ca7a6e 54%, #8c2f2c); }
.tone-amber { background: radial-gradient(120% 100% at 50% 30%, #fff7e6, #f0d394 60%, #d4a557); }
/* anime skies */
.tone-dusk {
  background: linear-gradient(180deg, #3a4a6b 0%, #7a6a86 26%, #c87f73 52%, #ec9f74 72%, #ffd79a 100%);
}
.tone-sky {
  background: linear-gradient(180deg, #a9cfe6 0%, #d3e7ec 44%, #fbf0dc 100%);
}

/* ── Lotus ────────────────────────────────────────────────────────────── */
.lotus { display: block; }
.lotus.lg { width: clamp(120px, 16vmin, 240px); height: auto; }
.lotus.md { width: clamp(90px, 11vmin, 170px); height: auto; }
.lotusGlow { filter: drop-shadow(0 6px 24px rgba(140, 30, 34, 0.45)); }

/* ── Typography ───────────────────────────────────────────────────────── */
.name {
  font-weight: 500;
  font-size: clamp(40px, 8.2vmin, 132px);
  line-height: 1.02;
  letter-spacing: 0.5px;
  color: #7a1620;
  margin: 3vmin 0 0;
}
.nick {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.6vmin, 56px);
  color: #a4322f;
  margin-top: 1.2vmin;
}
.tagline {
  font-style: italic;
  font-size: clamp(16px, 2.4vmin, 32px);
  color: #9a6a4a;
  margin-top: 2.2vmin;
}
.years {
  letter-spacing: 0.5em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.7vmin, 22px);
  color: #b08a4e;
  margin-top: 3vmin;
  padding-left: 0.5em;
}

.chapterTitle {
  font-size: clamp(34px, 6.6vmin, 104px);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #7a1620;
  margin-top: 3vmin;
  text-shadow: 0 2px 22px rgba(255, 248, 236, 0.6);
}
.chapterSub {
  font-style: italic;
  font-size: clamp(23px, 3.4vmin, 50px);
  color: #a4322f;
  margin-top: 1vmin;
}

.phrase {
  font-size: clamp(34px, 6vmin, 92px);
  font-weight: 400;
  font-style: italic;
  color: #7a1620;
  max-width: 68vw;
  line-height: 1.24;
}
.phraseNote {
  font-style: italic;
  font-size: clamp(21px, 3.1vmin, 44px);
  color: #9a6a4a;
  margin-top: 2.6vmin;
}
.quoteMark {
  font-size: clamp(56px, 9vmin, 140px);
  line-height: 0.4;
  color: #c79a55;
  opacity: 0.55;
  font-family: Georgia, serif;
}

.closingLine {
  font-size: clamp(28px, 4.6vmin, 66px);
  font-style: italic;
  color: #7a1620;
  margin-top: 3vmin;
}
.grace {
  font-style: italic;
  font-size: clamp(21px, 3vmin, 42px);
  color: #a4322f;
  margin-top: 2.4vmin;
}
.flag { font-size: clamp(15px, 1.9vmin, 24px); letter-spacing: 0.4em; margin-top: 1.6vmin; opacity: 0.85; }

/* gentle rise-in for text blocks */
.rise { animation: rise 1.8s ease both; }
.rise2 { animation: rise 1.8s ease 0.5s both; }
.rise3 { animation: rise 1.8s ease 1s both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Petals drifting upward — deep red, sparse, elegant ────────────────── */
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.petal {
  position: absolute;
  bottom: -8vh;
  width: 18px;
  height: 22px;
  opacity: 0.5;
  animation-name: floatUp;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.petal svg { width: 100%; height: 100%; display: block; }

/* ── Snow drifting down — soft, white, slow ────────────────────────────── */
.snow { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.flake {
  position: absolute;
  top: -6vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 240, 0.6) 58%, rgba(255, 250, 240, 0) 80%);
  filter: blur(0.3px);
  animation-name: snowFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes snowFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--flake-op, 0.7); }
  90%  { opacity: var(--flake-op, 0.7); }
  100% { transform: translateY(116vh) translateX(4vw) rotate(140deg); opacity: 0; }
}

/* ── Light particles (anime atmosphere) ───────────────────────────────── */
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 205, 0.95) 0%, rgba(255, 224, 160, 0.35) 50%, rgba(255, 224, 160, 0) 75%);
  filter: blur(0.4px);
  animation: drift linear infinite, twinkle ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-118vh) translateX(4vw); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.85; }
}

/* Japanese farewell */
.jp {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Shippori Mincho", serif;
  font-size: clamp(30px, 5vmin, 76px);
  color: #7a1620;
  letter-spacing: 0.18em;
  margin-top: 2.6vmin;
}
.jpRomaji {
  font-style: italic;
  font-size: clamp(19px, 2.7vmin, 38px);
  color: #9a6a4a;
  letter-spacing: 0.2em;
  margin-top: 0.8vmin;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.45; }
  88%  { opacity: 0.4; }
  100% { transform: translateY(-112vh) translateX(7vw) rotate(220deg); opacity: 0; }
}

/* ── Vignette + progress ──────────────────────────────────────────────── */
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 22vmin rgba(110, 40, 22, 0.18);
}
.progress {
  position: absolute; left: 0; bottom: 0; height: 3px; z-index: 5;
  background: linear-gradient(90deg, #8a1620, #c79a55);
  opacity: 0.5;
  transition: width 0.25s linear;
}
.paused {
  position: absolute; top: 4vmin; right: 4vmin; z-index: 6;
  letter-spacing: 0.3em; text-transform: uppercase;
  font-size: 12px; color: #9a6a4a; opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .kenburns, .sunbeam, .petal, .flake, .rise, .rise2, .rise3 { animation: none; }
}