/* ==========================================================================
   DESCOL Fashion — motion layer (ADR-008)
   All "before" states live under html.dc-motion, which is only set when the visitor
   does not prefer reduced motion. Text is never faded (contrast stays AA at every
   frame): words rise out of a mask, blocks move, images are uncovered by a curtain.
   The hero/LCP image is visible from the first paint (it only settles in scale).
   ========================================================================== */

:root {
	--dc-ease-out: cubic-bezier(.16, 1, .3, 1);
	--dc-ease-io: cubic-bezier(.76, 0, .24, 1);
	--dc-intro-delay: 0s;
}
html.dc-intro { --dc-intro-delay: 1.25s; }

/* ---------------------------------------------------------------- Intro (first visit, homepage) */
.dc-introbox { display: none; }
html.dc-intro .dc-introbox {
	position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
	pointer-events: none;
	animation: dc-intro-out .95s var(--dc-ease-io) 1.05s forwards;
}
.dc-introbox__inner { text-align: center; }
.dc-introbox__name { display: flex; justify-content: center; margin: 0; overflow: hidden; font-family: var(--wp--preset--font-family--ui); font-size: clamp(16px, 2vw, 26px); font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.dc-introbox__name span { display: inline-block; translate: 0 110%; animation: dc-rise .8s var(--dc-ease-out) calc(.08s + var(--i) * 32ms) forwards; }
.dc-introbox__note { margin: 14px 0 0; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; clip-path: inset(0 100% 0 0); animation: dc-wipe .9s var(--dc-ease-io) .45s forwards; }
@keyframes dc-intro-out { to { translate: 0 -100%; visibility: hidden; } }
@keyframes dc-rise { to { translate: 0 0; } }
@keyframes dc-wipe { to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------- Split headings */
.dc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dc-w__i { display: inline-block; }
html.dc-motion .dc-w__i { translate: 0 108%; transition: translate 1.05s var(--dc-ease-out); transition-delay: calc(var(--dc-d, 0s) + var(--i, 0) * 45ms); }
html.dc-motion .is-in .dc-w__i, html.dc-motion .is-in.dc-w__i { translate: 0 0; }
/* Until a heading is split it stays hidden (JS runs before first interaction); failsafe if JS never runs. */
html.dc-motion :is(.dc-hero-split__title, .dc-split__title, .dc-section__title, .dc-plp__title, .dc-footer__wordmark):not(.is-split) { visibility: hidden; }
html.dc-motion:not(.dc-motion-live) :is(.dc-hero-split__title, .dc-split__title, .dc-section__title, .dc-plp__title, .dc-footer__wordmark) { animation: dc-show 0s linear 2.5s forwards; }
@keyframes dc-show { to { visibility: visible; } }
.dc-hero-split__title { --dc-d: calc(var(--dc-intro-delay) + .2s); }
.dc-hero-split__tile--b .dc-hero-split__title { --dc-d: calc(var(--dc-intro-delay) + .38s); }

/* ---------------------------------------------------------------- Hero: settle + parallax */
html.dc-motion .dc-hero-split .wp-block-cover__image-background,
html.dc-motion .dc-hero .wp-block-cover__image-background {
	translate: 0 var(--dc-py, 0px); scale: 1.12;
	animation: dc-settle 2.2s var(--dc-ease-out) var(--dc-intro-delay) both;
	will-change: translate;
}
@keyframes dc-settle { from { scale: 1.32; } to { scale: 1.12; } }
.dc-hero-split { position: relative; }
.dc-hero-split__cue-wrap { position: absolute; z-index: 3; inset-inline-end: var(--dc-gutter); bottom: clamp(24px, 3vw, 44px); margin: 0 !important; }
.dc-hero-split__cue {
	display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #fff;
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
	text-shadow: 0 1px 10px rgb(0 0 0 / .35);
}
.dc-hero-split__cue:hover { text-decoration: underline; text-underline-offset: 4px; }
.dc-hero-split__cue::after { content: ""; width: 1px; height: 40px; background: currentColor; transform-origin: top; animation: dc-cue 2.2s var(--dc-ease-io) infinite; }
@keyframes dc-cue { 0% { scale: 1 0; transform-origin: top; } 45% { scale: 1 1; transform-origin: top; } 55% { scale: 1 1; transform-origin: bottom; } 100% { scale: 1 0; transform-origin: bottom; } }
@media (max-width: 767px) { .dc-hero-split__cue-wrap { display: none; } }

/* ---------------------------------------------------------------- Image curtains */
html.dc-motion :is(.dc-split .wp-block-media-text__media, .dc-tiles__media, .dc-card .wc-block-components-product-image, .dc-pdp .dc-gallery__item:not(:first-child) .dc-gallery__zoom) { position: relative; overflow: hidden; }
html.dc-motion :is(.dc-split .wp-block-media-text__media, .dc-tiles__media, .dc-card .wc-block-components-product-image, .dc-pdp .dc-gallery__item:not(:first-child) .dc-gallery__zoom)::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: var(--wp--preset--color--surface);
	transform-origin: 50% 0; scale: 1 1;
	transition: scale 1.15s var(--dc-ease-io) var(--dc-d, 0s);
}
html.dc-motion :is(.dc-split.is-in .wp-block-media-text__media, .dc-tiles__item.is-in .dc-tiles__media, .dc-card.is-in .wc-block-components-product-image, .dc-pdp .dc-gallery__item.is-in .dc-gallery__zoom)::before { scale: 1 0; }
html.dc-motion :is(.dc-tiles__media, .dc-card .wc-block-components-product-image) img:not(.dc-card__alt) { scale: 1.14; transition: scale 1.6s var(--dc-ease-out) var(--dc-d, 0s); }
html.dc-motion :is(.dc-tiles__item.is-in .dc-tiles__media, .dc-card.is-in .wc-block-components-product-image) img:not(.dc-card__alt) { scale: 1; }
html.dc-motion .dc-split .wp-block-media-text__media img { translate: 0 var(--dc-py, 0px); scale: 1.12; will-change: translate; }
html.dc-motion:not(.dc-motion-live) :is(.dc-split .wp-block-media-text__media, .dc-tiles__media, .dc-card .wc-block-components-product-image)::before { animation: dc-uncover 0s linear 2.5s forwards; }
@keyframes dc-uncover { to { scale: 1 0; } }

/* ---------------------------------------------------------------- Blocks that rise (no fading) */
/* Never translate an element that contains position:fixed UI (e.g. the filter drawer in .dc-plp__bar):
   any translate makes it the containing block and the drawer would open inside it. */
html.dc-motion :is(.dc-split__text, .dc-split .wp-block-buttons, .dc-split__index, .dc-section__head .dc-link-arrow, .dc-usps__item, .dc-footer__cols > *, .dc-demo-notice--footer,
	.dc-card .wp-block-post-title, .dc-card .wc-block-components-product-price, .dc-card .dc-qa, .dc-card .wc-block-components-product-stock-indicator) {
	translate: 0 26px; transition: translate 1.1s var(--dc-ease-out) var(--dc-d, 0s);
}
html.dc-motion .dc-split :is(.dc-split__text, .wp-block-buttons) { transition-delay: .25s; }
html.dc-motion :is(.dc-split.is-in :is(.dc-split__text, .wp-block-buttons, .dc-split__index), .dc-section__head.is-in .dc-link-arrow, .dc-usps__item.is-in, .dc-footer__cols > .is-in, .dc-demo-notice--footer.is-in,
	.dc-card.is-in :is(.wp-block-post-title, .wc-block-components-product-price, .dc-qa, .wc-block-components-product-stock-indicator)) { translate: 0 0; }
html.dc-motion .dc-card.is-in .wc-block-components-product-price { transition-delay: calc(var(--dc-d, 0s) + .06s); }
html.dc-motion .dc-card.is-in .dc-qa { transition-delay: calc(var(--dc-d, 0s) + .12s); }

/* ---------------------------------------------------------------- Card hover: second image, lift */
.dc-card .wc-block-components-product-image a { display: block; position: relative; overflow: hidden; }
.dc-card .wc-block-components-product-image img { transition: scale .9s var(--dc-ease-out), opacity .6s var(--dc-ease-out); }
.dc-card__alt { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: 0; scale: 1.06; }
@media (hover: hover) {
	.dc-card:hover .dc-card__alt { opacity: 1; scale: 1; }
	.dc-card:hover .wc-block-components-product-image img:not(.dc-card__alt) { scale: 1.04; }
	.dc-tiles__link:hover img { scale: 1.05; }
}

/* ---------------------------------------------------------------- Smart header */
body.dc-sticky-header .wp-site-blocks > header.wp-block-template-part { transition: translate .6s var(--dc-ease-io); }
html.dc-hdr-up body.dc-sticky-header .wp-site-blocks > header.wp-block-template-part { translate: 0 -100%; }

/* ---------------------------------------------------------------- Magnetic controls */
html.dc-motion .dc-magnetic { translate: var(--dc-mx, 0px) var(--dc-my, 0px); transition: translate .55s var(--dc-ease-out), background-color var(--wp--custom--motion--fast, 120ms) linear, color var(--wp--custom--motion--fast, 120ms) linear; }

/* ---------------------------------------------------------------- Cursor follower (decorative) */
.dc-cursor {
	position: fixed; left: 0; top: 0; z-index: 99990; display: grid; place-items: center;
	width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
	background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0;
	translate: var(--x, -100px) var(--y, -100px);
	transition: width .45s var(--dc-ease-out), height .45s var(--dc-ease-out), margin .45s var(--dc-ease-out), background-color .3s, opacity .3s, scale .2s;
}
.dc-cursor.is-visible { opacity: 1; }
.dc-cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: transparent; box-shadow: inset 0 0 0 1px #fff; }
.dc-cursor.is-media { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--wp--preset--color--base); mix-blend-mode: normal; color: var(--wp--preset--color--contrast); box-shadow: 0 8px 28px rgb(0 0 0 / .18); }
.dc-cursor.is-down { scale: .85; }
.dc-cursor__label { font-family: var(--wp--preset--font-family--ui); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .25s; }
.dc-cursor.is-media .dc-cursor__label { opacity: 1; }
@media not (hover: hover) { .dc-cursor { display: none; } }

