/* =====================================================================
   motion.css — the site-wide motion system (pass 5).
   Pairs with js/motion.js. Every effect here:
     · is transform / opacity / clip-path only (no layout, no CLS),
     · uses the easing + duration tokens from brand.css,
     · collapses under prefers-reduced-motion (the tokens go to 0ms and the
       block at the bottom removes what tokens cannot),
     · is gated on html.has-js where it hides anything, so the page reads
       with JS off.
   Hooks (set by motion.js):
     .yc-reveal.is-visible          existing reveal (site.js) — variants below build on it
     .yc-head2 h2.yc-clip > span    clip-reveal for section headings
     .yc-prow.is-visible            mask-wipe on the product media
     [data-magnet] --mx/--my        magnetic buttons (fine pointers only)
     .yc-band--ink[data-glow] --gx/--gy/--go   cursor glow on ink sections
     .in-view                       illustrations run only in view
     .yc-scrollbar --p              header progress (animation-timeline where supported)
     .yc-segnav__ind --tx/--tw      sliding nav underline
     .yc-toast.is-on                toast; .yc-totop.is-on back-to-top; .yc-whatsapp.is-pulse
     html.is-leaving                fallback page fade for browsers without cross-document view transitions
   ===================================================================== */

/* ---------------------------------------------------------------- reveal variants */
/* Clip reveal: motion.js wraps the h2 text in a span; the span rises through a clip that
   already sits on the h2 (with room for ascenders/descenders), so the mask never moves. */
html.has-js .yc-head2.yc-reveal h2.yc-clip { clip-path: inset(-.15em 0 -.25em 0); }
html.has-js .yc-head2.yc-reveal h2.yc-clip > span { display: inline-block; transform: translateY(112%); transition: transform var(--yc-dur-reveal) var(--yc-ease-out) 40ms; will-change: transform; }
html.has-js .yc-head2.yc-reveal.is-visible h2.yc-clip > span { transform: none; will-change: auto; }
html.has-js .yc-head2.yc-reveal > p { transition-delay: 160ms; }

/* Mask wipe: an image (or a whole media block) is unveiled from the inline-start edge.
   Negative insets leave room for the device shadow and glow, which would otherwise be clipped. */
html.has-js .yc-reveal--wipe, html.has-js .yc-prow.yc-reveal .yc-prow__media { clip-path: inset(-40% -20% -40% 100%); transition: clip-path var(--yc-dur-reveal) var(--yc-ease-out) 120ms; }
html.has-js [dir="rtl"] .yc-reveal--wipe, html.has-js [dir="rtl"] .yc-prow.yc-reveal .yc-prow__media { clip-path: inset(-40% 100% -40% -20%); }
html.has-js .yc-reveal--wipe.is-visible, html.has-js .yc-reveal.is-visible .yc-reveal--wipe, html.has-js .yc-prow.yc-reveal.is-visible .yc-prow__media { clip-path: inset(-40% -20% -40% -20%); }
html.has-js .yc-prow.yc-reveal .yc-prow__media { opacity: 1; transform: none; }

/* Stagger on any reveal parent that asks for it (site.js numbers the children with --i) */
html.has-js .yc-reveal[data-stagger] > * { transition-delay: calc(var(--i, 0) * var(--yc-stagger)); }

/* ---------------------------------------------------------------- scroll-linked */
/* Reading progress under the header. Scroll-driven animation where the browser has it;
   motion.js writes --p only when it does not. */
