/* ===== Hafsah Suroor — bilingual one-page site (white + slate-blue) ===== */
:root{
  --bg:#FFFFFF; --tint:#EEF1F8; --tint-2:#E4EAF4;
  --blue:#7E8BAB; --blue-deep:#54628C; --blue-ink:#333F5C;
  --ink:#2B2F3A; --muted:#5F6575;
  --line:rgba(51,64,92,.13); --ring:rgba(84,98,140,.55);
  --glass:rgba(255,255,255,.72);
  --shadow:rgba(51,64,92,.14); --maxw:1080px;
  color-scheme:light;
}
html[lang="ar"]{ --f-display:"Tajawal","Segoe UI","Noto Sans Arabic",system-ui,sans-serif;
  --f-body:"Tajawal","Segoe UI","Noto Sans Arabic",system-ui,sans-serif; }
html[lang="en"]{ --f-display:"Fraunces",Georgia,serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--f-body); color:var(--ink); background:var(--bg); line-height:1.75; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display); line-height:1.2; margin:0; text-wrap:balance; color:var(--blue-ink)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(22px,4vw,48px)}
.pad{padding-block:clamp(52px,8vw,96px)}
:where(#top,#books,#about,#events,#certificates,#press,#contact){scroll-margin-top:90px}
.skip{position:absolute; inset-inline-start:-999px; top:8px; z-index:80; background:var(--blue-deep); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700}
.skip:focus{inset-inline-start:16px}

/* ---- scroll progress ---- */
.scrollbar{position:fixed; top:0; inset-inline:0; height:3px; z-index:70; background:linear-gradient(90deg,var(--blue),var(--blue-deep)); transform:scaleX(0); transform-origin:0 50%}
html[dir="rtl"] .scrollbar{transform-origin:100% 50%}

/* ---- floating brand ---- */
.brand-float{position:fixed; top:22px; inset-inline-start:22px; z-index:46; display:inline-flex;
  background:var(--blue-deep); padding:11px 17px; border-radius:16px; box-shadow:0 16px 34px -16px var(--blue-deep)}
.brand-float img{width:120px; height:auto}

/* ---- floating top-end actions ---- */
.top-right{position:fixed; top:22px; inset-inline-end:22px; z-index:46; display:flex; gap:10px; align-items:center}
.lang{font-weight:700; font-size:.85rem; color:var(--blue-ink); cursor:pointer; background:var(--glass);
  backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:999px; padding:9px 16px; min-width:48px;
  box-shadow:0 10px 24px -14px var(--shadow); transition:background .2s,color .2s}
.lang:hover{background:#fff; color:var(--blue-deep)}
.nav-toggle{display:none; width:46px; height:46px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(12px);
  border-radius:14px; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 10px 24px -14px var(--shadow)}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--blue-ink); border-radius:2px; transition:transform .25s, opacity .2s}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- floating side dock ---- */
.dock{position:fixed; inset-inline-start:22px; top:50%; transform:translateY(-50%); z-index:44;
  display:flex; flex-direction:column; gap:2px; padding:9px; border-radius:20px;
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.1); border:1px solid var(--line);
  box-shadow:0 20px 44px -22px var(--shadow)}
