/* Final responsive fit + motion polish for the locked NGenEra home design.
   This file intentionally sits last in the stylesheet stack. */

/* Guard against horizontal clipping on laptop-size viewports. */
.lux-home,.lux-nav,.lux-hero,.lux-companies,.lux-about{width:100%!important;max-width:100vw!important}
.lux-nav>*,.lux-hero>*,.lux-companies>*,.lux-about>*{min-width:0!important}
.lux-home{overflow-x:hidden!important}

/* Each company card keeps its own recovered business image. */
.company-card .card-scene{
  width:49%!important;
  opacity:1!important;
  object-fit:cover!important;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease,opacity .35s ease!important;
}
.safeway-scene{object-position:center 54%!important}
.adngen-scene{object-position:center 50%!important}
.synthetic-scene{object-position:center 48%!important}
.company-logo{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s ease!important;
  filter:drop-shadow(0 0 9px rgba(183,91,239,.2))!important;
}
.company-card:hover .card-scene{transform:scale(1.045)!important;filter:brightness(1.16) saturate(1.12) contrast(1.04)!important}
.company-card:hover .company-logo{transform:translateY(-2px) scale(1.035)!important;filter:drop-shadow(0 0 13px rgba(196,101,246,.38))!important}

/* The target was composed at 1536px. Below that, scale the hero vertically with
   the right artwork so the industry list stays inside the screen instead of being cropped. */
@media (min-width:981px) and (max-width:1440px){
  .lux-nav{
    grid-template-columns:290px minmax(0,1fr) 184px!important;
    padding-left:2.2vw!important;
    padding-right:2.2vw!important;
  }
  .lux-brand{width:290px!important}
  .brand-image{width:276px!important;height:62px!important}
  .lux-nav nav{gap:clamp(18px,2vw,28px)!important}
  .lux-nav nav a{font-size:8px!important;letter-spacing:.14em!important}
  .lux-build{height:40px!important;font-size:8px!important;letter-spacing:.15em!important}

  .lux-hero,
  .lux-hero-copy,
  .lux-hero-art{
    height:clamp(445px,34.5vw,497px)!important;
    min-height:clamp(445px,34.5vw,497px)!important;
  }
  .hero-reference-image,
  .office-reference-image{
    height:100%!important;
    min-height:0!important;
  }
  .hero-reference-image{object-position:center center!important}
  .hero-copy-content{padding:clamp(58px,4.9vw,70px) 6.4% 28px!important}
  .lux-hero h1{
    width:82%!important;
    margin:13px 0 16px!important;
    font-size:clamp(72px,6.6vw,94px)!important;
    line-height:.85!important;
    transform:scaleX(1.20)!important;
  }
  .lux-lede{max-width:455px!important;font-size:clamp(12px,1.05vw,15px)!important;line-height:1.52!important}
  .lux-actions{margin-top:16px!important;gap:14px!important}
  .lux-primary,.lux-secondary{height:42px!important}
  .lux-primary{min-width:238px!important}
  .lux-secondary{min-width:166px!important}
}

