/* ═══════════════════════════════════════════════════════════════
   PRISM — Charbel Efrem
   One designer. The full spectrum.
   ═══════════════════════════════════════════════════════════════ */

@property --spectrum      { syntax:'<color>';      inherits:true; initial-value:#F4F3F1 }
@property --spectrum-glow { syntax:'<color>';      inherits:true; initial-value:#FFFFFF }
@property --beam          { syntax:'<percentage>'; inherits:false; initial-value:0% }

:root{
  /* SURFACE */
  --void:#08080A; --void-2:#101014; --void-3:#1A1A20;
  --light:#F4F3F1;
  --dim:rgba(244,243,241,.58);
  --faint:rgba(244,243,241,.30);
  --hair:rgba(244,243,241,.12);

  /* SPECTRUM (animated) */
  --spectrum:#F4F3F1;
  --spectrum-glow:#FFFFFF;
  --grad:linear-gradient(90deg,#E10600 0%,#F2A03D 20%,#FFD400 40%,#00A862 60%,#2E6BE6 80%,#7B5CFF 100%);

  /* TYPE */
  --fs-mega:clamp(3.4rem,15.5vw,16rem);
  --fs-h1:clamp(2.6rem,7.6vw,7.5rem);
  --fs-h2:clamp(1.9rem,4.6vw,4.2rem);
  --fs-h3:clamp(1.35rem,2.4vw,2.1rem);
  --fs-lead:clamp(1.05rem,1.55vw,1.45rem);
  --fs-body:clamp(.94rem,1.02vw,1.06rem);
  --fs-mono:clamp(.62rem,.72vw,.72rem);

  /* SPACE */
  --gutter:clamp(1.15rem,4vw,4.5rem);
  --maxw:1660px;
  --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem; --s9:12rem;

  /* MOTION */
  --e-light:cubic-bezier(.16,1,.3,1);
  --e-glass:cubic-bezier(.65,0,.35,1);
  --d:.6s;

  --shadow:0 34px 80px -24px rgba(0,0,0,.9);
  --aberr:0px;   /* live chromatic aberration, driven by scroll velocity */
  --skew:0deg;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ background:var(--void); -webkit-text-size-adjust:100% }
body{
  background:var(--void);
  color:var(--light);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color 1.1s var(--e-glass), color 1.1s var(--e-glass);
}
body.is-bright{ background:#F7F7F2; color:#0B0B0E }
body.lock{ overflow:hidden }

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--spectrum); color:var(--void) }

:focus-visible{ outline:2px solid var(--spectrum); outline-offset:3px; border-radius:2px }

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:10001;
  background:var(--light); color:var(--void); padding:.6rem 1rem;
  font:500 .8rem 'JetBrains Mono',monospace; transform:translateY(-200%);
}
.skip:focus{ transform:none }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }

/* ── TYPE PRIMITIVES ──────────────────────────────────────────── */
.mono{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--fs-mono); letter-spacing:.18em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.label{ color:var(--spectrum); margin-bottom:var(--s4); transition:color .9s var(--e-glass) }
.dim{ color:var(--dim) }
.is-bright .dim{ color:rgba(11,11,14,.55) }

.h1,.h2,.h3,.ch-title,.hero-name,.rc-title,.man-line{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 112,'wght' 800;
  text-transform:uppercase;
  letter-spacing:-.045em;
  line-height:.86;
}
/* Archivo carries a left side bearing that makes display type sit ~5% of its
   own size inboard of the mono labels above it. Pull it back onto the gutter. */
.h1,.h2,.h3,.ch-title,.hero-name,.optical,.foot-name{ margin-left:-.03em }
.h1{ font-size:var(--fs-h1) }
.h2{ font-size:var(--fs-h2) }
.h3{ font-size:var(--fs-h3); line-height:1.05 }
.lead{ font-size:var(--fs-lead); max-width:56ch; margin-bottom:var(--s3) }

.spectrum-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* line clipping for split-text reveals */
.line{ display:block; overflow:hidden }
.line > *{ display:block }
[data-split-lines]{ display:block; overflow:hidden }
.sl-inner{ display:block }
.char{ display:inline-block; will-change:transform }

/* ── LIGHT ENGINE / ATMOSPHERE ────────────────────────────────── */
#light{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.66;
  transition:opacity .9s var(--e-glass);
}
.is-bright #light{ opacity:.28 }

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 95% at 50% 40%,transparent 35%,rgba(0,0,0,.55) 100%);
  transition:opacity .9s var(--e-glass);
}
.is-bright .vignette{ opacity:0 }

#grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  mix-blend-mode:overlay; opacity:.06;
}

/* one shared flare — the light striking the glass at each new chapter */
#flare{
  position:fixed; inset:0; z-index:8800; pointer-events:none;
  opacity:0; mix-blend-mode:screen;
}
#flare video{ width:100%; height:100%; object-fit:cover }
#flare::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(42% 42% at 50% 50%,color-mix(in srgb,var(--spectrum) 55%,transparent),transparent 70%);
  mix-blend-mode:color;
}