.yc-scrollbar { position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 100%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, var(--yc-blue), var(--yc-blue-300)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; }
[dir="rtl"] .yc-scrollbar { transform-origin: 100% 50%; }
.yc-nav:not(.is-scrolled) .yc-scrollbar { opacity: 0; }
@supports (animation-timeline: scroll()) {
  .yc-scrollbar { transform: none; animation: yc-grow-x linear both; animation-timeline: scroll(root); }
  @keyframes yc-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------------------------------------------------------------- magnetic buttons */
html.has-js .btn-yc[data-magnet] { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0); transition: transform var(--yc-dur) var(--yc-ease-magnet), background-color var(--yc-dur), color var(--yc-dur), border-color var(--yc-dur), box-shadow var(--yc-dur); }
html.has-js .btn-yc[data-magnet]:hover { --lift: -1px; }
html.has-js .btn-yc[data-magnet].is-magnet { transition-duration: 60ms; }
/* The focus ring must never sit somewhere other than the button: keyboard focus pins it home. */
html.has-js .btn-yc[data-magnet]:focus-visible { --mx: 0px; --my: 0px; --lift: 0px; transition-duration: var(--yc-dur-fast); }
.btn-yc { transition-timing-function: var(--yc-ease-spring); }
.btn-yc:active { transform: scale(.975) !important; transition-duration: 80ms; }

/* ---------------------------------------------------------------- cursor glow on ink */
.yc-band--ink { position: relative; isolation: isolate; }
html.has-js .yc-band--ink[data-glow]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--go, 0); transition: opacity var(--yc-dur-slow) var(--yc-ease);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--yc-blue) 22%, transparent), transparent 62%); }

/* ---------------------------------------------------------------- micro-interactions */
/* Link underline slides in from the inline-start (::before, because ::before is free on .yc-link —
   card links use ::after as their hit-area overlay). */
.yc-link { position: relative; }
.yc-link::before { content: ""; position: absolute; inset-inline: 0 22px; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--yc-dur) var(--yc-ease-out); pointer-events: none; }
[dir="rtl"] .yc-link::before { transform-origin: 100% 50%; }
.yc-link:hover::before, .yc-link:focus-visible::before { transform: scaleX(1); }
.yc-footer__col a, .yc-breadcrumb a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--yc-dur) var(--yc-ease-out), color var(--yc-dur); }
[dir="rtl"] .yc-footer__col a, [dir="rtl"] .yc-breadcrumb a { background-position: 100% 100%; }
.yc-footer__col a:hover, .yc-breadcrumb a:hover { background-size: 100% 1px; }
@media (max-width: 960px) { .yc-footer__col a { background-image: none; } }

/* Sliding indicator: an underline that travels between the products segmented-nav links.
   Positioned by motion.js; hidden until it has a position. */
.yc-segnav__seg { position: relative; }
.yc-segnav__ind { position: absolute; bottom: -1px; inset-inline-start: 0; height: 2px; width: var(--tw, 0px); transform: translateX(var(--tx, 0px)); background: var(--yc-text); opacity: 0; transition: transform var(--yc-dur-slow) var(--yc-ease-spring), width var(--yc-dur-slow) var(--yc-ease-out), opacity var(--yc-dur); pointer-events: none; }
.yc-segnav__ind.is-on { opacity: 1; }
.yc-segnav__seg a { position: relative; z-index: 1; }
html.has-js .yc-segnav__seg.has-ind a.is-active::after { opacity: 0; }

/* Accordion icon: the existing 45° rotation gets the spring */
.yc-faq__item .ic { transition-timing-function: var(--yc-ease-spring); }

/* Form focus glow: the ring breathes in, the label follows */
.yc-field { transition: transform var(--yc-dur) var(--yc-ease); }
.yc-field:focus-within label { color: var(--yc-blue); }
.yc-field input:focus, .yc-field textarea:focus, .yc-field select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yc-blue) 18%, transparent), 0 0 28px -4px color-mix(in srgb, var(--yc-blue) 35%, transparent); transition: box-shadow var(--yc-dur-slow) var(--yc-ease-out), border-color var(--yc-dur); }