/* A smaller desktop should stop pretending it has 1536px of room. */
@media (min-width:981px) and (max-width:1180px){
  .lux-nav{grid-template-columns:250px minmax(0,1fr) 166px!important;padding-left:18px!important;padding-right:18px!important}
  .lux-brand{width:250px!important}.brand-image{width:238px!important;height:58px!important}
  .lux-nav nav{gap:14px!important}.lux-nav nav a{font-size:7px!important;letter-spacing:.11em!important}
  .lux-build{font-size:7px!important}
  .lux-hero,.lux-hero-copy,.lux-hero-art{height:410px!important;min-height:410px!important}
  .hero-copy-content{padding:48px 6% 24px!important}
  .lux-kicker{font-size:8px!important;letter-spacing:.29em!important}
  .lux-hero h1{font-size:68px!important;width:86%!important;transform:scaleX(1.14)!important;margin:12px 0 14px!important}
  .lux-lede{font-size:12px!important;max-width:420px!important}
  .lux-primary{min-width:210px!important}.lux-secondary{min-width:148px!important}
  .hero-reference-image{object-fit:contain!important;background:#0a080d!important}
}

/* Motion: polished, restrained, and GPU-friendly. */
@keyframes ngenFadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ngenFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes ngenImageSettle{from{opacity:.55;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes ngenCardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ngenGlow{0%,100%{box-shadow:0 0 0 rgba(184,87,240,0)}50%{box-shadow:0 0 26px rgba(184,87,240,.15)}}
@keyframes ngenSheen{0%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}

@media (prefers-reduced-motion:no-preference){
  .lux-nav{animation:ngenFadeDown .6s cubic-bezier(.2,.7,.2,1) backwards}
  .office-reference-image{animation:ngenImageSettle 1.05s cubic-bezier(.2,.7,.2,1) .08s backwards}
  .hero-reference-image{animation:ngenImageSettle 1.15s cubic-bezier(.2,.7,.2,1) .12s backwards}
  .lux-kicker{animation:ngenFadeUp .62s cubic-bezier(.2,.7,.2,1) .14s backwards}
  .lux-hero h1{animation:ngenFadeUp .72s cubic-bezier(.2,.7,.2,1) .22s backwards}
  .lux-lede{animation:ngenFadeUp .68s cubic-bezier(.2,.7,.2,1) .32s backwards}
  .lux-actions{animation:ngenFadeUp .68s cubic-bezier(.2,.7,.2,1) .40s backwards}
  .company-card{animation:ngenCardIn .72s cubic-bezier(.2,.7,.2,1) backwards}
  .company-card:nth-child(1){animation-delay:.46s}.company-card:nth-child(2){animation-delay:.54s}.company-card:nth-child(3){animation-delay:.62s}
  .about-head{animation:ngenFadeUp .72s cubic-bezier(.2,.7,.2,1) .70s backwards}
  .about-body{animation:ngenFadeUp .72s cubic-bezier(.2,.7,.2,1) .76s backwards}
  .vision-card{animation:ngenFadeUp .72s cubic-bezier(.2,.7,.2,1) .82s backwards,ngenGlow 4.8s ease-in-out 1.6s infinite}
  .capability-row>div{animation:ngenFadeUp .6s cubic-bezier(.2,.7,.2,1) backwards}
  .capability-row>div:nth-child(1){animation-delay:.82s}.capability-row>div:nth-child(2){animation-delay:.88s}.capability-row>div:nth-child(3){animation-delay:.94s}.capability-row>div:nth-child(4){animation-delay:1s}.capability-row>div:nth-child(5){animation-delay:1.06s}

  .lux-primary{position:relative!important;overflow:hidden!important}
  .lux-primary:after{
    content:"";position:absolute;top:-25%;bottom:-25%;left:-35%;width:34%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transform:translateX(-150%) skewX(-20deg);
    animation:ngenSheen 4.6s ease-in-out 1.7s infinite;
    pointer-events:none;
  }
}

/* Hover/focus motion that still works after entrance animations finish. */
.lux-primary,.lux-secondary,.lux-build,.vision-copy>span{
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background-color .24s ease!important;
}
.lux-primary:hover,.lux-secondary:hover,.lux-build:hover,.vision-copy>span:hover{transform:translateY(-2px)!important}
.lux-primary:hover{box-shadow:0 0 26px rgba(190,96,246,.40),0 12px 34px rgba(122,49,166,.28)!important}
.lux-secondary:hover,.lux-build:hover{border-color:#d69aff!important;box-shadow:0 0 18px rgba(183,91,239,.18)!important}

.capability-row>div{transition:transform .28s ease,filter .28s ease!important}
.capability-row>div:hover{transform:translateY(-4px)!important;filter:brightness(1.14)!important}
.capability-icon{transition:transform .28s ease,filter .28s ease!important}
.capability-row>div:hover .capability-icon{transform:scale(1.08)!important;filter:drop-shadow(0 0 10px rgba(190,98,244,.34))!important}

/* Keep layout stable for users who disable animation. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}