/* A small, optional motion layer. Content stays visible without motion.js. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-motion="on"] [data-motion-reveal="pending"] {
  opacity: 0;
  translate: 0 22px;
}

html[data-motion="on"] [data-motion-reveal="visible"] {
  animation: dabba-arrive 680ms var(--motion-ease) var(--motion-delay, 0ms) both;
}

html[data-motion="on"] .hero-visual > img {
  animation: dabba-photo-arrive 1400ms var(--motion-ease) both;
}

html[data-motion="on"] .visual-sticker {
  animation: dabba-sticker-arrive 1000ms var(--motion-ease) 300ms backwards;
}

.button > span, .text-link > span, .visual-card, .step-icon, .callout-mark {
  transition: transform 300ms var(--motion-ease);
}

.button:active { transform: scale(.975); }
.menu-line { transition: transform 220ms var(--motion-ease), opacity 180ms; }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
html[data-motion="on"] .mobile-menu:not([hidden]) { animation: dabba-menu-arrive 220ms var(--motion-ease); }

.marquee { position: relative; }
.marquee-track { padding-right: 145px; }
html:not([data-motion="on"]) .marquee-track { animation-play-state: paused; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }

.motion-toggle {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  min-width: 130px;
  min-height: 44px;
  padding: 12px 20px 12px 28px;
  border: 0;
  border-left: 1px solid rgba(23, 23, 20, .18);
  color: var(--ink);
  background: var(--coral);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 650;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #ff7958; }
.motion-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }

@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .button:hover > span { transform: translate(3px, -3px); }
  html[data-motion="on"] .text-link:hover > span { transform: translateY(3px); }
  html[data-motion="on"] .hero-visual:hover .visual-card-rating { transform: translateY(-5px); }
  html[data-motion="on"] .hero-visual:hover .visual-card-price { transform: translateY(-3px); }
  html[data-motion="on"] .steps article:hover .step-icon { transform: translateY(-5px) rotate(-5deg); }
  html[data-motion="on"] .campus-callout:hover .callout-mark { transform: rotate(0deg); }
}

@keyframes dabba-arrive {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes dabba-photo-arrive {
  from { transform: scale(1.055); }
  to { transform: scale(1.015); }
}
@keyframes dabba-sticker-arrive {
  from { opacity: 0; translate: 0 12px; transform: rotate(-7deg); }
  to { opacity: 1; translate: 0 0; transform: rotate(8deg); }
}
@keyframes dabba-menu-arrive {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

html[data-motion="off"] [data-motion-reveal],
html[data-motion="reduced"] [data-motion-reveal] {
  animation: none !important;
  opacity: 1;
  translate: none;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 680px) {
  .motion-toggle { min-width: 113px; padding-inline: 13px; font-size: 9px; }
  .marquee-track { padding-right: 125px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-reveal] { opacity: 1 !important; translate: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}