/* ═══════════════════════════════════════════════
   Abdulrahman Albedaiwi — Portfolio (presentation deck)
   Palette: ink #0B0B0D · graphite #17171A · silver #EDEDE9
            gold #E9E48B · ivory #FFF6D8 — NIDLP-inspired identity
   Type:    Clash Display · Archivo · Caveat · IBM Plex Sans Arabic
   ═══════════════════════════════════════════════ */

:root{
  --ink:#0B0B0D;
  --graphite:#17171A;
  --line:rgba(237,237,233,.12);
  --silver:#EDEDE9;
  --muted:#8B8B92;
  --accent:#E9E48B;
  --accent2:#E9E48B;
  --cyan:#E9E48B;
  --glow:#FFF6D8;
  --grad:linear-gradient(135deg,#E9E48B 0%,#FFF6D8 100%);
  --display:"Clash Display",sans-serif;
  --body:"Archivo",sans-serif;
  --hand:"Caveat",cursive;
  --arabic:"IBM Plex Sans Arabic",sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink)}
body{
  font-family:var(--body);
  color:var(--silver);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
::selection{background:#E9E48B;color:#0B0B0D}

.ar{font-family:var(--arabic);font-weight:300;color:var(--accent);opacity:.85}

/* ─── grain ─── */
.grain{
  position:fixed;inset:-100px;z-index:70;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}
  50%{transform:translate(30px,-50px)}75%{transform:translate(-30px,-20px)}100%{transform:translate(0,0)}
}

/* ─── cursor ─── */
.cursor,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:100;border-radius:50%}
.cursor{width:8px;height:8px;background:var(--cyan);transform:translate(-50%,-50%)}
.cursor-ring{
  width:34px;height:34px;border:1px solid rgba(237,237,233,.6);
  transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;
}
.cursor-ring.is-hover{width:56px;height:56px;background:rgba(237,237,233,.1)}
@media (hover:none){.cursor,.cursor-ring{display:none}}

/* ─── aurora glows ─── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.32;will-change:transform;
}
.aurora i:nth-child(1){width:46vw;height:46vw;background:#6B6136;top:-14%;left:-10%;animation:drift1 26s ease-in-out infinite alternate;opacity:.16}
.aurora i:nth-child(2){width:38vw;height:38vw;background:#46423A;bottom:-16%;right:-8%;animation:drift2 32s ease-in-out infinite alternate;opacity:.15}
.aurora i:nth-child(3){width:24vw;height:24vw;background:#3E5A55;top:36%;left:58%;animation:drift3 38s ease-in-out infinite alternate;opacity:.1}
.aurora--soft i{opacity:.09}
@keyframes drift1{to{transform:translate(14vw,10vh) scale(1.25)}}
@keyframes drift2{to{transform:translate(-12vw,-12vh) scale(1.15)}}
@keyframes drift3{to{transform:translate(-16vw,8vh) scale(1.35)}}

/* ─── scroll progress ─── */
.progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:66;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
}

/* ─── preloader ─── */
.preloader{position:fixed;inset:0;z-index:90;display:grid;place-items:center}
.preloader__curtain{position:absolute;inset:0;background:var(--ink)}
.preloader__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.preloader__mono{
  font-family:var(--display);font-weight:600;font-size:clamp(4rem,10vw,7rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(233,228,139,.45));
}
.preloader__name{font-family:var(--display);font-weight:500;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.06em}
.preloader__role{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}

