/* ==========================================================================
   OzTechVerse – animation layer
   Rules: only transform + opacity are animated for reveals, 400–900ms, ease-out,
   once only. Hidden start-states apply ONLY when JS has added .anim-ready to
   <html>, so content is always visible without JavaScript.
   ========================================================================== */

:root { --dur: 700ms; --stagger: 90ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }
html[data-anim-speed="slow"] { --dur: 900ms; --stagger: 120ms; }
html[data-anim-speed="fast"] { --dur: 450ms; --stagger: 60ms; }

/* ---------- Scroll reveal ---------- */
.anim-ready [data-anim] { --reveal-from: translate3d(0, 40px, 0); }
.anim-ready [data-anim="fade-left"] { --reveal-from: translate3d(48px, 0, 0); }
.anim-ready [data-anim="fade-right"] { --reveal-from: translate3d(-48px, 0, 0); }
.anim-ready [data-anim="zoom-in"] { --reveal-from: scale(.86); }
.anim-ready [data-anim="flip-up"] { --reveal-from: perspective(900px) rotateX(-28deg) translate3d(0, 30px, 0); }
.anim-ready [data-anim] [data-from="fade-up"] { --reveal-from: translate3d(0, 40px, 0); }
.anim-ready [data-anim] [data-from="fade-left"] { --reveal-from: translate3d(48px, 0, 0); }
.anim-ready [data-anim] [data-from="fade-right"] { --reveal-from: translate3d(-48px, 0, 0); }
.anim-ready [data-anim] [data-from="zoom-in"] { --reveal-from: scale(.86); }
/* Section-level type wins over the partial's suggestion when the admin picks zoom/flip */
.anim-ready [data-anim="zoom-in"] [data-from] { --reveal-from: scale(.86); }
.anim-ready [data-anim="flip-up"] [data-from] { --reveal-from: perspective(900px) rotateX(-28deg) translate3d(0, 30px, 0); }

.anim-ready [data-anim] [data-reveal] {
  opacity: 0;
  transform: var(--reveal-from);
  transform-origin: 50% 100%;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.anim-ready [data-anim] [data-reveal].is-in { opacity: 1; transform: none; }
/* tilt cards keep their JS transform once revealed */
.anim-ready [data-anim] [data-reveal].is-in.tilt-card { transition: opacity var(--dur) var(--ease-out), transform .45s var(--ease-out), box-shadow .45s, border-color .35s; }

/* Section heads: label slides in, title fades up, underline draws itself */
.anim-ready [data-anim] .section-head[data-reveal] { opacity: 1; transform: none; }
.anim-ready [data-anim] .section-head .eyebrow { opacity: 0; transform: translate3d(-30px, 0, 0); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.anim-ready [data-anim] .section-head--center .eyebrow { transform: translate3d(0, -14px, 0); }
.anim-ready [data-anim] .section-head .section-title { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--dur) var(--ease-out) 100ms, transform var(--dur) var(--ease-out) 100ms; }
.anim-ready [data-anim] .section-head .section-lead { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--dur) var(--ease-out) 220ms, transform var(--dur) var(--ease-out) 220ms; }
.anim-ready [data-anim] .title-line { transform: scaleX(0); transition: transform 900ms var(--ease-out) 300ms; }
.anim-ready [data-anim] .is-in .eyebrow, .anim-ready [data-anim] .is-in .section-title, .anim-ready [data-anim] .is-in .section-lead { opacity: 1; transform: none; }
.anim-ready [data-anim] .is-in .title-line, .anim-ready [data-anim] .is-in.title-line { transform: scaleX(1); }

/* Process / timeline: line draws on scroll, markers pop in one by one */
.anim-ready [data-anim] [data-timeline] .process-line-fill { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .2s; }
.anim-ready [data-anim] [data-timeline].is-drawn .process-line-fill { transform: scaleX(1); }
.anim-ready [data-anim] .process-step[data-reveal] .process-marker { transform: scale(0); transition: transform 600ms var(--ease-back); transition-delay: inherit; }
.anim-ready [data-anim] .process-step[data-reveal].is-in .process-marker { transform: none; }

