/* =====================================================================
   MUSTAFA WEREKIA — FULL BIOGRAPHY
   Scroll-driven flight through a star and nebula field.
   ---------------------------------------------------------------------
   1. Tokens          6. Stage & scenes      11. HUD
   2. Reset           7. Type components     12. Responsive
   3. Preloader       8. Media (frame/plate)  13. Reduced motion / no-JS
   4. Deep field      9. Scene layouts       14. Runtime states
   5. Header         10. Contact
   ===================================================================== */

/* 1 ── TOKENS ───────────────────────────────────────────────────────── */
:root{
  --obsidian:  #0B0C0D;   /* deep field                       */
  --bone:      #F2F0EA;   /* primary light text               */
  --mist:      #C7CACD;   /* quiet text                       */
  --graphite:  #2A2C2F;   /* rules and frames                 */
  --muted:     #75777A;
  --signal:    #ffc27dc5;   /* accent — scarce by design        */

  --font:      'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter:    clamp(20px, 4vw, 56px);
  --label:     11px;
  --track:     .3em;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --perspective: 1600px;
}

/* 2 ── RESET ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--obsidian); -webkit-text-size-adjust:100%; }
body{
  background:var(--obsidian);
  color:var(--bone);
  font-family:var(--font);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--bone); color:var(--obsidian); }

/* 3 ── PRELOADER ────────────────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--obsidian);
  transition:opacity 1s var(--ease), visibility 1s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; width:min(78vw,420px); }
.preloader__word{
  font-weight:200;
  font-size:clamp(14px,2.4vw,22px);
  letter-spacing:.42em;
  color:var(--bone);
  padding-left:.42em;
}
.preloader__bar{
  height:1px; margin:26px 0 12px;
  background:rgba(199,202,205,.18);
}
.preloader__bar span{
  display:block; height:100%; width:0%;
  background:var(--bone);
}
.preloader__pct{
  font-size:var(--label); font-weight:500;
  letter-spacing:var(--track); color:var(--muted);
}

/* 4 ── DEEP FIELD ───────────────────────────────────────────────────── */
#deepfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(4,4,5,.6) 100%);
}

