/* ════════════════════════════════════════════════════════════════════
   hero-film.css — the Techno Media brand FILM ("Beyond the Screen").
   A pre-rendered 44s 3D film (tools/hero-film) played in a full-screen
   stage, with real HTML on top: the opening + "Start" button, captions
   synced to the film's clock, quiet controls, and the end state.
   States on .hf: is-open · is-loading · is-playing · is-paused · is-rest · is-still
   ══════════════════════════════════════════════════════════════════ */
.hf{
  --hf-bg:#03060f; --hf-ink:#eef3ff; --hf-dim:#a7b8d8;
  --hf-blue:#2d5bff; --hf-blue-soft:#8fb0ff;
  position:relative; height:100vh; height:100svh; min-height:520px;
  background:var(--hf-bg); color:var(--hf-ink);
  font-family:'Tajawal','Cairo',system-ui,sans-serif;
}
.hf-stage{ position:absolute; inset:0; overflow:hidden; isolation:isolate; }
.hf-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--hf-bg);
}
.hf-poster{ z-index:0; }
.hf-loop{ z-index:1; opacity:0; transition:opacity .9s ease; }
.hf-loop.is-on{ opacity:1; }
.hf-film{ z-index:2; opacity:0; transition:opacity .5s ease; }
.hf.is-playing .hf-film, .hf.is-paused .hf-film{ opacity:1; }
.hf-restimg{ z-index:3; opacity:0; transition:opacity 1.2s ease; }
.hf.is-rest .hf-restimg, .hf.is-still .hf-restimg{ opacity:1; }