/* ── TRANSITION PANELS ────────────────────────────────────────── */
.shift{
  position:relative; height:92vh; height:92dvh; overflow:hidden;
  display:grid; place-items:center;
}
.shift-v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.8; mix-blend-mode:screen;
  /* feather every edge so the clip dissolves into the void
     instead of ending on a hard rectangle */
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 50%,#000 32%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 50%,#000 32%,rgba(0,0,0,0) 100%);
}
.shift-line{
  position:relative; color:var(--light); font-size:clamp(.7rem,1.1vw,.95rem);
  letter-spacing:.4em; text-align:center; padding-inline:var(--gutter);
  text-shadow:0 0 40px rgba(0,0,0,.9);
}

main,header,footer,#rail{ position:relative; z-index:2 }

/* ── CURSOR ───────────────────────────────────────────────────── */
#cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  display:none; place-items:center;
  mix-blend-mode:difference;
  transition:width .35s var(--e-light),height .35s var(--e-light),margin .35s var(--e-light);
}
#cursor svg{ width:100%; height:100%; overflow:visible }
#cursor polygon{ fill:none; stroke:var(--spectrum); stroke-width:2.5; transition:fill .3s,stroke .3s }
#cursor.dot{ width:9px; height:9px; margin:-4.5px 0 0 -4.5px }
#cursor.dot polygon{ fill:var(--spectrum) }
#cursor.view{ width:86px; height:86px; margin:-43px 0 0 -43px }
#cursor.view polygon{ fill:var(--spectrum); opacity:.92 }
.cursor-label{
  position:absolute; font:500 9px/1 'JetBrains Mono',monospace; letter-spacing:.2em;
  color:var(--void); opacity:0; transform:translateY(6px); transition:opacity .25s,transform .25s;
}
#cursor.view .cursor-label{ opacity:1; transform:translateY(8px) }
html.has-cursor #cursor{ display:grid }
html.has-cursor *{ cursor:none !important }

/* ── THE LOUPE — a glass lens over the work ───────────────────── */
#lens{
  position:fixed; top:0; left:0; z-index:9997; pointer-events:none;
  width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%;
  opacity:0; transform:scale(.72); background-repeat:no-repeat; background-color:var(--void-2);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--spectrum) 70%,transparent),
             0 22px 60px -14px rgba(0,0,0,.9),
             0 0 70px -14px var(--spectrum-glow);
  transition:opacity .28s var(--e-light),transform .4s var(--e-light);
  will-change:translate;
}
#lens.on{ opacity:1; transform:scale(1) }
/* chromatic fringe at the glass edge */
#lens::after{
  content:''; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,transparent 60%,
    rgba(255,0,72,.20) 76%,rgba(0,196,255,.22) 91%,transparent 100%);
}
#lens::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 44px -14px rgba(0,0,0,.9);
}
html.lens-on #cursor{ opacity:0 }

/* ── PRELOADER — SCENE ONE ────────────────────────────────────── */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--void);
  display:grid; place-items:center; overflow:hidden;
}
.pl-beam{ position:absolute; top:50%; left:0; width:50%; height:1px; overflow:hidden }
.pl-beam i{
  position:absolute; inset:0; display:block;
  background:linear-gradient(90deg,transparent,#fff);
  box-shadow:0 0 22px 2px rgba(255,255,255,.55);
  transform:translateX(-100%);
}
.pl-prism{
  width:0; height:0; opacity:0;
  border-left:34px solid transparent; border-right:34px solid transparent;
  border-bottom:58px solid rgba(255,255,255,.14);
  filter:drop-shadow(0 0 30px rgba(255,255,255,.35));
}
.pl-fan{ position:absolute; top:50%; left:50%; width:50%; height:2px }
.pl-fan i{
  position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--c),transparent);
  transform-origin:0 50%; transform:scaleX(0) rotate(0deg); opacity:0;
  box-shadow:0 0 18px 1px var(--c);
}
.pl-caption{ position:absolute; bottom:8vh; left:0; right:0; text-align:center; overflow:hidden }
.pl-caption span{
  display:inline-block;
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace;
  letter-spacing:.42em; text-transform:uppercase; color:var(--faint);
}