/* 5 ── HEADER ───────────────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--gutter) * .58) var(--gutter);
  pointer-events:none;
}
.site-header a{ pointer-events:auto; }
.brand__logo{
  width:clamp(104px,10vw,150px); height:auto;
  opacity:.92;
  transition:opacity .3s var(--ease);
}
.brand__name{
  display:none;
  font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--bone);
}
.brand.is-broken .brand__logo{ display:none; }
.brand.is-broken .brand__name{ display:block; }
.brand:hover .brand__logo{ opacity:1; }
.header-meta{
  font-size:var(--label); font-weight:500;
  letter-spacing:var(--track); color:var(--muted);
}

/* 6 ── STAGE & SCENES ───────────────────────────────────────────────── */
.viewport{
  position:fixed; inset:0; z-index:2;
  perspective:var(--perspective);
  perspective-origin:50% 50%;
  overflow:hidden;
  pointer-events:none;
}
.stage{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.scene{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  padding:0 var(--gutter);
}
.scene__inner{
  position:relative;
  width:100%; max-width:1200px;
  transform-style:preserve-3d;
}
/* depth children: --z distance, --zs size compensation (set by main.js) */
[data-depth]{
  transform:translateZ(var(--z,0px)) scale(var(--zs,1));
  transform-style:preserve-3d;
}
.scroll-track{ width:1px; }

/* 7 ── TYPE COMPONENTS ──────────────────────────────────────────────── */
.display{
  font-weight:900;
  line-height:.9;
  letter-spacing:-.025em;
  margin:0;
  font-size:clamp(44px,9.6vw,148px);
}
.display__line{ display:block; }
.display__line--outline{
  font-weight:900;                    /* same cut as the solid line */
  letter-spacing:-.025em;
  color:transparent;
  -webkit-text-stroke:1.6px rgba(242,240,234,.92);
}
.statement{
  font-weight:800;
  font-size:clamp(30px,6vw,84px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 30px;
  color:var(--bone);
}
.statement--mid{ font-size:clamp(24px,4.4vw,60px); line-height:1.08; }
.heading{
  font-weight:600;
  font-size:clamp(24px,3.7vw,50px);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 34px;
}
.heading--center{ text-align:center; }
.label{
  font-size:var(--label); font-weight:500;
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 20px;
}
.label--floating{
  position:absolute; left:50%; top:9%;
  transform:translateX(-50%);
  text-align:center; width:max-content; max-width:86vw;
}
.lead{
  font-weight:300;
  font-size:clamp(14px,1.6vw,20px);
  line-height:1.8;
  color:var(--mist);
  max-width:56ch;
  margin:0 auto;
}
.lead--narrow{ max-width:44ch; }
.triad{
  margin:0 auto;
  font-weight:400;
  font-size:clamp(13px,1.5vw,18px);
  line-height:2;
  letter-spacing:.04em;
  color:var(--mist);
}
.triad--strong{
  font-weight:500;
  font-size:clamp(15px,1.9vw,24px);
  line-height:1.9;
  letter-spacing:.01em;
  color:var(--bone);
}
.body{
  font-weight:300;
  font-size:clamp(13px,1.35vw,16px);
  line-height:1.85;
  color:var(--mist);
  margin:0 0 20px;
  max-width:46ch;
}
.pull{
  font-weight:600;
  font-size:clamp(16px,2vw,26px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--bone);
  margin:0 0 26px;
  max-width:18ch;
}
.xlist li{
  position:relative; padding-left:26px;
  font-size:clamp(14px,1.5vw,19px);
  font-weight:300;
  color:var(--bone);
  margin-bottom:11px;
}
.xlist li::before{
  content:"×"; position:absolute; left:0; top:0;
  color:var(--muted); font-weight:400;
}
.xlist--tight li{ font-size:clamp(12px,1.2vw,15px); color:var(--mist); margin-bottom:10px; }
.deflist li{
  display:grid; grid-template-columns:12ch 1fr; gap:18px;
  padding:11px 0;
  border-top:1px solid rgba(199,202,205,.13);
  font-size:clamp(12px,1.2vw,15px);
  line-height:1.6;
}
.deflist li:last-child{ border-bottom:1px solid rgba(199,202,205,.13); }
.deflist b{ font-weight:600; color:var(--bone); letter-spacing:.01em; }
.deflist span{ color:var(--mist); font-weight:300; }
.toolrow{
  margin:0 auto;
  font-size:clamp(11px,1.15vw,14px);
  font-weight:400;
  letter-spacing:.2em;
  line-height:2.3;
  color:var(--mist);
}
.floatword{
  position:absolute; left:50%; top:50%;
  font-weight:800;
  font-size:clamp(36px,7.4vw,112px);
  letter-spacing:.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,240,234,.11);
  white-space:nowrap; pointer-events:none;
}
.floatword--left{  transform:translate(-78%,120%)  rotate(-7deg) translateZ(var(--z,0px)) scale(var(--zs,1)); }
.floatword--right{ transform:translate(-10%,-190%) rotate(5deg)  translateZ(var(--z,0px)) scale(var(--zs,1)); }

/* 8 ── MEDIA ────────────────────────────────────────────────────────── */
.frame{
  position:relative;
  /* border:1px solid rgba(199,202,205,.32); */
  padding:12px;
  background:rgba(11,12,13,.4);
}
.frame::before,
.frame::after{
  content:""; position:absolute; left:50%; width:1px;
  background:linear-gradient(transparent,rgba(199,202,205,.26),transparent);
}
.frame::before{ top:-46px; height:46px; }
.frame::after{ bottom:-46px; height:46px; }
.portrait{ margin:0; }
.portrait .frame{
  width:clamp(160px,21vw,280px);
  transform:rotateY(-12deg) rotateX(2deg);
  transform-style:preserve-3d;
}
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.portrait figcaption{
  margin-top:16px;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  color:var(--muted); text-align:center;
}
/* gallery plates */
.plate{
  position:absolute;
  left:calc(50% + var(--x,0%)); top:calc(50% + var(--y,0%));
  transform:translate(-50%,-50%) translateZ(var(--z,0px)) scale(var(--zs,1));
  margin:0;
  width:clamp(140px,17vw,230px);
}
.plate img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid rgba(199,202,205,.22);
  /*filter:grayscale(1) contrast(1.04) brightness(.95);*/
  transition:filter .5s var(--ease);
}
/*.plate:hover img{ filter:grayscale(0) contrast(1.02) brightness(1); }*/
.plate figcaption{
  margin-top:10px;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--muted);
}
/* if an image can't load, the frame still reads */
.plate.is-broken img, .portrait.is-broken img{ display:none; }
.plate.is-broken::before,
.portrait.is-broken .frame::before{
  content:attr(data-fallback);
  display:grid; place-items:center;
  aspect-ratio:1/1;
  border:1px solid rgba(199,202,205,.22);
  font-size:9px; letter-spacing:var(--track); color:var(--muted);
  text-align:center; padding:10px;
  position:static; width:auto; height:auto; background:none;
}

