/* =====================================================================
   Sumatran 0.7 — motion
   Everything here is keyed to html.sm-motion, which is only set when the
   visitor has not asked for reduced motion. Elements are hidden only after
   motion.js has marked them, so nothing disappears if the script fails.
   ===================================================================== */
@keyframes sm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }

/* Hero: label, headline, second (grey) line, lead, buttons arrive in sequence */
.sm-motion .is-style-hero-v2 > * { animation: sm-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sm-motion .is-style-hero-v2 > :nth-child(1) { animation-delay: 0.05s; }
.sm-motion .is-style-hero-v2 > :nth-child(2) { animation-delay: 0.15s; }
.sm-motion .is-style-hero-v2 > :nth-child(3) { animation-delay: 0.55s; }
.sm-motion .is-style-hero-v2 > :nth-child(4) { animation-delay: 0.7s; }
.sm-motion .is-style-hero-v2 .is-style-display mark { display: inline-block; animation: sm-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.38s both; }
.sm-motion .page-trail { animation: sm-fade 0.6s ease both; }

/* Scroll reveal (classes added by motion.js) */
@keyframes sm-rise-lg { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.sm-motion .sm-reveal:not(.is-in) { opacity: 0; }
/* "backwards" fill only, so hover effects on the same element work once it has arrived */
.sm-motion .sm-reveal.is-in { animation: sm-rise-lg 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) var(--sm-delay, 0s) backwards; }

/* Executive readout: bars fill, agenda items arrive one by one */
.sm-motion .sm-readout.sm-armed .sm-readout__bar i.on { transform-origin: left center; transform: scaleX(0); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); transition-delay: var(--sm-d, 0s); }
.sm-motion .sm-readout.sm-armed .sm-readout__task { opacity: 0; transform: translateX(10px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: var(--sm-d, 0s); }
.sm-motion .sm-readout.sm-armed .sm-readout__task.is-done > i { transform: scale(0.4); opacity: 0; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s ease; transition-delay: calc(var(--sm-d, 0s) + 0.25s); }
.sm-motion .sm-readout.sm-armed.is-in .sm-readout__bar i.on { transform: none; }
.sm-motion .sm-readout.sm-armed.is-in .sm-readout__task { opacity: 1; transform: none; }
.sm-motion .sm-readout.sm-armed.is-in .sm-readout__task.is-done > i { transform: none; opacity: 1; }

/* Line drawings draw themselves in (offer cards, SAIOS covers) */
.sm-motion .sm-draw .sm-stroke { transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0.1, 0.2, 1); transition-delay: var(--sm-d, 0s); }
.sm-motion .sm-draw .sm-dot { opacity: 0; transition: opacity 0.5s ease; transition-delay: var(--sm-d, 0s); }
.sm-motion .sm-draw.is-drawn .sm-stroke { stroke-dashoffset: 0 !important; }
.sm-motion .sm-draw.is-drawn .sm-dot { opacity: 1; }

/* Hover: offer cards lift, covers tilt like a book on a shelf */
@media (hover: hover) {
  .sm-night-offer__link { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease; }
  .sm-night-offer__link:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
  .sm-night-offer__arrow { transition: transform 0.35s ease; }
  .sm-night-offer__link:hover .sm-night-offer__arrow { transform: translateX(3px); }
  .sm-cover { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; transform-origin: left center; }
  .sm-cover:hover { transform: perspective(1100px) rotateY(-7deg) translateY(-6px); box-shadow: 14px 22px 40px rgba(17, 17, 17, 0.16); }
  .sm-sector { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .sm-sector:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-night-offer__link, .sm-night-offer__link:hover, .sm-cover, .sm-cover:hover, .sm-sector, .sm-sector:hover { transition: none !important; transform: none !important; }
}