/* Section entrance + state icons. Transform/opacity only. Hero media and H1 stay put. */

html { scroll-behavior: smooth; }

.asi {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  overflow: visible;
  color: inherit;
}
.asi-sm { width: 1.125rem; height: 1.125rem; }
.asi-lg { width: 1.625rem; height: 1.625rem; }
.asi--chev-right { transform: rotate(-90deg); }

.asi, .asi * { animation-play-state: paused; }
.asi.asi-on, .asi.asi-on * { animation-play-state: running; }

.asi-pin-body { animation: asi-drop 2.4s ease-in-out infinite; }
.asi-pin-ring { transform-origin: 12px 10.2px; transform-box: fill-box; animation: asi-pulse 2.4s ease-in-out infinite; }
.asi-hand { transform-origin: 10px 12px; transform-box: fill-box; animation: asi-hand 2.2s ease-in-out infinite; }
.asi-wave { animation: asi-wave 2.2s ease-in-out infinite; }
.asi-wave-2 { animation-delay: .28s; }
.asi-dot { transform-box: fill-box; transform-origin: center; animation: asi-dot 1.2s ease-in-out infinite; }
.asi-draw { stroke-dasharray: 52; animation: asi-draw 2.6s ease-in-out infinite; }
.asi-tick { stroke-dasharray: 16; animation: asi-tick 2.6s ease-in-out infinite; }
.asi-gear { transform-origin: 12px 12px; transform-box: fill-box; animation: asi-gear 2.8s ease-in-out infinite; }
.asi-auto { transform-origin: 12px 12px; transform-box: fill-box; animation: asi-auto 2.4s ease-in-out infinite; }
.asi-guest { animation: asi-guest 2.6s ease-in-out infinite; }
.asi-drive { animation: asi-drive 1.6s ease-in-out infinite; }
.asi-wheel { transform-origin: center; transform-box: fill-box; animation: asi-wheel .7s linear infinite; }
.asi-bolt { transform-origin: center; transform-box: fill-box; animation: asi-bolt 1.6s ease-in-out infinite; }
.asi-nudge { animation: asi-nudge 1.4s ease-in-out infinite; }
.asi-lamp { animation: asi-lamp 1.8s steps(2, end) infinite; }

@keyframes asi-drop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(1.4px); }
}
@keyframes asi-pulse {
  0%, 100% { opacity: .25; transform: scale(.85); }
  40% { opacity: 1; transform: scale(1); }
}
@keyframes asi-hand {
  0%, 100% { transform: rotate(0); }
  28% { transform: rotate(-8deg); }
  46% { transform: rotate(7deg); }
  64% { transform: rotate(0); }
}
@keyframes asi-wave {
  0%, 100% { opacity: .2; }
  40% { opacity: 1; }
}
@keyframes asi-dot {
  0%, 100% { opacity: 1; transform: translateY(0); }
  40% { opacity: .25; transform: translateY(-1.6px); }
}
@keyframes asi-draw {
  0%, 12% { stroke-dashoffset: 0; }
  32% { stroke-dashoffset: 52; }
  68%, 100% { stroke-dashoffset: 0; }
}
@keyframes asi-tick {
  0%, 22% { stroke-dashoffset: 0; }
  40% { stroke-dashoffset: 16; }
  72%, 100% { stroke-dashoffset: 0; }
}
@keyframes asi-gear {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(36deg); }
}
@keyframes asi-auto {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(180deg); }
}
@keyframes asi-guest {
  0%, 100% { opacity: 1; }
  38%, 58% { opacity: .15; }
}
@keyframes asi-drive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.6px); }
}
@keyframes asi-wheel { to { transform: rotate(360deg); } }
@keyframes asi-bolt {
  0%, 100% { opacity: .4; transform: scale(.9); }
  42% { opacity: 1; transform: scale(1); }
}
@keyframes asi-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes asi-lamp {
  0%, 100% { opacity: 1; }
  42%, 58% { opacity: .25; }
}

summary .asi--chev {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  color: #64748b;
}
details[open] > summary .asi--chev { transform: rotate(180deg); }

.ipage-card .asi,
.ipage-line .asi { color: var(--color-primary); }
.home-app-hero__location .asi { color: var(--color-primary, #00b4d8); width: 1.05rem; height: 1.05rem; }

.motion-block {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.motion-block.is-shown {
  opacity: 1;
  transform: none;
}

@keyframes motion-lift {
  from { transform: translateY(14px); }
  to { transform: none; }
}
@keyframes motion-slide {
  from { transform: translateY(18px); }
  to { transform: none; }
}

.motion-block.is-shown .home-fleet-card,
.motion-live .home-fleet-card,
.motion-block.is-shown .card-container,
.motion-live .card-container,
.motion-block.is-shown > li,
.motion-live > li,
.motion-block.is-shown .ipage-ledger > li,
.motion-live .ipage-ledger > li,
.motion-block.is-shown .isc-process ol > li,
.motion-live .isc-process ol > li,
.motion-block.is-shown .am-process ol > li,
.motion-live .am-process ol > li,
.motion-block.is-shown .ipage-faq__list > details,
.motion-live .ipage-faq__list > details,
.motion-block.is-shown .ipage-story > section,
.motion-live .ipage-story > section,
.motion-block.is-shown .ipage-card,
.motion-live .ipage-card,
.motion-block.is-shown .isc-life__grid > *,
.motion-live .isc-life__grid > *,
.motion-block.is-shown .am-life__photo,
.motion-live .am-life__photo,
.motion-block.is-shown .isc-quote,
.motion-live .isc-quote,
.motion-block.is-shown .am-quote,
.motion-live .am-quote,
footer.motion-block.is-shown .grid > div,
footer.motion-live .grid > div {
  animation: motion-lift .62s cubic-bezier(.22, 1, .36, 1) both;
}
:is(.motion-block.is-shown, .motion-live) :is(.home-fleet-card, .card-container, li, details, section, .ipage-card, .am-life__photo):nth-child(2),
:is(.motion-block.is-shown, .motion-live) .isc-life__grid > *:nth-child(2),
footer:is(.motion-block.is-shown, .motion-live) .grid > div:nth-child(2) { animation-delay: .07s; }
:is(.motion-block.is-shown, .motion-live) :is(.home-fleet-card, .card-container, li, details, section, .ipage-card):nth-child(3),
:is(.motion-block.is-shown, .motion-live) .isc-life__grid > *:nth-child(3),
footer:is(.motion-block.is-shown, .motion-live) .grid > div:nth-child(3) { animation-delay: .14s; }
:is(.motion-block.is-shown, .motion-live) :is(.home-fleet-card, .card-container, li, details):nth-child(4) { animation-delay: .21s; }
:is(.motion-block.is-shown, .motion-live) :is(.home-fleet-card, .card-container, li, details):nth-child(5) { animation-delay: .28s; }
:is(.motion-block.is-shown, .motion-live) :is(.home-fleet-card, .card-container, li, details):nth-child(6) { animation-delay: .35s; }

.isc-hero__widget,
.am-hero__booking {
  animation: motion-slide .75s cubic-bezier(.22, 1, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-block,
  .motion-block.is-shown,
  .isc-hero__widget,
  .am-hero__booking,
  .wa-dock__icon {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .asi, .asi * { animation: none; }
  summary .asi--chev,
  details[open] > summary .asi--chev { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .wa-dock__icon { animation: asi-drop 2.8s ease-in-out infinite; }
}