/* Avenzo motion layer: hero 3D stage, scroll choreography layout, section transitions and hover depth.
   Everything here degrades to the existing static layout: no WebGL, reduced motion, touch, or JS failure. */

:root{--coral:#ed6347;--stage-ink:#111417}

/* ---------------------------------------------------------------- hero stage */
.hero-runway.v4-hero{overflow:visible;background:var(--stage-ink)}
.hero-runway.v4-hero:before{display:none}
.hero-sticky{position:relative;overflow:hidden;background:var(--stage-ink);display:flex;flex-direction:column}
.hero-sticky:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 49% 72% at 74% 38%,#ed63472b,transparent 70%),linear-gradient(120deg,#111417,#18191b 70%,#1d1819)}
.hero-sticky .v4-hero-grid{flex:1 1 auto;align-items:center}
.hero-sticky .v4-hero-bottom{flex:0 0 auto;margin-bottom:34px}

.hero-stage{position:relative;width:100%;max-width:640px;justify-self:end;aspect-ratio:1/1;contain:layout paint}
.hero-stage .hero-poster,.hero-stage .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stage .hero-poster{object-fit:contain;transition:opacity .9s ease}
.hero-stage .hero-canvas{opacity:0;transition:opacity .9s ease;touch-action:pan-y}
.hero-stage[data-state="live"] .hero-canvas{opacity:1}
.hero-stage[data-settled] .hero-canvas{transition:none}
.hero-stage[data-state="live"] .hero-poster{opacity:0}
.hero-stage[data-state="fallback"] .hero-canvas{display:none}

.hero-stations{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.hero-stations li{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;will-change:transform,opacity;display:flex;align-items:center;gap:12px;font:700 .76rem/1.22 Manrope,'DM Sans',system-ui,sans-serif;letter-spacing:.035em;text-transform:uppercase;color:#f2efec;white-space:normal;max-width:190px;text-wrap:balance}
.hero-stations li:before{content:attr(data-key);display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:1px solid #ffffff38;color:var(--coral);font-size:.68rem;letter-spacing:0}
.hero-stage:not([data-state="live"]) .hero-stations{display:none}

.hero-cue{position:absolute;left:0;right:0;width:min(calc(100% - 64px),var(--site-content,1180px));margin:0 auto;bottom:74px;z-index:3;display:flex;align-items:center;gap:12px;color:#9ea6a4;font:700 .7rem/1 Manrope,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.hero-cue span{display:block;width:1px;height:34px;background:linear-gradient(#ed6347,transparent);transform-origin:top;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

@media (min-width:900px){
  .hero-sticky{position:sticky;top:var(--header-h,84px);height:calc(100svh - var(--header-h,84px));min-height:min(560px,calc(100svh - var(--header-h,84px)))}
  .hero-sticky .v4-hero-grid{min-height:0;padding-top:clamp(20px,3vh,48px);padding-bottom:clamp(20px,3vh,48px)}
  .hero-stage{width:auto;height:min(640px,calc(100svh - var(--header-h,84px) - 150px));min-height:340px}
}
/* The scroll runway is the default for capable browsers so the first paint is already final (no layout shift). It collapses
   when scripting is off, for reduced motion, below 900px, or if the scene fails (motion.js sets data-pinned="false"). */
@media (min-width:900px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .hero-runway:not([data-pinned="false"]){height:calc(100svh + 44svh - var(--header-h,84px))}
  /* The next section starts rising over the stage, so the hand-off is a crossover rather than a pause. */
  .hero-runway:not([data-pinned="false"]) + .v6-agent{margin-top:calc(-1 * clamp(110px,16vh,190px))}
}
@media (max-width:899px){
  .hero-cue{display:none}
  .hero-stage{width:min(100%,430px);margin:0 auto;justify-self:center;aspect-ratio:1.04/1}
  .hero-stations li{font-size:.66rem;max-width:135px;letter-spacing:0;gap:6px}
  .hero-stations li:before{width:19px;height:19px;flex:none}
}

/* ---------------------------------------------------------------- slide-over transition + agent section */
.v6-agent{position:relative;z-index:4;background:#efece7;border-radius:30px 30px 0 0;margin-top:-30px;box-shadow:0 -24px 60px #00000030}
.v6-agent-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.v6-agent-copy h2{margin-top:18px}
.v6-agent-copy p{margin-top:22px;max-width:30rem;color:#586671;font-size:1.06rem}
.v6-agent .v5-workflow{justify-self:end;width:min(100%,620px)}
.v6-agent .v4-inline-cta{display:inline-block;margin-top:28px}
@media (max-width:899px){
  .v6-agent{border-radius:22px 22px 0 0;margin-top:-22px}
  .v6-agent-grid{grid-template-columns:minmax(0,1fr)}
  .v6-agent .v5-workflow{justify-self:stretch;width:100%}
}
/* Capabilities follows the agent section directly; keep the rhythm consistent. */
.v6-agent + .v4-capabilities{position:relative;z-index:4;background:var(--paper,#f9f8f6)}

/* ---------------------------------------------------------------- capability row depth + hover */
.v4-cap-row{position:relative;isolation:isolate;transition:padding .45s cubic-bezier(.22,.7,.22,1)}
.v4-cap-row:before{content:'';position:absolute;inset:0 -18px;z-index:-1;border-radius:14px;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#ed634718,transparent 62%);opacity:0;transition:opacity .35s ease}
.v4-cap-row .v4-cap-arrow,.v4-cap-row .v4-cap-index{transition:transform .45s cubic-bezier(.22,.7,.22,1),color .3s ease}
.v4-cap-row:hover:before,.v4-cap-row:focus-visible:before{opacity:1}
.v4-cap-row:hover .v4-cap-arrow,.v4-cap-row:focus-visible .v4-cap-arrow{transform:translate(5px,-5px)}
.v4-cap-row:hover .v4-cap-index{transform:translateX(4px)}
@media (hover:none){.v4-cap-row:before{display:none}}

/* ---------------------------------------------------------------- homepage product teaser */
.v6-products{background:var(--paper,#f9f8f6)}
.teaser-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
.teaser-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:250px;padding:clamp(26px,3vw,40px);border-radius:20px;background:#14181a;color:#f6f3f0;border:1px solid #2a2f31;transition:transform .5s cubic-bezier(.22,.7,.22,1),border-color .3s ease}
.teaser-card:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,80%) var(--my,0%),#ed634733,transparent 62%);opacity:.55;transition:opacity .35s ease}
.teaser-card:hover:before,.teaser-card:focus-visible:before{opacity:1}
.teaser-card:hover,.teaser-card:focus-visible{transform:translateY(-4px);border-color:#ed634788}
.teaser-card .teaser-index{font:800 .72rem/1 Manrope,system-ui,sans-serif;letter-spacing:.16em;color:var(--coral)}
.teaser-card h3{margin-top:14px;font-size:clamp(1.55rem,2.5vw,2.15rem);letter-spacing:-.04em;line-height:1.1;color:#fff}
.teaser-card p{margin-top:12px;color:#b7bdbb;font-size:1.02rem;max-width:26rem}
.teaser-card .teaser-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:#fff}
.teaser-card .teaser-cta i{font-style:normal;color:var(--coral);transition:transform .4s cubic-bezier(.22,.7,.22,1)}
.teaser-card:hover .teaser-cta i{transform:translate(4px,-4px)}
@media (max-width:760px){.teaser-grid{grid-template-columns:minmax(0,1fr)}.teaser-card{min-height:200px;gap:32px}}

/* ---------------------------------------------------------------- depth on solution and industry pages */
.service-block,.industry-card{position:relative;isolation:isolate;overflow:hidden;transition:transform .5s cubic-bezier(.22,.7,.22,1),border-color .3s ease,box-shadow .45s ease}
.service-block:before,.industry-card:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),#ed634722,transparent 62%);opacity:0;transition:opacity .35s ease}
.service-block:hover,.industry-card:hover{transform:translateY(-4px);border-color:#ed634777;box-shadow:0 26px 50px -30px #1a1210}
.service-block:hover:before,.industry-card:hover:before{opacity:1}
@media (hover:none){.service-block:hover,.industry-card:hover{transform:none;box-shadow:none}.service-block:before,.industry-card:before{display:none}}

/* ---------------------------------------------------------------- reduced motion and fallbacks */
@media (prefers-reduced-motion:reduce){
  .hero-sticky{position:relative;top:auto;height:auto}
  .hero-stage .hero-canvas,.hero-stage .hero-poster{transition:none}
  .hero-stations,.hero-cue{display:none}
  .service-block,.industry-card,.service-block:hover,.industry-card:hover{transition:none;transform:none}
  .teaser-card,.teaser-card:hover,.v4-cap-row,.v4-cap-row .v4-cap-arrow,.v4-cap-row .v4-cap-index{transition:none;transform:none}
}

/* Keep the 3D hero readable at every scroll position; content must not fade into the background. */
.hero-runway .v4-copy{opacity:1}
@media (min-width:900px) {
  .hero-sticky .v4-hero-grid{column-gap:clamp(16px,2vw,36px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-stage{justify-self:center}
}