/* ============ MAECHULUTION — motion / dynamic layer ============ */

/* ---- scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-700));
  z-index: 60;
  transition: width .08s linear;
  pointer-events: none;
}

/* ---- hero drifting blobs ---- */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-fx .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .55;
  will-change: transform;
}
.hero-fx .b1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -12%; right: -6%;
  background: radial-gradient(circle at 35% 35%, var(--blue-tint-2), transparent 70%);
  animation: drift1 18s ease-in-out infinite;
}
.hero-fx .b2 {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  bottom: -14%; left: -4%;
  background: radial-gradient(circle at 50% 50%, var(--blue-tint), transparent 68%);
  animation: drift2 22s ease-in-out infinite;
}
@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-5%, 6%) scale(1.08); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(6%, -5%) scale(1.12); }
}

/* ---- hero headline kinetic reveal (split-word blur-up) ---- */
.hero h1.hero-title { overflow: visible; }
.hero-kinetic .hl-line { display: block; }
.hero-kinetic .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(14px);
  transition: opacity .7s var(--ease), transform .85s var(--ease), filter .7s ease;
  transition-delay: var(--w, 0ms);
  will-change: transform, filter, opacity;
}
/* neutralise the generic fade on the title itself */
.hero h1.hero-title[data-reveal] { opacity: 1; transform: none; }
.hero-kinetic.is-in .word { opacity: 1; transform: none; filter: blur(0); }

/* ---- intro headline clip reveal (matches hero) ---- */
.intro-eng.intro-reveal { overflow: visible; }
/* neutralise the generic fade so only the line-clip plays */
.intro-eng.intro-reveal[data-reveal] { opacity: 1; transform: none; }
.intro-reveal .line { display: block; overflow: hidden; padding-bottom: .12em; }
.intro-reveal .line-in {
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  transition-delay: var(--line-delay, 0ms);
  will-change: transform;
}
.intro-reveal.is-in .line-in { transform: translateY(0); }
html.no-motion .intro-reveal .line-in { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .intro-reveal .line-in { transform: none !important; transition: none !important; }
}

/* ---- keyword marquee band ---- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  --marquee-dur: 32s;
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  animation: marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.marquee-track span.ghost {
  color: transparent;
  -webkit-text-stroke: 1.3px var(--line-strong);
}
.marquee-track i {
  flex: none;
  width: clamp(8px, 1.2vw, 13px);
  height: clamp(8px, 1.2vw, 13px);
  border-radius: 50%;
  background: var(--blue);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- richer card reveal (translate + scale, with stagger) ---- */
.diff-card[data-reveal],
.svc-card[data-reveal],
.sys-item[data-reveal],
.num-item[data-reveal],
.proc-step[data-reveal],
.chip { will-change: transform, opacity; }

.diff-card[data-reveal],
.svc-card[data-reveal],
.sys-item[data-reveal] {
  transform: translateY(40px) scale(.965);
}
.diff-card[data-reveal].is-in,
.svc-card[data-reveal].is-in,
.sys-item[data-reveal].is-in {
  transform: none;
}

/* ---- per-section signature motion (driven by .is-in) ---- */

/* kicker dash draws in across every section */
.kicker[data-reveal]::before {
  width: 0;
  transition: width .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.kicker[data-reveal].is-in::before { width: 26px; }

/* card icons pop with a spring once the card has risen in */
.diff-card[data-reveal] .ic,
.svc-card[data-reveal] .svc-ic {
  opacity: 0;
  transform: scale(.55) rotate(-9deg);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
  transition-delay: calc(var(--reveal-delay, 0ms) + 220ms);
  transform-origin: 30% 70%;
}
.diff-card.is-in .ic,
.svc-card.is-in .svc-ic { opacity: 1; transform: none; }

/* numbers: blue accent rule sweeps across the top divider */
.num-item { position: relative; }
.num-item[data-reveal]::after {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  height: 2px; width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
.num-item[data-reveal].is-in::after { transform: scaleX(1); }

/* process: step badge pops in */
.proc-step[data-reveal] .step-no {
  opacity: 0;
  transform: scale(.4);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
  transition-delay: calc(var(--reveal-delay, 0ms) + 150ms);
}
.proc-step.is-in .step-no { opacity: 1; transform: none; }

/* keep everything visible when motion is off */
html.no-motion .kicker[data-reveal]::before { width: 26px; transition: none; }
html.no-motion .diff-card .ic,
html.no-motion .svc-card .svc-ic,
html.no-motion .proc-step .step-no { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-motion .num-item[data-reveal]::after { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .kicker[data-reveal]::before { width: 26px !important; transition: none !important; }
  .diff-card .ic,
  .svc-card .svc-ic,
  .proc-step .step-no { opacity: 1 !important; transform: none !important; transition: none !important; }
  .num-item[data-reveal]::after { transform: scaleX(1) !important; transition: none !important; }
}

/* chips pop in one-by-one once their block reveals */
.field-block.is-in .chip {
  animation: chipIn .55s var(--ease) backwards;
}
.field-block.is-in .chip:nth-child(1) { animation-delay: .05s; }
.field-block.is-in .chip:nth-child(2) { animation-delay: .12s; }
.field-block.is-in .chip:nth-child(3) { animation-delay: .19s; }
.field-block.is-in .chip:nth-child(4) { animation-delay: .26s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---- pointer tilt ---- */
.tiltable { transform-style: preserve-3d; }
.tiltable.tilting { transition: transform .12s ease-out !important; }

/* ---- CTA shimmer ---- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: none;
}
.btn--primary:hover::after { animation: shine .8s var(--ease); }
@keyframes shine { to { left: 140%; } }

/* ---- respect reduced motion / tweaks toggle ---- */
html.no-motion .hero-fx .blob,
html.no-motion .marquee-track,
html.no-motion .field-block.is-in .chip { animation: none !important; }
html.no-motion .marquee-track { transform: none; }
html.no-motion .hero-kinetic .word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
html.no-motion .scroll-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-fx .blob,
  .marquee-track,
  .field-block.is-in .chip,
  .btn--primary:hover::after { animation: none !important; }
  .marquee-track { transform: none; }
  .hero-kinetic .word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}