/* BRANDBIT — home hero: the growth arrow (ID-043) */
.arrow-film{position:relative;background:#0b0d14;--ease:cubic-bezier(.16,1,.3,1)}
.arrow-film.is-running{height:640svh}
.arrow-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}
.arrow-world{position:absolute;inset:0;z-index:0}
.arrow-world canvas{display:block;width:100%;height:100%}
.arrow-stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0b0d14cc,transparent 55%)}

.arrow-top{position:absolute;top:120px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.13em;font-weight:500;z-index:3}
.arrow-top span:last-child{color:#b7abff}

.arrow-copy{position:absolute;left:6%;top:27%;width:min(48%,720px);z-index:3}
.arrow-eyebrow{font-size:11px;letter-spacing:.13em;font-weight:500;height:18px;overflow:hidden;position:relative}
.arrow-eyebrow span{display:block;position:absolute;inset:0;transform:translateY(100%);opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.arrow-headline{margin-top:22px;position:relative;min-height:3.2em;font-size:clamp(44px,5.6vw,100px)}
.arrow-act{position:absolute;left:0;top:0;width:max-content;max-width:calc(100vw - 12%);visibility:hidden}
.arrow-act.in,.arrow-act.out{visibility:visible}
.arrow-act h1,.arrow-act h2{margin:0;font-size:1em;font-weight:500;letter-spacing:-.055em;line-height:.94;text-transform:uppercase}
.arrow-act em{font-style:normal;color:#d6ff38}
.arrow-line{display:block;overflow:hidden;white-space:nowrap;padding:0 .12em .08em .08em;margin:0 -.12em -.08em -.08em}
.arrow-line>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.arrow-act.in .arrow-line>span{transform:translateY(0)}
.arrow-act.in .arrow-line:nth-child(1)>span{transition-delay:.34s}
.arrow-act.in .arrow-line:nth-child(2)>span{transition-delay:.42s}
.arrow-act.out .arrow-line>span{transform:translateY(-105%);transition:transform .42s cubic-bezier(.7,0,.84,0)}
.arrow-act p{white-space:normal;margin:30px 0 0;font-size:clamp(15px,1.25vw,19px);line-height:1.55;letter-spacing:0;max-width:430px;color:#c9ccd2;opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) .55s,transform .8s var(--ease) .55s}
.arrow-act.in p{opacity:1;transform:none}
.arrow-act.out p{opacity:0;transform:translateY(-10px);transition-delay:0s;transition-duration:.25s}
.arrow-act.reset .arrow-line>span,.arrow-act.reset p{transition:none!important}

.arrow-controls{position:absolute;left:6%;right:6%;bottom:32px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.07em;z-index:3}
.arrow-controls a{border-bottom:1px solid #d6ff38;padding:12px 0}
.arrow-progress{display:flex;gap:8px;align-items:center}
.arrow-progress b{font-weight:500;min-width:18px}
.arrow-progress i{height:2px;width:35px;background:#ffffff30;position:relative;overflow:hidden}
.arrow-progress i::after{content:"";position:absolute;inset:0;background:#d6ff38;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.arrow-progress i.on::after{transform:scaleX(1)}
.arrow-film .bit-waypoint{position:absolute;right:6%;top:23%;margin:0;padding:0;border:0;z-index:3}
.arrow-film .bit-waypoint>a,.arrow-film .bit-context-button>span:nth-child(2),.arrow-film .bit-context-button>b{display:none}
.arrow-film .bit-context-button .bit-face{width:44px;height:44px}

/* without WebGL / reduced motion: the five statements stacked */
.arrow-film.arrow-quiet .arrow-stage{position:relative;height:auto;padding:170px 6% 80px}
.arrow-film.arrow-quiet .arrow-world,.arrow-film.arrow-quiet .arrow-eyebrow,.arrow-film.arrow-quiet .arrow-progress{display:none}
.arrow-film.arrow-quiet .arrow-copy{position:relative;inset:auto;width:100%}
.arrow-film.arrow-quiet .arrow-headline{min-height:0}
.arrow-film.arrow-quiet .arrow-act{position:relative;visibility:visible;margin-bottom:70px;max-width:100%;width:auto}
.arrow-film.arrow-quiet .arrow-line{white-space:normal}
.arrow-film.arrow-quiet .arrow-line>span,.arrow-film.arrow-quiet .arrow-act p{transform:none;opacity:1}
.arrow-film.arrow-quiet .arrow-controls{position:relative;inset:auto}

@media(max-width:760px){
  .arrow-top{top:96px}
  .arrow-top span:last-child{display:none}
  .arrow-copy{top:19%;width:88%}
  .arrow-headline{font-size:12.5vw}
  .arrow-act p{display:none} /* phones: headline + arrow + counter only, so nothing overlaps */
  .arrow-film.arrow-quiet .arrow-act p{display:block;font-size:15px}
  .arrow-stage:after{background:linear-gradient(180deg,#0b0d14ee 0%,#0b0d14aa 45%,transparent 70%)}
  .arrow-controls span:nth-child(2){display:none}
  .arrow-film .bit-waypoint{top:auto;bottom:80px}
}