/* Motion layer (GSAP + Lenis). Initial states apply only while html.op-motion is set */

/* Lenis */
html.lenis, html.lenis body {height: auto;}
html.lenis {scroll-behavior: auto !important;}
.lenis:not(.lenis-autoToggle).lenis-stopped {overflow: clip;}
.lenis [data-lenis-prevent] {overscroll-behavior: contain;}

/* Hero intro runs in CSS so it does not wait for JS */
.op-motion .hero::after {content: ""; position: absolute; inset: 0; z-index: 1; background: #1b1a1e; transform-origin: 50% 0; animation: op-curtain 1.4s cubic-bezier(.77, 0, .18, 1) .1s forwards; pointer-events: none;}
.op-motion .hero__content {position: relative; z-index: 2;}
.op-motion .hero > video.hero__bg {animation: op-hero-zoom 2.6s cubic-bezier(.16, 1, .3, 1) .1s both;}
@keyframes op-curtain {to {transform: scaleY(0);}}
@keyframes op-hero-zoom {from {transform: scale(1.3);} to {transform: scale(1.15);}}

/* Hero text and cards animate in CSS: the LCP text must not wait for JS */
@media (prefers-reduced-motion: no-preference) {
	.op-motion .hero__title-small, .op-motion .hero-single__title-small {animation: op-wipe 1.2s cubic-bezier(.16, 1, .3, 1) .35s both;}
	.op-motion .hero__title-big, .op-motion .hero-single__title-big {animation: op-wipe 1.4s cubic-bezier(.16, 1, .3, 1) .55s both;}
	.op-motion .hero__carousel .swiper-slide {animation: op-rise 1.2s cubic-bezier(.16, 1, .3, 1) .85s both;}
	.op-motion .hero__carousel .swiper-slide:nth-child(2) {animation-delay: .97s;}
	.op-motion .hero__carousel .swiper-slide:nth-child(3) {animation-delay: 1.09s;}
	.op-motion .hero__carousel .swiper-slide:nth-child(n+4) {animation-delay: 1.21s;}
}
@keyframes op-wipe {from {clip-path: inset(0 0 100% 0); transform: translateY(35%);} to {clip-path: inset(-10% -5% -20% -5%); transform: none;}}
@keyframes op-rise {from {opacity: 0; transform: translateY(40px);} to {opacity: 1; transform: none;}}

/* Blocks are hidden until motion.js reveals them; op-motion is removed after 4s if JS never ran */
.op-motion [data-aos] {opacity: 0;}
.op-motion.op-motion-ready [data-aos] {opacity: 1;}

/* Parallax wrapper keeps the old simpleParallax class for existing CSS */
.simpleParallax {overflow: hidden; height: 100%;}
.simpleParallax > img {will-change: transform;}

/* SplitText masks */
.op-line-mask {padding-bottom: .1em; margin-bottom: -.1em;}

/* Scroll progress */
.op-progress {position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 2000; background: #aee8ff; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;}

/* Image curtain reveal */
.op-reveal {will-change: clip-path;}

/* Magnetic buttons: GSAP owns transform, CSS keeps the colour transitions */
.op-magnetic {transition-property: background-color, color, border-color, box-shadow, opacity !important;}

/* Horizontal entrances must not widen the page */
main, .footer {overflow-x: clip;}

@media (prefers-reduced-motion: reduce) {
	.op-motion .hero::after, .op-motion .hero > video.hero__bg {animation: none;}
	.op-progress {display: none;}
}