/* ---------------------------------------------------------------- Marquee */
.dc-marquee { position: relative; overflow: hidden; margin-block: clamp(48px, 6vw, 96px) 0 !important; padding-block: clamp(20px, 2.6vw, 36px); border-block: 1px solid var(--wp--preset--color--border); }
.dc-marquee__track { display: flex; width: max-content; }
html.dc-motion-live .dc-marquee__track { animation: dc-marquee 42s linear infinite; }
.dc-marquee.is-paused .dc-marquee__track, .dc-marquee:hover .dc-marquee__track { animation-play-state: paused; }
.dc-marquee__group { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.dc-marquee__item { display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); padding-inline-end: clamp(20px, 2.4vw, 40px); margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(36px, 5.4vw, 88px); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.dc-marquee__item::after { content: ""; width: .32em; height: .32em; border-radius: 50%; background: var(--wp--preset--color--contrast); }
.dc-marquee__item:nth-child(even) { color: var(--wp--preset--color--muted); }
.dc-marquee__toggle { position: absolute; z-index: 2; inset-inline-end: var(--dc-gutter); top: 50%; translate: 0 -50%; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wp--preset--color--border); border-radius: 50%; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); cursor: pointer; }
.dc-marquee__toggle .dc-i-play { display: none; }
.dc-marquee.is-paused .dc-marquee__toggle .dc-i-play { display: block; }
.dc-marquee.is-paused .dc-marquee__toggle .dc-i-pause { display: none; }
@keyframes dc-marquee { to { translate: -50% 0; } }