/* Toast (aria-live region lives in the layout; motion.js fills it) */
.yc-toast { position: fixed; inset-inline: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 950; display: flex; justify-content: center; pointer-events: none; }
.yc-toast__in { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--yc-radius-sm); background: var(--yc-text); color: var(--yc-bg); font-size: var(--yc-fs-sm); font-weight: 600; box-shadow: var(--yc-shadow-lg); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity var(--yc-dur) var(--yc-ease), transform var(--yc-dur-slow) var(--yc-ease-spring); }
.yc-toast__in svg { width: 16px; height: 16px; color: var(--yc-green); flex: none; }
.yc-toast.is-on .yc-toast__in { opacity: 1; transform: none; }

/* WhatsApp FAB: two attention pulses, once per session, a few seconds after load */
.yc-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; opacity: 0; pointer-events: none; }
.yc-whatsapp.is-pulse::before { animation: yc-wa-pulse 1.5s var(--yc-ease-out) 2; }
@keyframes yc-wa-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* Back to top: appears after two viewports, on the side opposite the WhatsApp FAB */
.yc-totop { position: fixed; inset-inline-start: 22px; inset-block-end: 22px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--yc-line-strong); background: var(--yc-surface); color: var(--yc-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--yc-shadow); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity var(--yc-dur) var(--yc-ease), transform var(--yc-dur-slow) var(--yc-ease-spring), background-color var(--yc-dur), color var(--yc-dur), border-color var(--yc-dur); }
.yc-totop svg { width: 18px; height: 18px; }
.yc-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.yc-totop:hover { background: var(--yc-text); color: var(--yc-bg); border-color: var(--yc-text); }
.yc-totop:focus-visible { outline: none; box-shadow: var(--yc-focus); opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 480px) { .yc-totop { inset-inline-start: 16px; inset-block-end: 16px; } } /* stays 44px: it is a tap target */
body.menu-open .yc-totop { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- 3D depth */
/* Device frames: a resting depth shadow with a top-edge highlight, and a specular sweep that
   crosses the glass once when the row (or the frame) is hovered. */
.yc-device--float, .yc-device--hero { position: relative; }
.yc-device--float { box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 30px 60px -22px color-mix(in srgb, var(--yc-ink) 34%, transparent), 0 12px 24px -12px color-mix(in srgb, var(--yc-ink) 22%, transparent); }
.yc-device--float::after, .yc-device--hero::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,.22) 44%, rgba(255,255,255,.06) 50%, transparent 60%); transform: translateX(-130%); opacity: 0; }
.yc-prow:hover .yc-device--float::after, .yc-device--hero:hover::after, .yc-pdhero__stage:hover .yc-device--hero::after { animation: yc-sweep 1.15s var(--yc-ease-out) 1 both; }
@keyframes yc-sweep { 0% { transform: translateX(-130%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
[dir="rtl"] .yc-prow:hover .yc-device--float::after, [dir="rtl"] .yc-device--hero:hover::after, [dir="rtl"] .yc-pdhero__stage:hover .yc-device--hero::after { animation-name: yc-sweep-rtl; }
@keyframes yc-sweep-rtl { 0% { transform: translateX(130%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(-130%); opacity: 0; } }

/* Industry tilt cards: the light source follows the pointer (--lx/--ly in -1..1 from
   js/3d/industries.js), so the shadow falls away from it and the icon's drop shadow leans. */
.yk3d-tilt { --lx: 0; --ly: 0; }
.yk3d-tilt.is-tilting:hover { box-shadow: calc(var(--lx) * -18px) calc(var(--ly) * -18px + 24px) 48px -16px color-mix(in srgb, var(--yc-ink) 30%, transparent), 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset; }
.yk3d-tilt.is-tilting:hover .yc-ind__ic, .yk3d-tilt.is-tilting:hover .yk3d-ind__icon { filter: drop-shadow(calc(var(--lx) * -10px) calc(var(--ly) * -10px + 8px) 12px color-mix(in srgb, var(--yc-ink) 24%, transparent)); }
.yk3d-tilt .yc-ind__ic, .yk3d-tilt .yk3d-ind__icon { transition: filter var(--yc-dur-slow) var(--yc-ease), transform var(--yc-dur-slow) var(--yc-ease); }
.yk3d-tilt::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity var(--yc-dur-slow);
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--yc-blue) 14%, transparent), transparent 70%); }
.yk3d-tilt.is-tilting:hover::before { opacity: 1; }

