/* المؤثر + · deck styles. One light look. Every color reads from the tokens below. */
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(fonts/plex-arabic-500.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:700;font-display:swap;src:url(fonts/plex-arabic-700.woff2) format("woff2")}
@font-face{font-family:"Plex Latin";font-weight:400;font-display:swap;src:url(fonts/plex-latin-400.woff2) format("woff2")}
@font-face{font-family:"Plex Latin";font-weight:700;font-display:swap;src:url(fonts/plex-latin-700.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-weight:400;font-display:swap;src:url(fonts/thmanyah-sans-400.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-weight:500;font-display:swap;src:url(fonts/thmanyah-sans-500.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-weight:700;font-display:swap;src:url(fonts/thmanyah-sans-700.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-weight:700;font-display:swap;src:url(fonts/thmanyah-serif-display.woff2) format("woff2")}

:root{
  color-scheme:light;
  --brand:#00A99D;   /* teal accent, main 3D object */
  --neutral:#163735; /* text */
  --glow:#E5F5F2;    /* pale teal: cards, highlights, key light */
  --shade:#52736F;   /* muted text, depth */
  --base:#FCFBF8;    /* paper background, fog */

  --font-latin:"Thmanyah Sans","Plex Latin",system-ui,sans-serif;
  --font-arabic:"Thmanyah Sans","Plex Arabic","Plex Latin",Tahoma,sans-serif;
  --font-display:"Thmanyah Serif Display","Plex Arabic",Tahoma,serif;

  --ease:cubic-bezier(.65,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.3,1.5,.5,1);
  --t-slide:.85s;
  --t-build:1s;
  --t-wait:.18s;
  --beat:.085s;

  --u:min(1vw,1.7778dvh);
  --from:translateX(-5em);
  --soft:color-mix(in srgb,var(--brand) 14%,var(--base));
  --line:color-mix(in srgb,var(--brand) 30%,var(--base));
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--base);color:var(--neutral);font-family:var(--font-arabic);font-size:calc(var(--u)*1.7);line-height:1.9;
  letter-spacing:0;word-spacing:0;text-transform:none;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;cursor:default}
img{display:block;max-width:100%}

#scene,body>.art{position:fixed;inset:0;width:100%;height:100dvh;pointer-events:none;z-index:0}
#scene{transition:opacity var(--t-slide) var(--ease)}
body>.art{object-fit:cover;object-position:top right;opacity:0;transition:opacity 1s var(--ease)}
#scene{z-index:1}
.no3d #scene{display:none}
.no3d>.art{opacity:.3}
body.plain>.art{opacity:1}

/* ---------- fixed frame: logos, section label, counter, progress ---------- */
.chrome{position:fixed;z-index:3;pointer-events:none}
.logo{top:calc(var(--u)*2.2);left:calc(var(--u)*3.4);height:calc(var(--u)*8.6)}
.loyac{bottom:calc(var(--u)*2.6);left:calc(var(--u)*4);height:calc(var(--u)*2.3)}
.lapa{bottom:calc(var(--u)*2.6);right:calc(var(--u)*4);height:calc(var(--u)*2.1)}
.count{bottom:calc(var(--u)*2.2);left:50%;transform:translateX(-50%);font-family:var(--font-latin);font-size:calc(var(--u)*1.6);font-weight:700;color:var(--shade);font-variant-numeric:tabular-nums;direction:ltr}
.sec{top:calc(var(--u)*3.4);right:calc(var(--u)*7);font-size:calc(var(--u)*1.35);color:var(--brand);font-weight:500;transition:opacity .4s var(--ease)}
.plain .sec{opacity:0}

/* ---------- slides ---------- */
.deck{position:fixed;inset:0;height:100dvh;z-index:2}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(7%);
  transition:transform var(--t-slide) var(--ease),opacity calc(var(--t-slide)*.7) var(--ease),visibility 0s linear var(--t-slide)}
.slide.before{transform:translateY(-7%)}
.slide.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.inner{position:absolute;left:50%;top:50%;width:calc(var(--u)*100);height:calc(var(--u)*56.25);transform:translate(-50%,-50%);
  padding:calc(var(--u)*12.5) calc(var(--u)*7) calc(var(--u)*8) calc(var(--u)*7);display:flex;flex-direction:column;gap:calc(var(--u)*3.2)}
.center .inner{align-items:center;justify-content:center;text-align:center;padding-top:calc(var(--u)*8);gap:calc(var(--u)*1.6)}
.mid .inner{justify-content:flex-start}
.mid .body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*2.4);padding-bottom:calc(var(--u)*3)}


/* builds: one block per press, each one travelling in from the left */
.b{opacity:0;transform:var(--from);transition:transform calc(var(--t-build)*.5) var(--ease),opacity calc(var(--t-build)*.4) var(--ease)}
.b.show{opacity:1;transform:none;transition:transform var(--t-build) var(--ease-out),opacity calc(var(--t-build)*.7) var(--ease-out)}
.card.b,.iconbox.b,.step.b{--from:translateX(-7em) scale(.9)}
.pic.b{--from:translateX(-11em) rotate(-3deg) scale(.94)}
.venn .b{--from:translateX(-8em) scale(.7)}
.note.b,.sub.b,.topic.b,.by.b,.tag.b{--from:translateX(-3em)}
.dots .b{--from:scale(.3);--ease-out:var(--ease-back)}
.arr.b{--from:translateX(-2em)}