.dock a{color:var(--muted); font-weight:700; font-size:.94rem; padding:9px 16px; border-radius:12px; white-space:nowrap; transition:background .2s,color .2s}
.dock a:hover{background:var(--tint); color:var(--blue-ink)}
.dock a.active{background:var(--blue-deep); color:#fff}

/* ---- mobile overlay ---- */
.overlay{position:fixed; inset:0; z-index:45; display:grid; place-items:center;
  background:linear-gradient(160deg,#5D6A90,#414E71)}
.overlay[hidden]{display:none}
.overlay-nav{display:flex; flex-direction:column; gap:8px; text-align:center}
.overlay-nav a{color:#fff; font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,7vw,2.2rem); padding:8px 20px; opacity:.92; transition:opacity .2s}
.overlay-nav a:hover{opacity:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-body); font-weight:700; font-size:1rem;
  padding:13px 26px; border-radius:12px; cursor:pointer; border:1.5px solid transparent; transition:transform .16s, box-shadow .2s, background .2s, border-color .2s}
.btn-primary{background:var(--blue-deep); color:#fff; box-shadow:0 10px 22px -10px var(--blue-deep)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--blue-deep)}
.btn-ghost{border-color:var(--line); color:var(--blue-ink); background:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--blue); background:var(--tint)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(96px,12vw,132px) clamp(30px,5vw,54px)}
.hero .wrap{position:relative; z-index:1}
.hero .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center}
@media(max-width:920px){.hero .grid{grid-template-columns:1fr}}
.hero-orbs{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-orbs span{position:absolute; border-radius:50%; filter:blur(60px)}
.hero-orbs span:nth-child(1){width:44vw; height:44vw; max-width:560px; max-height:560px; inset-block-start:-14%; inset-inline-end:-8%; background:rgba(126,139,171,.4)}
.hero-orbs span:nth-child(2){width:38vw; height:38vw; max-width:460px; max-height:460px; inset-block-end:-16%; inset-inline-start:-6%; background:rgba(126,139,171,.28)}
.hero-orbs span:nth-child(3){width:24vw; height:24vw; max-width:300px; max-height:300px; inset-block-start:30%; inset-inline-start:34%; background:rgba(84,98,140,.16)}
.eyebrow{display:inline-block; font-weight:700; color:var(--blue-deep); font-size:.92rem; background:var(--tint); padding:7px 16px; border-radius:999px}
h1.title{font-size:clamp(2.9rem,7vw,4.9rem); font-weight:800; margin-top:20px}
.lead{font-size:clamp(1.06rem,2.2vw,1.22rem); color:var(--muted); max-width:50ch; margin-top:20px}
.cta{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}
.cred{margin-top:26px; font-size:.92rem; color:var(--muted); max-width:48ch; border-inline-start:3px solid var(--blue); padding-inline-start:16px; line-height:1.7}
.heroart{margin:0}
.hero-media{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -26px var(--shadow); will-change:transform}
.hero-media img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
.heroart figcaption{margin-top:12px; font-size:.85rem; color:var(--muted); text-align:center}

/* ---------- stats ---------- */
.stats{background:var(--tint); border-block:1px solid var(--line)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,3vw,28px); padding-block:34px}
@media(max-width:640px){.stats .wrap{grid-template-columns:repeat(2,1fr); gap:22px}}
.stat .n{font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,4vw,2.3rem); color:var(--blue-deep); font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-size:.92rem; margin-top:2px}

/* ---------- section head ---------- */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap}
.k{font-weight:700; color:var(--blue); font-size:.9rem; margin-bottom:8px}
.head h2{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800}
.head .more{color:var(--blue-deep); font-weight:700; white-space:nowrap}
.head .more:hover{text-decoration:underline}

/* ---------- books ---------- */
.books{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px)}
@media(max-width:820px){.books{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.books{grid-template-columns:1fr}}
.book{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s, border-color .2s}
.book:hover{transform:translateY(-6px); box-shadow:0 22px 40px -20px var(--shadow); border-color:var(--blue)}
.book .ph{aspect-ratio:1/1; overflow:hidden; background:var(--tint)}
.book .ph img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.book:hover .ph img{transform:scale(1.05)}
.book .cap{padding:16px 18px 18px}
.book .cap h3{font-size:1.15rem; font-weight:800}
.book .cap p{color:var(--muted); font-size:.9rem; margin-top:4px}
.newest{margin-top:26px; padding:18px 22px; border-radius:14px; color:var(--ink); font-size:.98rem; line-height:1.9; background:var(--tint); border:1px solid var(--line)}
.newest b{color:var(--blue-deep)}

/* ---------- about ---------- */
.about{background:var(--tint); border-block:1px solid var(--line)}
.about .grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,56px); align-items:center}
@media(max-width:840px){.about .grid{grid-template-columns:1fr}}
.about .quote{border-inline-start:4px solid var(--blue); padding-inline-start:22px}
.about .big{font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,3.6vw,2.1rem); line-height:1.5; margin-top:6px}
.about .big em{color:var(--blue-deep); font-style:normal}
.about p.body{color:var(--muted); font-size:1.05rem}