/* Star ratings fill in when visible */
.anim-ready [data-anim] [data-carousel] .stars-fill { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) .3s; }
.anim-ready [data-anim] [data-carousel].is-in .stars-fill { clip-path: inset(0 calc(100% - var(--rating, 5) * 20%) 0 0); }

/* Chips cascade */
.anim-ready [data-anim] .chip-list li { opacity: 0; transform: translate3d(0, 12px, 0) scale(.96); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), border-color .3s, color .3s; transition-delay: calc(var(--i, 0) * 45ms + 200ms); }
.anim-ready [data-anim] .is-in .chip-list li { opacity: 1; transform: none; }

/* ---------- Hero entrance (on load) ---------- */
.anim-ready .hero-seq { animation: heroUp var(--dur) var(--ease-out) both; animation-delay: calc(var(--seq, 0) * 120ms + 150ms); }
@keyframes heroUp { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
/* The intro paragraph is usually the Largest Contentful Paint element:
   it slides in with transform only so it is visible from the first paint. */
.anim-ready .hero-text.hero-seq, .anim-ready .page-hero-text.hero-seq { animation-name: heroSlide; animation-delay: 0ms; }
@keyframes heroSlide { from { transform: translate3d(0, 22px, 0); } to { transform: none; } }
.anim-ready [data-split]:not(.is-split) { opacity: 0; }
[data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .word-inner { display: inline-block; }
.anim-ready [data-split].is-split .word-inner { animation: wordUp 800ms var(--ease-out) both; animation-delay: calc(var(--w, 0) * 70ms + 120ms); }
@keyframes wordUp { from { opacity: 0; transform: translate3d(0, 105%, 0) rotate(4deg); } to { opacity: 1; transform: none; } }

/* Header slides down on load */
.anim-ready .site-header { animation: headerIn 800ms var(--ease-out) .2s both; }
@keyframes headerIn { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.anim-ready .site-header.is-scrolled { animation: none; }

/* ---------- Hero background ---------- */
/* Grid drift uses transform (composited) instead of background-position (repaints). */
.hero-bg { inset: -44px 0 0 -44px; animation: gridDrift 40s linear infinite; }
@keyframes gridDrift { to { transform: translate3d(44px, 44px, 0); } }
.hero-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; opacity: .55; }
.blob--1 { width: 460px; height: 460px; right: -80px; top: -120px; background: radial-gradient(circle, rgba(7, 149, 245, .45), transparent 70%); animation: blobA 18s ease-in-out infinite alternate; }
.blob--2 { width: 380px; height: 380px; left: -120px; bottom: -140px; background: radial-gradient(circle, rgba(23, 105, 224, .32), transparent 70%); animation: blobB 22s ease-in-out infinite alternate; }
.blob--3 { width: 300px; height: 300px; left: 38%; top: 30%; background: radial-gradient(circle, rgba(140, 196, 255, .35), transparent 70%); animation: blobC 26s ease-in-out infinite alternate; }
.hero-blobs--soft .blob { opacity: .35; }
@keyframes blobA { to { transform: translate3d(-120px, 90px, 0) scale(1.15); } }
@keyframes blobB { to { transform: translate3d(140px, -70px, 0) scale(1.2); } }
@keyframes blobC { to { transform: translate3d(-80px, -60px, 0) scale(.85); } }

.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shape { position: absolute; display: block; transition: transform .6s var(--ease-out); }
.shape::before { content: ""; position: absolute; inset: 0; animation: shapeFloat 9s ease-in-out infinite; }
.shape--ring { left: 6%; top: 18%; width: 46px; height: 46px; }
.shape--ring::before { border: 3px solid rgba(23, 105, 224, .25); border-radius: 50%; }
.shape--square { left: 44%; top: 10%; width: 22px; height: 22px; }
.shape--square::before { border: 2.5px solid rgba(7, 149, 245, .35); border-radius: 5px; animation: shapeSpin 14s linear infinite; }
.shape--tri { left: 3%; bottom: 16%; width: 0; height: 0; }
.shape--tri::before { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid rgba(23, 105, 224, .18); animation-duration: 11s; }
.shape--dot { right: 5%; bottom: 12%; width: 14px; height: 14px; }
.shape--dot::before { border-radius: 50%; background: rgba(7, 149, 245, .4); animation-duration: 7s; }
.shape--plus { right: 46%; bottom: 8%; width: 20px; height: 20px; }
.shape--plus::before { background: linear-gradient(rgba(23, 105, 224, .35), rgba(23, 105, 224, .35)) center / 100% 3px no-repeat, linear-gradient(rgba(23, 105, 224, .35), rgba(23, 105, 224, .35)) center / 3px 100% no-repeat; animation: shapeSpin 12s linear infinite reverse; }
@keyframes shapeFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0) rotate(12deg); } }
@keyframes shapeSpin { to { transform: rotate(360deg); } }