/* ── HEADER ───────────────────────────────────────────────────── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:1.1rem var(--gutter);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  background:color-mix(in srgb,var(--void) 55%,transparent);
  border-bottom:1px solid var(--hair);
  transition:transform .55s var(--e-light),background .9s var(--e-glass),border-color .9s;
}
.is-bright #nav{ background:rgba(247,247,242,.6); border-color:rgba(11,11,14,.1) }
#nav.hide{ transform:translateY(-102%) }
.nav-mark{
  display:flex; align-items:center; gap:.65rem;
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
}
.nav-mark-prism{
  width:0; height:0; display:block;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:11px solid var(--spectrum);
  transition:border-bottom-color .9s var(--e-glass),transform .5s var(--e-light);
}
.nav-mark:hover .nav-mark-prism{ transform:rotate(180deg) }
.nav-links{ display:flex; gap:var(--s4) }
.nav-links a,.nav-cta{
  position:relative; font:500 var(--fs-mono)/1 'JetBrains Mono',monospace;
  letter-spacing:.18em; text-transform:uppercase; padding-bottom:3px;
}
.nav-links a::after,.nav-cta::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--spectrum); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-light);
}
.nav-links a:hover::after,.nav-cta:hover::after{ transform:scaleX(1) }
.nav-cta::after{ transform:scaleX(1); transform-origin:right }
.nav-cta:hover::after{ transform:scaleX(0) }

/* ── PERSISTENT SPECTRUM RAIL ─────────────────────────────────── */
#rail{
  position:fixed; right:calc(var(--gutter) * .45); top:50%; z-index:8500;
  transform:translateY(-50%); display:flex; flex-direction:column; gap:10px;
  opacity:0; pointer-events:none; transition:opacity .6s var(--e-light);
}
#rail.on{ opacity:1; pointer-events:auto }
#rail a{
  position:relative; display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  height:26px;
}
#rail a::after{
  content:''; display:block; width:26px; height:2px; background:var(--c); opacity:.32;
  transition:width .45s var(--e-light),opacity .45s,height .45s;
}
#rail a:hover::after,#rail a.active::after{ width:54px; height:3px; opacity:1 }
#rail em,#rail b{
  font:500 10px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
  font-style:normal; opacity:0; transform:translateX(8px);
  transition:opacity .35s var(--e-light),transform .35s var(--e-light);
  white-space:nowrap;
}
#rail em{ color:var(--faint) }
#rail b{ color:var(--c); font-weight:500 }
#rail a:hover em,#rail a:hover b,#rail a.active b{ opacity:1; transform:none }