/* ---------- press ---------- */
.press{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,22px)}
@media(max-width:820px){.press{grid-template-columns:1fr}}
.pcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; transition:border-color .2s, transform .2s, box-shadow .2s}
.pcard:hover{border-color:var(--blue); transform:translateY(-4px); box-shadow:0 18px 34px -22px var(--shadow)}
.pcard .meta{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.86rem; font-weight:600}
.pcard .meta .yr{color:#fff; background:var(--blue-deep); padding:2px 11px; border-radius:999px; font-size:.8rem; font-variant-numeric:tabular-nums}
.pcard h3{font-size:1.14rem; font-weight:700; line-height:1.45; color:var(--ink)}
.pcard .src{margin-top:auto; color:var(--blue-deep); font-weight:700; font-size:.9rem}

/* ---------- events gallery ---------- */
.events-intro{color:var(--muted); max-width:62ch; margin:-16px 0 30px; font-size:1.02rem}
.ev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,18px)}
@media(max-width:820px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.ev-grid{grid-template-columns:1fr}}
.ev{position:relative; padding:0; border:1px solid var(--line); background:var(--tint); border-radius:14px; overflow:hidden; cursor:pointer; aspect-ratio:4/5}
.ev img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.ev:hover img{transform:scale(1.06)}
.ev::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(51,64,92,.3), transparent 42%); opacity:0; transition:opacity .25s}
.ev:hover::after,.ev:focus-visible::after{opacity:1}

/* ---------- certificates gallery ---------- */
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cert-grid{grid-template-columns:1fr}}
.cert{padding:0; border:1px solid var(--line); background:#fff; border-radius:14px; overflow:hidden; cursor:zoom-in; font:inherit; color:inherit; text-align:start; display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s, border-color .2s}
.cert:hover{transform:translateY(-5px); box-shadow:0 20px 38px -20px var(--shadow); border-color:var(--blue)}
.cert img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top center; background:var(--tint); display:block; transition:transform .4s ease}
.cert:hover img{transform:scale(1.04)}
.cert-cap{padding:12px 15px; font-size:.85rem; font-weight:700; color:var(--blue-ink); font-variant-numeric:tabular-nums}

