/* ============ Living scene pieces for the inner pages ============
   A window into her writing room (About), the sealed letter (Contact), the
   notebook and quill (Events), and the medals (Reviews). Art made in ChatGPT;
   everything moves a little, all the time. */

/* ---------- the writing room ---------- */
.room-banner { position: relative; margin: 2rem 0 0; }
.rb-stage { position: relative; height: clamp(360px, 52vw, 82vh); overflow: hidden; }
.rb-frame { position: absolute; top: 50%; left: 50%; width: max(100%, calc(clamp(360px, 52vw, 82vh) * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%) scale(var(--zoom, 1.02)); transition: transform 0.2s linear; }
.rb-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--ink-fade, rgba(17,15,21,1)) 0%, transparent 16%, transparent 78%, var(--ink-fade, rgba(17,15,21,1)) 100%); }
.glow { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: var(--s, 5%); aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,210,130,0.85), rgba(255,170,80,0.25) 45%, transparent); animation: glowFlicker var(--d, 3s) ease-in-out infinite; }
.glow.moon { background: radial-gradient(closest-side, rgba(200,230,255,0.5), rgba(160,200,255,0.12) 60%, transparent); animation: glowMoon 7s ease-in-out infinite; }
@keyframes glowFlicker { 0%, 100% { opacity: 0.7; scale: 1; } 30% { opacity: 1; scale: 1.08; } 33% { opacity: 0.5; } 36% { opacity: 0.95; } 70% { opacity: 0.8; scale: 0.96; } }
@keyframes glowMoon { 50% { scale: 1.15; opacity: 0.7; } }
.rb-caption { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 2; text-align: center; width: min(40rem, 90%); }
.rb-caption h2 { font-size: clamp(1.8rem, 4vw, 3rem); text-shadow: 0 4px 30px rgba(0,0,0,0.9); }
.rb-caption p { color: var(--cream-dim); text-shadow: 0 2px 16px rgba(0,0,0,0.95); margin-top: 0.6rem; }

@media (max-width: 700px) {
  .room-banner { display: flex; flex-direction: column-reverse; }
  .rb-caption { position: static; transform: none; width: auto; padding: 0 1.5rem 1rem; }
  .rb-stage .obj-medals { width: 96px; } .rb-stage .obj-letter { width: 104px; }
}

/* ---------- objects ---------- */
.obj { position: absolute; z-index: 3; display: block; text-decoration: none; transition: transform 0.45s var(--ease-out), filter 0.4s; }
.obj img { width: 100%; display: block; }
.obj:hover, .obj:focus-visible { transform: translateY(-8px) scale(1.04); outline: none; }
.obj-medals { width: clamp(140px, 15vw, 230px); filter: drop-shadow(0 16px 22px rgba(0,0,0,0.7)); }
.obj-medals img { transform-origin: 50% 0; animation: objSwing 4.5s ease-in-out infinite; }
@keyframes objSwing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.obj-letter { width: clamp(150px, 16vw, 240px); filter: drop-shadow(0 18px 24px rgba(0,0,0,0.7)); }
.obj-letter img { animation: objFloat 5s ease-in-out infinite; }
@keyframes objFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
.obj-letter:hover { filter: drop-shadow(0 18px 24px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(216,80,90,0.55)); }
.obj-quill { width: clamp(80px, 8vw, 120px); pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,0.6)); }
.obj-quill img { transform-origin: 30% 90%; animation: objScribble 0.5s ease-in-out infinite alternate; }
@keyframes objScribble { from { transform: rotate(-4deg) translate(-4%, 2%); } to { transform: rotate(3deg) translate(4%, -2%); } }

/* the letter on the Contact page arrives, then floats */
.letter-hero { position: relative; display: flex; justify-content: center; margin: 2.5rem 0 1rem; }
.letter-hero .obj { position: relative; animation: letterArrive 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both 0.3s; }
@keyframes letterArrive { from { opacity: 0; transform: translate(-40vw, -20vh) rotate(-40deg) scale(0.6); } to { opacity: 1; transform: none; } }

