/* Oakpress Motion Kit — styles that pair with motion.js (24 Oct 2026). */

/* Until motion.js is ready, keep animated things out of sight (only when JS runs; never hides content for no-JS or reduced motion). */
.om-js:not(.om-ready):not(.om-static) :is([data-load-item], [data-split], [data-reveal], [data-brighten], [data-scramble]),
.om-js:not(.om-ready):not(.om-static) [data-stagger] > * { opacity: 0; }

/* Split headlines: each line sits in a mask */
.om-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.om-line-in { display: block; will-change: transform; }
.om-w { display: inline-block; }

/* Image wrappers for parallax: the image is taller than its frame so it can move */
.om-frame { position: relative; overflow: hidden; }
.om-frame > [data-parallax] { position: absolute; left: 0; width: 100%; top: -12%; height: 124%; object-fit: cover; }

/* Expanding card */
[data-expand] { will-change: clip-path; }

/* Pinned story: desktop = media pinned beside steps; phone = stacked */
[data-pin-story] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
[data-pin-story] [data-step-media] { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
[data-pin-story] [data-step-media] .om-stack { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 80svh; overflow: hidden; border-radius: 18px; }
[data-pin-story] [data-step-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-pin-story] [data-step] { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s; }
[data-pin-story] [data-step].om-on { opacity: 1; }
@media (max-width: 900px) {
  [data-pin-story] { grid-template-columns: 1fr; }
  [data-pin-story] [data-step-media] { display: none; }
  [data-pin-story] [data-step] { min-height: 0; opacity: 1; padding: 24px 0; }
  [data-pin-story] [data-step] .om-step-img-m { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
}
@media (min-width: 901px) { [data-pin-story] .om-step-img-m { display: none; } }

/* Horizontal gallery: desktop is pinned by JS; phone = native swipe with snap */
[data-hscroll] { overflow: hidden; }
@media (min-width: 901px) { [data-hscroll] { height: 100vh; height: 100svh; display: flex; align-items: center; } }
[data-hscroll] [data-hscroll-track] { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding: 0 clamp(16px, 5vw, 80px); will-change: transform; }
@media (max-width: 900px) {
  [data-hscroll] { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-hscroll]::-webkit-scrollbar { display: none; }
  [data-hscroll] [data-hscroll-track] > * { scroll-snap-align: center; }
}

/* Marquee */
[data-marquee] { display: flex; overflow: hidden; white-space: nowrap; }
[data-marquee] > * { flex: none; display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; animation: om-marquee var(--om-marquee-speed, 30s) linear infinite; }
@keyframes om-marquee { to { transform: translateX(-100%); } }
[data-marquee]:hover > * { animation-play-state: paused; }

/* Hover/tap polish for images and buttons */
.om-zoom { overflow: hidden; }
.om-zoom img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .om-zoom:hover img { transform: scale(1.06); } }
.om-zoom:active img { transform: scale(1.03); }
[data-magnetic] { will-change: transform; }

/* Slideshow: images stacked, the first shows without JS */
[data-slideshow] { position: relative; overflow: hidden; }
[data-slideshow] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-slideshow] img:not(:first-child) { opacity: 0; }
.om-js [data-slideshow] img:not(:first-child) { opacity: 0; }

/* Duotone to colour (Odyssee) */
.om-duo { position: relative; overflow: hidden; isolation: isolate; }
.om-duo img { filter: grayscale(1) contrast(1.05); transition: filter 1s ease; }
.om-duo::after { content: ""; position: absolute; inset: 0; background: var(--om-duo, #7f8fbf); mix-blend-mode: color; opacity: .85; transition: opacity 1s ease; pointer-events: none; }
.om-duo.om-colour img { filter: none; } .om-duo.om-colour::after { opacity: 0; }
@media (hover: hover) { .om-duo:hover img { filter: none; } .om-duo:hover::after { opacity: 0; } }

/* Preloader (Edolus) */
[data-preloader] { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; text-align: center; background: var(--om-pre-bg, #000); color: var(--om-pre-ink, #fff); }
.om-static [data-preloader], html:not(.om-js) [data-preloader] { display: none; }

/* Film grain (Ascension): add class om-grain to a dark section or body */
.om-grain { position: relative; }
.om-grain::before { content: ""; position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: var(--om-grain, .09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: om-grain 1s steps(6) infinite; }
@keyframes om-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-4%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }

/* Photo shapes (Belgrade Arbor). Put the shape on an inner wrapper if the outer one also has data-reveal. */
.om-shape-cut { clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%); }
.om-shape-slant { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }
.om-shape-tilt { clip-path: polygon(6% 0, 100% 4%, 94% 100%, 0 96%); border-radius: 0; }
.om-shape-arch { border-radius: 999px 999px 0 0; overflow: hidden; }

/* Reduced motion: everything visible and still */
@media (prefers-reduced-motion: reduce) {
  [data-marquee] > * { animation: none; }
  .om-grain::before { animation: none; }
  .om-duo img, .om-duo::after { transition: none; }
  .om-zoom img { transition: none; }
}
.om-static [data-pin-story] [data-step] { opacity: 1; }