/* Floating hero illustration */
.hero-float { animation: floaty 7s ease-in-out infinite; will-change: transform; }
@keyframes floaty { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
[data-parallax-item] { transition: transform .8s var(--ease-out); }

/* Reference diagram animations */
.hv-flow { animation: flow 2.2s linear infinite; opacity: .75; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.hv-orbit { transform-origin: 280px 240px; animation: spin 80s linear infinite; }
.hv-orbit-dot { transform-origin: 280px 240px; animation: spin 14s linear infinite; }
.hv-node { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hv-bar { transform-box: fill-box; transform-origin: bottom; animation: grow .9s var(--ease-out) both; animation-delay: calc(var(--d) + .8s); }
@keyframes grow { from { transform: scaleY(0); } }
.hv-trend { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawStroke 1.4s var(--ease-out) 1.3s forwards; }
.hv-chip { animation: bob 7s ease-in-out infinite; }
.hv-blink { animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hv-pulse { transform-box: fill-box; transform-origin: center; animation: pulseDot 2.4s ease-in-out infinite 2.5s; }
@keyframes pulseDot { 50% { transform: scale(1.5); } }
.hv-glow { transform-origin: 280px 240px; animation: glow 6s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.12); opacity: .6; } }

.hero-scroll span { animation: scrollDot 1.8s var(--ease-out) infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Typing caret */
.typed-caret { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Marquees ---------- */
.marquee-track { animation: marquee 45s linear infinite; }
.marquee-track--slow { animation-duration: 60s; animation-direction: reverse; }
.marquee:hover .marquee-track, .tech-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Floating tags + workflow drip */
.float-tag { animation: bob 6s ease-in-out infinite; }
.float-tag--2 { animation-delay: -2s; }
.float-tag--3 { animation-delay: -4s; }
.workflow-step:not(:last-child)::after { animation: drip 1s linear infinite; }
@keyframes drip { to { background-position: 0 8px; } }
.device-phone { animation: floaty 8s ease-in-out infinite -2s; }

/* ---------- Cards ---------- */
.tilt-card { transform-style: preserve-3d; }
.tilt-card:hover, .anim-ready [data-anim] [data-reveal].is-in.tilt-card:hover { transform: translate3d(0, -6px, 0); }
.tilt-card.is-tilting { transition: transform .12s linear, box-shadow .45s, border-color .35s !important; }
.tilt-card:hover .icon-bounce { animation: iconBounce .8s var(--ease-back); }
@keyframes iconBounce { 0% { transform: none; } 30% { transform: translateY(-8px) rotate(-10deg) scale(1.08); } 60% { transform: translateY(0) rotate(6deg); } 100% { transform: none; } }

/* Solutions glow pulse */
.solutions-glow { animation: glowPulse 8s ease-in-out infinite; }
@keyframes glowPulse { 50% { transform: scale(1.18); opacity: .7; } }

/* ---------- Buttons: shine, ripple, magnetic ---------- */
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg) translate3d(0, 0, 0); transition: transform .8s var(--ease-out); pointer-events: none; }
.btn:hover::before { transform: skewX(-20deg) translate3d(380%, 0, 0); }
.btn-outline::before, .btn-white::before { background: linear-gradient(100deg, transparent, rgba(23, 105, 224, .16), transparent); }
.ripple { position: absolute; z-index: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: ripple .65s var(--ease-out) forwards; pointer-events: none; }
.btn-outline .ripple, .btn-white .ripple { background: rgba(23, 105, 224, .25); }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
.btn-magnetic { transition: transform .35s var(--ease-out), background-color .3s, color .3s, border-color .3s, box-shadow .3s; }

/* ---------- Floating buttons: soft pulse ring every few seconds ---------- */
.float-btn::before { animation: ringPulse 4s var(--ease-out) infinite; }
.float-btn::after { animation: ringPulse 4s var(--ease-out) infinite .6s; }
.float-btn--call::before { animation-delay: 2s; } .float-btn--call::after { animation-delay: 2.6s; }
@keyframes ringPulse { 0% { opacity: .7; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.7); } }
.anim-ready .float-actions { animation: popIn .6s var(--ease-back) 1.2s both; }
@keyframes popIn { from { opacity: 0; transform: scale(.5) translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- Dividers / waves ---------- */
.divider svg, .footer-wave svg { animation: waveDrift 18s linear infinite; }
@keyframes waveDrift { to { transform: translate3d(-50%, 0, 0); } }
.cta-orb--1 { animation: blobA 16s ease-in-out infinite alternate; }
.cta-orb--2 { animation: blobB 20s ease-in-out infinite alternate; }
[data-parallax-bg] { will-change: transform; }

/* Portfolio shuffle */
.project-card.is-leaving { opacity: 0 !important; transform: scale(.9) !important; transition: opacity .3s, transform .3s var(--ease-out) !important; }
.project-card.is-entering { animation: shuffleIn .55s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes shuffleIn { from { opacity: 0; transform: scale(.9) translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   EXTRA ANIMATION LAYER ("full of animation")
   All effects use transform/opacity, are skipped on touch devices where noted
   and are disabled for prefers-reduced-motion.
   ========================================================================== */

/* ---------- Page transition wipe ---------- */
.page-wipe { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.page-wipe span { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-navy) 55%, var(--color-accent)); transform: scaleY(0); transform-origin: bottom; }
.page-wipe span:nth-child(2) { background: var(--color-tech-blue); opacity: .9; }
.page-wipe img { position: absolute; left: 50%; top: 50%; width: 180px; margin: -22px 0 0 -90px; opacity: 0; transform: translateY(10px); filter: brightness(0) invert(1); }
html.is-leaving .page-wipe { pointer-events: auto; }
html.is-leaving .page-wipe span:nth-child(2) { transform: scaleY(1); transition: transform .38s cubic-bezier(.7, 0, .3, 1); }
html.is-leaving .page-wipe span:nth-child(1) { transform: scaleY(1); transition: transform .42s cubic-bezier(.7, 0, .3, 1) .08s; }
html.is-leaving .page-wipe img { opacity: 1; transform: none; transition: opacity .3s .25s, transform .3s .25s; }
html.is-entering .page-wipe span { transform: scaleY(1); transform-origin: top; animation: wipeOut .65s cubic-bezier(.7, 0, .3, 1) .05s forwards; }
html.is-entering .page-wipe span:nth-child(2) { animation-delay: .15s; }
@keyframes wipeOut { to { transform: scaleY(0); } }

/* ---------- Custom cursor (desktop / fine pointer only) ---------- */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--color-accent); }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(23, 105, 224, .55); }
.cursor-ring > i { position: absolute; inset: 0; border-radius: 50%; background: rgba(23, 105, 224, .12); transform: scale(0); transition: transform .35s var(--ease-out); }
html.has-cursor .cursor-dot, html.has-cursor .cursor-ring { opacity: 1; }
html.cursor-hover .cursor-ring > i { transform: scale(1.6); }
html.cursor-hover .cursor-dot { opacity: 0; }
html.cursor-down .cursor-ring > i { transform: scale(.8); }

/* ---------- Section titles reveal word by word ---------- */
.is-split-t .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.is-split-t .word-inner { display: inline-block; }
.anim-ready [data-anim] .is-split-t .word-inner { transform: translate3d(0, 110%, 0) rotate(3deg); transition: transform 800ms var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms + 120ms); }
.anim-ready [data-anim] .is-split-t.title-in .word-inner { transform: none; }

/* Gradient on the last words of the hero headline */
.hero-title .word--grad .word-inner { background: linear-gradient(90deg, var(--color-accent), var(--color-tech-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Image curtain reveal + zoom settle ---------- */
.anim-ready [data-anim] .img-sweep::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); transform-origin: right center; transform: scaleX(1); transition: transform 1s cubic-bezier(.7, 0, .2, 1) .2s; }
.anim-ready [data-anim] .is-in .img-sweep::before, .anim-ready [data-anim] .img-sweep.is-in::before { transform: scaleX(0); }
.anim-ready [data-anim] .img-sweep img { transform: scale(1.18); transition: transform 1.4s var(--ease-out) .25s; }
.anim-ready [data-anim] .is-in .img-sweep img, .anim-ready [data-anim] .img-sweep.is-in img { transform: none; }
.anim-ready [data-anim] .is-in .img-sweep:hover img, .anim-ready [data-anim] .tilt-card.is-in:hover .img-sweep img, .anim-ready [data-anim] .img-sweep.is-in:hover img { transform: scale(1.06); transition-duration: .8s; transition-delay: 0s; }

/* ---------- Card spotlight following the mouse ---------- */
.tilt-card.has-spot { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(23, 105, 224, .09), transparent 45%); }
.solution-card.has-spot { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 196, 255, .18), transparent 45%), linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }

