/* ===== tokens ===== */
:root{
  --bg0:#0b0907; --bg1:#16110c; --bg2:#221a12;
  --gold:#caa14e; --gold-hi:#e6c87f; --gold-deep:#8a6a24;
  --cream:#f5efe4; --muted:#a89f90; --line:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.05); --glass:rgba(255,255,255,.06);
  --f-head:'Amiri',serif; --f-ui:'Tajawal',sans-serif; --f-en:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(140% 100% at 50% 0%,#171209 0%,var(--bg0) 60%);color:var(--cream);font-family:var(--f-ui);min-height:100vh}
button{font-family:inherit;cursor:pointer}
input[type=range]{cursor:pointer}
.hide{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:rgba(202,161,78,.35)}

/* ===== header ===== */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px clamp(14px,3vw,34px);border-bottom:1px solid var(--line);background:rgba(12,9,6,.55);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,var(--gold-deep));box-shadow:0 0 14px rgba(202,161,78,.8)}
.brand h1{font-family:var(--f-head);font-size:clamp(17px,2.3vw,24px);font-weight:700;line-height:1.2}
.en-line{font-family:var(--f-en);font-size:10.5px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--card)}

/* ===== stage ===== */
main{padding:18px clamp(10px,3vw,30px) 40px}
.stage-shell{max-width:1180px;margin:0 auto;aspect-ratio:16/9;position:relative;border-radius:18px;overflow:hidden;background:#050403;border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(202,161,78,.08)}
.stage{position:absolute;inset:0}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,transform .6s ease;transform:scale(.992);pointer-events:none}
.scene.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* chips + captions */
.chip{font-size:10.5px;font-weight:400;color:#e8dfcf;border:1px solid rgba(255,255,255,.14);background:rgba(10,8,5,.55);backdrop-filter:blur(8px);border-radius:999px;padding:4px 11px;letter-spacing:.01em;position:absolute;z-index:6;white-space:nowrap}
.cap{position:absolute;top:clamp(10px,2.2vw,18px);inset-inline-start:clamp(12px,2.6vw,22px);display:flex;align-items:center;gap:8px;z-index:7}
.cap b{font-weight:700;font-size:clamp(11px,1.6vw,15px)}
.cap span{font-family:var(--f-en);font-size:10px;letter-spacing:.14em;color:var(--gold-hi);border:1px solid rgba(202,161,78,.4);border-radius:999px;padding:2px 8px;background:rgba(202,161,78,.08)}
.cap.sub{top:clamp(38px,6.4vw,56px);opacity:.85;font-size:clamp(10px,1.3vw,13px)}
.cam-note{bottom:clamp(10px,2.2vw,18px);inset-inline-start:clamp(12px,2.6vw,22px)}
.screen-note{bottom:9%;left:50%;transform:translateX(-50%)}

/* ===== scene 1 ===== */
.s1{background:radial-gradient(130% 105% at 32% 12%,#4a3520 0%,#2b1d11 44%,#0d0906 80%)}
.s1::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.s1.active{animation:zoomWide 3s ease-out both}
@keyframes zoomWide{from{transform:scale(1.03)}to{transform:scale(1.08)}}
.bigscreen{position:absolute;top:16%;inset-inline-start:6%;width:57%;height:62%;border-radius:14px;background:linear-gradient(180deg,#10161c,#0a0e13);border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04),0 0 46px rgba(202,161,78,.10);overflow:hidden;z-index:2}
.bs-bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07)}
.bs-bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
.bs-bar span:first-child{background:#ff5f57}.bs-bar span:nth-child(2){background:#febc2e}.bs-bar span:nth-child(3){background:#2bd35f}
.bs-body{padding:14px 16px;display:flex;flex-direction:column;gap:11px;opacity:.94}
.bs-block{height:11px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.20) 55%,rgba(255,255,255,.10));background-size:200% 100%;animation:shimmer 3.2s linear infinite}
.bs-block.wide{width:72%}.bs-block.short{width:46%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.bs-row{display:flex;gap:8px}.bs-row i{flex:1;height:9px;border-radius:5px;background:rgba(255,255,255,.08)}
.bs-chart{display:flex;align-items:flex-end;gap:7px;height:52px;padding:4px 2px 0}
.bs-chart b{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(202,161,78,.85),rgba(138,106,36,.25));animation:growY 3s ease-out both}
.bs-chart b:nth-child(1){height:38%}.bs-chart b:nth-child(2){height:62%}.bs-chart b:nth-child(3){height:45%}.bs-chart b:nth-child(4){height:80%}
@keyframes growY{from{transform:scaleY(0);transform-origin:bottom}}
.trainer-zone{position:absolute;inset-inline-end:8%;top:34%;width:180px;height:34%;z-index:3}
.trainer-zone::before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(180deg,rgba(255,244,214,.16),rgba(255,244,214,.03) 70%);filter:blur(2px);animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.cz{position:absolute;bottom:-8px;inset-inline-start:0;font-size:clamp(9px,1.15vw,11.5px);color:#efe4cf;border:1px dashed rgba(255,255,255,.22);border-radius:10px;padding:4px 9px;background:rgba(8,6,4,.5);backdrop-filter:blur(6px);white-space:nowrap}
.table-zone{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:4}
.tables{position:absolute;top:4%;left:7%;right:7%;height:9px;border-radius:8px;background:linear-gradient(180deg,#33291d,#1d1610);box-shadow:0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(0,0,0,.5)}
.laps{position:absolute;top:9%;left:9%;right:9%;height:20px}
.aud{position:absolute;top:9%;left:9%;right:9%;display:flex;justify-content:space-around}
.aud i{width:56px;height:20px;border-radius:6px;background:radial-gradient(60% 60% at 50% 40%,#e8f4ff33,#7fd4ff0d);box-shadow:0 0 14px rgba(160,215,255,.12);border:1px solid rgba(255,255,255,.10);transform:perspective(300px) rotateX(14deg)}
.cz2{bottom:-6px;inset-inline-end:2%;top:auto;inset-inline-start:auto}

/* ===== scene 2 : UI window ===== */
.s2{background:radial-gradient(120% 100% at 50% 20%,#241c10 0%,#120d07 55%,#080604 100%)}
.s2.active .uiwin{animation:uiIn 1s cubic-bezier(.22,.61,.36,1) both}
@keyframes uiIn{from{opacity:0;transform:scale(1.22) translateY(2.5%)}to{opacity:1;transform:none}}
.uiwin{position:absolute;inset:7% 5%;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0f151b,#0a0f14);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(202,161,78,.08);z-index:3}
.ui-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.08)}
.udot{width:9px;height:9px;border-radius:50%}.udot.r{background:#ff5f57}.udot.y{background:#febc2e}.udot.g{background:#2bd35f}
.ui-title{margin-inline-start:10px;font-family:var(--f-en);font-size:11.5px;letter-spacing:.08em;color:#c9d4dc}
.ui-badge{margin-inline-start:auto;font-family:var(--f-en);font-size:9.5px;font-weight:600;letter-spacing:.18em;color:#0b0906;background:linear-gradient(120deg,var(--gold-hi),var(--gold));border-radius:999px;padding:3px 9px}
.ui-body{display:grid;grid-template-columns:minmax(150px,32%) 1fr;gap:16px;padding:16px;height:calc(100% - 42px)}
.profile{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.p-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.avatar{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe9bd,#b98f43 70%);position:relative;overflow:hidden;box-shadow:0 0 0 2px rgba(202,161,78,.35)}
.avatar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:rgba(20,13,4,.75);border-radius:50% 50% 0 0}
.p-meta{display:flex;flex-direction:column;gap:6px;flex:1}.p-meta i{height:9px;border-radius:5px;background:rgba(255,255,255,.16)}.p-meta i:last-child{width:60%}
.pskill{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px}
.pskill em{font-style:normal;font-size:10.5px;color:var(--muted)}
.pskill b{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--gold) 0 var(--f),rgba(255,255,255,.12) var(--f) 100%);position:relative;overflow:hidden}
.pskill b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:sweepBar 2.6s ease-in-out .8s infinite}
@keyframes sweepBar{40%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.p-bars{display:flex;align-items:flex-end;gap:6px;height:44px;margin-top:2px}
.p-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgba(202,161,78,.8),rgba(202,161,78,.15));height:var(--h);animation:growY 3s ease-out both}
.courses{display:flex;flex-direction:column;gap:11px;justify-content:center}
.course{position:relative;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:13px 14px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.cico{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);display:block}
.cline{height:10px;border-radius:6px;background:rgba(255,255,255,.14);width:82%}
.cline.short{width:52%;margin-top:6px;background:rgba(255,255,255,.09)}
.course.hot{border-color:rgba(202,161,78,.75);box-shadow:0 0 0 1px rgba(202,161,78,.3),0 0 30px rgba(202,161,78,.22),inset 0 0 22px rgba(202,161,78,.06);opacity:0;transform:translateY(10px) scale(.97);animation:hotIn .8s cubic-bezier(.22,.61,.36,1) .55s forwards}
@keyframes hotIn{to{opacity:1;transform:none}}
.cico.gold{display:flex;align-items:center;justify-content:center;color:#0b0906;background:linear-gradient(140deg,var(--gold-hi),var(--gold));box-shadow:0 0 16px rgba(202,161,78,.6)}
.cico.gold svg{width:16px;height:16px}
.tag98{position:absolute;top:-10px;inset-inline-end:14px;font-size:10px;font-weight:500;color:#211708;background:linear-gradient(120deg,#f3dda4,var(--gold));border-radius:999px;padding:3px 10px;box-shadow:0 4px 14px rgba(202,161,78,.45);animation:popIn .5s cubic-bezier(.34,1.56,.64,1) 1.15s both}
.tag98.small{top:auto;bottom:-9px;font-size:9.5px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) .9s both}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.pt{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,var(--gold-hi),rgba(202,161,78,0));opacity:0}
.p1{left:26%;top:18%;animation:rise 1.6s ease-in-out .9s infinite}
.p2{left:44%;top:24%;animation:rise 1.6s ease-in-out 1.15s infinite}
.p3{left:60%;top:16%;animation:rise 1.6s ease-in-out 1.4s infinite}
.p4{left:72%;top:30%;animation:rise 1.6s ease-in-out 1.05s infinite}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}25%{opacity:.9}100%{opacity:0;transform:translateY(-22px)}}
.cap-cap{bottom:clamp(10px,2.2vw,18px);left:50%;transform:translateX(-50%)}
.cap-cap::after{content:"";position:absolute;left:-7px;top:50%;width:7px;height:7px;border-radius:2px;background:var(--gold);transform:rotate(45deg) translateY(-50%)}

/* ===== scene 3 : laptop close-up ===== */
.s3{background:radial-gradient(120% 100% at 50% 30%,#1c130b 0%,#0b0805 62%,#060403 100%)}
.s3.active .laptop{animation:lapIn 1s cubic-bezier(.22,.61,.36,1) both}
@keyframes lapIn{from{opacity:0;transform:scale(.9);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(202,161,78,.14),rgba(202,161,78,0) 70%);animation:floatB 6s ease-in-out infinite}
.b1{width:220px;height:220px;top:6%;inset-inline-start:4%}.b2{width:300px;height:300px;bottom:-8%;inset-inline-end:2%;animation-delay:-2s}.b3{width:150px;height:150px;top:40%;inset-inline-start:70%;animation-delay:-4s}
@keyframes floatB{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.06)}}
.laptop{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:min(46%,430px);z-index:3}
.lap-screen{position:relative;aspect-ratio:16/11;border-radius:12px;background:linear-gradient(180deg,#111920,#0b1016);border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 46px rgba(202,161,78,.12);padding:10px 11px;display:flex;flex-direction:column;gap:7px}
.ls-head{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.ls-head i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.ls-ttl{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.13)}
.ls-card{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);position:relative}
.ls-card.hot{border-color:rgba(202,161,78,.8);box-shadow:0 0 0 1px rgba(202,161,78,.35),0 0 22px rgba(202,161,78,.3);animation:glowPulse 2.2s ease-in-out .8s infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 1px rgba(202,161,78,.35),0 0 16px rgba(202,161,78,.2)}50%{box-shadow:0 0 0 1px rgba(202,161,78,.5),0 0 30px rgba(202,161,78,.42)}}
.ls-ico{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.09)}
.ls-card.hot .ls-ico{display:flex;align-items:center;justify-content:center;color:#0b0906;background:linear-gradient(140deg,var(--gold-hi),var(--gold))}
.ls-ico svg{width:13px;height:13px}
.ls-line{height:7px;border-radius:4px;background:rgba(255,255,255,.16);width:84%}
.ls-line.short{width:48%;background:rgba(255,255,255,.09)}
.lap-base{width:118%;height:15px;margin:0 auto;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#c9c2b4,#8d887d);box-shadow:0 18px 34px rgba(0,0,0,.6);position:relative}
.lap-base::after{content:"";position:absolute;top:0;left:8%;right:8%;height:4px;border-radius:0 0 8px 8px;background:#efe9dc}

/* ===== scene 4 : end title ===== */
.s4{background:radial-gradient(120% 90% at 50% 8%,#3a2a15 0%,#171008 48%,#070504 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:0 6%}
.s4::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(246,225,170,.10) 50%,transparent 60%);background-size:240% 100%;animation:sheen 4.5s linear infinite;pointer-events:none}
@keyframes sheen{from{background-position:180% 0}to{background-position:-80% 0}}
.overline{font-family:var(--f-en);font-size:clamp(9px,1.5vw,13px);font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-hi);opacity:0;animation:wordUp .9s ease .1s both;padding-inline-start:.42em}
.tagline{font-family:var(--f-head);font-weight:700;font-size:clamp(30px,7vw,84px);line-height:1.45;background:linear-gradient(180deg,#fff6e0 8%,#f0d9a4 55%,#b98f43 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(0,0,0,.45))}
.tagline span{display:inline-block;opacity:0;animation:wordUp 1s cubic-bezier(.22,.61,.36,1) both}
.tagline span:first-child{animation-delay:.45s}
.tagline span:last-child{animation-delay:1.05s}
@keyframes wordUp{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.divider{width:min(240px,40%);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);animation:lineIn 1s ease 1.7s both}
@keyframes lineIn{to{transform:scaleX(1)}}
.fin-note{position:static;margin-top:6px;opacity:0;animation:wordUp .8s ease 2.3s both}

/* ===== hud + controls ===== */
.hud{max-width:1180px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 4px}
.h-main{display:flex;align-items:baseline;gap:10px}
.h-main strong{font-size:clamp(14px,1.9vw,18px);font-weight:700}
.h-main span{font-family:var(--f-en);font-size:11px;letter-spacing:.1em;color:var(--gold-hi)}
.h-sub{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.h-sub .sep{opacity:.5}
.h-note{font-size:11px;color:#d9c9a4;border:1px solid rgba(202,161,78,.35);background:rgba(202,161,78,.07);border-radius:999px;padding:4px 12px}
.controls{max-width:1180px;margin:12px auto 0;display:flex;align-items:center;gap:14px;direction:ltr;padding:0 4px}
.btn{width:46px;height:46px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;color:#0b0906;background:linear-gradient(140deg,var(--gold-hi),var(--gold));box-shadow:0 6px 22px rgba(202,161,78,.4);transition:transform .2s ease,box-shadow .2s ease;flex:0 0 auto}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(202,161,78,.55)}
.btn svg{width:19px;height:19px}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--cream);border:1px solid var(--line);box-shadow:none}
.time,.dur{font-family:var(--f-en);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
#scrub{flex:1;appearance:none;-webkit-appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--gold) var(--prog,0%),rgba(255,255,255,.12) var(--prog,0%));outline-offset:4px}
#scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold));border:2px solid #0b0906;box-shadow:0 0 12px rgba(202,161,78,.7);cursor:pointer}
#scrub::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold));border:2px solid #0b0906;box-shadow:0 0 12px rgba(202,161,78,.7);cursor:pointer}
.ticks{max-width:1180px;margin:8px auto 0;padding:0 52px 0 64px;direction:ltr;position:relative;height:12px}
.ticks span{position:absolute;transform:translateX(-50%);font-family:var(--f-en);font-size:9.5px;color:#7d766a;letter-spacing:.05em}
@media (max-width:640px){
  .controls{flex-wrap:wrap}.ticks{padding:0 44px 0 56px}
  .h-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}