/* ==========================================================================
   FIBERTEK — Motion system: precise, engineered, controlled
   ========================================================================== */

@keyframes heroScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes selProgress { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes scrollCue { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes beamSweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .55; } }
@keyframes beamTravel { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes dotOn { 0% { transform: scale(0); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes maskUp { to { transform: translateY(0); } }
@keyframes clipScan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bgIn { to { opacity: 1; transform: scale(1); } }
@keyframes laserRest { to { opacity: .45; } }

/* ---------- Hero intro sequence (triggered by .is-loaded) ---------- */
.hero.is-loaded .hero__bg img { animation: bgIn 1.8s .1s var(--ease) forwards; }
.hero.is-loaded .hero__grid { animation: fadeIn 1.4s .5s var(--ease) forwards; }
.hero.is-loaded .hero__laser-dot { animation: dotOn .5s .35s var(--ease) forwards; }
.hero.is-loaded .hero__laser-line { animation: beamSweep 1.2s .7s var(--ease-io) forwards; }
.hero.is-loaded .hero__laser { animation: laserRest 1s 2.6s var(--ease) forwards; }
.hero.is-loaded .hero__glow { animation: fadeIn 1.4s 1.2s var(--ease) forwards; }
.hero.is-loaded .hero__particles { animation: fadeIn 1.6s 1.5s var(--ease) forwards; }
.hero.is-loaded .hero__eyebrow { animation: riseIn .8s 1.55s var(--ease) forwards; }
.hero.is-loaded .hero__title .mask:nth-child(1) > span { animation: maskUp 1s 1.7s var(--ease) forwards; }
.hero.is-loaded .hero__title .mask:nth-child(2) > span { animation: maskUp 1s 1.84s var(--ease) forwards; }
.hero.is-loaded .hero__sub { animation: riseIn .9s 2.1s var(--ease) forwards; }
.hero.is-loaded .hero__ctas { animation: riseIn .9s 2.3s var(--ease) forwards; }
.hero.is-loaded .hero__readout { animation: riseIn .9s 2.45s var(--ease) forwards; }
.hero.is-loaded .sel { opacity: 1; transform: none; }
.hero.is-loaded .sel:nth-child(1) { transition-delay: 2.3s, 2.3s, 2.3s; }
.hero.is-loaded .sel:nth-child(2) { transition-delay: 2.38s, 2.38s, 2.38s; }
.hero.is-loaded .sel:nth-child(3) { transition-delay: 2.46s, 2.46s, 2.46s; }
.hero.is-loaded .sel:nth-child(4) { transition-delay: 2.54s, 2.54s, 2.54s; }
.hero.is-ready .sel { transition-delay: 0s !important; }
/* first product reveal uses the scan */
.hero__fig.is-first { clip-path: inset(0 0 100% 0); transition: none; }
.hero.is-loaded .hero__fig.is-first { animation: clipScan 1.3s 1.05s var(--ease-io) forwards; }

/* ---------- Scroll reveals ---------- */
[data-reveal] { transition: opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease-io); transition-delay: var(--delay, 0s); }
.js [data-reveal="up"] { opacity: 0; transform: translateY(28px); }
.js [data-reveal="left"] { opacity: 0; transform: translateX(-36px); }
.js [data-reveal="right"] { opacity: 0; transform: translateX(36px); }
.js [data-reveal="scale"] { opacity: 0; transform: scale(.94); }
.js [data-reveal="fade"] { opacity: 0; }
.js [data-reveal="scan"] { clip-path: inset(0 0 100% 0); }
.js [data-reveal="wipe"] { clip-path: inset(0 100% 0 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* masked headline reveal */
.js [data-split] .mask > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--delay, 0s) + var(--i, 0) * .09s); }
.js [data-split].is-in .mask > span { transform: none; }
[data-split]:not(.js *) .mask > span { transform: none; }

/* laser lines drawn on reveal */
.js [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-io); transition-delay: var(--delay, 0s); }
.js [data-line].is-in { transform: scaleX(1); }

/* scanning beam over imagery */
.scan-beam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.scan-beam::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 1px; background: linear-gradient(90deg, transparent, var(--laser) 20%, #fff 50%, var(--laser) 80%, transparent); box-shadow: 0 0 12px rgba(255,74,31,.9); opacity: 0; }
.is-in > .scan-beam::before, .is-in .scan-beam::before { animation: heroScan 1.2s .1s var(--ease-io) forwards; }

/* intro beam on editorial visual */
.intro__beam { transform: scaleX(0); transform-origin: left; }
.is-in .intro__beam { animation: beamSweep 1.6s .4s var(--ease-io) forwards; }

/* page-hero laser rule */
.phero__line { animation: beamSweep 1.6s .3s var(--ease-io) both; }
.pd-hero__laser { transform-origin: left; animation: beamSweep 1.6s .5s var(--ease-io) both; }
.pd-hero__visual img.is-entering { animation: clipScan 1s var(--ease-io) both; }
.pd-hero__visual > img:first-child { animation: clipScan 1.3s .25s var(--ease-io) both; }
.pd-hero__copy > * { opacity: 0; transform: translateY(16px); animation: riseIn .9s var(--ease) forwards; }
.pd-hero__copy > *:nth-child(1) { animation-delay: .15s; }
.pd-hero__copy > *:nth-child(2) { animation-delay: .25s; }
.pd-hero__copy > *:nth-child(3) { animation-delay: .35s; }
.pd-hero__copy > *:nth-child(4) { animation-delay: .45s; }
.pd-hero__copy > *:nth-child(5) { animation-delay: .55s; }
.pd-hero__copy > *:nth-child(6) { animation-delay: .65s; }
.phero__copy > * { opacity: 0; transform: translateY(16px); animation: riseIn .9s var(--ease) forwards; }
.phero__copy > *:nth-child(1) { animation-delay: .1s; }
.phero__copy > *:nth-child(2) { animation-delay: .2s; }
.phero__copy > *:nth-child(3) { animation-delay: .3s; }
.phero__copy > *:nth-child(4) { animation-delay: .4s; }

.cta__line { transform: scaleX(0); }
.cta.is-in .cta__line { animation: beamSweep 1.8s .2s var(--ease-io) forwards; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-split] .mask > span, .mask > span, .hero__eyebrow, .hero__sub, .hero__ctas, .hero__readout, .sel { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__bg img, .hero__grid, .hero__glow, .hero__particles { opacity: 1 !important; transform: none !important; }
  .hero__bg img { opacity: 1 !important; }
  .hero__fig.is-first, .hero__fig.is-active { clip-path: none !important; }
  .hero__laser-line { transform: scaleX(1) !important; }
  .hero__laser-dot { transform: scale(1) !important; }
  .sample-strip__track { animation: none !important; }
  .about-hero__orbit { animation: none !important; }
  .hero__layer { transform: none !important; }
}