/* ---------- Icons: pulse ring on hover, number fill ---------- */
.icon-tile, .solution-icon, .workflow-icon, .process-marker { position: relative; }
.icon-tile::after, .solution-icon::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--color-tech-blue); opacity: 0; transform: scale(.8); pointer-events: none; }
.tilt-card:hover .icon-tile::after, .industry-card:hover .icon-tile::after, .solution-card:hover .solution-icon::after, .dev-features li:hover .icon-tile::after { animation: iconRing 1.2s var(--ease-out) infinite; }
@keyframes iconRing { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.45); } }
.industry-card:hover .icon-bounce, .contact-methods a:hover .icon-tile { animation: iconBounce .8s var(--ease-back); }
.service-num { transition: color .4s, -webkit-text-stroke-color .4s; }
.service-card:hover .service-num { color: var(--color-accent-soft); -webkit-text-stroke-color: var(--color-accent); }

/* ---------- Workflow & process: steps light up one after another ---------- */
.workflow-icon::after, .process-marker::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--color-tech-blue); opacity: 0; pointer-events: none; }
.workflow-step .workflow-icon { animation: stepGlow 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s + 2s); }
.workflow-step .workflow-icon::after { animation: stepRing 7s ease-out infinite; animation-delay: calc(var(--i, 0) * 1s + 2s); }
@keyframes stepGlow { 0%, 12%, 100% { transform: none; } 5% { transform: scale(1.18) rotate(-6deg); } }
@keyframes stepRing { 0% { opacity: 0; transform: scale(.9); } 4% { opacity: .9; } 12%, 100% { opacity: 0; transform: scale(1.6); } }
.process-step .process-marker::after { animation: stepRing 6s ease-out infinite; animation-delay: calc(var(--i, 0) * 1.2s + 2.5s); }