/* ─── nav ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  opacity:0;
}
.nav__logo{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.02em;display:flex;align-items:center;gap:.55rem}
.nav__logo-mark{width:10px;height:10px;background:var(--grad);border-radius:3px;display:inline-block}
.nav__logo-thin{font-weight:400;color:var(--muted)}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);opacity:.7;transition:opacity .25s,color .25s}
.nav__links a:hover{opacity:1;color:var(--glow)}
.nav__status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted);transition:color .25s}
.nav__status:hover{color:var(--silver)}
.nav__status-dot{width:7px;height:7px;border-radius:50%;background:#7BE98B;box-shadow:0 0 10px #7BE98B;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
@media (max-width:720px){.nav__links{display:none}}

/* ─── pagination dots ─── */
.dots{
  position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:.9rem;
}
.dot{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:rgba(237,237,233,.28);transition:background .3s,transform .3s;
}
.dot:hover{background:rgba(237,237,233,.6)}
.dot.is-active{background:var(--accent2);transform:scale(1.35);box-shadow:0 0 12px rgba(233,228,139,.7)}
.dot__tip{
  position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);
  background:rgba(23,23,26,.9);border:1px solid var(--line);border-radius:6px;
  padding:.28rem .6rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;
}
.dot:hover .dot__tip{opacity:1}
@media (max-width:720px){.dots{display:none}}

/* ═══════════ DECK ═══════════ */
html.deck-on{overflow:hidden}
html.deck-on .deck{position:fixed;inset:0;overflow:hidden}
html.deck-on .slide{
  position:absolute;inset:0;
  will-change:transform;
  /* parked offscreen via GSAP yPercent (set synchronously on init) —
     keeping all transforms in GSAP avoids px/% double-offset bugs */
}

.slide{
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(2.5rem + 2vh) var(--pad) 1.5rem;
  overflow:hidden;
}

/* flow mode (mobile / reduced motion): natural scrolling document */
html.flow-on .slide{position:relative;min-height:100svh}
html.flow-on .dots{display:none}

/* ─── shared section bits ─── */
.section__eyebrow{
  display:inline-flex;gap:1rem;align-items:baseline;
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:.45rem 1rem;border-radius:99px;
  background:rgba(23,23,26,.5);
}
.section__eyebrow em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.section__eyebrow .ar{letter-spacing:.05em}

.split-line{display:block;overflow:hidden}
.split-inner{display:inline-block}

/* ═══════════ HERO ═══════════ */
.slide--hero{align-items:center;text-align:center}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.float-art{
  position:absolute;border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(237,237,233,.16);
  will-change:transform;opacity:0;
}
.fa-1{width:17vw;min-width:150px;top:14%;left:6%;transform:rotate(-7deg)}
.fa-2{width:14vw;min-width:120px;bottom:16%;left:12%;transform:rotate(5deg)}
.fa-3{width:18vw;min-width:150px;top:16%;right:6%;transform:rotate(6deg)}
.fa-4{width:13vw;min-width:110px;bottom:14%;right:12%;transform:rotate(-5deg)}

.hero__inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.hero__eyebrow{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.hero__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(3rem,9.5vw,8.2rem);line-height:.98;letter-spacing:-.02em;
  user-select:none;
}
.hero__line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__line-inner{display:inline-block}
.hero__line-inner--grad{
  background:linear-gradient(110deg,#FFFFFF 12%,#D9D9D4 36%,#E9E48B 55%,#8E8E90 80%,#FFFFFF 104%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s ease-in-out infinite alternate;
}
@keyframes sheen{to{background-position:100% 0}}
.hero__signature{
  font-family:var(--hand);font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--accent2);transform:rotate(-2.5deg);
}
.hero__cta-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}

/* AI prompt bar — the "Generate" input from his portfolio cover */
.hero__prompt{
  display:flex;align-items:center;gap:1rem;text-align:left;
  background:rgba(23,23,26,.72);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;
  padding:.8rem 1.1rem;min-width:min(560px,88vw);margin-top:.6rem;
}
.hero__prompt-text{flex:1;font-size:.85rem;color:var(--silver);opacity:.85;white-space:nowrap;overflow:hidden}
.hero__caret{
  display:inline-block;width:1px;height:1em;background:var(--accent);
  vertical-align:middle;margin-left:2px;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.hero__prompt-sep{width:1px;height:1.4rem;background:var(--line)}
.hero__generate{
  display:flex;align-items:center;gap:.5rem;
  background:var(--grad);color:var(--ink);
  font-weight:500;font-size:.8rem;letter-spacing:.02em;
  padding:.55rem 1.1rem;border-radius:8px;
  transition:transform .25s,box-shadow .25s;
}
.hero__generate:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(233,228,139,.35)}
@media (max-width:720px){.hero__prompt{min-width:0;width:100%}}

