/* Malta 360 — motion. Resting state is VISIBLE; html.js gates the hidden start. */

/* ---- reveal ----------------------------------------------------------- */
html.js [data-reveal]:not(.is-in)          { opacity: 0; transform: translateY(24px); }
html.js [data-reveal="fade"]:not(.is-in)   { transform: none; }
html.js [data-reveal="scale"]:not(.is-in)  { transform: scale(.96); }
html.js [data-reveal="shape"]:not(.is-in)  {
  transform: translate(var(--dx, 0), var(--dy, 40px)) rotate(calc(var(--r, 0deg) - 8deg));
}

[data-reveal] {
  transition: opacity var(--m360-dur, .8s) var(--m360-ease, ease),
              transform var(--m360-dur, .8s) var(--m360-ease, ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in         { opacity: 1; transform: none; }
[data-reveal="shape"].is-in { opacity: var(--o, 1); transform: rotate(var(--r, 0deg)); }

/* ---- carousel ---------------------------------------------------------- */
[data-carousel-track] {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-track] > *                { flex: 0 0 auto; scroll-snap-align: start; }

.m360-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.m360-carousel__nav button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  line-height: 1;
  background: none;
  color: var(--m360-text, #F5F5F3);
  border: 1px solid var(--m360-line-2, #2A2A2A);
  border-radius: var(--m360-radius, 0);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.m360-carousel__nav button:hover:not(:disabled) { border-color: var(--m360-text, #F5F5F3); }
.m360-carousel__nav button:disabled {
  color: var(--m360-text-3, #6B6B6B);
  border-color: var(--m360-line, #1F1F1F);
  cursor: default;
}
[data-carousel-page] {
  font-family: var(--m360-font-label, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--m360-text-2, #9A9A9A);
}

/* ---- marquee ----------------------------------------------------------- */
.m360-marquee {
  --marquee-gap: 64px;
  display: flex;
  gap: var(--marquee-gap);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m360-marquee__track {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--marquee-gap);
  animation: m360-marquee var(--marquee-duration, 40s) linear infinite;
}
.m360-marquee[data-direction="right"] .m360-marquee__track { animation-direction: reverse; }
.m360-marquee:hover .m360-marquee__track                   { animation-play-state: paused; }

@keyframes m360-marquee {
  to { transform: translateX(calc(-100% - var(--marquee-gap))); }
}


/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-in),
  [data-reveal],
  [data-reveal].is-in,
  [data-reveal="shape"].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .m360-vshape[data-reveal] { opacity: var(--o, 1); transform: rotate(var(--r, 0deg)); }
  .m360-marquee        { overflow-x: auto; flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .m360-marquee__track { animation: none; flex-wrap: wrap; }
}