/* Page 4 - animated Singapore skyline and floating symbols.
   Loaded in number order by templates/site.php (order matters: later files win). */
/* ===== About: living skyline ===== */
.city-art{isolation:isolate}
.city-glow{position:absolute;left:8%;right:8%;top:14%;bottom:10%;border-radius:50%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,189,120,.30),rgba(226,189,120,.08) 55%,transparent 72%);animation:cityGlow 6s ease-in-out infinite}
.city-float{position:relative;animation:cityFloat 7s ease-in-out infinite;will-change:transform}
.city-float img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.45))}
/* gold light sweeping across the buildings only (masked to the picture's shape) */
.city-sheen{position:absolute;inset:0;pointer-events:none;--city:url(../img/city.webp);
  -webkit-mask:var(--city) center/100% 100% no-repeat;mask:var(--city) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,236,190,.55) 48%,rgba(255,255,255,.15) 52%,transparent 64%) 0 0/250% 100% no-repeat;
  mix-blend-mode:screen;animation:citySheen 6.5s cubic-bezier(.4,0,.2,1) infinite}
/* currency symbols rising from the bay */
.city-syms{position:absolute;inset:0;pointer-events:none;overflow:visible}
.city-syms span{position:absolute;left:var(--x);top:var(--y);font:800 calc(24px * var(--s))/1 var(--figure);letter-spacing:-.01em;
  background:linear-gradient(160deg,#e9fffb 0%,#9ee9dc 22%,#3fb7a8 48%,#127c74 72%,#0b5753 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.8px rgba(240,205,130,.95);
  filter:drop-shadow(0 0 6px rgba(80,220,200,.45)) drop-shadow(0 4px 6px rgba(0,0,0,.45));
  opacity:.92;animation:symFloat var(--t) ease-in-out var(--d) infinite;will-change:transform}
/* sparkles */
.city-sparks i{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0,#ffe7a8 35%,transparent 70%);box-shadow:0 0 10px 2px rgba(255,220,140,.55);opacity:0;animation:spark 3.2s ease-in-out var(--d) infinite}
@keyframes cityFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}50%{transform:translate3d(0,-12px,0) rotate(.4deg)}}
@keyframes cityGlow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes citySheen{0%{background-position:120% 0}55%,100%{background-position:-120% 0}}
.city-syms span.alt{font-family:"Segoe UI","Noto Sans","DejaVu Sans",Arial,sans-serif;font-weight:700}
@keyframes symFloat{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  33%{transform:translate3d(5px,-12px,0) rotate(3deg)}
  66%{transform:translate3d(-4px,-5px,0) rotate(-1deg)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
/* only animate while the About page is on screen */
.city-art:not(.play) .city-float,.city-art:not(.play) .city-glow,.city-art:not(.play) .city-sheen,.city-art:not(.play) .city-syms span,.city-art:not(.play) .city-sparks i{animation-play-state:paused}
@media (max-width:640px){.city-syms span{font-size:calc(18px * var(--s))}}
@media (prefers-reduced-motion:reduce){.city-float,.city-glow,.city-sheen,.city-syms span,.city-sparks i{animation:none!important}}
.chapter:not(.c-home) [data-r]{opacity:0;transform:translate3d(-70px,0,0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms);will-change:transform,opacity}
.chapter:not(.c-home) [data-r].from-r{transform:translate3d(70px,0,0)}
.chapter:not(.c-home) [data-r].in.in{opacity:1;transform:none}
.chapter:not(.c-home) [data-r].done{will-change:auto}
@media (max-width:820px){   /* phones/tablets: a clean fade-up (sideways slides look messy on a narrow screen) */
  .chapter:not(.c-home) [data-r],.chapter:not(.c-home) [data-r].from-r{transform:translate3d(0,28px,0);transition-duration:.6s,.8s;transition-delay:calc(var(--i,0) * 70ms)}
}