/* 9 ── SCENE LAYOUTS ────────────────────────────────────────────────── */
/* intro */
.scene--intro .scene__inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:clamp(24px,5vw,80px);
}
.intro__title{
  font-weight:500;
  font-size:clamp(14px,1.8vw,22px);
  letter-spacing:.02em;
  color:var(--bone);
  margin:22px 0 0;
}
.intro__paren{
  font-size:clamp(10px,1.2vw,13px);
  font-weight:500;
  letter-spacing:.34em;
  color:var(--mist);
  margin:14px 0 32px;
}
/* centred — every block is its own depth layer, and a deep layer is scaled
   back up, so the gaps have to be generous or the blocks grow into each
   other as they fly.                                                     */
.scene--center .scene__inner{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(26px,3.6vw,54px);
}
.scene--center .scene__inner > *{ margin:0 !important; width:100%; }
.scene--center .statement{ margin:0 !important; }
.scene--center .label{ margin:0 !important; }
.centreblock{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translateZ(var(--z,0px)) scale(var(--zs,1));
  width:min(90vw,620px); text-align:center;
}
.centreblock .statement{ margin-bottom:18px; }
/* percentages resolve against the full viewport, not the 1200px measure,
   so the scattered words sit well outside the text                       */
#ideas .scene__inner,
#numbers .scene__inner{ max-width:none; }
#numbers .centreblock{ width:min(84vw,460px); }
#ideas .centreblock{ width:min(84vw,560px); }
/* field */
.scene--field .scene__inner,
.scene--gallery .scene__inner{ height:100%; }
.field__item{
  position:absolute;
  left:calc(50% + var(--x,0%)); top:calc(50% + var(--y,0%));
  transform:translate(-50%,-50%) translateZ(var(--z,0px)) scale(var(--zs,1));
  font-weight:500;
  font-size:clamp(14px,1.9vw,27px);
  letter-spacing:-.01em;
  color:var(--bone);
  white-space:nowrap;
}
.field__item:nth-of-type(odd){
  font-weight:300;
  color:transparent;
  -webkit-text-stroke:.75px rgba(242,240,234,.72);
}
.field__item--sm{ font-size:clamp(12px,1.5vw,20px); }
/* split */
.scene--split .scene__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(26px,5vw,80px);
  align-items:start;
}
.scene--split .heading{ grid-column:1 / -1; }
.scene--split .col[data-depth]{ transform-origin:0 0; }
/* principles */
.scene--principles .scene__inner{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3.4vw,54px);
  align-items:start;
}
.scene--principles .heading{ grid-column:1 / -1; margin-bottom:10px; }
.principle{ transform-origin:0 0; }
.principle__index{
  display:block;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  color:var(--muted); margin-bottom:14px;
}
.principle h3{
  font-weight:800;
  font-size:clamp(19px,2.4vw,32px);
  letter-spacing:-.02em;
  margin:0 0 6px;
}
.principle__sub{
  font-size:clamp(11px,1.15vw,14px);
  font-weight:400; letter-spacing:.02em;
  color:var(--mist);
  margin:0 0 16px;
}
/* editorial stagger instead of a depth offset, so the columns
   never scale into one another                                   */
