/* PALUSA 3.0: whole-square movement, 100 ms beats, then a settled composition. */
.reveal { opacity: 1; transform: none; }
/* Brand marks stay assembled, including while their parent entrance is paused. */
.nav-route { display: block; width: 24px; height: 24px; color: #123c52; overflow: visible; }
.hero-visual::before { display: none; }
.cta-step { display: block; width: 72px; height: 72px; margin: 0 auto 32px; color: #fff; overflow: visible; }
.motion-ready .reveal, .motion-ready .motion-group > * {
  transition: opacity 300ms steps(3,end), transform 300ms steps(3,end);
  transition-delay: calc(var(--motion-order,0) * 100ms);
}
.motion-ready .reveal:not(.in), .motion-ready .motion-group:not(.in) > * { opacity: 0; transform: translateY(24px); }
.motion-ready .hero-copy > * { animation: grid-arrival 400ms steps(4,end) both; }
.motion-ready .hero-copy > :nth-child(1) { animation-delay: 0ms; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: 100ms; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: 200ms; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: 300ms; }
.motion-ready .hero-copy > :nth-child(5) { animation-delay: 400ms; }
.motion-ready .phone { animation: phone-unfold 700ms steps(1,end) both; }
.motion-ready .float-chip { animation: chip-arrival 300ms steps(3,end) both; }
.motion-ready .chip-1 { animation-delay: 500ms; }
.motion-ready .chip-2 { animation-delay: 700ms; }
.motion-ready .chip-3 { animation-delay: 900ms; }
.motion-ready .cta-step.in .motion-square { animation: square-arrival 300ms steps(3,end) both; animation-delay: calc(var(--square) * 100ms); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.motion-offscreen *, .motion-offscreen *::before, .motion-offscreen *::after { animation-play-state: paused !important; }
.ghost-btn svg { transition: transform 200ms steps(2,end); }
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after { content: ''; position: absolute; height: 2px; bottom: 4px; inset-inline: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms steps(2,end); }
.nav-links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.ghost-btn:focus-visible svg { transform: translateY(8px); }
@media (hover:hover) and (pointer:fine) {
  .ghost-btn:hover svg { transform: translateY(8px); }
  .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
  .feature-emoji, .step-icon, .tier-medal { transition: transform 200ms steps(2,end), background-color 120ms; }
  .feature:hover .feature-emoji, .step:hover .step-icon { transform: translateY(-8px); }
  .tier:hover .tier-medal { transform: translateY(-8px); background: #403473; }
  .tier:last-child:hover .tier-medal { background: #ebb2d5; }
}
@keyframes grid-arrival { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes square-arrival { from { opacity: 0; transform: translateY(-33px); } to { opacity: 1; transform: none; } }
@keyframes chip-arrival { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes phone-unfold {
  0% { clip-path: polygon(0 0,0 0,0 100%,0 100%); }
  14% { clip-path: polygon(0 0,40% 0,40% 20%,20% 20%,20% 40%,0 40%); }
  28% { clip-path: polygon(0 0,60% 0,60% 40%,40% 40%,40% 60%,0 60%); }
  42% { clip-path: polygon(0 0,80% 0,80% 60%,60% 60%,60% 80%,0 80%); }
  57% { clip-path: polygon(0 0,100% 0,100% 80%,80% 80%,80% 100%,0 100%); }
  71%,100% { clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal:not(.in), .motion-ready .motion-group:not(.in) > * { opacity: 1; transform: none; }
  .motion-ready .phone { clip-path: none; }
  .route-traveller { display: none; }
  .motion-ready .hero-copy > *, .motion-ready .float-chip, .motion-square { opacity: 1; transform: none; }
  .feature:hover .feature-emoji, .step:hover .step-icon, .tier:hover .tier-medal, .ghost-btn:hover svg, .ghost-btn:focus-visible svg { transform: none; }
}

.hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-route { width: 30px; height: 30px; flex: none; overflow: visible; }

/* An unobtrusive background map; content and native controls stay above it. */
.hero { isolation: isolate; }
.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; }