/* ---------- Buttons: looping arrow, logo shine, nav cascade ---------- */
.btn:hover > svg:last-child:not(:first-child), .link-arrow:hover .icon, .solution-card:hover .solution-btn .icon { animation: arrowLoop .9s var(--ease-out) infinite; }
@keyframes arrowLoop { 0% { transform: none; opacity: 1; } 45% { transform: translateX(9px); opacity: 0; } 46% { transform: translateX(-9px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.brand { position: relative; overflow: hidden; }
.brand::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg) translateX(-120%); animation: logoShine 7s ease-in-out 2.5s infinite; pointer-events: none; }
@keyframes logoShine { 0%, 82% { transform: skewX(-20deg) translateX(-120%); } 100% { transform: skewX(-20deg) translateX(620%); } }
/* Animate the link inside each <li>, never the <li> itself: a transform on the
   <li> would become the containing block of the full-width mega menu. */
.anim-ready .nav-list > li > .nav-link, .anim-ready .header-actions { animation: navIn .6s var(--ease-out) both; }
.anim-ready .nav-list > li:nth-child(1) > .nav-link { animation-delay: .35s; } .anim-ready .nav-list > li:nth-child(2) > .nav-link { animation-delay: .41s; }
.anim-ready .nav-list > li:nth-child(3) > .nav-link { animation-delay: .47s; } .anim-ready .nav-list > li:nth-child(4) > .nav-link { animation-delay: .53s; }
.anim-ready .nav-list > li:nth-child(5) > .nav-link { animation-delay: .59s; } .anim-ready .nav-list > li:nth-child(6) > .nav-link { animation-delay: .65s; }
.anim-ready .nav-list > li:nth-child(7) > .nav-link { animation-delay: .71s; } .anim-ready .nav-list > li:nth-child(n+8) > .nav-link { animation-delay: .77s; }
.anim-ready .header-actions { animation-delay: .8s; }
@keyframes navIn { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }
.footer-col ul:not(.footer-contact) a { display: inline-block; transition: color .25s, transform .3s var(--ease-out); }
.footer-contact a { transition: color .25s, transform .3s var(--ease-out); }
.footer-col a:hover { transform: translateX(5px); }

/* ---------- Living backgrounds ---------- */
.section > .container, .cta-band > .container { position: relative; z-index: 1; }
.section--navy::before { content: ""; position: absolute; width: 760px; height: 760px; left: -220px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 149, 245, .22), transparent 65%); animation: blobB 22s ease-in-out infinite alternate; pointer-events: none; }
.section--navy::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -90px; background-image: radial-gradient(rgba(255, 255, 255, .28) 1.2px, transparent 1.6px); background-size: 90px 90px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); animation: dotsUp 26s linear infinite; pointer-events: none; }
@keyframes dotsUp { to { transform: translate3d(0, -90px, 0); } }
.section--surface { overflow: hidden; }
.section--surface::before { content: ""; position: absolute; right: 5%; top: 70px; width: 130px; height: 130px; border-radius: 50%; border: 2px dashed rgba(23, 105, 224, .16); animation: spin 40s linear infinite; pointer-events: none; }
.section--surface::after { content: ""; position: absolute; left: 4%; bottom: 80px; width: 26px; height: 26px; border-radius: 6px; border: 2.5px solid rgba(7, 149, 245, .22); animation: shapeFloat 10s ease-in-out infinite, spin 22s linear infinite; pointer-events: none; }
.cta-band::after { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; background-image: radial-gradient(rgba(140, 196, 255, .35) 1.5px, transparent 2px); background-size: 120px 80px; animation: dotsUp 18s linear infinite; pointer-events: none; opacity: .6; }
.page-hero-bg { animation: gridDrift 40s linear infinite; inset: -44px 0 0 -44px; }

