/* Den na trati: pinned scroll mode (class .is-pin added by day.js when motion is allowed) */
.day.is-pin { height: 420vh; background: var(--navy); }
.is-pin .day__stage { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden; }
.is-pin .day__sky { background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.is-pin .day__sun { display: block; position: absolute; left: 62%; top: var(--sunY); width: clamp(120px, 16vw, 260px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #FFE2A6, var(--sun) 55%, rgba(226, 104, 63, .0) 72%); opacity: var(--sunO, 1); }
.is-pin .day__stars { display: block; position: absolute; inset: 0 0 40%; opacity: var(--night);
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 46%, #fff 50%, transparent 51%); }
.is-pin .day__leds { height: 15vh; }
.is-pin .day__leds .bulbs { opacity: var(--led); }
.is-pin.is-night .day__leds .poles { stroke: rgba(255, 253, 249, .28); }
.is-pin .day__head { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--hdr) + 22px); margin: 0; max-width: 40%; }
.is-pin.is-night .day__h { color: var(--paper); }
.is-pin .day__h { transition: color .5s; }
.is-pin .day__photos { position: absolute; inset: 0; display: block; margin: 0; }
.is-pin .ph { position: absolute; will-change: transform; transition: box-shadow .5s, filter .5s; transform: translate3d(0, var(--py, 0), 0); }
.is-pin .ph--a { width: 30vw; left: 46%; top: 17%; }
.is-pin .ph--b { width: 38vw; left: 58%; top: 38%; z-index: 1; }
.is-pin .ph--c { width: 27vw; left: 44%; top: 62%; z-index: 2; }
.is-pin .ph.is-on { z-index: 2; box-shadow: 0 0 0 4px var(--white), 0 40px 80px -30px rgba(1, 29, 93, .7); }
.is-pin .ph--c.is-on { z-index: 3; }
.is-pin .day__beats { position: absolute; z-index: 4; left: var(--gut); bottom: clamp(48px, 10vh, 120px); width: min(440px, 36vw); display: block; padding: 0; }
.is-pin .beat { position: absolute; left: 0; bottom: 0; width: 100%; padding: 28px; opacity: 0; translate: 0 24px; pointer-events: none;
  transition: opacity .5s var(--ease), translate .6s var(--ease), background .5s, color .5s; box-shadow: 0 30px 60px -30px rgba(1, 29, 93, .5); }
.is-pin .beat.is-on { opacity: 1; translate: 0 0; }
.is-pin.is-night .beat { background: rgba(1, 29, 93, .9); color: var(--paper); }
.is-pin.is-night .beat__n { color: var(--sun); }
.is-pin .day__rail { position: absolute; z-index: 3; right: var(--gut); top: calc(var(--hdr) + 26px); display: flex; gap: 6px; margin: 0; padding: 6px; list-style: none;
  background: rgba(255, 253, 249, .9); border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.day__rail li { padding: 8px 12px; border-radius: 999px; color: var(--muted); transition: background .4s, color .4s; }
.day__rail li.is-on { background: var(--navy); color: var(--paper); }
@media (max-width: 1100px) { .is-pin .day__head { max-width: 46%; } }
@media (max-width: 900px) {
  .is-pin .day__head { max-width: none; right: var(--gut); }
  .is-pin .day__rail { display: none; }
  .is-pin .ph--a { width: 46vw; left: 6%; top: 30%; }
  .is-pin .ph--b { width: 58vw; left: 36%; top: 38%; }
  .is-pin .ph--c { width: 44vw; left: 12%; top: 50%; }
  .is-pin .day__beats { left: var(--gut); right: var(--gut); width: auto; bottom: 24px; }
  .is-pin .beat { padding: 20px; }
  .is-pin .beat h3 { font-size: 1.5rem; }
  .is-pin .day__leds { height: 10vh; }
}
@media (max-width: 900px) and (min-width: 600px) {
  .is-pin .ph--a { width: 40vw; top: 33%; }
  .is-pin .ph--b { width: 50vw; left: 42%; top: 39%; }
  .is-pin .ph--c { width: 38vw; top: 51%; }
}
