/* Motion lane: the day icons ("Un día en ..."). Loads after site.css.

   Owner, round 3 and 2026-10-11: "buttery smooth", "in sync", "some only go halfway", "people are gonna slow down and
   read the page ... part of our story ... make it fun". Research and diagnosis:
   outputs/research/casa-oro-website-2026-10/39-motion-research.md.

   Scroll is the clock. Each icon's journey is a CSS scroll-driven animation (animation-timeline: view()): it moves
   exactly as far as the reader has read, backs up when they scroll back, and runs on the compositor (transform
   properties only, no JS per frame). Every icon finishes at the END of its track, where its destination is drawn: the
   bus pulls up beside its stop, the boat reaches the buoy, the turtle reaches the sea, the coffee lands on the table. The
   moment it arrives it does a small happy hop, then keeps its own little life (rocks, sways, steams) while on screen.

   Three paths, one end state:
   - scroll-driven (Chrome, Edge, Safari 26+): as above, no arming;
   - time-based fallback (browsers without view timelines): site.js arms each mark and lets it go once its stop is in
     the reading zone; two-keyframe travel to the same destination;
   - reduced motion: nothing moves; every icon rests at its destination.
   Travel uses the individual `translate` property, the arcs `translate` on the inner layer, the arrival hop `scale`,
   and the idle life `transform`, so the motions compose instead of fighting over one property. */

.stop-mark { --run: calc(100cqw - 82px); --go: 1.6s; --tint: var(--casa-2, var(--sol)); position: relative; height: 88px; margin-bottom: var(--space-1); overflow-x: clip; overflow-y: visible; container-type: inline-size; }
.stop-mark-track { position: absolute; left: 0; right: 26px; bottom: 12px; height: 0; border-bottom: 2px dashed var(--line-strong); transform-origin: 0 50%; }
.stop-mark-ico { position: absolute; left: 0; bottom: 8px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--on-casa-2, var(--ink)); border: 4px solid var(--surface); z-index: 1; }
[data-theme="noche"] .stop-mark-ico { border-color: var(--negro); }
.stop-mark-life { display: grid; place-items: center; width: 100%; height: 100%; }
.stop-mark-life .ico, .stop-mark-life svg { width: 30px; height: 30px; }

