/* ==============================================================
   AUREK · dynamic layer — animated backgrounds, staggered
   reveals, parallax hooks & hover art polish. Site-wide.
   Loaded AFTER styles.css (+ resources.css / faq.css).
   All motion respects prefers-reduced-motion (guard at bottom).
   ============================================================== */

/* ============================================================
   1 · HERO (homepage) — animated technical layers over video
   ============================================================ */
.hero-bg-grid{
  position:absolute; inset:-260px;
  z-index:2; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.20) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.30) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 240px 240px, 240px 240px;
  mix-blend-mode:overlay;
  opacity:.75;
  animation:aurekGridDrift 80s linear infinite;
}
@keyframes aurekGridDrift{
  to{ background-position:240px 240px; }
}

/* scanning beam that sweeps down the hero stage */
.hero-scanline{
  position:absolute; left:0; right:0;
  top:0; height:24%;
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,.12) 46%,
    rgba(255,208,0,.10) 52%,
    transparent 100%);
  mix-blend-mode:overlay;
  transform:translateY(-110%);
  animation:aurekScan 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes aurekScan{
  0%{ transform:translateY(-110%); opacity:0; }
  8%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateY(440%); opacity:0; }
}

/* pulsing registration crosshairs in the stage corners */
.hero-marks{
  position:absolute; inset:22px;
  z-index:4; pointer-events:none;
}
.hero-marks span{
  position:absolute;
  width:16px; height:16px;
  opacity:.4;
  animation:aurekMarkPulse 4s ease-in-out infinite alternate;
}
.hero-marks span::before,
.hero-marks span::after{
  content:""; position:absolute;
  background:rgba(12,16,20,.55);
}
.hero-marks span::before{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px; }
.hero-marks span::after{ top:50%; left:0; height:1px; width:100%; margin-top:-.5px; }
.hero-marks .hm-tl{ top:0; left:0; }
.hero-marks .hm-tr{ top:0; right:0; animation-delay:1s; }
.hero-marks .hm-bl{ bottom:0; left:0; animation-delay:2s; }
.hero-marks .hm-br{ bottom:0; right:0; animation-delay:3s; }
@keyframes aurekMarkPulse{
  from{ opacity:.3; }
  to{ opacity:.95; }
}

/* headline entrance — eyebrow, then H1, then yellow marker sweep */
.hero-stage.reveal .hero-eyebrow,
.hero-stage.reveal .hero-h{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s ease;
}
.hero-stage.reveal.in .hero-eyebrow{ opacity:1; transform:none; }
.hero-stage.reveal.in .hero-h{ opacity:1; transform:none; transition-delay:.12s; }

h1.hero-h em{
  background-image:linear-gradient(to top, rgba(255,208,0,.40) 0 24%, transparent 24%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size 1s cubic-bezier(.22,1,.36,1) .75s;
}
.hero-stage.in h1.hero-h em{ background-size:100% 100%; }

/* hero video gets a permanent slight overscale so the JS
   parallax never reveals edges */
.hero-bg > video{ will-change:transform; }

/* ============================================================
   2 · SECTION HEADERS — drawing accent line + marker sweep
   ============================================================ */
.shead{ position:relative; }
.shead::after{
  content:""; position:absolute;
  left:0; bottom:-1px;
  height:2px; width:0;
  background:var(--blue);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s;
}
.shead.in::after{ width:120px; }
.dark .shead::after{ background:var(--signal); }

.shead .eyebrow::before{
  width:0;
  transition:width .6s ease .55s;
}
.shead.in .eyebrow::before{ width:18px; }

.shead h2 em{
  background-image:linear-gradient(to top, rgba(255,208,0,.34) 0 22%, transparent 22%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) .4s;
}
.shead.in h2 em{ background-size:100% 100%; }
.dark .shead h2 em{
  background-image:linear-gradient(to top, rgba(255,208,0,.14) 0 22%, transparent 22%);
}

/* ============================================================
   3 · STAGGERED REVEALS — homepage grid children rise one by one
   ============================================================ */
.reveal :is(.trait,.proc,.v,.why-item,.ind,.other,.ark){ opacity:0; }
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark){
  animation:aurekRise .65s cubic-bezier(.22,1,.36,1) both;
}
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark):nth-child(2){ animation-delay:.08s; }
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark):nth-child(3){ animation-delay:.16s; }
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark):nth-child(4){ animation-delay:.24s; }
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark):nth-child(5){ animation-delay:.32s; }
.reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark):nth-child(6){ animation-delay:.40s; }
@keyframes aurekRise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   4 · AMBIENT DRIFT — blueprint grids slowly travel
   ============================================================ */
