/* Story: the fusion components mixed on purpose so no two beats feel the same.
   A tall opening scene at 1958, dark cards that shift from bank to bank of the
   river in varied sizes (copy always toward the river), a full-width crossing
   at 2012, and the centered arrival at 2026. Imports fusion/ for the machinery. */
@import url('fusion.css');
:root{--scene-h:86vh;--scene-min:520px;--scene-max:900px}
/* The centered 1958 sits directly above the opening scene, so the scene's
   era label would say the year twice; the story drops it and centers the
   photograph in the space the label held. */
.milestone.origin .scene-era{display:none}
.milestone.origin .scene{justify-content:center;padding-inline:0}

/* The division mark keeps the banner mock's full size and 24px corner inset
   (both from shared/history.css). The photographs stay large enough to carry
   it (desktop frames at least ~420px wide), but the cards themselves slimmed
   back down by cutting their padding rather than growing outward. */

/* One year size and one description size for every milestone; the per-beat
   variation is carried by the card and photograph sizes, not the type. The
   one exception, per Joseph: the opening 1958 stays bigger as the title
   moment (the shared origin sizes). */
.milestone .date{font-size:clamp(48px,5.5vw,72px)}
.milestone .milestone-text{font-size:16px}
.milestone.origin .date{font-size:clamp(64px,9vw,110px)}
.milestone.origin .milestone-text{font-size:18px}

@media(min-width:721px){
  /* Default beat: a tall card, photo right */
  .milestone.pictured:not(.origin){width:min(1140px,calc(100% - 48px));margin:52px auto;height:auto;min-height:0;max-height:none;padding:28px 32px;gap:44px}
  .milestone.pictured:not(.origin) .photo-frame{height:660px}
  .milestone.pictured:not(.origin) .concept-caption{left:32px;bottom:24px}
  /* Right-bank beats: the card leans right, photo on the outer edge */
  #year-1972,#year-1994{margin:52px clamp(24px,4vw,72px) 52px auto}
  /* Left-bank beats: the card leans left, photo outer, copy toward the river */
  #year-1993,#year-2006{margin:52px auto 52px clamp(24px,4vw,72px);flex-direction:row-reverse}
  /* 1972: the first division, the largest card */
  #year-1972{width:min(1200px,calc(100% - 48px))}
  #year-1972 .photo-frame{height:700px}
  /* 1993 and 1994: a close pair, the second smaller and quicker */
  #year-1993{margin-top:96px}
  #year-1993 .photo-frame{height:660px}
  #year-1994{width:min(1040px,calc(100% - 48px));margin-top:36px}
  #year-1994 .photo-frame{height:630px}
  /* 2012: the crossing to Taiwan, the one full-width swell mid-page */
  #year-2012{width:100%;margin:110px 0;height:60vh;min-height:480px;max-height:700px;padding:3vh 7vw 3vh 6vw}
  #year-2012 .photo-frame{height:100%}
  #year-2012 .concept-caption{left:6vw;bottom:3vh}
}

@media(max-width:720px){
  .milestone .date{font-size:48px}
  .milestone .milestone-text{font-size:15px}
  .milestone.origin .date{font-size:72px}
  .milestone.origin .milestone-text{font-size:16px}
}

@media(max-width:720px){
  .milestone.pictured:not(.origin){margin:34px 16px}
  .milestone.pictured:not(.origin) .photo-frame{width:min(74vw,340px)}
  #year-2012{margin:40px 0}
  #year-2012 .photo-frame{width:min(80vw,360px)}
  .milestone.origin .scene{height:74vh;padding:76px 0 58px}
  .milestone.origin .photo-frame{width:min(76vw,calc(55vh * 2 / 3))}
}

/* --- Motion, Round 4. Techniques verified in the reference teardowns:
   one-shot fade-and-rise per milestone (NOSAWA, UT-EC), a marker riding the
   line's drawn tip (Sakura Crayons, HUMAN MADE), a top-down photo wipe with a
   scale settle (UT-EC), and a slight scroll-tied photo drift (HUMAN MADE,
   UT-EC). Copy and years never move once readable; the route dots never move
   at all, because the river is drawn through their measured centers. */

.river-traveler{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 2px 8px rgba(0,0,0,.3);pointer-events:none;transition:opacity .3s}
.river-traveler.is-idle{opacity:0}

@media (prefers-reduced-motion: no-preference){
  /* Milestone copy rises into place, text a beat after its year */
  .milestone .date{transition:color .6s ease,opacity .9s cubic-bezier(.19,1,.22,1),translate .9s cubic-bezier(.19,1,.22,1)}
  .milestone .milestone-text{transition:opacity .9s cubic-bezier(.19,1,.22,1) .12s,translate .9s cubic-bezier(.19,1,.22,1) .12s}
  .reveal-ready .milestone:not(.is-seen) .date,
  .reveal-ready .milestone:not(.is-seen) .milestone-text{opacity:.2;translate:0 26px}

  /* The dark card's wash breathes in; the photo wipes open and settles */
  .milestone .scene-wash{transition:opacity 1.1s ease}
  .reveal-ready .milestone:not(.is-seen) .scene-wash{opacity:0}
  .milestone .scene-image{clip-path:inset(0);transition:clip-path 1.2s cubic-bezier(.075,.82,.165,1) .1s,scale 1.6s cubic-bezier(.075,.82,.165,1) .1s}
  .reveal-ready .milestone:not(.is-seen) .scene-image{scale:1.12}
  .reveal-ready .milestone:not(.origin):not(.is-seen) .scene-image{clip-path:inset(0 0 100% 0)}

  /* Marks on and around the photo arrive after it */
  .milestone :is(.division-logo,.geography-title,.geography-city,.concept-caption,.scene-era){transition:opacity .8s ease .55s}
  .reveal-ready .milestone:not(.is-seen) :is(.division-logo,.geography-title,.geography-city,.concept-caption,.scene-era){opacity:0}

  /* 2026: the four division marks step in one by one */
  .today-divisions img{transition:opacity .7s cubic-bezier(.19,1,.22,1),translate .7s cubic-bezier(.19,1,.22,1)}
  .today-divisions img:nth-child(2){transition-delay:.1s}
  .today-divisions img:nth-child(3){transition-delay:.2s}
  .today-divisions img:nth-child(4){transition-delay:.3s}
  .reveal-ready .milestone:not(.is-seen) .today-divisions img{opacity:0;translate:0 14px}

  /* Scroll-tied drift: the photo drags a little inside its frame.
     The constant scale keeps the drift from ever exposing the frame's edge. */
  @supports (animation-timeline: view()){
    .milestone .scene-image{scale:1.05;animation:scene-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    #year-2012 .scene-image{scale:1.08;animation-name:scene-drift-wide}
    .reveal-ready .milestone:not(.is-seen) .scene-image{scale:1.14}
  }
}
@keyframes scene-drift{from{translate:0 2.2%}to{translate:0 -2.2%}}
@keyframes scene-drift-wide{from{translate:0 3.5%}to{translate:0 -3.5%}}