/* Near and far petals cross the artwork independently of its camera motion. */
.keyvisual-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4;perspective:700px}
.keyvisual-petals>i{position:absolute;left:var(--petal-x);top:-50px;width:var(--petal-size);height:calc(var(--petal-size)*.65);filter:blur(var(--petal-blur));animation:petalWind var(--petal-time) var(--petal-delay) linear infinite paused;opacity:0}
.keyvisual-petals b{display:block;width:100%;height:100%;border-radius:85% 15% 72% 28%;background:linear-gradient(140deg,#fff2e7,#f0b9c4 47%,#d87b9c);box-shadow:inset 1px 1px 2px #ffe8e4a8,0 0 5px #e7bdc01c;animation:petalTumble 3.4s var(--petal-delay) ease-in-out infinite paused}
.keyvisual-stage.fx-running .keyvisual-petals i,.keyvisual-stage.fx-running .keyvisual-petals b{animation-play-state:running}
@keyframes petalWind{0%{transform:translate3d(90px,-15px,0) rotate(var(--petal-turn));opacity:0}8%,86%{opacity:.94}100%{transform:translate3d(var(--petal-drift),calc(var(--scene-h,650px) + 120px),60px) rotate(calc(var(--petal-turn) + 165deg));opacity:0}}
@keyframes petalTumble{0%,100%{transform:rotateX(20deg) rotateY(-30deg) rotateZ(-18deg)}50%{transform:rotateX(135deg) rotateY(55deg) rotateZ(38deg)}}
/* Chronicle: a moving time instrument, with the reading column held still. */
.chronicle-cover{min-height:490px;align-items:center;padding-bottom:75px}
.chronicle-cover::before{inset:-10%;filter:brightness(.72) saturate(.85);animation-name:chroniclePanorama;animation-duration:12s}
.chronicle-cover::after{background:linear-gradient(90deg,#08172cf5,#0b203890 53%,#10263c35)}
.chronicle-cover-art{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;width:min(100%,430px);aspect-ratio:1;padding:0;border:0;overflow:visible;background:none;box-shadow:none;perspective:900px}
.chronicle-cover-art::before,.chronicle-cover-art::after{display:none}
.chronicle-cover-art>span,.chronicle-cover-art>strong,.chronicle-cover-art>small{position:relative;z-index:2}
.chronicle-cover-art>span{font-size:12px;letter-spacing:.4em;color:#ded0ab}
.chronicle-cover-art>strong{font-size:clamp(84px,9vw,140px);line-height:1.3;text-shadow:0 0 30px #d4d7bb32}
.chronicle-cover-art>small{color:#bccfd4}
.chronicle-dial{position:absolute;inset:0;pointer-events:none;transform:rotateX(14deg) rotateY(-13deg)}
.time-orbit{position:absolute;inset:0;border-radius:50%;border:1px solid #bed5d25c;animation:chronicleOrbit 28s linear infinite paused;box-shadow:0 0 25px #89deed0c,inset 0 0 25px #89deed0c}
.time-orbit-a{background:repeating-conic-gradient(from 0deg,#bfdeec9e 0deg .7deg,transparent .7deg 6deg);mask-image:radial-gradient(transparent 64.3%,#000 64.5%,#000 69%,transparent 69.2%)}
.time-orbit-b{inset:8%;border:2px solid transparent;border-top-color:#e5c78d;border-bottom-color:#97ccdc;animation-duration:13s;animation-direction:reverse;box-shadow:inset 0 0 20px #97ccdc1a,0 0 24px #b9d8dc12}
.time-orbit-c{inset:-5%;border:1px dashed #d8c49350;animation-duration:42s}
.time-sweep{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 10deg,transparent 220deg,#a4e5f022 340deg,#c9f4ff66 360deg);mask-image:radial-gradient(transparent 45%,#000 75%);animation:chronicleOrbit 9s linear infinite paused}
.time-coordinate{position:absolute;color:#bfd3d6;font:11px Georgia,serif;letter-spacing:.12em;padding:6px 10px;background:#0b2132e8;border:1px solid #bdd9df35;box-shadow:0 0 20px #76bfd926}
.time-coordinate-a{left:1%;top:21%}.time-coordinate-b{right:-2%;top:59%}.time-coordinate-c{left:20%;bottom:0}
.chronicle-year-ribbon{position:absolute;bottom:0;left:0;right:0;height:37px;overflow:hidden;border-top:1px solid #c5d9de22;background:#091b2cab;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.chronicle-year-ribbon>div{display:flex;width:max-content;animation:chronicleYears 25s linear infinite paused;align-items:center;height:100%}
.chronicle-year-ribbon span{width:175px;display:flex;justify-content:space-around;align-items:center;color:#a6c7d0;font:10px Georgia,serif;letter-spacing:.16em}.chronicle-year-ribbon i{font-size:5px;color:#dcc38e;font-style:normal}
.is-ambient-running .time-orbit,.is-ambient-running .time-sweep,.is-ambient-running .chronicle-year-ribbon>div{animation-play-state:running}
@keyframes chroniclePanorama{from{transform:scale(1.04) translate(-2.8%,1%)}to{transform:scale(1.15) translate(2.8%,-1.4%)}}
@keyframes chronicleOrbit{to{transform:rotate(360deg)}}
@keyframes chronicleYears{to{transform:translateX(-50%)}}
.motion-paused .keyvisual-petals *,.motion-paused .chronicle-dial *,.motion-paused .chronicle-year-ribbon>div{animation-play-state:paused!important}
@media(max-width:1100px){.chronicle-cover{gap:4%;padding-bottom:65px}.chronicle-cover-art{width:min(100%,340px)}}
@media(max-width:700px){.lore-explorer[data-view=overview] .lore-stage{height:770px}.chronicle-cover{padding-bottom:62px}.chronicle-cover-art{display:flex;width:245px;margin:35px auto 7px}.chronicle-cover-art>strong{font-size:90px}.chronicle-cover-art>span{font-size:10px}.chronicle-cover-art>small{font-size:10px}.time-coordinate{font-size:9px}.chronicle-year-ribbon span{width:115px}.keyvisual-petals>i:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){html:not(.site-motion-on) .keyvisual-petals *,html:not(.site-motion-on) .chronicle-dial *,html:not(.site-motion-on) .chronicle-year-ribbon>div{animation:none!important}}

.city-webgl{display:none;position:absolute;left:-2%;top:70px;width:72%;height:calc(100% - 95px);pointer-events:none}
.has-city-3d .city-webgl{display:block}.has-city-3d .lore-map-camera,.has-city-3d .lore-map-shadow,.has-city-3d .lore-map-reticle{display:none}
.city-marker-layer{position:absolute;inset:0;pointer-events:none;z-index:6}.city-marker-layer .lore-beacon{pointer-events:auto;transform:translate(-50%,-100%);transition:none}.city-marker-layer .lore-beacon:after{display:none}.city-marker-layer .lore-beacon>span{font-size:11px;box-shadow:0 10px 24px #0008}
@media(max-width:700px){.city-webgl{top:325px;left:-10%;width:120%;height:400px}.city-marker-layer .lore-beacon>span{font-size:8px;padding:7px 5px}.city-marker-layer .lore-beacon{gap:4px}.city-marker-layer .lore-beacon>i{width:5px;height:5px}}