/* Products index: the fallback labels of the assembling stack stagger in like the slabs do */
html.has-js .yk3d[data-yk3d-assemble]:not(.is-live) .yk3d__label { opacity: 0; transform: translateY(10px); animation: yc-label-in var(--yc-dur-slow) var(--yc-ease-out) forwards; animation-delay: calc(.35s + var(--i, 0) * 120ms); }
@keyframes yc-label-in { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- page transitions */
/* Shared element: the product screenshot travels from the index row (or a mega-menu card) into
   the product hero. Names are assigned at navigation time by motion.js (pageswap / pagereveal),
   so only the pair involved in this navigation carries one. Header is pinned by site.css. */
::view-transition-group(yc-pshot) { animation-duration: 460ms; animation-timing-function: var(--yc-ease-out); }
::view-transition-image-pair(yc-pshot) { isolation: isolate; border-radius: var(--yc-radius-lg); overflow: hidden; }
::view-transition-old(yc-pshot), ::view-transition-new(yc-pshot) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; }
::view-transition-old(yc-pshot) { opacity: 0; }
/* Fallback fade for browsers without cross-document view transitions (motion.js adds the class
   on an internal link click; pageshow removes it, so bfcache returns are clean). */
html.is-leaving main, html.is-leaving .yc-footer { opacity: 0; transition: opacity 160ms var(--yc-ease-in); }

/* ---------------------------------------------------------------- performance */
/* Long below-the-fold sections skip layout and paint until they approach the viewport. Reveal
   observers still fire (the boxes keep their reserved size), and anchors still scroll. */
main > section:nth-child(n+5), main > .yc-pd > section:nth-child(n+4), .yc-footer { content-visibility: auto; contain-intrinsic-size: auto 720px; }
main > section:target, main > .yc-pd > section:target { content-visibility: visible; }
/* Focus must never be hidden behind a transform: any transformed element with focus inside
   drops its 3D tilt so the ring is flat and visible. */
[data-tilt]:focus-within { --rx: 0deg !important; --ry: 0deg !important; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.has-js .yc-head2.yc-reveal h2.yc-clip { clip-path: none; }
  html.has-js .yc-head2.yc-reveal h2.yc-clip > span { transform: none; transition: none; }
  html.has-js .yc-reveal--wipe, html.has-js .yc-prow.yc-reveal .yc-prow__media, html.has-js [dir="rtl"] .yc-reveal--wipe, html.has-js [dir="rtl"] .yc-prow.yc-reveal .yc-prow__media { clip-path: none; transition: none; }
  .yc-scrollbar { animation: none !important; transform: none !important; }
  html.has-js .btn-yc[data-magnet] { transform: none !important; }
  .btn-yc:active { transform: none !important; }
  html.has-js .yc-band--ink[data-glow]::after { display: none; }
  .yc-link::before, .yc-footer__col a, .yc-breadcrumb a { transition: none; }
  .yc-segnav__ind, .yc-toast__in, .yc-totop, .yc-field, .yc-field input, .yc-field textarea { transition: none; }
  .yc-whatsapp.is-pulse::before, .yc-device--float::after, .yc-device--hero::after, html.has-js .yk3d[data-yk3d-assemble]:not(.is-live) .yk3d__label { animation: none !important; opacity: 1; transform: none; }
  html.is-leaving main, html.is-leaving .yc-footer { opacity: 1; transition: none; }
  ::view-transition-group(yc-pshot), ::view-transition-old(yc-pshot), ::view-transition-new(yc-pshot) { animation: none !important; }
}