/* Occasion scenes share the letter typography and have their own visual story. */
:root { --stage-duration: 1400ms; --stage-ease: cubic-bezier(.2,.65,.25,1); }
.occasion-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 3; margin-block: .5rem; }
.occasion-stage img { display: block; max-width: 100%; height: auto; }
.ambient-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.world[data-theme='flowers'] { --gift-y: 0px; --gift-scale: .96; }
.flower-stage { aspect-ratio: 1 / 1; }
.gift-art { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; padding: .8rem 12% 3rem; transform: translateY(var(--gift-y, 0px)) scale(var(--gift-scale, 1)); transform-origin: 50% 70%; }
.occasion-ornament { position: absolute; top: 8%; right: 5%; color: #a98b62; font: 3rem var(--serif); }
.gift-reveal { position: absolute; bottom: 0; left: 50%; z-index: 5; width: max-content; max-width: 95%; transform: translateX(-50%); }
.gift-reveal > summary { display: flex; justify-content: center; align-items: center; gap: 1rem; min-height: 44px; padding: .5rem 1rem; border-block: 1px solid var(--line); background: var(--paper-light); color: var(--accent); cursor: pointer; list-style: none; font: 600 .65rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.gift-reveal > summary::-webkit-details-marker { display: none; }
.gift-open-label { display: none; }
.gift-reveal[open] .gift-open-label { display: inline; }
.gift-reveal[open] .gift-closed-label { display: none; }
.gift-message { position: absolute; bottom: calc(100% + 1rem); left: 50%; width: min(24rem, 75vw); padding: 2rem 1.6rem; transform: translateX(-50%); text-align: center; color: var(--ink); border: 3px double #bca381; background: #fff8e9; box-shadow: 0 .8rem 2rem #39292c24; animation: gift-note-in 650ms var(--stage-ease) both; }
.gift-message::before { content: '♡'; color: var(--accent); font: 2rem var(--serif); }
.gift-message p { margin: .65rem 0 1rem; font: 2rem/1.1 var(--serif); }
.gift-message p em { color: var(--accent); }
.gift-message > span { display: block; font-size: .8rem; line-height: 1.8; }
.gift-message b { display: block; margin-top: 1.2rem; font: italic 1.1rem var(--serif); color: var(--accent); }
.flower-stage:has(.gift-reveal[open]) .gift-art { filter: saturate(.75) brightness(.97); }
.world[data-theme='flowers'][data-scene='busy'] { --gift-y: -5px; --gift-scale: 1; }
.world[data-theme='flowers'][data-scene='storm'] { --gift-y: 2px; --gift-scale: .98; }
.world[data-theme='flowers'][data-scene='together'] { --gift-y: -7px; --gift-scale: 1.02; }
.world[data-theme='flowers'][data-scene='dawn'] { --gift-y: -2px; --gift-scale: 1; }
.voyage-horizon { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; }
.voyage-vessel { position: absolute; z-index: 2; width: 64%; top: 40%; left: 14%; transform: translateX(var(--vessel-x, -24px)); }
.voyage-vessel > img { width: 100%; animation: shared-row 3.2s ease-in-out infinite; transform-origin: 55% 70%; }
.voyage-film { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.voyage-stage[data-film='playing'] .voyage-film { opacity: 1; }
.voyage-stage[data-film='playing'] .voyage-horizon, .voyage-stage[data-film='playing'] .voyage-vessel { visibility: hidden; }
.voyage-destination { position: absolute; z-index: 4; top: .3rem; left: 1rem; color: var(--accent-dark); line-height: 1.2; }
.voyage-destination span { display: block; font: .55rem var(--sans); letter-spacing: .25em; text-transform: uppercase; }
.voyage-destination em { display: block; margin-top: .3rem; font: 1.4rem var(--serif); }
.world[data-theme='voyage'][data-scene='busy'] { --vessel-x: -12px; }
.world[data-theme='voyage'][data-scene='storm'] { --vessel-x: -4px; }
.world[data-theme='voyage'][data-scene='together'] { --vessel-x: 12px; }
.world[data-theme='voyage'][data-scene='dawn'] { --vessel-x: 24px; }
.world[data-theme='voyage'][data-scene='storm'] .voyage-horizon { filter: saturate(.7) brightness(.9); }
.world[data-theme='voyage'][data-scene='dawn'] .voyage-horizon { filter: saturate(1.1); }
.world[data-theme='voyage'] .scene-small-note { font-size: .9rem; }
.world[data-theme] .scene-caption { margin-top: .5rem; }
@keyframes shared-row { 0%,100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-5px) rotate(.7deg); } }
@keyframes gift-note-in { from { opacity: 0; transform: translate(-50%, 14px) rotate(-2deg); } to { opacity: 1; transform: translate(-50%,0) rotate(0); } }
@media (min-width: 701px) { .world[data-theme='flowers'] .occasion-stage { max-height: 66svh; } }
@media (max-width: 700px) {
  .world[data-theme] { height: 43svh; min-height: 17rem; max-height: 25rem; }
  .world[data-theme] .scene-meta { flex-shrink: 0; }
  .world[data-theme] .scene-number { max-width: 65%; font-size: .5rem; letter-spacing: .08em; }
  .occasion-stage { flex: 1; min-height: 0; width: 100%; aspect-ratio: auto; margin-block: 0; }
  .flower-stage { aspect-ratio: auto; }
  .gift-art { padding: 0 19% 2.5rem; }
  .gift-reveal > summary { min-height: 44px; font-size: .55rem; padding: .35rem .7rem; }
  .gift-message { bottom: calc(100% + .35rem); width: min(21rem, 82vw); padding: 1rem; }
  .gift-message p { font-size: 1.5rem; margin: .35rem 0 .6rem; }
  .gift-message > span { font-size: .7rem; }
  .gift-message b { margin-top: .65rem; font-size: .95rem; }
  .voyage-stage { max-width: 24rem; margin-inline: auto; }
  .voyage-vessel { width: 59%; left: 17%; top: 40%; }
  .voyage-destination { left: .6rem; top: .1rem; }
  .voyage-destination span { font-size: .4rem; }
  .voyage-destination em { font-size: .9rem; }
  .world[data-theme] .chapter-navigation { margin-top: .25rem; }
  .chapter { scroll-margin-top: 43svh; }
}
@media (max-height: 620px) and (max-width: 700px) { .world[data-theme] { position: relative; height: 24rem; max-height: none; } }
@media print { .world[data-theme] { display: none; } }