.principle--b{ margin-top:clamp(18px,3.4vw,46px); }
.principle--c{ margin-top:clamp(36px,6.8vw,92px); }
.principle .body{ max-width:34ch; }
/* stats */
.stat{
  position:absolute;
  left:calc(50% + var(--x,0%)); top:calc(50% + var(--y,0%));
  transform:translate(-50%,-50%) translateZ(var(--z,0px)) scale(var(--zs,1));
  text-align:center; width:max-content;
}
.stat__value{
  display:block;
  font-weight:800;
  font-size:clamp(52px,8.6vw,126px);
  line-height:1; letter-spacing:-.045em;
}
.stat__value--outline{
  font-weight:800; letter-spacing:-.045em;   /* same cut as 09 and 01 */
  color:transparent;
  -webkit-text-stroke:1.6px rgba(242,240,234,.88);
}
.stat__label{
  display:block; margin-top:14px;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--muted); line-height:1.9;
}

/* outro */
.logomark{ margin:0; }
.logomark__frame{
  width:min(74vw,340px);
  margin:0 auto;
  padding:clamp(22px,3.4vw,40px);
  /* border:1px solid rgba(199,202,205,.28); */
  display:grid; place-items:center;
  aspect-ratio:16/7;
}
.logomark__frame img{ width:100%; height:auto; opacity:.95; }
.logomark figcaption{
  margin-top:14px;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  color:var(--muted);
}
.logomark.is-broken .logomark__frame::before{
  content:"LOGO"; font-size:11px; font-weight:500;
  letter-spacing:var(--track); color:var(--muted);
}
.logomark.is-broken img{ display:none; }
.btn--wide{ padding:15px 34px; }
.scene--outro .btn{ align-self:center; width:auto; }

/* 10 ── CONTACT ─────────────────────────────────────────────────────── */
.display--contact{ font-size:clamp(42px,10.5vw,158px); margin-bottom:26px; }
.contact__name{
  font-size:clamp(11px,1.25vw,15px); font-weight:500;
  letter-spacing:.2em; color:var(--bone);
  margin:4px 0 38px;
}
.contact__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%; }
.btn{
  border:1px solid rgba(199,202,205,.34);
  padding:13px 24px;
  font-size:10px; font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase;
  color:var(--mist);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.btn:hover{ border-color:var(--bone); color:var(--bone); }
.btn--primary{ border-color:var(--bone); background:var(--bone); color:var(--obsidian); }
.btn--primary:hover{ background:var(--signal); border-color:var(--signal); color:var(--obsidian); }
.contact__foot{
  margin:52px 0 0;
  font-size:10px; font-weight:500; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--muted);
}