/* the notebook on the Events page writes itself */
.notebook-hero { position: relative; display: flex; justify-content: center; margin: 2.5rem 0 1rem; }
.nb {
  position: relative; width: min(22rem, 86vw); padding: 1.4rem 1.4rem 1.8rem 2.2rem; text-align: left; rotate: 2deg;
  background: #f3ecdc repeating-linear-gradient(180deg, transparent 0 31px, rgba(90,110,160,0.35) 31px 32px);
  border-left: 3px solid rgba(184,50,58,0.55); box-shadow: 0 26px 50px rgba(0,0,0,0.6); color: #2a2116;
}
.nb strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 32px; }
.nb span { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 32px; color: #3b4a7a; clip-path: inset(0 100% 0 0); animation: nbWrite 1.3s steps(20) forwards; }
.nb span:nth-of-type(1) { animation-delay: 0.6s; } .nb span:nth-of-type(2) { animation-delay: 1.9s; } .nb span:nth-of-type(3) { animation-delay: 3.2s; } .nb span:nth-of-type(4) { animation-delay: 4.5s; }
@keyframes nbWrite { to { clip-path: inset(0 0 0 0); } }
.nb .obj-quill { right: -14%; top: -22%; }
@media (max-width: 700px) { .nb .obj-quill { right: -2%; top: -18%; width: 70px; } }

/* the medals on the Reviews page; starred reviews catch the light */
.medals-hero { display: flex; justify-content: center; margin: 2rem 0 0; }
.medals-hero .obj { position: relative; width: clamp(200px, 26vw, 360px); }
.glint-star { position: relative; display: inline-block; }
.glint-star::after { content: ""; position: absolute; inset: -20% -40%; background: linear-gradient(110deg, transparent 40%, rgba(255,240,200,0.8) 50%, transparent 60%); mix-blend-mode: screen; animation: starPass 3.5s ease-in-out infinite; }
@keyframes starPass { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- the cast board on book pages ---------- */
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem 1.6rem; margin-top: 2.5rem; }
.pol {
  position: relative; width: clamp(150px, 15vw, 210px); padding: 10px 10px 0; background: #fbf8f1; color: #2a2116;
  box-shadow: 0 22px 44px rgba(0,0,0,0.5); rotate: var(--r, 0deg); transform-origin: 50% 0;
  animation: polSway var(--sway, 6s) ease-in-out infinite; transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.pol:nth-child(2n) { --sway: 7.3s; animation-delay: -2s; }
.pol:nth-child(3n) { --sway: 5.4s; animation-delay: -3.5s; }
.pol img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; display: block; }
.pol.dark img { background: radial-gradient(closest-side, #3a1a10, #0c0807); object-fit: contain; padding: 8%; }
.pol figcaption { padding: 0.7rem 0.3rem 0.9rem; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.25; }
.pol figcaption small { display: block; margin-top: 0.3rem; font-family: var(--font-body); font-style: normal; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(42,33,22,0.65); }
.pol::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8d8d, var(--accent) 60%, #5a1414); box-shadow: 0 3px 5px rgba(0,0,0,0.45); z-index: 2; }
.pol:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 3px rgba(255,255,255,0.7); animation-play-state: paused; }
@keyframes polSway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.cast-cta { text-align: center; margin-top: 2.6rem; }

@media (prefers-reduced-motion: reduce) {
  .glow, .obj img, .letter-hero .obj, .glint-star::after, .pol { animation: none !important; }
  .nb span { animation: none; clip-path: none; }
}

/* the writing room painting is alive (js/living.js); its CSS glows are only a fallback */
.living { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.living-on .glow { display: none; }

/* First Awakened: the lantern street, alive (js/living.js) */
.lantern-stage { margin-top: 2.5rem; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.lantern-stage::after { display: none; }