/* ---------- Big tagline marquee above the footer ---------- */
.big-marquee { position: relative; overflow: hidden; padding: 30px 0 70px; background: #fff; }
.big-marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.big-marquee:hover .big-marquee-track { animation-play-state: paused; }
.big-marquee span { display: inline-flex; align-items: center; white-space: nowrap; font-size: clamp(2.8rem, 8vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px #B9CBE4; padding: 0 .35em; transition: color .4s, -webkit-text-stroke-color .4s; }
.big-marquee span:nth-child(4n+1) { background: linear-gradient(90deg, var(--color-accent), var(--color-tech-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.big-marquee span:hover { color: var(--color-primary); -webkit-text-stroke-color: var(--color-primary); }
.big-marquee b { display: inline-block; width: .35em; height: .35em; font-size: clamp(2.8rem, 8vw, 7rem); border-radius: 22%; background: var(--color-tech-blue); transform: rotate(45deg); animation: spin 6s linear infinite; flex: none; align-self: center; }

/* Touch devices: no cursor, no spotlight */
html.touch .cursor-dot, html.touch .cursor-ring { display: none; }

/* ---------- Reduced motion: disable all non-essential animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-wipe, .cursor-dot, .cursor-ring, .section--navy::before, .section--navy::after, .section--surface::before, .section--surface::after, .cta-band::after, .brand::after { display: none !important; }
  .big-marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .is-split-t .word-inner, .img-sweep img { transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track > ul[aria-hidden="true"] { display: none; }
  .marquee-list, .tech-list, .logo-list { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .tech-marquee { -webkit-mask-image: none; mask-image: none; }
  [data-reveal], .hero-seq, [data-split] .word-inner, .title-line, .process-line-fill, .eyebrow, .section-title, .section-lead { opacity: 1 !important; transform: none !important; }
  .hero-particles, .hero-shapes, .hero-blobs, .preloader, .hero-scroll { display: none !important; }
  .tilt-card:hover { transform: none; }
}
html.reduced-motion .hero-particles, html.reduced-motion .preloader { display: none !important; }