/* Bionary Iraq: the scroll-scrubbed hero. Engineering standard from the 10k-websites skill, styled on the Bionary design system.
   RTL: the action lane (the drop) lives in the left third of the footage; captions live in the right column. */
:root{
  --header-h:72px;
  --hero-vh:520;                      /* Tier 1 single shot: 520vh of pinned scroll, 420vh of range */
  --tshadow:0 1px 2px rgba(4,7,7,.95),0 3px 12px rgba(4,7,7,.78),0 10px 44px rgba(4,7,7,.8);
}

.hero{position:relative;height:calc(var(--hero-vh) * 1vh);background:var(--ink-000,#040707);color:#fff}
.hero .stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:hidden;background:#040707;isolation:isolate}

/* layers */
.hero .poster{position:absolute;inset:0;background-size:cover;background-position:30% 50%;background-repeat:no-repeat;background-color:#040707}
.hero video.scrub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;opacity:0;transition:opacity .6s var(--ease-standard,cubic-bezier(.2,0,.2,1));will-change:transform;transform:translateZ(0);pointer-events:none}
.hero .stage.video-ready video.scrub{opacity:1}
.hero .stage.video-failed video.scrub{display:none}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 32% 46%,rgba(4,7,7,0) 38%,rgba(4,7,7,.55) 100%)}

/* loading ring (bottom centre), replaced by the scroll cue once the video is in, or by the chevron if it never arrives */
.hero .ring{position:absolute;left:50%;bottom:28px;width:36px;height:36px;margin-left:-18px;color:#bfbebe;transform:rotate(-90deg);opacity:.9;transition:opacity .42s var(--ease-standard)}
.hero .ring circle{transition:stroke-dashoffset .12s linear}
.hero .stage.video-ready .ring,.hero .stage.video-failed .ring{opacity:0}
.hero .cue{position:absolute;left:50%;bottom:26px;width:40px;height:40px;margin-left:-20px;opacity:0;pointer-events:none;transition:opacity .42s var(--ease-standard)}
.hero .stage.video-ready .cue,.hero .stage.video-failed .cue{opacity:.85}
.hero .stage.scrolled .cue{opacity:0}
.hero .cue::before{content:"";position:absolute;left:50%;top:10px;width:12px;height:12px;margin-left:-6px;border-right:1px solid #bfbebe;border-bottom:1px solid #bfbebe;transform:rotate(45deg);animation:bn-cue 2.4s var(--ease-standard) infinite}
@keyframes bn-cue{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(8px) rotate(45deg);opacity:1}}
body.paused .hero .cue::before{animation-play-state:paused}

/* caption bands: the right column */
.hero .bands{position:absolute;inset:0;pointer-events:none}
.hero .band{position:absolute;inset-inline-end:0;top:0;height:100%;width:min(58%,760px);padding-inline:var(--page-pad,32px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;opacity:0;pointer-events:none;text-shadow:var(--tshadow);text-align:start}
.hero .band.on{pointer-events:auto}
.hero .band::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 72% 60% at 52% 50%,rgba(4,7,7,var(--peak,.62)) 0%,rgba(4,7,7,calc(var(--peak,.62)*.66)) 46%,rgba(4,7,7,0) 76%)}
.hero .band[data-band="0"]{--peak:.62}
.hero .band[data-band="1"]{--peak:.68}
.hero .band[data-band="2"]{--peak:.56}
.hero .band[data-band="3"]{--peak:.64}

