/* SAIF DHIYAA / Premium temporary website — 100% static, Go Live compatible */
:root {
  color-scheme: dark;
  --background: #06131b;
  --white: #f2f8fb;
  --muted: #a0b3bf;
  --cyan: #70e5ed;
  --cyan-soft: #81bada;
  --line: rgba(140, 204, 228, .30);
  --main-width: 1120px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { min-width: 320px; margin: 0; color: var(--white); font-family: "Avenir Next", "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #82ebee; color: #07131b; }
.experience { --scene-x: 0px; --scene-y: 0px; --light-x: 50%; --light-y: 62%; position: relative; isolation: isolate; width: 100%; min-height: 100vh; min-height: 100svh; overflow: clip; background: radial-gradient(ellipse 65% 58% at 53% 55%, #0a2835 0%, #071824 55%, #06131b 96%); }
.ambient, .scene-holder, .vignette, .grain, .grid-texture { pointer-events: none; position: absolute; inset: 0; }
.ambient { z-index: -3; }
.ambient--left { background: radial-gradient(ellipse 48% 54% at 7% 48%, rgba(20, 115, 131, .20), transparent 80%); animation: ambient-drift 13s ease-in-out infinite alternate; }
.ambient--right { background: radial-gradient(ellipse 46% 65% at 95% 68%, rgba(55, 140, 174, .14), transparent 80%); animation: ambient-drift 16s ease-in-out infinite alternate-reverse; }
/* Keep the original art direction, but move the photographic drone itself.
   All scene layers use matching cropping and scaling, so the drone lands
   at the exact coordinates it occupied in the original photograph. */
.scene-holder { z-index: -2; overflow: hidden; transform: translate3d(var(--scene-x), var(--scene-y), 0); transition: transform 1.1s var(--ease-out); }
.scene-stage { position:absolute; inset:-2%; transform-origin:50% 82%; animation:cinema-breathe 21s ease-in-out infinite alternate; }
.cinema-scene, .cinema-original, .drone-photographic {
  position:absolute; inset:0;
  background-position:center bottom;
  background-size:cover;
  background-repeat:no-repeat;
}
.cinema-scene, .cinema-original {
  opacity:.96;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 43%, rgba(0,0,0,.06) 49%, rgba(0,0,0,.65) 62%, #000 76%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, transparent 43%, rgba(0,0,0,.06) 49%, rgba(0,0,0,.65) 62%, #000 76%, #000 100%);
}
.cinema-scene { background-image:url('images/studio-empty.webp'); }
.cinema-original { background-image:url('images/studio.webp'); opacity:0; }
.drone-photographic {
  background-image:url('images/drone-original.webp');
  opacity:0;
  will-change:transform, opacity;
  transform:translate3d(0,-67vh,0) scale(.90);
}
.scene-stage.is-flying .drone-photographic {
  animation: original-drone-land 3.4s cubic-bezier(.16,.82,.22,1) forwards;
}
.scene-stage.is-landed .cinema-original { opacity:.96; transition:opacity .48s ease-out; }
.scene-stage.is-landed .drone-photographic { opacity:0; animation:none; transform:none; transition:opacity .48s ease-out; }
.drone-rotors { position:absolute; inset:0; opacity:0; pointer-events:none; }
.drone-rotors svg { width:100%;height:100%;display:block;overflow:hidden; }
.scene-stage.is-flying .drone-rotors { opacity:.95; }
.spinning-propeller { animation:photo-propeller-spin .10s linear infinite;transform-box:fill-box;transform-origin:center; }
.scene-stage.is-landed .spinning-propeller { animation:none; }
@keyframes original-drone-land {
  0%   { opacity:0; transform:translate3d(0,-67vh,0) scale(.90) rotate(-1.5deg); }
  10%  { opacity:1; }
  70%  { opacity:1; transform:translate3d(0,14px,0) scale(1.012) rotate(.4deg); }
  84%  { opacity:1; transform:translate3d(0,-7px,0) scale(.997) rotate(-.25deg); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1) rotate(0); }
}
@keyframes photo-propeller-spin { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
.vignette { z-index: -1; background: linear-gradient(90deg, rgba(3,10,17,.35), transparent 28%, transparent 75%, rgba(3,10,17,.28)), linear-gradient(0deg, rgba(1,8,14,.73), transparent 15%, transparent 45%, rgba(3,14,22,.06) 85%); }
.grain { z-index: 8; opacity: .095; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E"); }
.grid-texture { z-index: -1; opacity: .19; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25vw - 1px), rgba(124,193,216,.06) 25vw); -webkit-mask-image: linear-gradient(transparent, black 50%, transparent); mask-image: linear-gradient(transparent, black 50%, transparent); }

.site-header, .site-footer { z-index: 5; position: absolute; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.site-header { top: 0; padding: clamp(23px, 3.3vw, 48px) clamp(23px, 5vw, 90px); }
.identity { display: inline-flex; align-items: center; gap: 20px; white-space: nowrap; }
.identity__mark { font-size: 29px; line-height: 1; font-weight: 800; letter-spacing: -.10em; }
.accent-dot { color: var(--cyan); }
.identity__divider { width: 1px; height: 22px; background: var(--line); }
.identity__label { font-size: 10px; font-weight: 700; letter-spacing: .30em; color: #a1b5c1; }
.header-status { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .23em; color: #bcccd4; }
.status-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #7af1e9; box-shadow: 0 0 14px #6ef9ed; }
.status-dot::after { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(112,229,237,.45); border-radius: 50%; animation: status-pulse 2.4s ease-in-out infinite; }

.hero { position: relative; width: min(calc(100% - 46px), var(--main-width)); margin: 0 auto; padding-top: clamp(142px, 15.5vh, 190px); text-align: center; z-index: 3; }
.hero__frame { position: absolute; top: clamp(116px, 12.5vh, 160px); left: 50%; width: min(100%, 980px); height: clamp(256px, 35vh, 360px); transform: translateX(-50%); opacity: .8; }
.corner { position: absolute; width: 21px; height: 21px; border: solid rgba(124,220,244,.58); }
.corner--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.corner--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.corner--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 15px; color: #90b6c4; font-size: 10px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; margin: 0 0 18px; animation: fade-up 1s .95s both var(--ease-out); }
.eyebrow__line { display: block; height: 1px; width: 26px; background: linear-gradient(90deg, transparent, #6da6bb); }
.eyebrow__line:last-child { transform: rotate(180deg); }
.hero__title { position: relative; margin: 0; font-size: clamp(74px, 10.1vw, 152px); line-height: 1; font-weight: 780; letter-spacing: -.077em; color: #f3f8fa; text-shadow: 0 10px 60px rgba(6, 20, 31, .46); }
.hero__title .char, .hero__subtitle .char { display: inline-block; white-space: pre; will-change: transform, opacity; animation: char-rise .97s var(--ease-out) both; animation-delay: calc(1.05s + var(--i) * 65ms); }
.hero__title .char--space, .hero__subtitle .char--space { width: .24em; }
.hero__title .char { background-image: linear-gradient(150deg, #fff 19%, #e8f0f5 62%, #c2d5df); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__subtitle { margin: 9px 0 0; font-size: clamp(25px, 3.9vw, 58px); font-weight: 480; line-height: 1.23; letter-spacing: -.047em; color: #91cdd9; white-space: nowrap; }
.hero__subtitle .char { color: #90c9d7; animation-delay: calc(1.42s + var(--i) * 30ms); }
.hero__subtitle .char:nth-child(n+9) { color: #7de4e9; }
.signal { position: relative; width: min(360px, 52%); height: 1px; margin: 27px auto 0; background: linear-gradient(90deg, transparent, #438596, #78e4ed, #438596, transparent); opacity: .9; animation: signal-enter 1.15s 1.8s both; }
.signal__beam { position: absolute; width: 40%; left: -25%; height: 1px; background: linear-gradient(90deg, transparent, #e6ffff, transparent); filter: drop-shadow(0 0 5px #7df5ed); animation: signal-scan 5.5s 2.25s ease-in-out infinite; }
.signal__point { position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #8cf2f1; box-shadow: 0 0 16px #70f5f0; }
.hero__description { color: #aabfc9; margin: 22px 0 0; font-size: clamp(13px, 1.15vw, 16px); font-weight: 400; letter-spacing: .035em; animation: fade-up .9s 2.3s both var(--ease-out); }
.hero__description--arabic {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(52px, 4.2vw, 70px);
  margin: 24px auto 0; padding: 10px 18px 12px;
  max-width: min(92vw, 720px);
  font-family: "IBM Plex Sans Arabic", "Cairo", "Tajawal", "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(24px, 2.3vw, 37px);
  line-height: 1.45; font-weight: 800; letter-spacing: 0;
  color: #f3f8fb;
  text-align: center; direction: rtl;
  background: linear-gradient(180deg, rgba(111, 229, 237, .16), rgba(111, 229, 237, .04));
  border: 1px solid rgba(122, 224, 236, .32);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 40px rgba(3, 14, 22, .28);
  backdrop-filter: blur(5px);
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22);
}
.specialties { display: flex; align-items: center; justify-content: center; margin-top: 29px; gap: clamp(12px, 2.6vw, 38px); animation: fade-up 1s 2.55s both var(--ease-out); }
.specialty { display: flex; align-items: baseline; gap: 9px; font-size: 10px; font-weight: 680; letter-spacing: .14em; color: #d1dfe6; white-space: nowrap; }
.specialty__number { font-size: 9px; color: #5dc6d0; letter-spacing: .1em; font-weight: 650; }
.specialties__separator { height: 16px; width: 1px; background: var(--line); }

.scene-hud { position: absolute; display: flex; align-items: center; gap: 11px; left: clamp(23px, 5vw, 90px); bottom: clamp(105px, 17vh, 170px); color: rgba(175, 216, 227, .6); z-index: 3; font-size: 9px; letter-spacing: .22em; font-weight: 600; animation: fade-in 1s 2.8s both; }
.scene-hud__cross { font-size: 19px; font-weight: 200; color: #71c9dc; }

.site-footer { bottom: 0; padding: 0 clamp(23px, 5vw, 90px) clamp(25px, 3.7vw, 42px); gap: 30px; color: #a2b6c2; }
.footer-caption, .footer-copyright { font-size: 10px; letter-spacing: .23em; font-weight: 700; white-space: nowrap; }
.footer-caption { display: flex; align-items: center; gap: 12px; }
.footer-caption__bar { width: 21px; height: 1px; background: var(--cyan); }
.footer-progress { width: min(250px, 22vw); display: flex; align-items: center; gap: 13px; }
.footer-progress__track { position: relative; flex: 1; height: 2px; overflow: hidden; background: rgba(120,185,203,.23); }
.footer-progress__scanner { position: absolute; height: 100%; width: 32%; background: linear-gradient(90deg, transparent, #76e6e9, transparent); box-shadow: 0 0 20px #73e8ef; animation: footer-scan 4.5s linear infinite; }
.footer-progress__text { color: #79ceda; font-weight: 700; font-size: 9px; letter-spacing: .18em; white-space: nowrap; }
.footer-copyright { text-align: right; }

.loader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; background: #06141e; animation: loader-exit .76s 1.2s both ease-in; }
.loader__monogram { color: white; font-size: 58px; font-weight: 750; letter-spacing: -.09em; line-height: 1; }
.loader__monogram span { color: #7de9ed; }
.loader__track { position: relative; height: 1px; width: 110px; background: rgba(155,205,214,.28); overflow: hidden; }
.loader__track span { display: block; width: 36%; height: 1px; background: #8ef7f1; box-shadow: 0 0 13px #8ef7f1; animation: loader-slide .95s ease-in-out infinite; }
.loader__caption { font-size: 9px; letter-spacing: .26em; font-weight: 600; color: #789aa9; }

@keyframes loader-exit { 0% {opacity:1; visibility:visible;} 99% {opacity:0; visibility:visible;} 100% {opacity:0; visibility:hidden;} }
@keyframes loader-slide { 0% {transform:translateX(-120%);} 100% {transform:translateX(390%);} }
@keyframes char-rise { from {opacity:0; transform:translate3d(0, 38px,0) rotate(3deg); filter:blur(7px);} to {opacity:1; transform:translate3d(0,0,0) rotate(0);filter:blur(0);} }
@keyframes fade-up { from {opacity:0;transform:translate3d(0,18px,0);} to {opacity:1;transform:translate3d(0,0,0);} }
@keyframes fade-in { from {opacity:0;} to {opacity:1;} }
@keyframes signal-enter { from {opacity:0; transform:scaleX(.2);} to {opacity:1;transform:scaleX(1);} }
@keyframes signal-scan { 0%, 10% {left:-24%;opacity:0;} 32% {opacity:1;} 64% {left:91%;opacity:1;} 84%, 100% {left:110%;opacity:0;} }
@keyframes footer-scan { 0% {transform:translateX(-150%);} 100% {transform:translateX(500%);} }
@keyframes status-pulse { 0%, 100% {transform:scale(.7); opacity:.75;} 50% {transform:scale(1.3); opacity:.10;} }
@keyframes cinema-breathe { from {transform:scale(1.025) translate3d(-.4%,.3%,0);} to {transform:scale(1.075) translate3d(.4%,-.4%,0);} }
@keyframes ambient-drift { from {transform:translate3d(-3%,0,0);opacity:.6;} to {transform:translate3d(4%,-2%,0);opacity:1;} }
@media (min-width: 1700px) and (min-height: 900px) {
  .hero { padding-top: clamp(195px, 20vh, 255px); }
  .hero__frame { top: clamp(170px, 17vh, 210px); }
}
@media (max-height: 760px) and (min-width: 900px) {
  .hero { padding-top: 116px; }
  .hero__frame { top: 99px; height: 235px; }
  .eyebrow { margin-bottom: 10px; }
  .hero__title { font-size: clamp(62px, 8.4vw, 105px); }
  .hero__subtitle { font-size: clamp(24px, 3.4vw, 44px); }
  .signal { margin-top: 15px; }
  .hero__description { margin-top: 12px; }
  .specialties { margin-top: 19px; }
  .scene-hud { bottom: 95px; }
}
@media (max-width: 850px) {
  .site-header { padding: 27px 31px; }
  .identity__label { font-size: 9px; }
  .header-status { font-size: 8px; letter-spacing:.12em; }
  .hero { padding-top: clamp(178px, 17svh, 240px); }
  .hero__frame { top: clamp(146px, 14svh, 210px); width: calc(100% - 8px); height: 300px; }
  .hero__title { font-size: clamp(70px, 11vw, 108px); }
  .hero__subtitle { font-size: clamp(25px, 4.4vw, 38px); }
  .scene-hud { bottom: 113px; }
  .footer-progress { display: none; }
  .site-footer { padding: 0 31px 31px; }
  .cinema-scene, .cinema-original, .drone-photographic { background-size:auto 83%;background-position:center bottom; }
  .drone-rotors { inset:auto;bottom:0;left:50%;width:auto;height:83%;aspect-ratio:1672 / 941;transform:translateX(-50%); }
  .cinema-scene, .cinema-original { -webkit-mask-image:linear-gradient(to bottom,transparent 0%, transparent 43%,rgba(0,0,0,.25) 55%, #000 78%); mask-image:linear-gradient(to bottom,transparent 0%, transparent 43%,rgba(0,0,0,.25) 55%, #000 78%); }
}
@media (max-width: 600px) {
  .site-header { padding: 22px 22px; }
  .identity { gap: 10px; }
  .identity__mark { font-size: 26px; }
  .identity__divider { height: 18px; }
  .identity__label { font-size: 8px; letter-spacing: .13em; }
  .header-status { max-width: 95px; text-align: right; font-size: 8px; line-height: 1.5; letter-spacing: .07em; }
  .status-dot { flex: 0 0 6px; }
  .hero { width: calc(100% - 34px); padding-top: clamp(146px, 18svh, 198px); }
  .hero__frame { top: clamp(129px, 15svh, 165px); width: calc(100% - 8px); height: clamp(235px, 32svh, 280px); }
  .corner { width: 14px; height: 14px; }
  .eyebrow { font-size: 8px; gap: 10px; letter-spacing: .18em; margin-bottom: 19px; }
  .eyebrow__line { width: 14px; }
  .hero__title { font-size: clamp(55px, 14.5vw, 89px); letter-spacing: -.08em; }
  .hero__subtitle { font-size: clamp(18px, 5vw, 29px); letter-spacing: -.07em; margin-top: 9px; }
  .signal { margin-top: 24px; width: 63%; }
  .hero__description { font-size: 12px; margin-top: 20px; letter-spacing: 0; }
  .hero__description--arabic { font-size: clamp(20px, 5vw, 28px); padding: 10px 14px 12px; max-width: 92%; }

  .specialties { margin: 30px auto 0; max-width: 340px; column-gap: 13px; row-gap: 12px; flex-wrap: wrap; }
  .specialty { font-size: 8px; gap: 5px; letter-spacing: .07em; }
  .specialty__number { font-size: 8px; }
  .specialties__separator { height: 12px; }
  .specialty:last-child { width: 100%; justify-content: center; }
  .specialties__separator:nth-of-type(4) { display: none; }
  .scene-hud { bottom: 90px; left: 23px; }
  .site-footer { padding: 0 23px 23px; align-items: flex-end; gap: 10px; }
  .footer-caption { font-size: 8px; letter-spacing: .12em; gap: 7px; }
  .footer-caption__bar { width: 14px; }
  .footer-copyright { font-size: 8px; letter-spacing: .08em; }
  .cinema-scene, .cinema-original, .drone-photographic { background-size:auto 75%;background-position:right bottom; }
  .drone-rotors { left:auto;right:0;bottom:0;transform:none;width:auto;height:75%;aspect-ratio:1672 / 941; }
  .cinema-scene, .cinema-original { -webkit-mask-image:linear-gradient(to bottom,transparent 0%, transparent 48%,rgba(0,0,0,.35) 61%, #000 79%); mask-image:linear-gradient(to bottom,transparent 0%, transparent 48%,rgba(0,0,0,.35) 61%, #000 79%); }
}
@media (max-width: 360px) {
  .hero__title { font-size: 52px; }
  .hero__subtitle { font-size: 17px; }
  .hero__description { font-size: 11px; }
  .hero__description--arabic { font-size: clamp(18px, 5.2vw, 24px); line-height: 1.5; margin-top: 18px; }
  .specialty { font-size: 7px; }
  .hero__frame { height: 240px; }
}
@media (max-height: 680px) and (max-width: 850px) {
  .experience { min-height: 680px; }
  .hero { padding-top: 122px; }
  .hero__frame { top: 110px; height: 240px; }
  .scene-hud { bottom: 90px; }

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .loader { display:none; }
  .cinema-original {opacity:.96 !important;}
  .drone-photographic {display:none !important;}
  .hero__title .char, .hero__subtitle .char { opacity:1; transform:none; filter:none; }
}