/* UMCIL site motion layer — works with site-motion.js (GSAP ScrollTrigger + Lenis).
   Only adds motion; the existing design, colours and layout are untouched. */

/* Lenis smooth scrolling */
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; }

/* Header: the menu row never gets its own background; the header gains depth once you scroll. */
header > nav { background-color: transparent !important; }
header.sm-header { transition: background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease, padding .45s ease, transform .45s cubic-bezier(.22,1,.36,1) !important; }
header.sm-header.sm-header-scrolled {
  background-color: rgba(20, 22, 25, .86) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
}
header.sm-header nav a { position: relative; }
header.sm-header nav a:not(.border-b-2)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #E8612D;
  transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22,1,.36,1);
}
header.sm-header nav a:not(.border-b-2):hover::after { transform: scaleX(1); transform-origin: left; }

/* Reading progress */
.sm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #E8612D, #ff8a4c 60%, #ffd2b8);
  transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 12px rgba(232, 97, 45, .6);
}

/* Split-text reveals */
.sm-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.sm-word { display: inline-block; will-change: transform; }

/* Elements animated through CSS variables keep their own hover transforms. */
.sm-var {
  translate: calc(var(--sm-x, 0px) + var(--sm-mx, 0px)) calc(var(--sm-y, 0px) + var(--sm-my, 0px));
  scale: var(--sm-s, 1);
}
/* While GSAP drives an element, CSS transitions on opacity/translate/scale would add lag. */
.sm-lock { transition-property: color, background-color, border-color, box-shadow, fill, stroke, text-decoration-color !important; }

/* Hero atmosphere */
.sm-hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.sm-hero-fx .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .32; will-change: transform; }
.sm-hero-fx .orb-a { width: 46vw; height: 46vw; left: -12vw; top: 10%; background: radial-gradient(circle, rgba(232,97,45,.55), transparent 65%); animation: sm-drift-a 18s ease-in-out infinite alternate; }
.sm-hero-fx .orb-b { width: 38vw; height: 38vw; right: -10vw; bottom: -8%; background: radial-gradient(circle, rgba(255,138,76,.45), transparent 65%); animation: sm-drift-b 22s ease-in-out infinite alternate; }
.sm-hero-fx .spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(232,97,45,.16), transparent 60%); transition: opacity .6s; }
.sm-hero-fx .grain {
  position: absolute; inset: -50%; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sm-grain 1.2s steps(6) infinite;
}
@keyframes sm-drift-a { to { transform: translate3d(14vw, 8vh, 0) scale(1.15); } }
@keyframes sm-drift-b { to { transform: translate3d(-12vw, -10vh, 0) scale(.9); } }
@keyframes sm-grain { 0% { transform: translate(0, 0); } 50% { transform: translate(-6%, 4%); } 100% { transform: translate(4%, -6%); } }

/* Card spotlight that follows the pointer */
.sm-spot { isolation: isolate; }
.sm-spot.sm-spot-pos { position: relative; }
.sm-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(232,97,45,.14), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.sm-spot:hover::after { opacity: 1; }
.sm-tilt { transform-style: preserve-3d; will-change: transform; }

/* Pinned process steps */
.sm-steps-progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: rgba(255,255,255,.08); z-index: 5; overflow: hidden; }
.sm-steps-progress span { display: block; height: 100%; background: linear-gradient(90deg, #E8612D, #ff9a63); transform: scaleX(0); transform-origin: left; }

/* Custom cursor ring (desktop pointers only) */
.sm-cursor { position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(232,97,45,.75); border-radius: 50%; pointer-events: none; z-index: 10002; opacity: 0; transition: opacity .3s, width .3s, height .3s, margin .3s, background-color .3s, border-color .3s; }
.sm-cursor.is-visible { opacity: 1; }
.sm-cursor.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(232,97,45,.18); border-color: rgba(232,97,45,.95); }

@media (prefers-reduced-motion: reduce) {
  .sm-hero-fx .orb, .sm-hero-fx .grain { animation: none; }
  .sm-progress { display: none; }
}