.hero__foot{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:1.6rem var(--pad);
}
.hero__scrollcue{display:flex;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__lottie{width:26px;height:44px}
.hero__meta{font-size:.72rem;color:var(--muted)}
@media (max-width:720px){.hero__meta{display:none}.float-art{display:none}}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-block;padding:.95rem 1.9rem;border-radius:99px;
  border:1px solid var(--line);font-size:.88rem;letter-spacing:.03em;
  background:rgba(23,23,26,.5);
  transition:border-color .3s,transform .3s,box-shadow .3s;
  will-change:transform;
}
.btn:hover{border-color:var(--accent);transform:translateY(-3px)}
.btn--solid{
  background:var(--grad);color:var(--ink);border-color:transparent;font-weight:500;
}
.btn--solid:hover{box-shadow:0 10px 34px rgba(168,85,247,.45)}

/* ═══════════ ABOUT ═══════════ */
.about__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(240px,34%) 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1280px;margin:0 auto;width:100%;
}
@media (max-width:880px){.about__grid{grid-template-columns:1fr}}
.about__media{position:relative;padding-top:2.2rem}
.about__note{
  position:absolute;top:0;left:6%;font-family:var(--hand);font-size:1.5rem;
  color:var(--accent2);transform:rotate(-6deg);z-index:2;
}
.about__portrait{
  position:relative;border-radius:18px;overflow:hidden;
  transform:rotate(-2deg);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.about__portrait::after{
  content:"";position:absolute;inset:0;border-radius:18px;
  border:1px solid rgba(237,237,233,.28);
  background:linear-gradient(160deg,rgba(233,228,139,.16),transparent 40%,rgba(255,246,216,.1));
  pointer-events:none;
}
.about__portrait img{max-height:56vh;width:100%;object-fit:cover;filter:saturate(1.02)}

.about__hello{
  font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,5.5vw,4.6rem);
  margin:1.2rem 0 1.4rem;letter-spacing:-.01em;line-height:1.05;
  color:var(--silver);
}
.about__hello .split-inner{
  background:linear-gradient(120deg,#FFF6D8,#E9E48B 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.about__lead{font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.7;margin-bottom:1rem;max-width:62ch}
.about__lead strong{font-weight:600;color:#fff}
.about__text{color:var(--muted);max-width:58ch;margin-bottom:1.8rem;font-size:.92rem}

.about__stats{display:flex;gap:clamp(1.4rem,3.5vw,3rem);border-top:1px solid var(--line);padding-top:1.4rem;margin-bottom:1.8rem;flex-wrap:wrap}
.stat__num,.stat__plus{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--silver)}
.stat__plus{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}

.tools{display:flex;flex-wrap:wrap;gap:.55rem}
.tool{
  --tc:#888;
  font-weight:500;font-size:.82rem;letter-spacing:.02em;
  width:42px;height:42px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tc) 14%,var(--graphite));
  color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);
  border-radius:10px;transition:transform .2s,box-shadow .2s;
}
.tool--wide{width:auto;padding:0 .9rem;font-size:.76rem}
.tool:hover{transform:translateY(-4px);box-shadow:0 8px 20px color-mix(in srgb,var(--tc) 25%,transparent)}

/* ═══════════ GALLERY SLIDES ═══════════ */
.slide--gallery{justify-content:flex-start;gap:1rem}
.ghead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  max-width:1400px;margin:0 auto;width:100%;flex-wrap:wrap;
  padding-top:2.6rem;
}
.ghead__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.01em;
  margin-top:1rem;color:var(--silver);
}
.gnav{display:flex;align-items:center;gap:1.1rem}
.garrow{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(23,23,26,.6);
  font-size:1.05rem;color:var(--silver);
  transition:background .3s,border-color .3s,transform .2s,opacity .3s;
}
.garrow:hover{background:var(--grad);border-color:transparent;transform:scale(1.08);color:var(--ink)}
.garrow[disabled]{opacity:.28;pointer-events:none}
.gdots{display:flex;align-items:center;gap:.45rem}
.gdots span{
  width:22px;height:3px;border-radius:2px;
  background:rgba(237,237,233,.22);transition:background .35s,width .35s;
}
.gdots span.is-on{width:34px;background:var(--grad)}
html.flow-on .gdots{display:none}