/* type */
.h,.title,.big,.name{font-family:var(--font-display);font-weight:700;line-height:1.35;text-wrap:balance}
.h{font-size:calc(var(--u)*3.7)}
.big{font-size:calc(var(--u)*5)}
.title{font-size:calc(var(--u)*8.4);line-height:1.2}
.title span{font-family:var(--font-latin);font-weight:400;color:var(--shade);font-size:.6em;margin-inline-start:.15em}
.tag{font-family:var(--font-display);font-weight:700;font-size:calc(var(--u)*4.6);color:var(--brand);line-height:1.4}
.by{font-size:calc(var(--u)*2);margin-top:calc(var(--u)*2)}
.note{font-size:calc(var(--u)*1.25);color:var(--shade)}
.sub{color:var(--shade);font-size:calc(var(--u)*1.9)}
.yr{font-family:var(--font-latin);font-weight:700;color:var(--brand);font-size:1.25em;display:block;line-height:1.1;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.verse{font-size:calc(var(--u)*5.2);line-height:1.7}
.blank{width:calc(var(--u)*34);height:calc(var(--u)*.22);background:var(--brand);margin-top:calc(var(--u)*5);transform-origin:left}
.blank.b{transform:scaleX(0);opacity:1}
.blank.b.show{transform:scaleX(1);transition-duration:1.6s}

/* blocks hug their own text, so the beads know exactly what to stay clear of */
.inner>.h{align-self:flex-start}
.body>.note,.body>.sub,.body>.topic,.inner>.note{align-self:center}

/* cards */
.row{display:flex;gap:calc(var(--u)*1.3);align-items:stretch;justify-content:center}
.row.tight{justify-content:flex-start}
.card{flex:1 1 0;min-width:0;background:color-mix(in srgb,var(--glow) 88%,transparent);border-radius:calc(var(--u)*.7);
  padding:calc(var(--u)*2.1) calc(var(--u)*1);text-align:center;font-weight:500;font-size:calc(var(--u)*1.9);line-height:1.5;
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.6)}
.card small{font-weight:400;font-size:.72em;color:var(--shade)}
.card.hot{background:var(--brand);color:var(--base)}
.card.hot small{color:var(--base)}
.arr{flex:0 0 auto;align-self:center;color:var(--brand);width:calc(var(--u)*2.2);height:calc(var(--u)*2.2)}
svg.ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.iconbox{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.4);font-weight:500}
.iconbox .box{width:calc(var(--u)*11);aspect-ratio:1/1;background:color-mix(in srgb,var(--glow) 88%,transparent);border-radius:calc(var(--u)*.8);color:var(--brand);padding:22%}
.dots{display:flex;gap:calc(var(--u)*1.3)}
.dots span{flex:1;display:flex;justify-content:center}
.dots i{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:50%;background:var(--brand);color:var(--base);font-style:normal;font-weight:700;font-size:calc(var(--u)*1.3);display:grid;place-items:center;padding:calc(var(--u)*.7);line-height:1}

/* pictures */
.pics{flex-shrink:0;display:flex;gap:calc(var(--u)*3);justify-content:center;align-items:flex-start}
.pic{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.9);text-align:center;font-size:calc(var(--u)*1.5);line-height:1.5;position:relative;min-width:0}
.pic .frame{position:relative;overflow:hidden;border-radius:calc(var(--u)*.4);box-shadow:0 calc(var(--u)*.8) calc(var(--u)*2.4) color-mix(in srgb,var(--neutral) 16%,transparent)}
.pic img,.pic video,.pic iframe{height:calc(var(--u)*var(--ph,22));width:auto;display:block;border:0}
.pic video,.pic iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--neutral)}
.pic .name{font-size:calc(var(--u)*2.4);margin-top:calc(var(--u)*.6)}
.play{position:absolute;inset:auto auto calc(var(--u)*1) calc(var(--u)*1);width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);border-radius:50%;border:0;
  background:var(--brand);color:var(--base);padding:calc(var(--u)*1.15);cursor:pointer;pointer-events:auto;display:block;
  box-shadow:0 0 0 calc(var(--u)*.5) color-mix(in srgb,var(--base) 55%,transparent);transition:transform .3s var(--ease-out)}
.play:hover,.play:focus-visible{transform:scale(1.12);outline:none}
.play svg{fill:currentColor}
.play[hidden]{display:none}
.plan{position:absolute;inset:14% 34% 30% 20%;border:calc(var(--u)*.3) solid var(--brand);background:color-mix(in srgb,var(--brand) 55%,transparent);border-radius:calc(var(--u)*.4);color:var(--base);padding:8% 26%;animation:drift 4s var(--ease) infinite alternate}
@keyframes drift{from{transform:translateX(18%)}to{transform:translateX(-28%)}}