/* ── 01 HERO ──────────────────────────────────────────────────── */
.hero{ height:230vh; position:relative }
.hero-pin{
  height:100vh; height:100dvh; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem; gap:var(--s4);
  max-width:var(--maxw); margin-inline:auto;
}
.hero-meta{
  position:absolute; top:6rem; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; gap:1rem; color:var(--faint);
}
.hero-name{
  font-size:var(--fs-mega); line-height:.83;
  font-variation-settings:'wdth' 118,'wght' 860;
}
.hero-name .char{
  background-image:var(--grad); background-size:600% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:saturate(0) brightness(2.4);            /* starts as white light */
  text-shadow:var(--aberr) 0 0 rgba(255,0,60,.45), calc(var(--aberr) * -1) 0 0 rgba(0,200,255,.45);
}
.hero-claim{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1rem,2.05vw,1.9rem); text-transform:uppercase; letter-spacing:.01em;
  line-height:1.12; color:var(--dim);
}
.hero-claim [data-split-lines]:last-child{ color:var(--light) }
.hero-sub{ max-width:44ch; color:var(--dim); font-size:var(--fs-lead) }
.hero-foot{
  position:absolute; bottom:2.4rem; left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; color:var(--faint);
}
.scroll-cue{ display:flex; align-items:center; gap:.7rem }
.scroll-cue i{ display:block; width:52px; height:1px; background:var(--hair); position:relative; overflow:hidden }
.scroll-cue i::after{
  content:''; position:absolute; inset:0; background:var(--spectrum);
  animation:cue 2.4s var(--e-glass) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ── 02 MANIFESTO ─────────────────────────────────────────────── */
.manifesto{ position:relative }
.man-pin{ height:260vh }
.man-stage{
  height:100vh; height:100dvh; display:grid; place-items:center;
  padding-inline:var(--gutter); text-align:center;
}
.man-line{
  grid-area:1/1; font-size:clamp(2rem,7.6vw,7rem); opacity:0;
  max-width:16ch;
}
.man-split{ position:relative; display:grid }
.man-split i{
  grid-area:1/1; font-style:normal; color:var(--c,#fff);
  mix-blend-mode:screen; will-change:transform;
}
.man-split i:nth-child(1){ --c:#E10600 } .man-split i:nth-child(2){ --c:#F2A03D }
.man-split i:nth-child(3){ --c:#FFD400 } .man-split i:nth-child(4){ --c:#00A862 }
.man-split i:nth-child(5){ --c:#2E6BE6 } .man-split i:nth-child(6){ --c:#7B5CFF }

.man-body{ padding-block:var(--s7) var(--s9) }
.man-ar{ margin-top:var(--s5); display:flex; gap:1.2rem; align-items:baseline; flex-wrap:wrap; color:var(--faint) }
.man-ar [lang=ar]{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.3rem; color:var(--spectrum) }

/* ── 03 SPECTRUM INDEX ────────────────────────────────────────── */
.index{ padding-block:var(--s8) var(--s9) }
.index-head{ margin-bottom:var(--s6) }
.index-hint{ color:var(--faint); margin-top:var(--s3) }
.prism-bars{
  display:flex; flex-direction:column;
  width:100%; border-top:1px solid var(--hair);
}
.pbar{
  position:relative; display:flex; align-items:center; gap:1.5rem;
  height:clamp(66px,9.2vh,104px);
  padding:0 var(--gutter);
  border-bottom:1px solid var(--hair);
  overflow:hidden; will-change:height;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 62%);
  transition:background .5s var(--e-light);
}
.pbar::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c);
  transition:width .5s var(--e-light),box-shadow .5s;
}
.pbar:hover{ background:linear-gradient(90deg,color-mix(in srgb,var(--c) 34%,transparent),transparent 78%) }
.pbar:hover::before{ width:10px; box-shadow:0 0 34px 3px var(--c) }
.pbar-n{ color:var(--faint); flex:none; width:2.6rem }
.pbar-name{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 108,'wght' 800;
  text-transform:uppercase; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.3rem,3.4vw,3rem);
  transition:color .45s var(--e-light),transform .55s var(--e-light);
  color:var(--dim);
}
.pbar:hover .pbar-name{ color:var(--c); transform:translateX(14px) }
.pbar-meta{
  margin-left:auto; text-align:right; color:var(--faint);
  opacity:0; transform:translateX(18px);
  transition:opacity .45s var(--e-light),transform .45s var(--e-light);
  max-width:46%;
}
.pbar:hover .pbar-meta{ opacity:1; transform:none }
.pbar-thumbs{ display:flex; gap:8px; flex:none; opacity:0; transform:translateX(30px); transition:opacity .5s var(--e-light),transform .5s var(--e-light) }
.pbar:hover .pbar-thumbs{ opacity:1; transform:none }
.pbar-thumbs img{
  width:clamp(52px,6vw,96px); height:clamp(36px,4.2vw,62px);
  object-fit:cover; border-radius:3px; border:1px solid var(--hair);
}

/* ── CHAPTERS — SHARED ────────────────────────────────────────── */
.chapter{ position:relative; padding-block:var(--s7) var(--s6) }
.ch-open{ min-height:70vh; display:flex; align-items:center; padding-block:var(--s5) }
.ch-num{ color:var(--c) }
.ch-title{
  font-size:var(--fs-mega); line-height:.83; color:var(--c);
  font-variation-settings:'wdth' 118,'wght' 880;
  text-shadow:var(--aberr) 0 0 rgba(255,255,255,.22), calc(var(--aberr) * -1) 0 0 rgba(0,0,0,.4);
  margin-block:var(--s3);
}
.ch-facts{ display:flex; flex-direction:column; gap:.45rem; margin-top:var(--s4) }
.ch-facts .mono{ color:var(--dim) }
.ch-desc{ max-width:58ch; margin-top:var(--s4); font-size:var(--fs-lead); color:var(--dim) }
.movement{ padding-block:var(--s7) var(--s5) }
.movement .h3{ max-width:34ch }

/* work plates — the figure is exactly as tall as its image, never stretched
   by a flex/grid parent, so no letterbox band can appear under a mockup */
.plate{
  position:relative; display:block; align-self:start;
  border-radius:10px; overflow:hidden; background:transparent;
  box-shadow:var(--shadow); line-height:0;
}
.plate::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--c,var(--spectrum)) 34%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.05);
  opacity:.6; transition:opacity .5s,box-shadow .5s;
}
.plate img{
  display:block; width:100%; height:auto;
  filter:saturate(1.04) contrast(1.02); transition:transform .8s var(--e-light);
}
.plate figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem; line-height:1.4;
  font:500 var(--fs-mono)/1.4 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
  color:var(--light); background:linear-gradient(transparent,rgba(0,0,0,.85));
  opacity:0; transform:translateY(10px); transition:opacity .45s,transform .45s var(--e-light);
}
.plate:hover figcaption{ opacity:1; transform:none }
.plate:hover img{ transform:scale(1.035) }
.plate:hover::after{ opacity:1; box-shadow:inset 2px 0 0 var(--c,var(--spectrum)),0 0 60px -8px var(--c,var(--spectrum-glow)) }
.tilt{ transform:rotate(-1.4deg) }

/* galleries — CSS columns, so every item keeps its own height and the
   gutters stay identical no matter what aspect ratios land in the set */
.grid-masonry,.grid-offset{
  --gap:clamp(.8rem,1.6vw,1.6rem);
  column-gap:var(--gap); padding-block:var(--s4);
}
.grid-masonry{ columns:3 }
.grid-offset{ columns:2 }
.grid-masonry .plate,.grid-offset .plate{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:var(--gap); width:100%;
}

/* horizontal carousel — snap + arrows, not a hijacked scroll */
.rail{ position:relative; padding-block:var(--s5) }
.rail-track{
  display:flex; align-items:center; gap:clamp(.9rem,1.8vw,2rem);
  padding-inline:var(--gutter);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.rail-track::-webkit-scrollbar{ display:none }
.rail-track .plate{ flex:none; width:clamp(260px,32vw,520px); scroll-snap-align:center }
/* controls live under the track, clear of the fixed spectrum rail on the right */
.rail-controls{
  display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.5rem);
  max-width:var(--maxw); margin:var(--s4) auto 0;
  /* keep clear of the fixed spectrum rail, including its hover labels */
  padding-left:var(--gutter); padding-right:calc(var(--gutter) + 92px);
}
.rail-arrows{ display:flex; gap:.7rem; flex:none }
.rail-arrow{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1rem;
  color:var(--light); background:rgba(8,8,10,.6); backdrop-filter:blur(14px);
  border:1px solid var(--hair);
  transition:border-color .3s,background .3s,opacity .3s,transform .3s var(--e-light);
}
.rail-arrow:hover{ border-color:var(--c,var(--spectrum)); background:rgba(8,8,10,.92); transform:scale(1.07) }
.rail-arrow[disabled]{ opacity:.2; pointer-events:none }
.rail-progress{ flex:1; height:2px; background:var(--hair); position:relative; overflow:hidden }
.rail-progress i{
  position:absolute; left:0; top:0; bottom:0; width:20%;
  background:var(--c,var(--spectrum)); transition:width .3s,transform .18s linear;
}

