/* AYA / THE ORIGIN — cinematic introduction, scoped to avoid affecting the portfolio. */
#aya-intro{--ac:#87ebff;--av:#b29aff;--near:#07111e;position:fixed;inset:0;z-index:99999;overflow:hidden;isolation:isolate;color:#eef7ff;background:radial-gradient(ellipse at 49% 45%,#152842 0%,#070d19 44%,#03070e 100%);font-family:Manrope,'Plus Jakarta Sans',Inter,'IBM Plex Sans Arabic',system-ui,sans-serif;opacity:1;visibility:visible;transition:opacity .9s ease,visibility .9s ease;direction:ltr;}
#aya-intro *{box-sizing:border-box}
#aya-intro.aya-intro-leaving{opacity:0;visibility:hidden;pointer-events:none}
#aya-intro[hidden]{display:none!important}
html.aya-intro-open,html.aya-intro-open body{overflow:hidden!important}
#aya-intro .ayi-grain{position:absolute;inset:0;pointer-events:none;opacity:.13;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=".63" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".3"/%3E%3C/svg%3E')}
#aya-intro .ayi-grid{position:absolute;inset:-35%;opacity:.18;background-image:linear-gradient(rgba(102,194,228,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(102,194,228,.12) 1px,transparent 1px);background-size:72px 72px;transform:perspective(800px) rotateX(69deg) translateY(22%);mask-image:linear-gradient(to top,black,transparent 65%)}
#aya-intro .ayi-haze{position:absolute;width:80vmax;height:80vmax;left:50%;top:45%;transform:translate(-50%,-50%);background:conic-gradient(from 20deg,transparent 0 15%,rgba(71,154,246,.17) 25%,transparent 37%,rgba(157,104,247,.14) 59%,transparent 69%,rgba(56,223,239,.16) 89%,transparent);filter:blur(65px);animation:ayi-spin 21s linear infinite;pointer-events:none}
#aya-intro .ayi-header{position:absolute;top:clamp(23px,5vh,48px);left:clamp(20px,5vw,78px);right:clamp(20px,5vw,78px);display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:6}
#aya-intro .ayi-mark{display:flex;align-items:center;gap:13px;font-size:clamp(12px,1.1vw,16px);font-weight:800;letter-spacing:.15em;white-space:nowrap}
#aya-intro .ayi-monogram{width:37px;height:37px;display:grid;place-items:center;background:linear-gradient(130deg,rgba(135,235,255,.17),rgba(178,154,255,.2));border:1px solid rgba(151,222,255,.37);border-radius:12px;font-weight:900;letter-spacing:-.13em;color:#adf6ff;box-shadow:0 0 36px rgba(90,187,240,.19)}
#aya-intro .ayi-skip{cursor:pointer;font:700 12px/1.2 inherit;letter-spacing:.08em;color:#d8e9fc;padding:12px 17px;background:rgba(11,23,40,.72);border:1px solid rgba(160,201,241,.3);border-radius:50px;transition:background .2s ease,border-color .2s ease}
#aya-intro .ayi-skip:hover,#aya-intro .ayi-skip:focus-visible{background:rgba(80,112,165,.25);border-color:#8de9ff;outline-offset:4px}
#aya-intro .ayi-toplabel{position:absolute;top:clamp(96px,16vh,154px);left:clamp(20px,5vw,78px);font-family:ui-monospace,monospace;color:#8ceaff;font-size:10px;font-weight:700;letter-spacing:.29em;z-index:5;opacity:.86}
#aya-intro .ayi-space{position:absolute;left:50%;top:45%;width:min(81vmin,740px);height:min(81vmin,740px);transform:translate(-50%,-50%);perspective:1100px;z-index:3;filter:drop-shadow(0 0 32px rgba(81,181,231,.17))}
#aya-intro .ayi-plane{position:absolute;inset:11%;border-radius:50%;transform-style:preserve-3d;will-change:transform}
#aya-intro .ayi-plane.p1{border:1px solid rgba(134,229,253,.54);box-shadow:inset 0 0 40px rgba(69,159,220,.10),0 0 35px rgba(69,159,220,.09);transform:rotateX(65deg) rotate(-13deg);animation:ayi-orbit-one 12s linear infinite}
#aya-intro .ayi-plane.p2{inset:2%;border:1px solid rgba(179,153,255,.48);transform:rotateY(65deg) rotate(21deg);animation:ayi-orbit-two 15s linear infinite}
#aya-intro .ayi-plane.p3{inset:20%;border:1px dashed rgba(122,225,252,.33);transform:rotateX(15deg) rotateY(56deg);animation:ayi-orbit-three 13s linear infinite}
#aya-intro .ayi-plane.p4{inset:4%;border:1px solid rgba(194,211,255,.17);transform:rotateX(76deg) rotate(63deg);box-shadow:0 0 28px rgba(85,170,242,.14)}
#aya-intro .ayi-plane.p1:after,#aya-intro .ayi-plane.p2:after{content:'';position:absolute;width:10px;height:10px;top:50%;left:-5px;border-radius:50%;background:#adfaff;box-shadow:0 0 22px 6px rgba(108,224,255,.6)}
#aya-intro .ayi-plane.p2:after{background:#c5a9ff;box-shadow:0 0 23px 7px rgba(156,112,255,.6)}
#aya-intro .ayi-orb{position:absolute;inset:29%;border-radius:50%;display:grid;place-items:center;box-shadow:inset -24px -34px 55px rgba(9,12,35,.9),inset 14px 14px 32px rgba(166,233,255,.24),0 0 60px rgba(92,186,249,.27),0 0 140px rgba(135,95,225,.15);background:radial-gradient(circle at 30% 22%,rgba(192,240,255,.9) 0,rgba(77,140,196,.5) 12%,rgba(19,45,93,.92) 34%,#0c1636 64%,#090e21 92%);transform:rotate(-8deg);animation:ayi-core 6s ease-in-out infinite;transition:filter .6s ease,background 1s ease}
#aya-intro .ayi-orb:before{content:'';position:absolute;inset:-5%;border-radius:50%;border:1px solid rgba(170,223,255,.3);transform:rotate(23deg) scaleX(.69);box-shadow:0 0 20px rgba(115,213,252,.3)}
#aya-intro .ayi-orb:after{content:'';position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 25deg,transparent 0%,rgba(189,158,255,.18) 24%,transparent 48%,rgba(108,223,255,.16) 71%,transparent 90%);animation:ayi-spin 8s linear infinite}
#aya-intro .ayi-orb strong{position:relative;z-index:2;font-size:clamp(26px,5.1vmin,62px);letter-spacing:.2em;color:#f3faff;text-indent:.2em;font-weight:800;text-shadow:0 0 25px rgba(149,230,255,.85)}
#aya-intro .ayi-satellite{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;font-weight:800;opacity:.33;transition:opacity .5s ease,transform .5s ease;text-transform:uppercase}
#aya-intro .ayi-satellite .ayi-glyph{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(159,204,251,.36);border-radius:15px;background:linear-gradient(160deg,rgba(30,55,93,.84),rgba(5,14,32,.9));backdrop-filter:blur(14px);box-shadow:0 15px 34px rgba(0,0,0,.2)}
#aya-intro .ayi-satellite svg{width:28px;height:28px;stroke:#b9e8ff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#aya-intro .ayi-satellite.think{top:17%;left:4%}
#aya-intro .ayi-satellite.design{top:17%;right:4%}
#aya-intro .ayi-satellite.build{bottom:15%;left:7%}
#aya-intro .ayi-satellite.validate{bottom:15%;right:4%}
#aya-intro[data-stage="0"] .ayi-satellite.think,#aya-intro[data-stage="1"] .ayi-satellite.design,#aya-intro[data-stage="2"] .ayi-satellite.build,#aya-intro[data-stage="3"] .ayi-satellite.validate{opacity:1;transform:translateY(-8px);color:#eafcff}
#aya-intro[data-stage="0"] .ayi-satellite.think .ayi-glyph,#aya-intro[data-stage="1"] .ayi-satellite.design .ayi-glyph,#aya-intro[data-stage="2"] .ayi-satellite.build .ayi-glyph,#aya-intro[data-stage="3"] .ayi-satellite.validate .ayi-glyph{border-color:#8de9ff;box-shadow:0 0 30px rgba(116,211,250,.32),inset 0 0 28px rgba(103,213,245,.09)}
#aya-intro[data-stage="1"] .ayi-orb{filter:hue-rotate(29deg)}#aya-intro[data-stage="2"] .ayi-orb{filter:hue-rotate(72deg)}#aya-intro[data-stage="3"] .ayi-orb{filter:hue-rotate(-18deg) brightness(1.2)}
#aya-intro .ayi-story{position:absolute;bottom:clamp(105px,15vh,160px);left:clamp(22px,5vw,78px);z-index:5;max-width:min(600px,85vw);text-shadow:0 4px 16px #07101e}
#aya-intro .ayi-index{font:700 11px ui-monospace,monospace;letter-spacing:.32em;color:#95e9fc}
#aya-intro .ayi-word{font-size:clamp(55px,8vw,116px);line-height:.95;letter-spacing:-.075em;font-weight:800;margin:11px 0 14px;transition:opacity .15s ease,transform .4s ease;background:linear-gradient(120deg,#f5fbff,#b4f1ff 50%,#c1acff);background-clip:text;-webkit-background-clip:text;color:transparent}
#aya-intro .ayi-caption{font-size:clamp(12px,1.3vw,16px);color:#ccdbee;line-height:1.65;max-width:440px}
#aya-intro .ayi-footer{position:absolute;bottom:clamp(25px,5vh,46px);left:clamp(22px,5vw,78px);right:clamp(22px,5vw,78px);display:flex;align-items:end;justify-content:space-between;gap:20px;z-index:6}
#aya-intro .ayi-progress{display:flex;gap:8px;width:min(410px,62vw)}
#aya-intro .ayi-progress span{display:block;flex:1;height:2px;border-radius:2px;background:rgba(208,228,249,.2);overflow:hidden}
#aya-intro .ayi-progress span:before{content:'';display:block;width:0;height:100%;background:linear-gradient(90deg,#8be9ff,#ad97ff);box-shadow:0 0 10px #80eaff}
#aya-intro .ayi-progress span.ayi-done:before{width:100%}
#aya-intro .ayi-progress span.ayi-current:before{animation:ayi-fill 1.07s linear forwards}
#aya-intro .ayi-footnote{font:700 10px ui-monospace,monospace;letter-spacing:.19em;color:#a7bacc;white-space:nowrap}
#aya-intro[data-locale="ar"] .ayi-story{text-align:right;left:auto;right:clamp(22px,5vw,78px)}
#aya-intro[data-locale="ar"] .ayi-index{letter-spacing:.08em}
#aya-intro[data-locale="ar"] .ayi-word{letter-spacing:0;line-height:1.15}
#aya-intro[data-locale="ar"] .ayi-footer{flex-direction:row-reverse}
#aya-intro .ayi-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 43%,rgba(177,234,255,.5),rgba(110,181,242,.08) 40%,transparent 73%)}
#aya-intro.aya-intro-finale .ayi-flash{animation:ayi-flash .7s ease-out forwards}
#aya-intro.aya-intro-finale .ayi-orb{animation:ayi-swell .9s cubic-bezier(.19,1,.22,1) forwards}
.aya-replay-intro{background:transparent;border:1px solid rgba(157,211,245,.32);border-radius:40px;padding:9px 14px;color:#abdcf3;font-size:11px;font-weight:700;letter-spacing:.065em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.aya-replay-intro:hover,.aya-replay-intro:focus-visible{border-color:#8de9ff;color:#fff;background:rgba(135,225,254,.1)}
@keyframes ayi-spin{to{transform:rotate(360deg)}}
@keyframes ayi-orbit-one{to{transform:rotateX(65deg) rotate(347deg)}}
@keyframes ayi-orbit-two{to{transform:rotateY(65deg) rotate(-339deg)}}
@keyframes ayi-orbit-three{to{transform:rotateX(15deg) rotateY(56deg) rotate(360deg)}}
@keyframes ayi-core{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-11px) rotate(6deg)}}
@keyframes ayi-fill{to{width:100%}}
@keyframes ayi-swell{to{transform:scale(3);opacity:0}}
@keyframes ayi-flash{35%{opacity:1}100%{opacity:0}}
@media(max-width:700px){#aya-intro .ayi-toplabel{top:94px;font-size:9px}#aya-intro .ayi-space{width:94vw;height:94vw;top:39%}#aya-intro .ayi-satellite .ayi-glyph{width:42px;height:42px;border-radius:13px}#aya-intro .ayi-satellite svg{width:21px;height:21px}#aya-intro .ayi-satellite{font-size:8px;letter-spacing:.12em}#aya-intro .ayi-story{bottom:112px;left:23px;right:23px}#aya-intro .ayi-word{font-size:clamp(52px,15vw,92px)}#aya-intro .ayi-caption{font-size:12px}#aya-intro .ayi-footnote{font-size:8px;letter-spacing:.05em}#aya-intro .ayi-progress{width:56vw}#aya-intro .ayi-mark{letter-spacing:.06em;font-size:11px}#aya-intro .ayi-monogram{width:32px;height:32px}}
@media(max-height:680px) and (min-width:701px){#aya-intro .ayi-space{top:39%;height:72vmin;width:72vmin}#aya-intro .ayi-story{bottom:78px}#aya-intro .ayi-word{font-size:61px}#aya-intro .ayi-footer{bottom:18px}}
@media(prefers-reduced-motion:reduce){#aya-intro *,#aya-intro *:before,#aya-intro *:after{animation:none!important;transition:none!important}#aya-intro{transition:none!important}}