/*
 * Casa Lumina - motion CSS (cl-motion.css)
 * Loaded on every front-end page after style.css. Layout of sections lives in style.css; this file holds only
 * the motion layer: Lenis base rules, button letter roll, sticker hover ring, marquee keyframes, strip modes,
 * footer cursor and stamps, title split helpers, contact card stacking, the cross-document page change fade,
 * and the reduced-motion overrides.
 * Every hidden or moving state is scoped to html.cl-js:not(.cl-reduce); without JS nothing is hidden.
 */

/* ---------- Lenis (smooth scroll) base rules ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- m06: button letter roll (chars are built by cl-motion.js on fine pointers only) ---------- */
.cl-roll{position:relative;display:inline-block;perspective:60rem}
.cl-roll__a,.cl-roll__b{display:inline-block;white-space:pre}
.cl-roll__b{position:absolute;left:0;top:0}
.cl-roll__char{display:inline-block;transform-origin:50% 50%;transition:transform .5s var(--cl-ease,cubic-bezier(.23,1,.32,1)) calc(var(--i,0) * .02s),opacity .5s var(--cl-ease,cubic-bezier(.23,1,.32,1)) calc(var(--i,0) * .02s)}
.cl-roll__b .cl-roll__char{transform:translateY(50%) rotateX(-90deg);opacity:0;transition-delay:calc(var(--i,0) * .02s + .1s)}
.cl-btn-roll:focus-visible .cl-roll__a .cl-roll__char,
.elementor-button:focus-visible .cl-roll__a .cl-roll__char{transform:translateY(-50%) rotateX(90deg);opacity:0}
.cl-btn-roll:focus-visible .cl-roll__b .cl-roll__char,
.elementor-button:focus-visible .cl-roll__b .cl-roll__char{transform:none;opacity:1}
@media (hover:hover) and (pointer:fine){
	.cl-btn-roll:hover .cl-roll__a .cl-roll__char,
	.elementor-button:hover .cl-roll__a .cl-roll__char{transform:translateY(-50%) rotateX(90deg);opacity:0}
	.cl-btn-roll:hover .cl-roll__b .cl-roll__char,
	.elementor-button:hover .cl-roll__b .cl-roll__char{transform:none;opacity:1}
}

/* ---------- sticker hover ring (cl_sticker widget): dash draws, sticker straightens ---------- */
.cl-sticker{transition:transform .5s var(--cl-ease,cubic-bezier(.23,1,.32,1))}
.cl-sticker__ring circle{stroke-dasharray:52;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--cl-ease,cubic-bezier(.23,1,.32,1))}
@media (hover:hover) and (pointer:fine){
	.cl-sticker:not(.cl-sticker--trail):hover{transform:rotate(0deg) scale(1.05)}
	.cl-sticker:not(.cl-sticker--trail):hover .cl-sticker__ring circle{stroke-dashoffset:104}
}
.cl-sticker--trail{transition:none}

/* ---------- m08: marquee (JS builds .cl-marquee__track > .cl-marquee__group x n; one group = one loop) ---------- */
@keyframes cl-marquee{to{transform:translate3d(calc(-100% / var(--cl-mq-n,2)),0,0)}}
.cl-marquee__track{display:flex;width:max-content;gap:0;padding-right:0;animation:cl-marquee var(--cl-mq-dur,24s) linear infinite;animation-play-state:paused}
.cl-marquee__group{display:inline-flex;flex:none;align-items:center;gap:2.4rem;padding-right:2.4rem}
.cl-marquee.is-running .cl-marquee__track{animation-play-state:running}

/* ---------- m14: strip modes ---------- */
.cl-strip--scrub{flex-wrap:nowrap;width:max-content;max-width:none;will-change:transform}
.cl-strip--snap{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;padding-block:2.4rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cl-strip--snap::-webkit-scrollbar{display:none}
.cl-strip--snap>*{flex:none;scroll-snap-align:center}
.cl-strip--static{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.cl-strip--static>*{flex:none}

/* ---------- title split helpers (m12) ---------- */
.cl-title__inner{display:inline}
.cl-word{display:inline-block;white-space:nowrap}
.cl-char{display:inline-block;will-change:transform,opacity}

/* ---------- m01: hero deck never paints outside its container ---------- */
html.cl-js:not(.cl-reduce) [data-motion="deck"]{overflow:clip}

/* ---------- m21: contact cards stack in one cell so the sequenced deal has a single stage ---------- */
html.cl-js:not(.cl-reduce) .cl-contact__cards{display:grid}
html.cl-js:not(.cl-reduce) .cl-contact__cards>.cl-contact__card{grid-area:1/1}

/* ---------- m16: footer cursor and stamps (theme sets size, ring and stamp box in style.css) ---------- */
.cl-footer__card{position:relative;overflow-x:clip}
.cl-footer-cursor{display:grid;place-items:center;will-change:transform}
.cl-footer-cursor__word{font:600 1.1rem/1 var(--cl-sans,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--cl-oxblood,#6e2a24)}
.cl-footer__card.has-cursor,.cl-footer__card.has-cursor *{cursor:none}
.cl-footer__card.has-cursor.is-over-link,.cl-footer__card.has-cursor.is-over-link a,.cl-footer__card.has-cursor.is-over-link button{cursor:pointer}
.cl-footer__card.is-over-link .cl-footer-cursor{opacity:0!important}
.cl-footer__stamp{will-change:transform,opacity;user-select:none;pointer-events:none}
html.cl-touch .cl-footer-cursor{display:none}

/* ---------- page change: sequenced fade (old out 0.15 s, new in after 0.15 s), never a crossfade ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:cl-vt-out .15s linear both;mix-blend-mode:normal}
::view-transition-new(root){animation:cl-vt-in .15s linear .15s both;mix-blend-mode:normal}
@keyframes cl-vt-out{to{opacity:0}}
@keyframes cl-vt-in{from{opacity:0}}

/* ---------- reduced motion: everything at rest ---------- */
html.cl-reduce .cl-marquee__track{animation:none!important}
html.cl-reduce .cl-falling{display:none!important}
html.cl-reduce .cl-footer-cursor{display:none}
@media (prefers-reduced-motion:reduce){
	@view-transition{navigation:none}
	.cl-marquee__track{animation:none!important}
	.cl-footer-cursor{display:none}
	.cl-sticker,.cl-sticker__ring circle,.cl-roll__char{transition:none}
}

/* ---------- scrubbed groups never widen the page (rotated cards, shifted columns) ---------- */
[data-motion="spread"],[data-motion="cols"],[data-motion="card-tilt"]{overflow-x:clip}