/* ── MAZDA — THE ART BOOK ─────────────────────────────────────── */
.mz-book{ height:340vh; position:relative }
.mz-stage{
  position:relative; height:100vh; height:100dvh; overflow:hidden;
  display:grid; place-items:center;
}
.mz-plate{
  width:auto; height:auto; min-width:100%; min-height:100%;
  max-width:none; object-fit:cover; will-change:transform;
  filter:saturate(1.05) contrast(1.03);
}
.mz-sweep{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(225,6,0,.5) 48%,rgba(255,120,90,.28) 52%,transparent 62%);
  transform:translateX(-120%);
}
.mz-ticker{
  position:absolute; bottom:0; left:0; right:0; overflow:hidden;
  border-block:1px solid var(--hair); background:rgba(8,8,10,.55);
  backdrop-filter:blur(10px); padding:.7rem 0;
}
.mz-track{ display:flex; gap:3.5rem; white-space:nowrap; animation:ticker 26s linear infinite; width:max-content }
.mz-track span{
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace; letter-spacing:.34em;
  text-transform:uppercase; color:#E10600;
}
@keyframes ticker{ to{ transform:translateX(-50%) } }
.mz-second{
  padding-block:var(--s7);
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(1.5rem,4vw,4.5rem); align-items:center;
}
.mz-note .h3{ margin-block:.2rem var(--s3) }
.mz-note .lead{ font-size:var(--fs-body) }

/* ── KAEC — THE DISTRICT WALL ─────────────────────────────────── */
.kaec-wall{ height:320vh; position:relative }
.kw-stage{
  position:relative; height:100vh; height:100dvh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.kw-slice{
  position:absolute; inset:0;
  background-image:url('assets/img/kaec/kaec-01.webp');
  background-size:cover; background-position:center;
  will-change:transform,clip-path;
}
.kw-slice[data-d="0"]{ clip-path:inset(0 80% 0 0) }
.kw-slice[data-d="1"]{ clip-path:inset(0 60% 0 20%) }
.kw-slice[data-d="2"]{ clip-path:inset(0 40% 0 40%) }
.kw-slice[data-d="3"]{ clip-path:inset(0 20% 0 60%) }
.kw-slice[data-d="4"]{ clip-path:inset(0 0 0 80%) }
.kw-names{
  position:absolute; inset:auto 0 12vh 0; display:flex; justify-content:space-around;
  padding-inline:var(--gutter); pointer-events:none;
}
.kw-names span{
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c); opacity:0; transform:translateY(14px);
  text-shadow:0 0 30px rgba(0,0,0,.9);
}
.kw-cap{
  position:absolute; bottom:4vh; left:0; right:0; text-align:center; color:var(--faint);
}

/* ── HUNGERSTATION — KINETIC DECK ─────────────────────────────── */
.hs-ooh{
  display:grid; grid-template-columns:repeat(3,1fr); align-items:start;
  gap:clamp(.8rem,1.6vw,1.6rem); padding-block:var(--s5);
}
.hs-stack{ padding-block:var(--s6); perspective:1700px; position:relative }
.hs-deck{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  transform-style:preserve-3d; padding-inline:var(--gutter);
  gap:clamp(.8rem,1.6vw,1.6rem); max-width:var(--maxw); margin-inline:auto;
}
.hs-card{
  transform-style:preserve-3d; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); will-change:transform; line-height:0;
}
.hs-card img{ display:block; width:100%; height:auto }
.hs-card img{ filter:saturate(1.06) }
.hs-cap{ text-align:center; margin-top:var(--s5); color:var(--faint) }

/* ── MG — THE ASSEMBLING GRID ─────────────────────────────────── */
.mg-grid{ height:215vh; position:relative }
.mg-stage{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:grid; place-items:center; padding:5rem var(--gutter) 4rem;
}
.mg-frame{
  position:relative; width:min(100%,1120px); line-height:0;
  border-radius:10px; overflow:hidden; will-change:transform;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,168,98,.22);
}
.mg-frame img{ display:block; width:100%; height:auto }
.mg-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px -20px var(--mg-glow,#3BE59B); opacity:0;
  transition:opacity .6s var(--e-light);
}
.mg-frame:hover::after{ opacity:.5 }
.mg-cap{ position:absolute; bottom:2.2rem; left:0; right:0; text-align:center; color:var(--faint) }