.ark-vis{ animation:aurekBgDrift32 26s linear infinite; }
@keyframes aurekBgDrift32{ to{ background-position:32px 32px; } }

.product-diagram{ animation:aurekBgDrift40 30s linear infinite; }
@keyframes aurekBgDrift40{ to{ background-position:40px 40px; } }

/* ============================================================
   5 · WHY (dark section) — photographic Ken Burns backdrop
   ============================================================ */
section.dark{
  isolation:isolate;
  overflow:hidden;
}
.why-bg{
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background-image:url('assets/aurek-frame-system-overhead-handling-01.webp');
  background-size:cover;
  background-position:center 30%;
  filter:grayscale(1) brightness(.30) contrast(1.12);
  opacity:.55;
  animation:aurekKenBurns 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aurekKenBurns{
  from{ transform:scale(1) translateY(0); }
  to{ transform:scale(1.1) translateY(-12px); }
}
.why-bg-fade{
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    var(--ink) 0%,
    rgba(12,16,20,.55) 26%,
    rgba(12,16,20,.6) 74%,
    var(--ink) 100%);
}
section.dark > .container{ position:relative; z-index:2; }
.dark .why-grid{
  background:rgba(17,22,28,.82);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.why-item{ transition:background .25s; }
.why-item:hover{ background:rgba(255,255,255,.03); }

/* ============================================================
   6 · HOVER ART POLISH (site-wide)
   ============================================================ */
/* button sheen sweep */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute;
  top:0; bottom:0; left:-70%;
  width:42%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::after{ left:130%; }

/* nav link underline grows from the left */
.nav-menu a::after{
  content:""; position:absolute;
  left:14px; right:14px; bottom:-1px; height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-menu a:hover::after,
.nav-menu a.active::after{ transform:scaleX(1); }

/* product / equipment imagery zooms gently */
.ark-vis img{ transition:transform .7s cubic-bezier(.22,1,.36,1); }
.ark:hover .ark-vis img{ transform:scale(1.05); }

.other-img{
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .4s;
  filter:saturate(.85);
}
.other:hover .other-img{ transform:scale(1.05); filter:saturate(1); }

/* industries — richer color + slower, deeper zoom */
.ind .img{
  filter:saturate(.85) contrast(1.05);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .45s;
}
.ind:hover .img{ transform:scale(1.07); filter:saturate(1.05) contrast(1.05); }

/* marquee rail — pause on hover */
.rail:hover .rail-track{ animation-play-state:paused; }

/* facility & hero video parallax (transform driven by dynamic.js) */
.facility > img{ will-change:transform; }

/* trait icon tile fills with blue on hover */
.trait-mark{ transition:background .25s, color .25s, border-color .25s; }
.trait:hover .trait-mark{
  background:var(--blue); color:#fff; border-color:var(--blue);
}
.proc-icon{ transition:background .25s, color .25s, border-color .25s; }
.proc:hover .proc-icon{
  background:var(--blue); color:#fff; border-color:var(--blue);
}

/* ============================================================
   7 · SUBPAGE HEROES — products / cases / resources / faq /
       detail pages (page-hero) get drifting blueprint grids
       and an entrance sequence on load
   ============================================================ */
/* hub heroes (rc-hero has its own 64px grid; faq-hero a 56px one) */
.rc-hero{ animation:aurekBgDrift64 48s linear infinite; }
@keyframes aurekBgDrift64{ to{ background-position:64px 64px; } }
.faq-hero::before{ animation:aurekBgDrift56 44s linear infinite; }
@keyframes aurekBgDrift56{ to{ background-position:56px 56px; } }

/* detail page hero — add a feathered drifting grid */
.page-hero{ position:relative; overflow:hidden; isolation:isolate; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(12,16,20,.05) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom, rgba(12,16,20,.05) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 88%);
          mask-image:linear-gradient(to bottom, #000, transparent 88%);
  animation:aurekBgDrift56 44s linear infinite;
}
.page-hero > .container{ position:relative; z-index:1; }

/* entrance sequence (runs once on load) */
.page-hero .page-kicker,
.rc-crumb, .faq-crumb{ animation:aurekRise .55s cubic-bezier(.22,1,.36,1) both; }
.page-hero .page-title{ animation:aurekRise .7s cubic-bezier(.22,1,.36,1) .08s both; }
.page-hero .page-summary{ animation:aurekRise .7s cubic-bezier(.22,1,.36,1) .16s both; }
.page-hero .breadcrumb{ animation:aurekRise .7s cubic-bezier(.22,1,.36,1) .24s both; }

.rc-hero-lead > *, .faq-hero-lead > *{
  animation:aurekRise .6s cubic-bezier(.22,1,.36,1) both;
}
.rc-hero-lead > :nth-child(2), .faq-hero-lead > :nth-child(2){ animation-delay:.08s; }
.rc-hero-lead > :nth-child(3), .faq-hero-lead > :nth-child(3){ animation-delay:.16s; }
.rc-hero-lead > :nth-child(4), .faq-hero-lead > :nth-child(4){ animation-delay:.24s; }
.rc-hero-stats, .faq-hero-card{
  animation:aurekRise .8s cubic-bezier(.22,1,.36,1) .28s both;
}

/* yellow marker sweep under the blue word in hub H1s */
@keyframes aurekMarkerSweep{
  from{ background-size:0% 100%; }
  to{ background-size:100% 100%; }
}
.rc-h1 em, .faq-h1 em{
  background-image:linear-gradient(to top, rgba(255,208,0,.40) 0 24%, transparent 24%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  animation:aurekMarkerSweep .9s cubic-bezier(.22,1,.36,1) .8s both;
}

/* ============================================================
   8 · GENERIC SCROLL REVEAL — applied by dynamic.js on subpages
       (.d-rev added to cards; .in when visible; .d-done after)
   ============================================================ */
.d-rev{ opacity:0; }
.d-rev.in{
  animation:aurekRise .65s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d-delay, 0s);
}
.d-rev.d-done{ animation:none; opacity:1; }

/* ============================================================
   9 · SUBPAGE CARD POLISH
   ============================================================ */
.kh-card{ transition:background .15s, transform .3s, box-shadow .3s; }
a.kh-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(18,27,43,.09);
}
.kh-thumb img{ transition:transform .8s cubic-bezier(.22,1,.36,1); }
.kh-card:hover .kh-thumb img{ transform:scale(1.06); }

.page-cover{ overflow:hidden; }
.page-cover img{ transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.page-cover:hover img{ transform:scale(1.03); }

.content-card, .spec-card, .toc-card{ transition:border-color .3s, box-shadow .3s; }
.content-card:hover, .spec-card:hover{
  border-color:rgba(14,59,140,.28);
  box-shadow:0 20px 56px rgba(18,27,43,.07);
}

.geo-link-card{ transition:transform .25s, border-color .25s, box-shadow .25s; }

.faq-item{ transition:background .2s; }
.faq-item:hover{ background:rgba(14,59,140,.03); }

/* ============================================================
   10 · REDUCED MOTION — switch the whole layer off
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .hero-bg-grid,
  .hero-scanline,
  .hero-marks span,
  .ark-vis,
  .product-diagram,
  .why-bg,
  .rc-hero,
  .faq-hero::before,
  .page-hero::before{ animation:none !important; }
  .hero-scanline{ display:none; }
  .reveal :is(.trait,.proc,.v,.why-item,.ind,.other,.ark){ opacity:1; }
  .reveal.in :is(.trait,.proc,.v,.why-item,.ind,.other,.ark){ animation:none; }
  .hero-stage.reveal .hero-eyebrow,
  .hero-stage.reveal .hero-h{ opacity:1; transform:none; transition:none; }
  h1.hero-h em,
  .shead h2 em{ background-size:100% 100%; transition:none; }
  .shead::after{ transition:none; }
  .shead.in::after{ width:120px; }
  .page-hero .page-kicker,
  .page-hero .page-title,
  .page-hero .page-summary,
  .page-hero .breadcrumb,
  .rc-crumb, .faq-crumb,
  .rc-hero-lead > *, .faq-hero-lead > *,
  .rc-hero-stats, .faq-hero-card{ animation:none; }
  .rc-h1 em, .faq-h1 em{ animation:none; background-size:100% 100%; }
  .d-rev{ opacity:1; }
  .d-rev.in{ animation:none; }
}