/* ---------------------------------------------------------------- Footer wordmark */
.dc-footer__wordmark { margin: clamp(48px, 6vw, 96px) 0 0 !important; overflow: hidden; font-family: var(--wp--preset--font-family--display); font-size: clamp(56px, 13.2vw, 260px); font-weight: 400; line-height: .9; letter-spacing: -0.045em; white-space: nowrap; color: var(--wp--preset--color--contrast); }

/* ---------------------------------------------------------------- Page transitions (cross-document) */
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: dc-vt-out .38s var(--dc-ease-io) both; }
	::view-transition-new(root) { animation: dc-vt-in .75s var(--dc-ease-out) both; }
	::view-transition-group(dc-product) { animation-duration: .75s; animation-timing-function: var(--dc-ease-io); }
	::view-transition-group(dc-header) { animation: none; }
	.dc-header { view-transition-name: dc-header; }
	.dc-pdp .dc-gallery__item:first-child img { view-transition-name: dc-product; }
}
@keyframes dc-vt-out { to { opacity: 0; translate: 0 -18px; } }
@keyframes dc-vt-in { from { opacity: 0; translate: 0 28px; } }

/* ---------------------------------------------------------------- Reduced motion: everything static */
@media (prefers-reduced-motion: reduce) {
	.dc-introbox { display: none !important; }
	.dc-marquee__track { animation: none !important; }
	.dc-marquee__toggle { display: none; }
	.dc-hero-split__cue::after { animation: none; }
	.dc-card__alt { transition: none; }
}
html.dc-motion .dc-reveal { animation: none; } /* the motion layer takes over from the core scroll-driven reveal */
