/* AERTHEIX Insights hero (signal through four stages). Namespace iv-*.
   Tokens from aertheix.css only. The page is complete with scripts off. */
.iv-hero{position:relative;width:min(100%,1120px);margin:clamp(24px,3vw,44px) auto 0;text-align:left}
.iv-cap{margin:18px auto 0;max-width:62ch;color:var(--fine);font-size:var(--fs-fine);line-height:1.55;text-align:center;font-style:italic}

.iv-b-panel{position:relative;overflow:hidden;border-radius:16px;padding:22px 0 0;
  background:radial-gradient(120% 90% at 50% 52%,rgba(52,96,76,.55) 0,rgba(18,49,42,0) 62%),linear-gradient(180deg,var(--field-2),var(--field) 60%,var(--field-2));
  box-shadow:0 30px 60px -34px rgba(15,42,33,.65),inset 0 0 0 1px rgba(212,188,132,.16)}
.iv-b-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%,transparent 55%,rgba(5,20,15,.55) 100%)}

.iv-b-labels{position:relative;z-index:2;height:92px;margin:0;padding:0;list-style:none}
.iv-b-labels li{--rev:1;--glow:.55;position:absolute;top:0;left:calc(24px + var(--u) * (100% - 48px));width:max-content;max-width:23%;text-align:center;
  transform:translateX(-50%) translateY(calc((1 - var(--rev)) * 14px));opacity:var(--rev);cursor:default}
.iv-b-labels b{display:block;color:var(--gold-light);font:500 26px/1 var(--display);letter-spacing:-.02em;
  text-shadow:0 0 calc(var(--glow) * 22px) rgba(230,184,79,calc(var(--glow) * .9))}
.iv-b-labels i{display:block;margin-top:8px;color:#fff;font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal;opacity:calc(.6 + var(--glow) * .4)}
.iv-b-labels span{display:block;margin-top:5px;color:var(--on-dark-fine);font-size:var(--fs-fine);line-height:1.35;opacity:calc(.6 + var(--glow) * .4)}
.iv-b-labels li::after{content:"";display:block;margin:11px auto 0;width:calc(12px + var(--glow) * 52px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:calc(.25 + var(--glow) * .75)}
html.iv-js .iv-b-labels li{--rev:0}

.iv-b-stage{position:relative;z-index:1;height:clamp(250px,27vw,330px)}
.iv-b-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.iv-b-ends{position:absolute;left:24px;right:24px;bottom:12px;display:flex;justify-content:space-between;margin:0;color:var(--on-dark-fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}

/* scripts off: a still line of light stands in for the flow */
.iv-b-stage::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-light),rgba(212,188,132,.18));box-shadow:0 0 16px rgba(226,178,84,.55)}
html.iv-js .iv-b-panel.is-open .iv-b-stage::before{display:none}

/* opening: the panel is a slit of light on the line of the beam, then opens */
html.iv-js .iv-b-panel{--slit-t:58%;--slit-b:40%;clip-path:inset(var(--slit-t) 0 var(--slit-b) 0 round 16px);opacity:.0;transition:clip-path 1.15s cubic-bezier(.65,0,.2,1),opacity .5s ease}
html.iv-js .iv-b-panel.is-open{clip-path:inset(0 0 0 0 round 16px);opacity:1}
html.iv-js .iv-b-panel:not(.is-open){opacity:1;background:linear-gradient(180deg,rgba(255,236,196,0),rgba(255,236,196,.95) 48%,rgba(255,236,196,0));box-shadow:none}
html.iv-js .iv-b-panel:not(.is-open)>*{visibility:hidden}

/* if the script never opens the panel (blocked or failed), show the composed still after 6s */
@keyframes iv-rescue{to{clip-path:inset(0 0 0 0 round 16px);background:linear-gradient(180deg,var(--field-2),var(--field) 60%,var(--field-2))}}
@keyframes iv-rescue-v{to{visibility:visible}}
@keyframes iv-rescue-o{to{opacity:1}}
html.iv-js .iv-b-panel:not(.is-open){animation:iv-rescue 0s 6s forwards}
html.iv-js .iv-b-panel:not(.is-open)>*{animation:iv-rescue-v 0s 6s forwards}
html.iv-js .iv-b-panel:not(.is-open) .iv-b-labels li{animation:iv-rescue-o 0s 6s forwards}

@media (max-width:820px){
  .iv-b-labels{position:absolute;inset:22px 0 0 auto;height:auto;width:35%;z-index:2}
  .iv-b-labels li{left:0;top:calc(20px + var(--u) * (100% - 40px));transform:translateY(-50%) translateX(calc((1 - var(--rev)) * 14px));text-align:left;max-width:none;width:100%}
  .iv-b-labels b{display:inline-block;margin-right:7px;font-size:19px}
  .iv-b-labels i{display:inline-block;margin:0;font-size:10px;letter-spacing:.12em}
  .iv-b-labels span{margin-top:3px;font-size:12px}
  .iv-b-labels li::after{margin:8px 0 0;width:calc(10px + var(--glow) * 40px)}
  .iv-b-panel{padding-top:0}
  .iv-b-stage{height:540px}
  .iv-b-ends{display:none}
  .iv-b-stage::before{left:33%;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,var(--gold-light),rgba(212,188,132,.18))}
}
@media (prefers-reduced-motion:reduce){
  html.iv-js .iv-b-panel,html.iv-js .iv-b-panel.is-open{transition:none!important;clip-path:none;opacity:1}
}