.gwrap{flex:1;overflow:hidden;display:flex;align-items:center;min-height:0}
.gtrack{display:flex;width:100%;height:100%;will-change:transform}
.gcard{
  flex:0 0 100%;min-width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:0 var(--pad);min-height:0;
}
.gcard figure{
  position:relative;border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(237,237,233,.15);
  max-height:58vh;min-height:0;
  transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s;
  will-change:transform;
}
.gcard figure:hover{box-shadow:0 34px 90px rgba(233,228,139,.28),0 0 0 1px rgba(237,237,233,.3)}
.gcard img{max-height:58vh;width:auto;max-width:min(86vw,1080px);object-fit:contain}
.gcard figure::after{
  content:"⤢";position:absolute;right:.8rem;bottom:.8rem;
  width:36px;height:36px;display:grid;place-items:center;
  font-size:1rem;color:#fff;background:var(--grad);border-radius:50%;
  opacity:0;transform:translateY(8px);transition:.3s;
}
.gcard figure:hover::after{opacity:1;transform:translateY(0)}
.gcard__meta{text-align:center;max-width:64ch}
.gcard__meta h3{font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.8vw,1.35rem);color:var(--silver);margin-bottom:.25rem}
.gcard__meta p{font-size:.85rem;color:var(--muted)}

/* flow mode galleries: native swipe */
html.flow-on .gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
html.flow-on .gtrack{width:max-content}
html.flow-on .gcard{flex:0 0 88vw;min-width:88vw;scroll-snap-align:center;padding:0 1rem}
html.flow-on .gcard img{max-width:84vw}
html.flow-on .garrow{display:none}

/* ═══════════ CONTACT ═══════════ */
.slide--contact{align-items:center;text-align:center}
.slide--contact .section__eyebrow{position:relative;z-index:2}
.contact__title{
  position:relative;z-index:2;
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.2rem,11vw,9.5rem);line-height:1;letter-spacing:-.02em;
  margin-top:1.6rem;color:var(--silver);
}
.contact__title .split-inner{
  background:linear-gradient(115deg,#FFFFFF 12%,#D9D9D4 48%,#8E8E90 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact__note{
  position:relative;z-index:2;
  display:inline-block;font-family:var(--hand);font-size:clamp(1.3rem,2.5vw,1.9rem);
  color:var(--accent2);transform:rotate(-3deg);margin:1.1rem 0 2.6rem;
}
.contact__actions{position:relative;z-index:2;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(2.5rem,7vh,5rem)}
.contact__foot{
  position:absolute;bottom:1.6rem;left:var(--pad);right:var(--pad);z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.3rem;
  font-size:.75rem;color:var(--muted);
}
.contact__foot a:hover{color:var(--silver)}

/* ═══════════ WIPE ═══════════ */
.wipe{position:fixed;inset:0;z-index:85;pointer-events:none}
.wipe__panel{position:absolute;inset:0;transform:translateY(101%)}
.wipe__panel--accent{background:var(--grad)}
.wipe__panel--ink{background:var(--graphite);display:grid;place-items:center}
.wipe__label{
  font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,3.5vw,2.6rem);
  color:var(--silver);letter-spacing:.04em;
}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed;inset:0;z-index:80;background:rgba(11,11,13,.92);
  backdrop-filter:blur(14px);display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .35s;padding:4vh 4vw;
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:92vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox__close{
  position:absolute;top:1.4rem;right:1.8rem;font-size:1.1rem;color:var(--silver);
  width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  transition:border-color .3s,transform .3s;z-index:2;
}
.lightbox__close:hover{border-color:var(--accent2);transform:rotate(90deg)}

/* ─── flow-mode reveal initial states ─── */
html.flow-on.js [data-anim]{opacity:0;transform:translateY(40px);filter:blur(10px)}

/* ─── reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .grain{animation:none}
}