/* The destination, drawn at the end of the track (the icon comes to rest on it). Default: a stop post with a flag. */
.stop-mark::after { content: ""; position: absolute; right: 14px; bottom: 12px; width: 3px; height: 32px; background: var(--ink); border-radius: 2px; opacity: .55; }
.stop-mark::before { content: ""; position: absolute; right: 0; bottom: 34px; width: 14px; height: 10px; background: var(--tint); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Water: the boat's buoy, the wave's shore and the turtle's sea are a band of turquoise at the end of the track. */
.m-barco .stop-mark-track, .m-ola .stop-mark-track, .m-tortuga .stop-mark-track { border-bottom-style: solid; border-bottom-color: var(--turquesa); }
.m-tortuga .stop-mark-track { border-bottom: 3px dotted var(--line-strong); }
.m-barco::after, .m-ola::after, .m-tortuga::after { right: 0; width: 96px; height: 14px; bottom: 6px; border-radius: 14px 0 0 14px; background: linear-gradient(90deg, transparent, var(--turquesa) 45%); opacity: .45; }
.m-barco::before, .m-ola::before, .m-tortuga::before { display: none; }
/* Food and drink land on a table; the bed, the hammock and the pool settle on their spot; the sun reaches noon. */
.m-cafe::after, .m-cacao::after, .m-plato::after, .m-coctel::after { right: 0; width: 76px; height: 4px; bottom: 8px; border-radius: 2px; opacity: .7; }
.m-cafe::before, .m-cacao::before, .m-plato::before, .m-coctel::before,
.m-sol::before, .m-sol::after, .m-hamaca::before, .m-cama::before, .m-piscina::before, .m-wifi::before, .m-volcan::before { display: none; }
.m-hamaca::after, .m-cama::after, .m-piscina::after, .m-wifi::after, .m-volcan::after { right: 22px; width: 64px; height: 10px; bottom: 7px; border-radius: 50%; background: var(--tint); opacity: .35; }

/* Reduced motion and no-JS: already arrived. */
.stop-mark-ico { translate: var(--run) 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Three layers, each with one job, so no two motions fight over a property:
     .stop-mark-ico   the journey (translate) and the arrival hop (scale): driven by the scroll
     .stop-mark-life  the shape of the journey (an arc, the key turning): driven by the scroll
     .ico             the icon's own life once it is there (rocks, sways, steams): a clock, only while on screen */
  @keyframes mk-go { from { translate: 0 0; } to { translate: var(--run) 0; } }
  @keyframes mk-land { from { translate: var(--run) -26px; opacity: 0; } to { translate: var(--run) 0; opacity: 1; } }
  @keyframes mk-hop { 0%, 72% { scale: 1; } 86% { scale: 1.16; } 100% { scale: 1; } }
  @keyframes mk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes mk-arc-up { 0% { translate: 0 6px; } 50% { translate: 0 -18px; } 100% { translate: 0 0; } }
  @keyframes mk-arc-down { from { translate: 0 -22px; } to { translate: 0 0; } }
  @keyframes mk-arc-sun { from { translate: 0 22px; } to { translate: 0 -6px; } }
  @keyframes mk-unlock { 0%, 80% { rotate: 0deg; } 100% { rotate: -90deg; } }

  /* Linear on purpose: one pixel of scroll moves the icon the same distance all the way (owner 2026-10-11: "too fast, out of sync"; an ease-in-out made the middle 2.3x faster than the scroll). */
  .stop-mark-ico { animation: mk-go var(--go) linear both, mk-hop var(--go) linear both; }
  .stop-mark-track { animation: mk-draw var(--go) linear both; }
  /* Settling kinds come down onto their spot instead of driving there. */
  :is(.m-hamaca, .m-cama, .m-piscina, .m-wifi, .m-volcan, .m-pin) .stop-mark-ico { animation-name: mk-land, mk-hop; }
  :is(.m-hamaca, .m-cama, .m-piscina, .m-wifi, .m-volcan, .m-pin) .stop-mark-track { animation: none; opacity: 0; }
  .m-ola .stop-mark-life { animation: mk-arc-up var(--go) ease-in-out both; }
  .m-sol .stop-mark-life { animation: mk-arc-sun var(--go) ease-out both; }
  :is(.m-hoja, .m-cafe, .m-cacao, .m-plato, .m-coctel) .stop-mark-life { animation: mk-arc-down var(--go) ease-out both; }
  .m-llave .stop-mark-life { animation: mk-unlock var(--go) linear both; }

  /* Its own life, once there and only while on screen (.is-live). */
  @keyframes mk-idle { from { transform: translateY(0); } to { transform: translateY(-2px); } }
  @keyframes mk-rock { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  @keyframes mk-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
  @keyframes mk-waddle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
  @keyframes mk-breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
  @keyframes mk-float { from { transform: translateY(0); } to { transform: translateY(-3px); } }
  @keyframes mk-turn { to { transform: rotate(360deg); } }
  @keyframes mk-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }
  .is-live .stop-mark-life .ico { animation: mk-idle 2.4s ease-in-out infinite alternate; }
  .m-bus.is-live .stop-mark-life .ico { animation-duration: .6s; }
  .m-barco.is-live .stop-mark-life .ico { transform-origin: 50% 80%; animation: mk-rock 3.2s ease-in-out infinite alternate; }
  :is(.m-ola, .m-cafe, .m-cacao, .m-plato, .m-coctel).is-live .stop-mark-life .ico { animation: mk-float 2s ease-in-out infinite alternate; }
  .m-tortuga.is-live .stop-mark-life .ico { animation: mk-waddle .9s ease-in-out infinite alternate; }
  .m-hamaca.is-live .stop-mark-life .ico { transform-origin: 50% -40%; animation: mk-sway 2.8s ease-in-out infinite alternate; }
  .m-hoja.is-live .stop-mark-life .ico { animation: mk-waddle 2.6s ease-in-out infinite alternate; }
  .m-cama.is-live .stop-mark-life .ico { animation: mk-breathe 3.6s ease-in-out infinite alternate; }
  .m-sol.is-live .stop-mark-life .ico { animation: mk-turn 40s linear infinite; }
  .m-piscina .stop-mark-ico::after, .m-wifi .stop-mark-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--turquesa); opacity: 0; pointer-events: none; }
  .m-wifi .stop-mark-ico::after { border-color: var(--tint); }
  .m-piscina.is-live .stop-mark-ico::after, .m-wifi.is-live .stop-mark-ico::after { animation: mk-ring 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }

  /* Scroll-driven path: the reading is the clock. The journey runs while the mark rises from the bottom edge to just
     above the middle of the screen (about 40% of a screen of scrolling), so it is done by the time the stop is read.
     Two classes of specificity so these win over every per-kind shorthand above. */
  @supports (animation-timeline: view()) {
    .stop-mark { view-timeline: --mk block; }
    .stop-mark :is(.stop-mark-ico, .stop-mark-track, .stop-mark-life) { animation-timeline: --mk; animation-range: cover 4% cover 62%; animation-duration: auto; }
  }

  /* Time-based fallback (no view timelines): site.js arms each mark and releases it in the reading zone. */
  @supports not (animation-timeline: view()) {
    .stop-mark.is-armed:not(.is-in) :is(.stop-mark-ico, .stop-mark-track, .stop-mark-life) { animation-play-state: paused; }
  }
}

/* Section labels ("Por qué existe"): the Sol instead of a dash (owner round 3: "something from our brand"). */
.ed-num::before { width: 20px; height: 20px; flex: none; background: url("../logos/casa-oro-sol-color.svg") center / contain no-repeat; }