/* special visuals */
.steps{position:relative;height:calc(var(--u)*24)}
.step{position:absolute;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.4);font-weight:500;font-size:calc(var(--u)*1.9)}
.step{font-size:calc(var(--u)*2.2)}
.step i{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);color:var(--brand);transform:rotate(-90deg)}
.venn{position:relative;width:calc(var(--u)*46);height:calc(var(--u)*33);margin:calc(var(--u)*-6) auto 0}
.venn div{position:absolute;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;border:calc(var(--u)*.12) solid var(--brand);
  background:color-mix(in srgb,var(--glow) 70%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:calc(var(--u)*2.3);line-height:1.5}
.venn small{font-family:var(--font-arabic);font-weight:400;font-size:.62em;color:var(--shade)}
.venn .v1{right:0;top:0;padding-inline-start:20%;padding-bottom:16%}
.venn .v2{left:0;top:0;padding-inline-end:20%;padding-bottom:16%}
.venn .v3{left:50%;margin-left:calc(var(--u)*-11);bottom:0;background:color-mix(in srgb,var(--brand) 26%,var(--base));padding-top:14%}
.time{display:flex;gap:calc(var(--u)*.6)}
.time .card{flex:var(--w) 1 0;transform-origin:right}
.time .card b{font-family:var(--font-latin);font-size:1.5em;font-variant-numeric:tabular-nums}
.one{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.4)}
.board .card{background:transparent;border:calc(var(--u)*.16) solid var(--brand);position:relative;padding-block:calc(var(--u)*1.4);gap:calc(var(--u)*.2);font-size:calc(var(--u)*1.45);font-weight:400;color:var(--shade)}
.board .card em{font-style:normal;font-family:var(--font-latin);font-weight:700;color:var(--brand);position:absolute;top:calc(var(--u)*.5);right:calc(var(--u)*1)}
.board .card i{width:calc(var(--u)*6);height:calc(var(--u)*6);color:var(--line);margin:calc(var(--u)*1) auto}
.topic{font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:calc(var(--u)*3);text-align:center}
.desc{width:calc(var(--u)*22);height:calc(var(--u)*var(--ph));font-size:calc(var(--u)*1.5)}

/* ---------- phone, held upright ---------- */
@media (max-aspect-ratio:4/5){
  :root{--u:1.9vw}
  body{font-size:calc(var(--u)*2.2)}
  .inner{width:100vw;height:100dvh;padding:calc(var(--u)*17) calc(var(--u)*5) calc(var(--u)*11) calc(var(--u)*4);gap:calc(var(--u)*3)}
  .mid .body{padding-bottom:0}
  .sec{right:calc(var(--u)*5);top:calc(var(--u)*6);font-size:calc(var(--u)*1.8)}
  .logo{left:calc(var(--u)*3)}
  .lapa{right:calc(var(--u)*3)}
  .count{font-size:calc(var(--u)*2)}
  .h{font-size:calc(var(--u)*4.6)}.big{font-size:calc(var(--u)*5.6)}.verse{font-size:calc(var(--u)*5.4)}
  .tag{font-size:calc(var(--u)*4.4)}
  .row{flex-wrap:wrap}
  .card{flex:1 1 40%;font-size:calc(var(--u)*2.3);padding-block:calc(var(--u)*2.6)}
  .row.three .card,.time .card{flex:1 1 100%}
  .arr{display:none}
  .iconbox{flex:1 1 28%;font-size:calc(var(--u)*2)}
  .dots{display:none}
  .pics{flex-wrap:wrap;gap:calc(var(--u)*2.4)}
  .pic{font-size:calc(var(--u)*1.9);flex:0 1 auto}
  .pic img{height:auto;width:calc(var(--u)*var(--pw,20));max-height:calc((100dvh - var(--u)*44)/var(--n,1) - var(--u)*9);object-fit:cover}
  .pic .name{font-size:calc(var(--u)*2.4)}
  .play{width:calc(var(--u)*5);height:calc(var(--u)*5)}
  .venn{transform:scale(1.02);margin-top:0}
  .steps{height:calc(var(--u)*40)}
  .board .card{flex:1 1 40%;font-size:calc(var(--u)*1.9)}
  .desc{width:calc(var(--u)*34);height:auto;font-size:calc(var(--u)*1.9);padding-block:calc(var(--u)*1.2)}
  .iconbox .box{width:calc(var(--u)*13)}
  body>.art{object-position:78% top}
  .title{font-size:calc(var(--u)*9)}
}

/* ---------- reduced motion: short fade, everything complete ---------- */
@media (prefers-reduced-motion:reduce){
  .slide,.slide.before{transform:none;transition:opacity .25s linear,visibility 0s linear .25s}
  .slide.on{transition-delay:0s}
  .b,.b.show{transition:none!important}
  .plan{animation:none}
}
.s1{right:2%;top:0}.s2{right:27%;top:17%}.s3{right:52%;top:36%}.s4{right:78%;top:56%}