/* ── BUPA — BRIGHT INTERRUPTION ───────────────────────────────── */
.chapter.bright{
  color:#0B0B0E; background:#F7F7F2;
  box-shadow:0 0 0 100vmax #F7F7F2;
  clip-path:inset(0 -100vmax);
  margin-block:var(--s7);
}
.chapter.bright::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad);
}
.chapter.bright .ch-desc,.chapter.bright .ch-facts .mono{ color:rgba(11,11,14,.6) }
.chapter.bright .plate{ background:#EDEDE8; box-shadow:0 30px 70px -28px rgba(11,20,60,.35) }
.chapter.bright .plate::after{ box-shadow:inset 1px 0 0 rgba(46,107,230,.5) }
.bupa-line{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible;
}
.bupa-line path{
  fill:none; stroke:#2E6BE6; stroke-width:2.5; stroke-linecap:round;
  opacity:.5; vector-effect:non-scaling-stroke;
}
.bupa-hero{ position:relative; z-index:1; padding-block:var(--s5) }
#bupa .grid-offset{ position:relative; z-index:1 }

/* ── MISK — EDITORIAL ─────────────────────────────────────────── */
.misk-ed{ position:relative; padding-block:var(--s4) var(--s6); overflow:hidden; line-height:0 }
.misk-ed .misk-quote{ line-height:1.05 }
.misk-bigtype{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:.2em; pointer-events:none;
}
.misk-bigtype span{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(3.4rem,15vw,15rem); line-height:.8; text-transform:uppercase;
  letter-spacing:-.05em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.2px rgba(123,92,255,.52);
  will-change:transform;
}
.misk-bigtype span:first-child{
  font-family:'IBM Plex Sans Arabic',sans-serif; -webkit-text-stroke-width:1.2px;
  font-size:clamp(3rem,12vw,12rem);
}
.misk-spread{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  will-change:transform;
}
.misk-spread img{
  border-radius:8px; box-shadow:0 50px 110px -30px rgba(0,0,0,.95);
}
.misk-quote{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:var(--s6) auto 0; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:end;
}
.misk-quote p{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 108,'wght' 700;
  font-size:var(--fs-h3); text-transform:uppercase; line-height:1.05; letter-spacing:-.02em;
}
.misk-quote p[lang=ar]{
  font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:700; text-transform:none;
  color:#7B5CFF; letter-spacing:0;
}
.misk-cols{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  gap:clamp(.8rem,2vw,2.4rem); padding-block:var(--s7);
}
.misk-close{ padding-block:var(--s6) var(--s8) }

/* ── CAPABILITIES ─────────────────────────────────────────────── */
.caps{ padding-block:var(--s8) }
.caps-head{ margin-bottom:var(--s6) }
.caps-spectrum{ border-top:1px solid var(--hair) }
.cap{
  position:relative; display:flex; align-items:baseline; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.3rem,3vw,2.4rem) var(--gutter);
  max-width:var(--maxw); margin-inline:auto;
  border-bottom:1px solid var(--hair); overflow:hidden;
  transition:background .5s var(--e-light);
}
.cap::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--c);
  transition:width .55s var(--e-light);
}
.cap::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(60% 140% at 12% 50%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);
  transition:opacity .55s var(--e-light);
}
.cap:hover::before{ width:6px; box-shadow:0 0 34px 3px var(--c) }
.cap:hover::after{ opacity:1 }
.cap-i{ color:var(--faint); flex:none; width:2.6rem; position:relative; z-index:1 }
.cap h3{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(1.5rem,4.4vw,3.6rem); text-transform:uppercase; letter-spacing:-.04em;
  line-height:1; flex:1; position:relative; z-index:1;
  transition:color .5s var(--e-light),transform .55s var(--e-light);
}
.cap:hover h3{ color:var(--c); transform:translateX(16px) }
.cap p{ color:var(--faint); text-align:right; max-width:44%; position:relative; z-index:1;
  transition:color .5s,opacity .5s }
.cap:hover p{ color:var(--dim) }

/* ── ABOUT ────────────────────────────────────────────────────── */
.about{ padding-block:var(--s8) }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,7rem); align-items:start }
.about-main .h2{ margin-block:var(--s4) var(--s5) }
.beam-timeline{ position:relative; list-style:none; padding-left:2.4rem }
.beam-timeline::before{
  content:''; position:absolute; left:6px; top:.4rem; bottom:.4rem; width:1px;
  background:var(--hair);
}
.beam-timeline::after{
  content:''; position:absolute; left:6px; top:.4rem; width:1px; height:var(--beam,0%);
  background:linear-gradient(180deg,#E10600,#F2A03D,#FFD400,#00A862,#2E6BE6,#7B5CFF);
  box-shadow:0 0 16px 1px rgba(255,255,255,.35);
}
.beam-timeline li{ position:relative; padding-bottom:var(--s5) }
.beam-timeline li::before{
  content:''; position:absolute; left:-2.4rem; top:.55rem; width:13px; height:13px;
  border-radius:50%; background:var(--void); border:1px solid var(--hair);
  transition:background .5s,box-shadow .5s,border-color .5s;
}
.beam-timeline li.lit::before{ background:var(--c); border-color:var(--c); box-shadow:0 0 22px 3px var(--c) }
.beam-timeline .mono{ color:var(--faint) }
.beam-timeline h4{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 104,'wght' 700;
  font-size:1.12rem; text-transform:uppercase; letter-spacing:-.01em; margin-block:.4rem;
}
.beam-timeline p{ color:var(--dim); max-width:46ch }
.toolkit{ padding-top:var(--s7) }
.tool-list{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:.8rem }
.tool-list span{
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--hair); padding:.6rem .9rem; border-radius:99px;
  transition:border-color .4s,color .4s;
}
.tool-list span:hover{ border-color:var(--spectrum); color:var(--spectrum) }