/* lens vignette + film grain (static; cheap; never re-rastered) */
.hf-veil{
  position:absolute; inset:0; z-index:4; pointer-events:none; will-change:transform;
  background:radial-gradient(120% 95% at 50% 46%, transparent 58%, rgba(1,3,10,.6) 100%);
}
.hf-veil::after{
  content:""; position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hf-ui{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.hf-ui a, .hf-ui button{ pointer-events:auto; }

/* ── shared type ── */
.hf-w{ display:inline-block; white-space:nowrap; will-change:transform,opacity; }
.hf-metal .hf-w, .hf-metal.hf-solid{
  background:linear-gradient(180deg,#ffffff 8%,#dfe8f8 46%,#94a8cc 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hf-sweep{
  --rv:1;
  -webkit-mask-image:linear-gradient(var(--hf-sweep-dir,to left), #000 calc(var(--rv) * 140% - 40%), transparent calc(var(--rv) * 140%));
          mask-image:linear-gradient(var(--hf-sweep-dir,to left), #000 calc(var(--rv) * 140% - 40%), transparent calc(var(--rv) * 140%));
}
html[dir="ltr"] .hf{ --hf-sweep-dir:to right; }
.hf-sr{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── the opening (before "Start") ── */
.hf-open{
  position:absolute; left:0; right:0; bottom:clamp(28px, 6vh, 64px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 22px; transition:opacity .6s ease, transform .6s ease;
}
.hf:not(.is-open):not(.is-loading) .hf-open{ opacity:0; transform:translateY(-14px); visibility:hidden; transition:opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.hf-brand{
  margin:0; font-weight:800; line-height:1; direction:ltr;
  font-size:clamp(36px, 5.2vw, 74px); letter-spacing:.06em;
}
.hf-lede{ margin:14px 0 0; max-width:520px; font-weight:300; color:var(--hf-dim); font-size:clamp(14.5px,1.3vw,17.5px); line-height:1.7; }
.hf-start{
  position:relative; margin-top:28px;
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 26px 14px 16px; border-radius:999px;
  border:1px solid rgba(143,176,255,.42);
  background:rgba(10,20,52,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#fff; font:700 16.5px/1 'Tajawal','Cairo',sans-serif; cursor:pointer;
  box-shadow:0 10px 40px rgba(20,50,160,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
html[dir="rtl"] .hf-start{ padding:14px 16px 14px 26px; }
.hf-start:hover, .hf-start:focus-visible{ background:rgba(45,91,255,.32); border-color:rgba(143,176,255,.8); transform:translateY(-1px); }
.hf-start:focus-visible, .hf-ctrl button:focus-visible, .hf-enter:focus-visible, .hf-cta:focus-visible{ outline:2px solid var(--hf-blue-soft); outline-offset:3px; }
.hf-start-ico{
  position:relative; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#0a1640; font-size:13px;
}
.hf-start-ico svg{ width:13px; height:13px; margin-inline-start:2px; }
html[dir="rtl"] .hf-start-ico svg{ transform:scaleX(-1); margin-inline-start:0; margin-inline-end:2px; }
/* buffering ring around the play disc while the film gets ready */
.hf-start-ring{
  position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(var(--hf-blue-soft) calc(var(--p,0) * 1turn), rgba(143,176,255,.15) 0);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%); mask:radial-gradient(circle, transparent 60%, #000 61%);
  opacity:0; transition:opacity .3s ease;
}
.hf.is-loading .hf-start-ring{ opacity:1; }
.hf-start-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.hf-start-sub{ font-weight:300; font-size:12.5px; color:var(--hf-dim); }
.hf-enter{
  margin-top:16px; font-size:13.5px; color:#9fb3d9; text-decoration:none;
  border-bottom:1px solid rgba(159,179,217,.35); padding-bottom:2px;
}
.hf-enter:hover{ color:#fff; }

/* ── captions synced to the film ── */
.hf-caps{ position:absolute; inset:0; }
.hf-cap{ position:absolute; opacity:0; visibility:hidden; will-change:transform,opacity; }
.hf-intro{ left:0; right:0; bottom:clamp(54px, 11vh, 120px); text-align:center; padding:0 22px; }
.hf-kick{ margin:0 0 14px; font-weight:500; font-size:clamp(10px,1.05vw,12.5px); letter-spacing:.46em; padding-inline-start:.46em; color:var(--hf-blue-soft); direction:ltr; }
.hf-ch{ display:inline-block; }
.hf-title{ margin:0; font-weight:800; line-height:1.06; font-size:clamp(44px, 6.4vw, 92px); }
html[dir="ltr"] .hf-title{ letter-spacing:-.025em; }
.hf-sub{ margin:16px auto 0; max-width:560px; font-weight:300; color:var(--hf-dim); font-size:clamp(14.5px,1.35vw,18px); line-height:1.75; }
.hf-svc, .hf-end{ top:50%; inset-inline-start:clamp(28px, 7vw, 120px); width:min(440px, 34vw); }
.hf-svc-meta{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:13px; color:var(--hf-blue-soft); }
html[dir="ltr"] .hf-svc-meta{ font-size:12px; letter-spacing:.28em; }
.hf-svc-n{ font-weight:500; direction:ltr; letter-spacing:.12em; }
.hf-svc-line{ flex:0 0 46px; height:1px; background:linear-gradient(90deg,var(--hf-blue),transparent); }
html[dir="rtl"] .hf-svc-line{ background:linear-gradient(270deg,var(--hf-blue),transparent); }
.hf-svc-t{ margin:0; font-weight:800; line-height:1.14; font-size:clamp(32px, 3.9vw, 58px); }
.hf-svc-d{ margin:16px 0 0; font-weight:300; color:var(--hf-dim); font-size:clamp(15px,1.3vw,18px); line-height:1.8; }
.hf-tag{
  left:0; top:0; padding:6px 12px; border-radius:999px; white-space:nowrap;
  font-size:12px; font-weight:500; color:#d8e3f8;
  border:1px solid rgba(143,176,255,.24); background:rgba(6,12,30,.55);
}
.hf-tag b{ color:var(--hf-blue-soft); font-weight:500; }
.hf-end-1{ margin:0; font-weight:300; color:#c0cfe9; font-size:clamp(24px, 3vw, 44px); line-height:1.3; }
.hf-end-2{ margin:6px 0 0; font-weight:800; line-height:1.18; font-size:clamp(32px, 4.3vw, 64px); }

/* ── end state (after the film or "Skip") ── */
.hf-rest{
  position:absolute; top:50%; inset-inline-start:clamp(28px, 7vw, 120px); width:min(460px, 36vw);
  opacity:0; visibility:hidden; transform:translateY(-46%);
  transition:opacity .9s ease .2s, transform .9s ease .2s, visibility 0s 1.1s;
}
.hf.is-rest .hf-rest, .hf.is-still .hf-rest{ opacity:1; visibility:visible; transform:translateY(-50%); transition:opacity .9s ease .3s, transform .9s ease .3s; }
.hf-rest-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hf-cta, .hf-again{
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px;
  font:500 15px/1 'Tajawal','Cairo',sans-serif; text-decoration:none; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.hf-cta{ color:#fff; background:var(--hf-blue); border:1px solid var(--hf-blue); }
.hf-cta:hover{ background:#3c69ff; }
.hf-again{ color:#dfe7fa; background:rgba(10,20,52,.45); border:1px solid rgba(143,176,255,.3); }
.hf-again:hover{ border-color:rgba(143,176,255,.7); }
.hf.is-still .hf-again{ display:none; }

/* ── controls: quiet, auto-hiding; "Skip" always reachable ── */
.hf-ctrl{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  width:min(560px, calc(100% - 32px));
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-radius:999px; background:rgba(5,10,26,.55);
  border:1px solid rgba(143,176,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s;
  direction:ltr;                              /* media controls read left→right everywhere */
}
.hf.is-playing.ui-on .hf-ctrl, .hf.is-paused .hf-ctrl{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.hf-ctrl button{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.08); color:#eaf0ff;
}
.hf-ctrl button:hover{ background:rgba(255,255,255,.16); }
.hf-ctrl svg{ width:15px; height:15px; fill:currentColor; }
.hf-bar{
  position:relative; flex:1 1 auto; height:22px; cursor:pointer; touch-action:none;
}
.hf-bar::before{ content:""; position:absolute; left:0; right:0; top:10px; height:2px; border-radius:2px; background:rgba(143,176,255,.2); }
.hf-bar-fill{ position:absolute; left:0; top:10px; height:2px; width:100%; border-radius:2px; background:linear-gradient(90deg,#8fb0ff,#2d5bff); transform-origin:left; transform:scaleX(0); }
.hf-bar-tick{ position:absolute; top:8px; width:2px; height:6px; border-radius:1px; background:rgba(143,176,255,.45); }
.hf-ctrl button[aria-pressed="true"]{ color:#9fb3d9; }
/* volume: a slim slider beside the speaker (touch devices use their own buttons) */
.hf-vol{ flex:0 0 auto; width:78px; height:22px; margin:0 2px; accent-color:#5d86ff; cursor:pointer; background:transparent; }
.hf-vol[hidden]{ display:none; }
@media (pointer:coarse){ .hf-vol{ display:none; } }.hf-time{ flex:0 0 auto; font:500 12px/1 'Tajawal',system-ui,sans-serif; color:#9fb3d9; font-variant-numeric:tabular-nums; min-width:76px; text-align:center; }
.hf-skip{
  position:absolute; bottom:22px; right:22px;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(143,176,255,.24); background:rgba(6,12,30,.5);
  color:#b9c9ea; font:500 13px/1 'Tajawal','Cairo',sans-serif; cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s;
}
.hf.is-playing .hf-skip, .hf.is-paused .hf-skip, .hf.is-loading .hf-skip{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.hf-skip:hover{ color:#fff; border-color:rgba(143,176,255,.6); }
.hf-buffer{
  position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  border:2px solid rgba(143,176,255,.18); border-top-color:#8fb0ff; opacity:0; transition:opacity .3s ease;
  animation:hfSpin 1s linear infinite;
}
.hf.is-waiting .hf-buffer{ opacity:1; }
@keyframes hfSpin{ to{ transform:rotate(1turn); } }

/* ── phones / portrait: subject high, words low ── */
@media (max-width:768px), (max-aspect-ratio:9/10){
  .hf-open{ bottom:clamp(30px, 7svh, 72px); }
  .hf-brand{ font-size:clamp(34px, 11vw, 52px); }
  .hf-intro{ bottom:clamp(96px, 16svh, 150px); }
  .hf-svc, .hf-end{ top:auto; bottom:clamp(96px, 15svh, 150px); inset-inline-start:22px; inset-inline-end:22px; width:auto; }
  .hf-rest{ top:auto; bottom:clamp(30px, 8svh, 80px); inset-inline-start:22px; inset-inline-end:22px; width:auto; transform:translateY(8px); }
  .hf.is-rest .hf-rest, .hf.is-still .hf-rest{ transform:none; }
  .hf-svc-meta{ margin-bottom:12px; }
  .hf-svc-d{ margin-top:10px; }
  .hf-ctrl{ bottom:16px; gap:8px; padding:7px 9px; }
  .hf-time{ display:none; }
  .hf-skip{ top:86px; bottom:auto; right:16px; }
}
/* squat landscape (phones on their side) */
@media (min-width:769px) and (max-height:560px){
  .hf-title{ font-size:clamp(30px, 9vh, 52px); }
  .hf-svc-t{ font-size:clamp(26px, 7.5vh, 44px); }
  .hf-svc-d{ margin-top:8px; font-size:14px; }
  .hf-end-1{ font-size:clamp(20px, 6vh, 32px); }
  .hf-end-2{ font-size:clamp(26px, 8vh, 46px); }
  .hf-brand{ font-size:clamp(30px, 9vh, 52px); }
  .hf-lede{ display:none; }
  .hf-start{ margin-top:16px; }
}

/* ── "The Creative Big Bang": words are inside the picture ── */
.hf.is-baked .hf-caps, .hf.is-baked .hf-rest .hf-end-1, .hf.is-baked .hf-rest .hf-end-2{ display:none !important; }
.hf.is-baked .hf-rest-actions{ margin-top:0; flex-direction:column; align-items:flex-start; }
/* the opening still drifts, very slowly (this film has no opening loop video) */
.hf.is-baked.is-open .hf-poster, .hf.is-baked.is-loading .hf-poster{ animation:hfDrift 20s ease-in-out infinite alternate; transform-origin:62% 50%; will-change:transform; }
@keyframes hfDrift{ from{ transform:scale(1); } to{ transform:scale(1.06) translate3d(-1%,0,0); } }
@media (prefers-reduced-motion:reduce){ .hf.is-baked.is-open .hf-poster, .hf.is-baked.is-loading .hf-poster{ animation:none; } }
.hf-go{
  display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:999px;
  font:700 15px/1 'Tajawal','Cairo',sans-serif; text-decoration:none; color:#0a1640; background:#fff; border:1px solid #fff;
  transition:background .25s ease, transform .25s ease;
}
.hf-go:hover{ background:#e6edff; }
.hf-go:focus-visible{ outline:2px solid var(--hf-blue-soft); outline-offset:3px; }
/* "see this work": appears only while a real portfolio piece fills the screen */
.hf-feat{
  position:absolute; bottom:86px; inset-inline-start:22px; z-index:6;
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px 9px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(143,176,255,.35); background:rgba(6,12,30,.55); color:#eaf0ff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font:500 13px/1.1 'Tajawal','Cairo',sans-serif;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease, visibility 0s .35s;
}
.hf-feat-t{ font-weight:700; }
.hf-feat-l{ color:#9fb3d9; }
.hf-feat-l:empty{ display:none; }
.hf-feat svg{ width:14px; height:14px; }
.hf.is-playing .hf-feat.is-on, .hf.is-paused .hf-feat.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease; }
.hf-feat:hover{ border-color:rgba(143,176,255,.7); }
.hf-feat:focus-visible{ outline:2px solid var(--hf-blue-soft); outline-offset:3px; }
@media (max-width:768px), (max-aspect-ratio:9/10){
  .hf.is-baked .hf-rest{ bottom:clamp(14px, 3svh, 30px); }
  .hf.is-baked .hf-rest-actions{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; }
  .hf-go, .hf.is-baked .hf-cta, .hf.is-baked .hf-again{ padding:11px 16px; font-size:14px; }
  .hf-feat{ bottom:74px; inset-inline-start:16px; }
}