/* kaironos scroll effects
   Remove this file's link from a page and that page goes back to the still version.
   Visitors who ask their device to reduce motion get the still version automatically. */

@media (prefers-reduced-motion: no-preference) {

  /* Horizon bars draw across when a page opens */
  .bars span { animation: draw-bar 1s cubic-bezier(.2, .7, .2, 1) both; }
  .bars span:last-child { animation-delay: .15s; }

  @keyframes draw-bar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* Sun dips toward the horizon as the top band scrolls away, and never fully sets */
  .sun { translate: 0 calc(var(--sink, 0) * 62%); }

  /* Sections ease in as they reach the screen */
  .reveal {
    opacity: .2;
    transform: translateY(1.25rem);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal.seen { opacity: 1; transform: none; }
}

/* Project timeline: the section holds still while the sun crosses the five stages.
   Only on screens wide and tall enough to show all five in a row. */
@media (prefers-reduced-motion: no-preference) and (min-width: 62.01rem) and (min-height: 36rem) {

  /* 230vh sets how long the timeline holds. Lower it to shorten the scroll. */
  .windows-track { height: 230vh; }
  .section:has(.windows-track) { padding-block: 0; }

  .windows-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: center;
  }

  .windows { position: relative; }

  .windows .mark { border-bottom-color: var(--rule); }

  .windows-fill {
    position: absolute;
    left: 0;
    top: calc(2.25rem - 5px);
    width: calc(var(--p, 0) * 100%);
    height: 5px;
    background: var(--navy);
  }

  .windows-sun {
    position: absolute;
    left: calc(var(--p, 0) * (100% - 3.6rem));
    top: calc(2.25rem - 5px - 1.8rem);
    width: 3.6rem;
    height: 1.8rem;
    border-radius: 3.6rem 3.6rem 0 0;
    background: var(--sun);
  }

  .windows .mark::before {
    background: var(--rule);
    transition: background .3s ease;
  }

  .windows li .text { opacity: .35; transition: opacity .4s ease; }

  .windows li.lit .mark::before { background: var(--sun); }
  .windows li.lit .text { opacity: 1; }
}

.windows-fill, .windows-sun { display: none; }

@media (prefers-reduced-motion: no-preference) and (min-width: 62.01rem) and (min-height: 36rem) {
  .windows-fill, .windows-sun { display: block; }
}

@media print {
  .reveal { opacity: 1; transform: none; }
  .windows-track { height: auto; }
  .windows-pin { position: static; height: auto; }
}