/* ---------- video clips (lite embed) ---------- */
.sub-h{font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.6rem); color:var(--blue-ink); margin:46px 0 24px}
.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,24px)}
@media(max-width:680px){.video-grid{grid-template-columns:1fr}}
.video{position:relative; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; background:#0b0f1a; aspect-ratio:16/9; display:block; width:100%}
.video img{width:100%; height:100%; object-fit:cover; display:block; opacity:.94; transition:opacity .25s, transform .4s ease}
.video:hover img{opacity:1; transform:scale(1.03)}
.video .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:rgba(84,98,140,.92); display:grid; place-items:center; transition:background .2s, transform .2s}
.video:hover .play{background:var(--blue-deep); transform:translate(-50%,-50%) scale(1.08)}
.video .play::after{content:""; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; margin-left:5px}
.video .vtitle{position:absolute; inset-inline:0; bottom:0; padding:28px 18px 14px; color:#fff; font-weight:700; font-size:.98rem; line-height:1.4; text-align:start; background:linear-gradient(to top, rgba(15,19,32,.9), transparent)}
.video-frame{width:100%; aspect-ratio:16/9; border:0; border-radius:16px; display:block; background:#000}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(30,37,56,.92); backdrop-filter:blur(6px); padding:clamp(16px,4vw,48px)}
.lightbox[hidden]{display:none}
.lb-fig{margin:0; display:flex}
.lb-fig img{max-width:min(1000px,92vw); max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.lb-btn{position:absolute; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); cursor:pointer;
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-close{top:20px; inset-inline-end:20px; width:46px; height:46px}
.lb-close span{position:absolute; width:20px; height:2px; background:#fff; border-radius:2px}
.lb-close span:nth-child(1){transform:rotate(45deg)}
.lb-close span:nth-child(2){transform:rotate(-45deg)}
.lb-prev{inset-inline-start:18px}
.lb-next{inset-inline-end:18px}
.lb-btn i{width:11px; height:11px; border-top:2px solid #fff; border-right:2px solid #fff; display:block}
.lb-prev i{transform:rotate(-135deg)}
.lb-next i{transform:rotate(45deg)}
html[dir="rtl"] .lb-prev i{transform:rotate(45deg)}
html[dir="rtl"] .lb-next i{transform:rotate(-135deg)}
@media(max-width:600px){
  .lb-prev,.lb-next{top:auto; bottom:22px}
  .lb-prev{inset-inline-start:calc(50% - 62px)}
  .lb-next{inset-inline-end:calc(50% - 62px)}
}

/* ---------- book cover meta + zoom ---------- */
.book .ph{border:0; padding:0; width:100%; font:inherit; color:inherit; cursor:zoom-in}
.book-meta{color:var(--blue); font-size:.82rem; font-weight:700; margin-top:6px}

/* ---------- article share + prev/next ---------- */
.a-share{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.a-share .share-label{font-weight:700; color:var(--muted); font-size:.92rem; margin-inline-end:4px}
.sh{font-family:var(--f-body); font-weight:700; font-size:.9rem; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--blue-ink); cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.sh:hover{border-color:var(--blue); color:var(--blue-deep); background:var(--tint)}
.a-nav{display:flex; justify-content:space-between; gap:16px; margin-top:28px; flex-wrap:wrap}
.a-nav-item{flex:1 1 240px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; transition:border-color .2s, transform .2s, box-shadow .2s}
.a-nav-item:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:0 16px 30px -20px var(--shadow)}
.a-nav-item span{display:block; color:var(--blue); font-weight:700; font-size:.82rem; margin-bottom:6px}
.a-nav-item b{color:var(--ink); font-weight:700; font-size:1rem; line-height:1.4; display:block}
.a-newer{text-align:end}

/* ---------- press year filter ---------- */
.yfilters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px}
.yfilter{font-family:var(--f-body); font-weight:700; font-size:.9rem; padding:9px 20px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s, border-color .2s, color .2s}
.yfilter:hover{border-color:var(--blue); color:var(--blue-ink)}
.yfilter.active{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}

/* ---------- footer / contact ---------- */
.foot{background:var(--blue-ink); color:#fff}
.foot .wrap:first-child{padding-block:52px; display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:start}
@media(max-width:640px){.foot .wrap:first-child{grid-template-columns:1fr; gap:22px}}
.foot .fbrand{font-family:var(--f-display); font-weight:800; font-size:1.6rem; color:#fff}
.foot p{color:rgba(255,255,255,.72); margin-top:10px; max-width:44ch}
.foot .contact .clabel{font-weight:700; color:#fff}
.foot .contact a{color:#C9D3EC; font-weight:700}
.foot .contact a:hover{color:#fff}
.foot .cpy{border-top:1px solid rgba(255,255,255,.16); padding-block:20px; color:rgba(255,255,255,.62); font-size:.85rem; font-variant-numeric:tabular-nums}
.foot .cpy a{color:#C9D3EC}

/* ---------- article pages ---------- */
.article-top{position:fixed; top:0; inset-inline:0; z-index:46; display:flex; align-items:center; justify-content:space-between;
  padding:11px clamp(16px,4vw,40px); background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.article-body .brand-float{position:static; padding:8px 13px; box-shadow:none}
.article-body .brand-float img{width:112px}
.back-link{color:var(--blue-deep); font-weight:700; background:var(--tint); padding:9px 17px; border-radius:999px; transition:background .2s}
.back-link:hover{background:var(--tint-2)}
.article{padding:clamp(96px,13vh,128px) 0 30px}
.article-wrap{max-width:760px; margin-inline:auto; padding-inline:clamp(20px,5vw,32px)}
.a-kicker{color:var(--blue); font-weight:700; margin-bottom:12px}
.article-wrap h1{font-size:clamp(1.8rem,4.4vw,2.7rem); font-weight:800; line-height:1.32; margin-bottom:24px}
.a-hero{width:100%; border-radius:16px; border:1px solid var(--line); box-shadow:0 26px 52px -28px var(--shadow); margin-bottom:30px; max-height:74vh; object-fit:contain; background:var(--tint)}
.a-body{font-size:1.09rem; line-height:2.05; color:#39404F}
.a-body p{margin-bottom:1.2em}
.a-note{color:var(--muted); font-style:italic}
.a-foot{margin-top:38px; padding-top:24px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.a-src{background:var(--blue-deep); color:#fff; padding:11px 20px; border-radius:12px; font-weight:700; transition:transform .16s}
.a-src:hover{transform:translateY(-2px)}
.a-back{color:var(--blue-deep); font-weight:700}
.art-foot{margin-top:20px}

/* ---------- articles index ---------- */
.art-index{padding:clamp(96px,13vh,128px) 0 64px}
.art-head{margin-bottom:42px; text-align:center}
.art-head h1{font-size:clamp(2rem,5vw,3rem); font-weight:800; margin-top:4px}
.art-head p{color:var(--muted); margin-top:10px}
.art-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.art-grid{grid-template-columns:1fr}}
.art-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .25s, border-color .2s}
.art-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -20px var(--shadow); border-color:var(--blue)}
.art-thumb{aspect-ratio:16/11; background:var(--tint); overflow:hidden}
.art-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.art-card:hover .art-thumb img{transform:scale(1.05)}
.art-info{padding:16px 18px 20px}
.art-date{color:var(--blue); font-weight:700; font-size:.82rem; margin-bottom:6px; font-variant-numeric:tabular-nums}
.art-info h3{font-size:1.04rem; font-weight:700; line-height:1.5; color:var(--ink)}

/* focus */
a:focus-visible,.btn:focus-visible,.lang:focus-visible,.nav-toggle:focus-visible,.dock a:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:8px}

/* ---------- responsive floating nav ---------- */
@media(max-width:1100px){
  .dock{display:none}
  .nav-toggle{display:inline-flex}
  .brand-float{top:16px; inset-inline-start:16px; padding:9px 14px}
  .brand-float img{width:104px}
  .top-right{top:16px; inset-inline-end:16px}
  .hero{padding-block:clamp(84px,20vw,104px) clamp(28px,6vw,44px)}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  /* hero load-in */
  .rin{opacity:0; transform:translateY(18px); animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .eyebrow.rin{animation-delay:.05s}
  .hero .title.rin{animation-delay:.15s}
  .hero .lead.rin{animation-delay:.28s}
  .hero .cta.rin{animation-delay:.4s}
  .hero .cred.rin{animation-delay:.52s}
  .heroart.rin{animation-delay:.32s}
  @keyframes rise{to{opacity:1; transform:none}}
  /* floating nav entrance */
  .brand-float,.top-right,.dock{animation:fadein .6s ease both}
  .dock{animation-delay:.2s}
  @keyframes fadein{from{opacity:0; transform:translateY(-8px)} to{opacity:1}}
  .dock{animation-name:dockin}
  @keyframes dockin{from{opacity:0} to{opacity:1}}
  /* orbs drift */
  .hero-orbs span{animation:drift 20s ease-in-out infinite alternate}
  .hero-orbs span:nth-child(2){animation-duration:26s; animation-delay:-6s}
  .hero-orbs span:nth-child(3){animation-duration:16s; animation-delay:-3s}
  @keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(-4%,5%) scale(1.08)}}
  /* scroll reveals */
  [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  [data-reveal].in{opacity:1; transform:none}
  /* overlay open */
  .overlay:not([hidden]){animation:ov .3s ease}
  @keyframes ov{from{opacity:0} to{opacity:1}}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }