/* ════════════════════════════════════════════════════════════════════ hero-studio.css — Techno Media cinematic STUDIO scrollytelling hero. Real studio video plays (graded like film) → a still studio frame fades into it → as you scroll a deep backdrop fades in and glowing particles COALESCE into the Techno Media kufic mark, then the crisp lockup lands. Ported from the React reference. Fresh `shx-` namespace dodges the global #home-subtree CSS resets. Drives via hero-studio.js + Three.js. ══════════════════════════════════════════════════════════════════ */ /* NOTE: fonts are loaded NON-render-blocking from index.html . NEVER @import a remote stylesheet here — it blocks the whole page from painting until it loads (caused a full white screen on slow/blocked nets). */ .shx{position:relative;height:360vh;background:#03060f;color:#eef3ff;direction:rtl;} .shx-pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#03060f;} /* layers --------------------------------------------------------------- */ .shx-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .shx-video{z-index:0;will-change:transform,filter;} /* show the WHOLE studio photo (logo above the door must be visible) on any screen — contain letterboxes it onto the dark stage instead of cropping. */ .shx-photo{z-index:1;object-fit:contain;will-change:opacity;} .shx-grade{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(135% 115% at 50% 42%, transparent 42%, rgba(3,8,26,.72) 100%);} .shx-tint{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(20,55,130,.12);mix-blend-mode:screen;} .shx-dark{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:radial-gradient(120% 100% at 50% 45%, rgba(5,10,34,.55) 0%, rgba(2,4,12,.97) 100%);} /* faint film grain for cinematic texture */ .shx-pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .shx-canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;pointer-events:none;} /* cinematic letterbox bars -------------------------------------------- */ .shx-bar{position:absolute;left:0;right:0;z-index:5;background:#000;height:0;pointer-events:none;} .shx-bartop{top:0}.shx-barbot{bottom:0} /* headlines ------------------------------------------------------------ */ .shx-head{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:0 24px;pointer-events:none;} .shx-kick{font-family:'Space Grotesk','Cairo',sans-serif;font-weight:600;letter-spacing:.42em;font-size:clamp(10px,1.3vw,13px); color:#9cc6ff;margin-bottom:16px;text-transform:uppercase;padding-inline-start:.42em;} .shx-h1{font-family:'Tajawal','Cairo',sans-serif;font-weight:800;color:#f3f8ff;font-size:clamp(30px,6.6vw,64px);line-height:1.14; text-shadow:0 8px 50px rgba(0,0,0,.75);} .shx-h1 .shx-hi{font-weight:300;color:#bcd2f5;} /* final lockup -------------------------------------------------------- */ .shx-lock{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 24px;text-align:center;pointer-events:none;opacity:0;} .shx-mark{width:min(178px,42vw);height:auto;display:block;filter:drop-shadow(0 0 34px rgba(130,185,255,.55));} .shx-text{width:min(204px,46vw);height:auto;display:block;margin-top:20px;filter:drop-shadow(0 0 18px rgba(130,185,255,.38));} .shx-tag{font-family:'Tajawal','Cairo',sans-serif;font-weight:700;color:#dbe7ff;font-size:clamp(15px,2.6vw,21px);margin-top:24px;} .shx-tag2{font-family:'Tajawal','Cairo',sans-serif;font-weight:300;color:#9fb6e0;font-size:clamp(12px,2vw,16px);margin-top:7px;} /* scroll hint --------------------------------------------------------- */ .shx-hint{position:absolute;bottom:28px;left:0;right:0;z-index:6;text-align:center;text-decoration:none; font-family:'Tajawal','Cairo',sans-serif;color:#aac3ee;font-size:13px;} .shx-chev{display:block;margin:9px auto 0;width:15px;height:15px;border-right:2px solid #aac3ee;border-bottom:2px solid #aac3ee; transform:rotate(45deg);animation:shxBob 1.7s ease-in-out infinite;} @keyframes shxBob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}} /* ── static / reduced-motion / no-WebGL fallback (clean 100vh hero) ── */ .shx--static{height:100svh;height:100vh;} .shx--static .shx-pin{position:relative;height:100svh;height:100vh;} .shx--static .shx-photo,.shx--static .shx-canvas,.shx--static .shx-bar, .shx--static .shx-hint,.shx--static #shxHead1,.shx--static #shxHead2{display:none;} .shx--static .shx-video{opacity:1;} .shx--static .shx-dark{opacity:.6;} .shx--static .shx-lock{opacity:1;pointer-events:auto;} /* ── scroll-LOCK intro gate (driven by hero-studio.js) ────────────────── While `.shx--gate` is on, page scroll is disabled (html.shx-lock) and the hero fills the viewport; wheel/touch/keys drive the presentation. When it completes, JS swaps to `.shx--gatedone` and unlocks normal scrolling. */ html.shx-lock, html.shx-lock body{overflow:hidden !important;} .shx--gate{height:100vh;height:100svh;} .shx--gate .shx-pin{touch-action:none;} .shx--gatedone{height:100vh;height:100svh;} @media (max-width:600px){ .shx{height:340vh;} } @media (prefers-reduced-motion:reduce){ .shx-chev{animation:none;} }