/* A tiny familiar ornament, and a jar whose lights remember a name. */
.archive-side-chime { position:absolute; z-index:3; top:0; right:clamp(22px,7vw,120px); width:112px; height:292px; pointer-events:none; }
.chime-instrument { position:relative; width:100%; height:100%; user-select:none; -webkit-user-select:none; }
.chime-hanger { position:absolute; left:calc(50% - .5px); top:0; width:1px; height:19%; background:linear-gradient(90deg,#705e40,#c3ae84); }
.chime-crown { position:absolute; z-index:4; top:17%; left:8%; width:84%; height:auto; filter:drop-shadow(2px 4px 3px #4b382630); pointer-events:none; }
.chime-tube-wrap { --chime-angle:0deg; position:absolute; z-index:2; top:22%; width:10%; height:53%; transform-origin:50% 0; transform:rotate(var(--chime-angle)); }
.chime-tube-wrap.tube-one { left:15.4%; }
.chime-tube-wrap.tube-two { left:45%; height:58%; }
.chime-tube-wrap.tube-three { left:74.6%; height:49%; }
.chime-cord,.catcher-cord { position:absolute; left:calc(50% - .5px); top:0; width:1px; background:linear-gradient(90deg,#726244,#c5b38a); }
.chime-cord { height:21%; }
.chime-tube { position:absolute; top:17%; width:100%; height:83%; object-fit:fill; filter:drop-shadow(2px 3px 2px #52462e36); }
.chime-catcher { --chime-angle:0deg; position:absolute; z-index:3; top:22%; left:31%; width:38%; height:75%; margin:0; padding:0; border:0; background:transparent; transform-origin:50% 0; transform:rotate(var(--chime-angle)); cursor:pointer; pointer-events:auto; touch-action:pan-y; }
.catcher-cord { height:89%; }
.chime-striker { position:absolute; top:54%; left:29%; width:42%; height:3%; border-radius:50%; background:linear-gradient(#8c6340,#c29a68 37%,#735032 70%,#513b2a); box-shadow:1px 2px 2px #59432736; }
.chime-heart { position:absolute; left:10%; bottom:0; width:80%; height:auto; filter:drop-shadow(2px 3px 2px #4c4c4236); }
.chime-catcher:focus-visible { outline:0; }
.chime-catcher:focus-visible .chime-heart { outline:2px solid #4b6678; outline-offset:5px; border-radius:40%; }

.archive-page .fireflies-section { position:relative; isolation:isolate; overflow:clip; min-height:910px; background:#101e30; color:#f5edda; }
.night-backdrop,.night-shade { position:absolute; inset:0; pointer-events:none; }
.night-backdrop { z-index:-3; }
.night-backdrop img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:center bottom; }
.night-shade { z-index:-2; background:linear-gradient(#101e30,#101e3070 18%,transparent 44%,#101e3030 75%,#101e30); }
.firefly-canvas { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; }
.firefly-copy { position:relative; z-index:4; width:min(450px,36%); padding-top:104px; margin-left:10%; text-shadow:0 2px 22px #071020a6; }
.firefly-copy .scene-kicker { color:#c6b68c; font-size:9px; }
.firefly-copy h2 { font-size:clamp(48px,4.8vw,70px); line-height:1.08; margin-top:23px; }
.firefly-copy h2 em { color:#ead7aa; }
.firefly-intro { font:29px/1.4 var(--hand); color:#d5cdbb; margin-top:25px; max-width:355px; }
.firefly-heart-space { position:absolute; z-index:3; left:51%; top:230px; width:43%; max-width:620px; height:420px; pointer-events:none; }
.firefly-heart-name { position:absolute; inset:32% 15% 30%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; opacity:0; transform:translateY(5px); transition:opacity 1.5s ease,transform 1.5s ease; text-align:center; }
.firefly-heart-name > [data-copy] { display:block; max-width:100%; font:clamp(38px,4.1vw,64px)/1.12 var(--hand); color:#fff0b8; text-shadow:0 0 17px #efd99670,0 2px 18px #0d182f; overflow-wrap:anywhere; }
.firefly-heart-name > small { font:10px/1.6 var(--sans); color:#e7d9b7; letter-spacing:.02em; text-wrap:balance; max-width:190px; }
.fireflies-section.name-revealed .firefly-heart-name { opacity:1; transform:translateY(0); }
.fireflies-section.has-wide-name .firefly-heart-name > small { display:none; }
.firefly-full-name { position:relative; z-index:4; max-width:680px; padding:0 28px 70px; margin:650px auto 0; color:#eedcaf; text-align:center; font:23px/1.45 var(--hand); overflow-wrap:anywhere; }
.fireflies-section.has-long-name .firefly-heart-name > [data-copy] { display:none; }
.fireflies-section.has-long-name .firefly-heart-name::before { content:'Tum'; font:55px/1.1 var(--hand); color:#fff0b8; }
.fireflies-section.has-long-name .jar-stage { top:445px; bottom:auto; }
.fireflies-section.has-long-name .firefly-message { top:805px; bottom:auto; }
.jar-stage { position:absolute; z-index:3; left:19%; bottom:128px; width:208px; aspect-ratio:675/1100; isolation:isolate; user-select:none; -webkit-user-select:none; }
.jar-stage::after { content:''; position:absolute; z-index:-1; left:9%; right:3%; bottom:-2%; height:9%; border-radius:50%; background:#020810ad; filter:blur(9px); pointer-events:none; }
.jar-glass { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.jar-glow { position:absolute; z-index:1; left:14%; right:14%; top:29%; bottom:11%; border-radius:45%; opacity:.72; background:radial-gradient(ellipse,#ffdf9152,#e8b95724 45%,transparent 72%); filter:blur(12px); transition:opacity 2s ease; pointer-events:none; }
.fireflies-section.is-open .jar-glow { opacity:.15; }
.jar-release { position:absolute; z-index:5; top:4%; left:18%; width:64%; height:20%; min-height:48px; padding:0; border:0; border-radius:50%; background:transparent; cursor:grab; touch-action:pan-y; transform:translateY(-100%); transform-origin:50% 100%; }
.jar-release:active { cursor:grabbing; }
.jar-release:focus-visible { outline-color:#ead7aa; outline-offset:9px; }
.jar-cork { position:absolute; left:0; bottom:0; width:100%; height:auto; filter:drop-shadow(2px 5px 3px #0005); pointer-events:none; }
.fireflies-section.is-open .jar-release { animation:archiveLiftCork 6s linear both; animation-play-state:paused; cursor:default; }
.fireflies-section.is-open.sensory-moving .jar-release { animation-play-state:running; }
@keyframes archiveLiftCork {
  0% { transform:translate(0,-100%) rotate(0deg) scale(1); animation-timing-function:cubic-bezier(.4,0,.4,1); }
  21% { transform:translate(7%,-183%) rotate(-6deg) scale(1); animation-timing-function:cubic-bezier(.38,0,.58,1); }
  36% { transform:translate(45%,-188%) rotate(8deg) scale(.98); animation-timing-function:cubic-bezier(.4,0,.32,1); }
  95% { transform:translate(86%,380%) rotate(-12deg) scale(.74); animation-timing-function:ease-out; }
  98% { transform:translate(86%,380%) rotate(-10deg) scale(.74); animation-timing-function:ease-in-out; }
  100% { transform:translate(86%,380%) rotate(-11deg) scale(.74); }
}
.jar-hint { position:absolute; top:calc(100% + 18px); left:-25%; width:150%; text-align:center; font:11px/1.6 var(--sans); color:#d3c7a8; text-shadow:0 2px 10px #071020; }
.firefly-message { position:absolute; z-index:4; left:52%; bottom:190px; width:40%; max-width:490px; text-align:center; font:30px/1.3 var(--hand); color:#ecdbac; text-shadow:0 2px 20px #06101ab3; }

@media (max-width:1100px) and (min-width:701px) {
  .archive-side-chime { right:22px; width:95px; height:250px; }
  .quiet-section:has(.archive-side-chime) .quiet-inner h2 { max-width:calc(100% - 155px); }
  .firefly-copy { margin-left:8%; width:40%; }
  .firefly-copy h2 { font-size:53px; }
  .firefly-heart-space { left:48%; width:49%; height:365px; top:300px; }
  .firefly-heart-name > [data-copy] { font-size:43px; }
  .jar-stage { left:17%; width:185px; }
}
@media (max-width:700px) {
  .archive-side-chime { right:12px; width:72px; height:212px; }
  .archive-side-chime .chime-catcher { left:calc(50% - 22px); width:44px; }
  .archive-side-chime .chime-heart { left:25%; width:50%; }
  .archive-side-chime .chime-striker { left:38%; width:24%; }
  .quiet-section:has(.archive-side-chime) .quiet-inner > .scene-kicker,
  .quiet-section:has(.archive-side-chime) .quiet-inner > h2 { max-width:calc(100% - 61px); margin-left:0; margin-right:61px; }
  .archive-page .fireflies-section { min-height:1150px; }
  .night-backdrop { bottom:175px; }
  .night-backdrop img { object-position:47% bottom; }
  .night-shade { background:linear-gradient(#101e30,#101e3070 20%,#101e3020 50%,transparent 66%,#101e30); }
  .firefly-copy { width:calc(100% - 52px); max-width:430px; padding-top:76px; margin:0 auto; text-align:center; }
  .firefly-copy .scene-kicker { font-size:8px; letter-spacing:.12em; }
  .firefly-copy h2 { font-size:46px; margin-top:22px; }
  .firefly-intro { font-size:25px; line-height:1.35; max-width:330px; margin:20px auto 0; }
  .firefly-heart-space { left:6%; top:339px; width:88%; max-width:none; height:274px; }
  .firefly-heart-name { inset:30% 15% 30%; gap:9px; }
  .firefly-heart-name > [data-copy] { font-size:43px; }
  .firefly-heart-name > small { font-size:9px; max-width:148px; }
  .jar-stage { width:164px; left:calc(50% - 82px); bottom:229px; }
  .jar-hint { font-size:10px; top:calc(100% + 15px); }
  .firefly-message { left:24px; bottom:132px; width:calc(100% - 48px); max-width:none; font-size:25px; line-height:1.3; }
  .fireflies-section.has-long-name .jar-stage { top:654px; }
  .fireflies-section.has-long-name .firefly-message { top:995px; }
  .firefly-full-name { margin-top:790px; font-size:21px; }
}
@media(max-width:360px) {
  .archive-side-chime { width:64px; height:192px; right:9px; }
  .quiet-section:has(.archive-side-chime) .quiet-inner > .scene-kicker,
  .quiet-section:has(.archive-side-chime) .quiet-inner > h2 { max-width:calc(100% - 52px); margin-right:52px; }
  .firefly-copy { width:calc(100% - 40px); }
  .firefly-copy h2 { font-size:41px; }
  .firefly-intro { font-size:23px; }
  .firefly-heart-space { height:248px; top:339px; }
  .firefly-heart-name > [data-copy] { font-size:37px; }
  .firefly-heart-name > small { font-size:8px; max-width:124px; }
}
.card-preview .chime-catcher,.card-preview .chime-tube-wrap { transform:none; }
@media(prefers-reduced-motion:reduce) {
  .fireflies-section.is-open .jar-release { animation:none; transform:translate(86%,380%) scale(.74) rotate(-11deg); }
  .chime-catcher,.chime-tube-wrap { transform:none!important; }
  .jar-glow,.firefly-heart-name { transition:none; }
}

/* Additional space depends on authored copy, never scroll position. */
.archive-page .fireflies-section { min-height:calc(910px + var(--story-extra, 0px) + var(--story-lower-extra, 0px)); }
@media(max-width:700px) {
  .archive-page .fireflies-section { min-height:calc(1150px + var(--story-extra, 0px) + var(--story-lower-extra, 0px)); }
  .firefly-heart-space { top:calc(339px + var(--story-extra, 0px)); }
  .jar-stage { bottom:calc(229px + var(--story-lower-extra, 0px)); }
}
.final-choices .story-label { font:inherit; color:inherit; }