/* 11 ── HUD ─────────────────────────────────────────────────────────── */
.section-nav{ position:fixed; left:var(--gutter); bottom:calc(var(--gutter) * .68); z-index:22; }
.section-label{
  display:flex; align-items:center; gap:10px;
  font-size:var(--label); font-weight:500; letter-spacing:var(--track);
  color:var(--muted);
}
.section-label__value{ color:var(--bone); }
.section-label__chev{ display:inline-block; transition:transform .35s var(--ease); }
.section-label[aria-expanded="true"] .section-label__chev{ transform:rotate(180deg); }
.section-list{ position:absolute; left:0; bottom:26px; padding:10px 0; min-width:210px; }
.section-list li a{
  display:block; padding:5px 0;
  font-size:var(--label); font-weight:500; letter-spacing:var(--track);
  color:var(--muted);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.section-list li a:hover,
.section-list li a.is-current{ color:var(--bone); padding-left:8px; }

.progress-rail{
  position:fixed; right:calc(var(--gutter) * .55); top:30vh; bottom:8vh;
  width:1px; background:rgba(199,202,205,.15); z-index:20;
}
.progress-rail__bar{ display:block; width:100%; height:0%; background:var(--bone); }
.scroll-hint{
  position:fixed; left:50%; bottom:calc(var(--gutter) * .8);
  transform:translateX(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:var(--label); font-weight:500; letter-spacing:var(--track);
  color:var(--muted);
  transition:opacity .6s var(--ease);
}
.scroll-hint i{ width:1px; height:46px; background:linear-gradient(rgba(199,202,205,.55),transparent); }
.scroll-hint.is-hidden{ opacity:0; }

a:focus-visible, button:focus-visible{ outline:1px solid var(--signal); outline-offset:4px; }

/* 12 ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .scene--principles .scene__inner{ grid-template-columns:1fr; gap:20px; }
  .principle--b, .principle--c{ margin-top:0; }
  .principle .body{ max-width:52ch; }
  .principle .body{ display:none; }        /* keep the flight readable */
  .scene--principles .principle__sub{ margin-bottom:0; }
}
@media (max-width:900px){
  .scene--intro .scene__inner{ grid-template-columns:1fr; }
  .scene--split .scene__inner{ grid-template-columns:1fr; }
  .scene--split .col[data-depth]{ display:none; }
  .header-meta{ display:none; }
  .plate{ width:clamp(110px,26vw,170px); }
}
@media (max-width:620px){
  :root{ --label:10px; --track:.26em; }
  .scroll-hint{ display:none; }
  .progress-rail{ top:44vh; }
  .portrait .frame{ width:46vw; padding:9px; transform:rotateY(-9deg); }
  .intro__paren{ letter-spacing:.22em; margin:12px 0 24px; }
  .field__item{
    left:calc(50% + var(--x,0%) / 2.2);
    white-space:normal; width:62vw; text-align:center;
    font-size:clamp(12px,4vw,18px);
  }
  .stat{ left:calc(50% + var(--x,0%) / 1.6); width:38vw; }
  .stat__value{ font-size:clamp(30px,11vw,52px); }
  .stat__label{ font-size:9px; letter-spacing:.14em; margin-top:8px; }
  .label--floating{ white-space:normal; width:82vw; }
  .plate{ left:calc(50% + var(--x,0%) / 1.9); width:40vw; }
  .lead, .body{ max-width:none; }
  .triad{ line-height:1.9; }
}

/* 13 ── REDUCED MOTION / NO-JS ──────────────────────────────────────── */
html:not(.flying) .viewport{ position:static; overflow:visible; perspective:none; pointer-events:auto; }
html:not(.flying) .stage{ position:static; transform:none !important; }
html:not(.flying) .scene{
  position:relative; inset:auto;
  min-height:100vh; transform:none !important;
  padding:15vh var(--gutter);
}
html:not(.flying) .scene__inner > *{ opacity:1 !important; }
html:not(.flying) .scene--field .scene__inner,
html:not(.flying) .scene--gallery .scene__inner{ min-height:74vh; }
html:not(.flying) [data-depth]{ transform:none !important; }
html:not(.flying) .floatword{ display:none; }
html:not(.flying) .scroll-track{ display:none; }
html:not(.flying) .scene--split .col[data-depth],
html:not(.flying) .principle .body{ display:block; }

/* 14 ── RUNTIME STATES (set by js/main.js) ──────────────────────────── */
/* Opacity is applied per LAYER (each direct child of .scene__inner), never
   on the scene: an opacity below 1 flattens a 3D container and would
   collapse the depth of everything inside it.                          */
html.flying .scene{ visibility:hidden; }
html.flying .scene__inner > *{ opacity:0; }
html.flying .scene a,
html.flying .scene button{ pointer-events:none; }
html.flying .scene.is-active a,
html.flying .scene.is-active button,
html.flying .scene.is-active .plate{ pointer-events:auto; }
html:not(.flying) .scene a{ pointer-events:auto; }