/* ==========================================================================
   MOTION
   Content is visible by default. Only when the “js” class is present (set
   by an inline script) do reveal states start hidden, so nothing stays
   invisible if scripts fail. Everything below is disabled for visitors who
   ask their system for reduced motion.
   ========================================================================== */
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 0.9; transform: scale(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollCue { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes aurora { 0% { transform: translate3d(-3%, 0, 0) scale(1); } 100% { transform: translate3d(4%, 6%, 0) scale(1.1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes shine { 0%, 62% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* The rotating ring of the footer emblem uses its own centring */
.footer-emblem::before { animation-name: ringSpin; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Safety net: if main.js does not run, hidden states are released after a
   short delay. main.js adds “motion-ok” at once, which disables the timer. */
@keyframes forceShow { to { opacity: 1; transform: none; clip-path: none; filter: none; } }
.js:not(.motion-ok) body, .js:not(.motion-ok) .reveal, .js:not(.motion-ok) .write-on { animation: forceShow 0s 2.5s forwards; }

/* Page entrance */
.js body { opacity: 0; transition: opacity 600ms var(--ease-out); }
.js body.page-ready { opacity: 1; }

/* Hero entrance (staggered) */
.js .hero__content > *, .js .page-hero__content > * { opacity: 0; animation: heroIn 1.1s var(--ease-out) forwards; }
.js .hero__content > *:nth-child(1), .js .page-hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.js .hero__content > *:nth-child(2), .js .page-hero__content > *:nth-child(2) { animation-delay: 0.3s; }
.js .hero__content > *:nth-child(3), .js .page-hero__content > *:nth-child(3) { animation-delay: 0.9s; }
.js .hero__content > *:nth-child(4), .js .page-hero__content > *:nth-child(4) { animation-delay: 1.05s; }
.js .hero__content > *:nth-child(5), .js .page-hero__content > *:nth-child(5) { animation-delay: 1.2s; }
.hero__media video, .hero__media img, .page-hero__media img { animation: kenburns 14s var(--ease-out) both; }

/* Scroll reveal with stagger index --i */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.tilt.is-visible, .js .service-card.is-visible { transition-delay: 0s; }

/* Handwriting reveal for script headings: the text is uncovered from left to
   right, like ink following the pen. */
.js .write-on { clip-path: inset(-0.5em 100% -0.5em -0.5em); transition: clip-path 1.8s var(--ease-write) 0.1s; }
.js .write-on.is-visible { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); }
.js .hero__title.write-on, .js .page-hero .write-on { animation: none; opacity: 1; transition-duration: 2.2s; transition-delay: 0.35s; }

/* Silver light sweeping across visible headings */
.silver.is-shining { animation: shine 7s ease-in-out infinite; }
.silver.is-shining.write-on { animation-delay: 1.6s; }

/* Booking result check mark */
.apb-result__mark circle, .apb-result__mark path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: drawCheck 1s var(--ease-out) forwards; }
.apb-result__mark path { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js body { opacity: 1; }
  .js .reveal, .js .hero__content > *, .js .page-hero__content > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .write-on { clip-path: none !important; }
  .silver.is-shining { animation: none; }
  .marquee__track { animation: none; }
  .hero__sparkles, .footer-aurora, .final-cta__glow { display: none; }
}