/* ABDULBASET — PREMIUM MOTION V3
   Additive enhancements to the original React/GSAP template.
   The underlying animation sequences, positions of sections and app dependencies remain intact. */
:root { --v3-accent:#8ce5ce; --v3-frost:#d2fff0; --v3-edge:rgba(159,240,218,.19); --v3-motion-ease:cubic-bezier(.16,1,.3,1); }
html { scroll-padding-top:clamp(68px,10vh,110px); }
body { -webkit-font-smoothing:antialiased; overflow-x:clip; }
main, #root { max-width:100%; }
::selection { background:#86ffdb; color:#07120f; }
:focus-visible { outline:2px solid #b4ffdf!important; outline-offset:5px; }
#v3-progress { position:fixed;z-index:10015;left:0;top:0;width:100%;height:2px;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#276856,#b4ffdf,#e4f9ef);box-shadow:0 0 14px #87f6d09c;pointer-events:none; }
/* HERO — deterministic center independent of portrait's image intrinsic width or viewport rounding. */
.hero, .hero-L2, .hero-L3 { isolation:isolate; }
.hero-L2__portrait {
 left:50%!important;right:auto!important;bottom:0!important;
 display:block!important;margin:0!important;
 height:min(94svh,1000px)!important;width:auto!important;
 max-height:100svh!important;max-width:95vw!important;
 object-fit:contain!important;object-position:50% 100%!important;
 transform:translate3d(-50%,0,0)!important;transform-origin:50% 100%!important;
 backface-visibility:hidden;image-rendering:auto;
}
.hero-L2::after { content:"";position:absolute;bottom:0;left:0;right:0;height:21vh;pointer-events:none;z-index:2;background:linear-gradient(0deg,#080808 0%,rgba(8,8,8,.55) 30%,transparent 100%);opacity:.56; }
.hero-L2:before {content:"";position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:min(60vw,760px);height:65vh;border-radius:50%;background:radial-gradient(ellipse,#32a58a1e 0%,transparent 64%);pointer-events:none;z-index:1;animation:v3-breathe 7s ease-in-out infinite alternate}
@keyframes v3-breathe{to{opacity:.38;transform:translateX(-50%) scale(1.16)}}
.hero-giant-title{max-width:100vw;overflow:visible!important}
.hero-signature { z-index:6!important; width:min(78vw,960px)!important; max-width:960px!important; filter:drop-shadow(0 6px 18px #00bfa63b); }
.hero-signature svg { max-width:100%;overflow:visible; }
.hero-signature path {stroke:#bdffe8!important;stroke-width:1.35px!important;filter:drop-shadow(0 0 7px #2ec29c9c)}
/* Elegant micro-label and animated field around the original title. */
.v3-hero-rail {position:absolute;z-index:6;pointer-events:none;left:clamp(18px,5vw,85px);bottom:clamp(78px,13vh,125px);display:flex;align-items:center;gap:16px;color:#c5f5e5;font:600 clamp(8px,.8vw,11px)/1.4 Inter,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 10px #0008}
.v3-hero-rail__pulse {height:7px;width:7px;border-radius:100%;background:#a0f5d6;box-shadow:0 0 0 0 #6aeeb273;animation:v3-pulse 2.8s ease-out infinite}
@keyframes v3-pulse{55%{box-shadow:0 0 0 10px #6aeeb200}100%{box-shadow:0 0 0 0 #6aeeb200}}
.v3-hero-index {position:absolute;z-index:6;right:clamp(18px,5vw,85px);bottom:clamp(78px,13vh,125px);text-align:right;pointer-events:none;color:#ffffff9c;font:500 9px/1.8 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
/* Section language is editorial rather than large blocks of prose. */
.about-section {background:radial-gradient(ellipse at 95% 40%,#0f34271a,transparent 42%)!important}
.about-paragraph {max-width:670px;line-height:1.83!important;text-wrap:pretty}
.personal-section-heading h2,.personal-section h2 {text-wrap:balance}

.personal-section h2 { max-width:1150px }
.personal-label {font-weight:650!important;letter-spacing:.19em!important}
.journey-item,.education-block,.skill-flip,.personal-credential-grid>* {transition:border-color .5s var(--v3-motion-ease),box-shadow .5s var(--v3-motion-ease)}



.skill-flip,.personal-credential-grid>* {position:relative;}
.skill-front::after,.personal-credential-grid>*::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--v3-x,50%) var(--v3-y,50%),rgba(124,245,207,.13),transparent 65%);transition:opacity .4s}
.skill-flip:hover .skill-front::after,.personal-credential-grid>*:hover::after{opacity:1}
.skill-flip {touch-action:pan-y;}
/* Let count labels read like operational intelligence, not CV filler. */
.journey-facts {grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(15px,2.7vw,44px)!important;padding:35px 0!important;border-bottom:1px solid #ffffff12}
.journey-facts>div {position:relative;padding-left:clamp(0px,1.2vw,20px);}
.journey-facts>div:not(:first-child)::before{content:"";position:absolute;left:0;top:8px;height:65%;width:1px;background:linear-gradient(to bottom,#a4f9d956,transparent)}
.journey-facts strong{font-variant-numeric:tabular-nums;letter-spacing:-.065em;color:#f4fbf7!important;font-size:clamp(39px,5.1vw,82px)!important;line-height:1.1}
.journey-facts strong small{font-size:.42em;vertical-align:14%;color:var(--v3-accent)}
.journey-facts span{display:block;margin-top:10px;line-height:1.6;font-size:clamp(9px,.9vw,12px)!important;color:#bac9c4!important}
.journey-facts>div[data-v3-counter] {will-change:contents}
/* A new visual, keyboard-accessible operating-principles section. */
.v3-system {position:relative;isolation:isolate;overflow:hidden;padding:clamp(75px,9vw,150px) clamp(23px,6vw,110px);background:radial-gradient(ellipse 50% 70% at 80% 20%,#10382a40,transparent 95%),#070c0a;border-block:1px solid #ffffff12;color:#f0f6f3;}
.v3-system::before{content:"";position:absolute;inset:0;opacity:.21;pointer-events:none;background-image:linear-gradient(#a5ffdf12 1px,transparent 1px),linear-gradient(90deg,#a5ffdf12 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(to bottom,transparent,black 30%,transparent)}
.v3-system-top{position:relative;display:flex;justify-content:space-between;gap:20px;color:#9ef5d6;font:700 10px/1.6 Inter,Arial,sans-serif;letter-spacing:.22em}
.v3-system-top span:last-child{color:#90aaa0}
.v3-system h2{font-family:Inter,Arial,sans-serif;font-weight:300;letter-spacing:-.07em;font-size:clamp(44px,7.4vw,116px);line-height:1.03;margin:55px 0 50px;text-wrap:balance;max-width:1100px}
.v3-system h2 em {color:#9deacb;font-style:normal}
.v3-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.v3-workflow button {appearance:none;cursor:pointer;color:inherit;background:rgba(13,23,19,.84);border:1px solid #ffffff24;min-width:0;text-align:left;position:relative;overflow:hidden;padding:clamp(22px,3vw,38px);min-height:230px;transition:background .4s,border-color .4s,transform .4s var(--v3-motion-ease)}
.v3-workflow button:focus-visible,.v3-workflow button[aria-selected="true"]{background:#132d24;border-color:#9deacb99}
@media(hover:hover){.v3-workflow button:hover{transform:translateY(-6px);border-color:#9deacb99}}
.v3-workflow button::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--v3-x,50%) var(--v3-y,50%),#85f3c51f,transparent 58%)}
.v3-workflow .v3-stage{position:relative;display:flex;justify-content:space-between;align-items:center;font:600 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.2em;color:#a5f5d6}
.v3-workflow .v3-stage i{font-style:normal;font-size:28px;font-weight:300;line-height:1}
.v3-workflow b {position:relative;display:block;letter-spacing:-.055em;font-size:clamp(27px,3vw,50px);font-weight:400;margin-top:68px}
.v3-workflow button[aria-selected="true"] b {color:#b1ffe3}
.v3-workflow .v3-stage-line{position:absolute;inset:auto 0 0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#74c4aa,#ddfff2);transition:transform .5s var(--v3-motion-ease)}
.v3-workflow button[aria-selected="true"] .v3-stage-line{transform:scaleX(1)}
.v3-workflow-copy{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;min-height:105px;padding-top:35px}
.v3-workflow-copy p{color:#b2c9c0;font-size:clamp(15px,1.5vw,21px);max-width:710px;line-height:1.65;margin:0}
.v3-workflow-copy small{font:600 10px/1.7 Inter,Arial,sans-serif;letter-spacing:.2em;color:#8ca59b;white-space:nowrap}
/* Small scrolling coordinates. */
.v3-index {position:fixed;z-index:100;right:clamp(8px,1.3vw,22px);top:50%;transform:translateY(-50%);display:flex;align-items:flex-end;flex-direction:column;gap:13px}
.v3-index a {display:flex;align-items:center;gap:8px;text-decoration:none;min-height:24px;color:#d5f0e7;font:650 8px Inter,Arial,sans-serif;letter-spacing:.08em;opacity:.7;transition:opacity .2s,transform .2s}
.v3-index a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;white-space:nowrap}
.v3-index a i{height:2px;width:13px;background:#b1c6bc;transition:width .25s,background .25s;display:block}
.v3-index a:hover span,.v3-index a:focus-visible span,.v3-index a[aria-current="location"] span{opacity:1;transform:translateX(0)}
.v3-index a[aria-current="location"]{opacity:1}.v3-index a[aria-current="location"] i{width:28px;background:#b6ffe1}
.v3-backtop{position:fixed;bottom:22px;right:18px;z-index:101;background:#0e201a;border:1px solid #a9ffd350;color:#eafff1;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;opacity:0;pointer-events:none;transform:translateY(10px);transition:all .3s var(--v3-motion-ease);font-size:19px;cursor:pointer}
.v3-backtop.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(max-width:1024px){.v3-index{display:none}.v3-system h2{margin:42px 0}.v3-workflow b{margin-top:50px}}
@media(max-width:767px){
 .hero-L2__portrait {height:min(73svh,630px)!important;max-width:99vw!important;bottom:0!important;}
 .hero-L2:before{height:45vh;width:90vw;bottom:5%;}
 .hero-giant-title{top:32%!important;}
 .hero-signature{width:92vw!important;}
 .v3-hero-rail{left:20px;bottom:85px;font-size:8px;gap:10px;max-width:58%;line-height:1.5}
 .v3-hero-index{right:20px;bottom:85px;font-size:7px;max-width:36%;}
 .journey-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 18px!important;padding-top:25px!important}
 .journey-facts>div:nth-child(3)::before{display:none}
 .v3-system{padding:72px 22px 82px}
 .v3-system h2{font-size:clamp(41px,10.1vw,74px);margin:42px 0}
 .v3-workflow{grid-template-columns:1fr;gap:10px}
 .v3-workflow button{min-height:125px;padding:21px 23px}
 .v3-workflow b{margin-top:21px;font-size:29px}
 .v3-workflow-copy{display:block;min-height:132px;padding-top:23px}
 .v3-workflow-copy p{font-size:14px}
 .v3-workflow-copy small{display:block;margin-top:16px;font-size:8px}
 .v3-signature-outro{gap:8px;align-items:center}
 .v3-signature-outro img{width:65%;max-height:90px}
 .v3-signature-outro span{font-size:7px;max-width:35%}
 .v3-backtop{right:14px;bottom:14px;width:40px;height:40px}
}
@media(max-width:400px){
 .hero-L2__portrait{height:min(71svh,575px)!important;max-width:100vw!important}
 .hero-giant-title {top:29%!important}
 .v3-hero-rail{bottom:83px;max-width:58%;font-size:7px;letter-spacing:.10em}
 .v3-hero-index{bottom:83px;max-width:33%;font-size:6px;letter-spacing:.13em}
 .journey-facts strong{font-size:40px!important}
 .v3-system-top{font-size:8px}
}
@media(max-height:620px) and (orientation:landscape){
 .hero-L2__portrait{height:96svh!important;width:auto!important}
 .hero-giant-title{top:23%!important}
 .v3-hero-index,.v3-hero-rail{bottom:35px}
}
@media(prefers-reduced-motion:reduce){
 #v3-progress,.v3-workflow button,.v3-backtop,.v3-index a{transition:none!important}
 .hero-L2::before,.v3-hero-rail__pulse{animation:none!important}
 .v3-workflow button:hover{transform:none}
}

/* Motion V4: preserve legacy Impact styling and interaction exactly. */
#impact .panel-orbits svg{display:block;width:min(48px,6vw);height:auto;margin:auto;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#impact .impact-art button:focus-visible{outline:2px solid #99ffe1;outline-offset:5px}
/* Unobtrusive Saudi Council of Engineers registration; not a featured credential. */
.v4-engineering-registration{margin:24px 0 0!important;padding:15px 0 0!important;color:#abc4b9!important;font-size:clamp(11px,1vw,14px)!important;line-height:1.6!important;border-top:1px solid #ffffff1a;letter-spacing:.025em}
/* Any accidentally cached auxiliary footer signature is hidden in V4. */
.v3-signature-outro{display:none!important}
.footer-status-item{gap:0!important}