/* ── RECOMBINE + CTA ──────────────────────────────────────────── */
.recombine{ height:280vh; position:relative }
.rc-pin{
  height:100vh; height:100dvh; position:relative; overflow:hidden;
  display:grid; place-items:center;
}
/* the beams' glow gets clipped by overflow:hidden and leaves a hard horizontal
   seam against the section above — feather the cut instead */
.rc-beams{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.rc-beams{ position:absolute; inset:0; pointer-events:none }
.rc-beams i{
  position:absolute; left:50%; top:50%; width:150vmax; height:2px;
  background:linear-gradient(90deg,transparent,var(--c) 45%,var(--c));
  transform-origin:0 50%; box-shadow:0 0 30px 2px var(--c); opacity:.85;
}
.rc-white{
  position:absolute; left:50%; top:50%; width:3px; height:0; transform:translate(-50%,-50%);
  background:#fff; box-shadow:0 0 90px 16px rgba(255,255,255,.75);
}
.rc-content{ position:relative; text-align:center; padding-inline:var(--gutter); max-width:var(--maxw) }
.rc-title{ font-size:clamp(2.6rem,10vw,10rem); margin-block:var(--s3) }
.rc-claim{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 100,'wght' 600;
  font-size:clamp(1rem,2vw,1.8rem); text-transform:uppercase; color:var(--dim);
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.rc-sub{ color:var(--dim); max-width:46ch; margin:var(--s4) auto 0 }
.rc-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:var(--s5) }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 2.1rem; border-radius:99px; overflow:hidden;
  font:500 var(--fs-mono)/1 'JetBrains Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
  background:var(--void-2); will-change:transform;
}
.btn::before{
  content:''; position:absolute; inset:0; padding:1.5px; border-radius:99px;
  background:var(--grad); background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin-grad 7s linear infinite;
}
@keyframes spin-grad{ to{ background-position:300% 0 } }
.btn::after{
  content:''; position:absolute; inset:0; background:#fff; border-radius:99px;
  transform:translateY(101%); transition:transform .55s var(--e-light);
}
.btn:hover::after{ transform:none }
.btn span,.btn i{ position:relative; z-index:1; font-style:normal; transition:color .4s .08s }
.btn:hover span,.btn:hover i{ color:var(--void) }
.btn.ghost{ background:transparent }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer{ position:relative; padding-top:var(--s5); overflow:hidden; border-top:1px solid var(--hair) }
.foot-bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transition:height .5s var(--e-light) }
.foot-bar:hover{ height:16px }
.foot-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s4); align-items:start;
  padding-block:var(--s5) var(--s7);
}
.foot-name{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 110,'wght' 800;
  font-size:var(--fs-h3); text-transform:uppercase; letter-spacing:-.03em;
}
.foot-links{ display:flex; gap:var(--s4) }
.foot-links a{
  position:relative; font:500 var(--fs-mono)/1 'JetBrains Mono',monospace;
  letter-spacing:.2em; text-transform:uppercase; padding-bottom:4px;
  transition:color .4s;
}
.foot-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--c);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-light);
}
.foot-links a:hover{ color:var(--c) }
.foot-links a:hover::after{ transform:scaleX(1) }
.foot-meta{ text-align:right }
.foot-mega{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(5rem,23vw,24rem); line-height:.72; text-align:center;
  color:rgba(244,243,241,.045); letter-spacing:-.06em; user-select:none;
  margin-bottom:-.16em;
}
.foot-legal{ padding-bottom:1.6rem; color:var(--faint) }