.hero .eyebrow{display:grid;gap:10px;justify-items:start;font:500 11px/1 "IBM Plex Sans Arabic",system-ui,sans-serif;letter-spacing:.08em;color:#bfbebe}
.hero .eyebrow::before{content:"";width:32px;height:2px;background:#fff}
.hero .line{margin:0;font:600 clamp(32px,4.4vw,64px)/1.3 "IBM Plex Sans Arabic",system-ui,sans-serif;letter-spacing:0;color:#fff;max-width:100%}
.hero .sub{margin:0;font:400 clamp(16px,1.25vw,20px)/1.75 "IBM Plex Sans Arabic",system-ui,sans-serif;color:#bfbebe;max-width:44ch}
.hero .num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;direction:ltr;unicode-bidi:isolate;display:inline-block;font-size:.86em;letter-spacing:-.01em}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.hero .actions .btn{text-shadow:none}

/* word splitting: screen-reader copy + visual words. Arabic is split by WORD only; splitting letters would break joining */
.hero .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .vis{display:inline}
.hero .w{display:inline-block;will-change:transform,opacity}

/* entrances, all transform + opacity, scrubbed off the band's --k */
.hero .band[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
.hero .band[data-entrance="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.hero .band[data-entrance="punch"] .w.em{--ov:.22;--sd:.16;--ss:2.6}
.hero .band[data-entrance="blur"] .line{position:relative}
.hero .band[data-entrance="blur"] .line .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));pointer-events:none}
.hero .band[data-entrance="blur"] .line .sharp{opacity:var(--k,0)}
.hero .band[data-entrance="blur"] .sub{opacity:clamp(0,(var(--k,0) - .4)*2.2,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .4)*2.2,1))*10px))}
.hero .band[data-entrance="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
.hero .band[data-entrance="rise"] .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.hero .band[data-entrance="rise"] .actions{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}
.hero .band[data-entrance="drift"] .sub,.hero .band[data-entrance="punch"] .sub{opacity:clamp(0,(var(--k,0) - .45)*2.4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .45)*2.4,1))*-10px))}
.hero .band .eyebrow{opacity:clamp(0,var(--k,0)*2.5,1)}

/* the static hero: phones, portrait tablets, coarse portrait, short landscape phones, reduced motion. The same five gates live in hero.js */
.hero-static{display:none;background:#040707;color:#fff}
.hero-static .plate{position:relative;aspect-ratio:4/5;max-height:72vh;overflow:hidden;background:#040707}
.hero-static .plate img{width:100%;height:100%;object-fit:cover;object-position:22% 50%}
.hero-static .copy{display:grid;gap:18px;padding:40px var(--page-pad,32px) 56px;justify-items:start;text-align:start}
.hero-static .eyebrow{font:500 11px/1 "IBM Plex Sans Arabic",system-ui,sans-serif;letter-spacing:.08em;color:#bfbebe;display:grid;gap:10px;justify-items:start}
.hero-static .eyebrow::before{content:"";width:32px;height:2px;background:#fff}
.hero-static .line{margin:0;font:600 clamp(32px,9vw,52px)/1.3 "IBM Plex Sans Arabic",system-ui,sans-serif;color:#fff}
.hero-static .sub{margin:0;font:400 17px/1.75 "IBM Plex Sans Arabic",system-ui,sans-serif;color:#bfbebe;max-width:40ch}
.hero-static .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* Two gates only (the user asked for the scroll video on phones): reduced motion, and a phone held sideways with no room for the journey. The same two strings live in hero.js */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .hero .stage{display:none}
  .hero-static{display:block}
}

/* phone layout for the scrub: the cover crop follows the drop's lane, captions move to the bottom of the stage */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px){
  :root{--hero-vh:440}
  .hero .stage{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h))}
  .hero .poster{background-position:24% 50%}
  .hero video.scrub{object-position:24% 50%}
  .hero .scrim{background:linear-gradient(to top,rgba(4,7,7,.72) 0%,rgba(4,7,7,.38) 38%,rgba(4,7,7,0) 64%)}
  .hero .band{inset-inline:0;width:auto;top:auto;bottom:0;height:auto;justify-content:flex-end;padding:0 16px 64px;gap:12px}
  .hero .band::before{inset:-12% -6% -10%;background:radial-gradient(ellipse 110% 80% at 50% 78%,rgba(4,7,7,var(--peak,.62)) 0%,rgba(4,7,7,calc(var(--peak,.62)*.6)) 50%,rgba(4,7,7,0) 80%)}
  .hero .line{font-size:clamp(28px,8.4vw,40px);line-height:1.28;max-width:100%}
  .hero .sub{font-size:15px;line-height:1.7;max-width:100%}
  .hero .actions{width:100%;flex-direction:column;align-items:stretch}
  .hero .actions .btn{width:100%}
  .hero .ring,.hero .cue{bottom:14px}
}
@media (min-width:721px) and (max-width:1024px) and (orientation:landscape){
  .hero .band{width:62%}
}
@media (max-height:560px){.hero .cue,.hero .ring{display:none}}
@media (pointer:coarse){.hero .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}