/* ── LIGHTBOX ─────────────────────────────────────────────────── */
#lightbox{
  position:fixed; inset:0; z-index:9990; display:grid; place-items:center;
  background:rgba(4,4,6,.94); backdrop-filter:blur(8px); padding:clamp(2rem,6vw,5rem);
}
#lightbox[hidden]{ display:none }
#lightbox::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(52% 52% at 50% 50%,color-mix(in srgb,var(--spectrum) 22%,transparent),transparent 72%);
  pointer-events:none;
}
.lb-stage{ position:relative; max-width:100%; max-height:100% }
.lb-stage img{ max-width:100%; max-height:84vh; object-fit:contain; border-radius:6px; box-shadow:0 40px 120px -20px #000 }
#lightbox button{
  position:absolute; background:none; border:1px solid var(--hair); color:var(--light);
  width:54px; height:54px; border-radius:50%; font-size:1.3rem; cursor:pointer;
  display:grid; place-items:center; transition:border-color .3s,background .3s;
}
#lightbox button:hover{ border-color:var(--spectrum); background:color-mix(in srgb,var(--spectrum) 16%,transparent) }
.lb-close{ top:clamp(1rem,3vw,2.2rem); right:clamp(1rem,3vw,2.2rem) }
.lb-prev{ left:clamp(1rem,3vw,2.2rem); top:50%; transform:translateY(-50%) }
.lb-next{ right:clamp(1rem,3vw,2.2rem); top:50%; transform:translateY(-50%) }
.lb-count{ position:absolute; bottom:clamp(1rem,3vw,2.2rem); left:clamp(1rem,3vw,2.2rem); color:var(--faint) }

/* ── REVEALS ──────────────────────────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(26px) }

/* ══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width:1100px){
  .grid-masonry{ columns:2 }
  .about-grid{ grid-template-columns:1fr; gap:var(--s6) }
  .misk-quote{ grid-template-columns:1fr; gap:1rem }
  .mz-second .plate{ max-width:100% }
}

@media (max-width:768px){
  :root{ --fs-mega:clamp(3rem,17.5vw,6rem); --fs-h1:clamp(2.2rem,11vw,4rem) }
  #rail{
    right:auto; left:0; top:auto; bottom:0; width:100%;
    transform:none; flex-direction:row; gap:0; padding:0;
    background:rgba(8,8,10,.82); backdrop-filter:blur(20px);
    border-top:1px solid var(--hair);
  }
  .is-bright #rail{ background:rgba(247,247,242,.85) }
  #rail a{ flex:1; height:4px; justify-content:center }
  #rail a::after{ width:100%; height:4px; border-radius:0 }
  #rail a:hover::after,#rail a.active::after{ width:100%; height:4px }
  #rail em,#rail b{ display:none }

  .nav-links{ display:none }
  .hero{ height:180vh }
  .hero-meta{ flex-direction:column; gap:.3rem; top:5rem }
  .hero-name{ font-variation-settings:'wdth' 100,'wght' 840 }
  .man-pin{ height:200vh }
  .man-line{ font-size:clamp(1.8rem,10vw,3.4rem) }

  .pbar{ height:64px; gap:.9rem; padding-inline:var(--gutter) }
  .pbar-meta,.pbar-thumbs{ display:none }
  .pbar-name{ font-size:1.25rem; color:var(--c) }

  .mz-book{ height:200vh }
  .kaec-wall{ height:200vh }
  .mg-grid{ height:190vh }
  .mg-stage{ width:92vw; max-height:60vh }
  .recombine{ height:190vh }

  .grid-masonry{ columns:1 }
  .grid-offset{ grid-template-columns:1fr }
  .grid-offset .plate,
  .grid-offset .plate:nth-child(5n+1),.grid-offset .plate:nth-child(5n+2),
  .grid-offset .plate:nth-child(5n+3),.grid-offset .plate:nth-child(5n+4),
  .grid-offset .plate:nth-child(5n+5){ grid-column:1/-1 }
  .hs-ooh{ grid-template-columns:1fr }
  .hs-ooh .plate:nth-child(1),.hs-ooh .plate:nth-child(3){ transform:none }
  .misk-cols{ grid-template-columns:1fr }
  .misk-cols .plate:nth-child(2){ transform:none }
  .cap{ flex-wrap:wrap; gap:.6rem }
  .cap p{ max-width:100%; text-align:left; width:100% }
  .cap:hover h3{ transform:translateX(8px) }
  .foot-grid{ grid-template-columns:1fr; gap:var(--s4) }
  .foot-meta{ text-align:left }
  .rail-track .plate{ width:74vw }
  .rail-controls{ padding-right:var(--gutter) }
  body{ padding-bottom:4px }
  .tilt{ transform:none }
}

/* ══ REDUCED MOTION ═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  #light,.mz-sweep,.rc-beams,.misk-bigtype{ display:none }
  .hero,.man-pin,.mz-book,.kaec-wall,.mg-grid,.recombine{ height:auto }
  .mz-stage,.man-stage,.hero-pin,.rc-pin{ height:auto; min-height:auto; padding-block:var(--s7) }
  .mg-stage{ position:static; height:auto; aspect-ratio:1 }
  .kw-stage{ height:auto; aspect-ratio:16/10 }
  .kw-slice{ clip-path:none !important }
  .kw-slice:not([data-d="0"]){ display:none }
  .hero-name .char{ filter:none; color:var(--light); background:none; -webkit-text-fill-color:currentColor }
  .man-line{ opacity:1; position:static }
  .man-split i:not(:first-child){ display:none }
  .man-split i{ color:var(--light) }
  [data-reveal]{ opacity:1; transform:none }
  html.has-cursor #cursor{ display:none }
  html.has-cursor *{ cursor:auto !important }
  .rc-white{ height:40vh }
}