/* ══════════════════════════════════════════════════════════════════
   SPECTREX INDUSTRIES — holding page
   Monochrome by decision, not by omission. The identity is pure white
   on pure black, so the page introduces no colour of its own.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Plex Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plex Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}

:root{
  --void:#000000;
  --white:#FFFFFF;
  /* On pure black, white below ~52% alpha fails 4.5:1. These clear it. */
  --t-2:rgba(255,255,255,.74);
  --t-3:rgba(255,255,255,.56);
  --hairline:rgba(255,255,255,.18);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-slow:600ms;
  --stagger:110ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;
  background:var(--void);
  color:var(--white);
  font-family:"Plex Arabic",system-ui,"Segoe UI",sans-serif;
  font-weight:400;line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:2px}
[lang="ar"]{letter-spacing:normal}

/* ── Ground ─────────────────────────────────────────────────────── */
.field{position:fixed;inset:0;pointer-events:none;overflow:hidden;contain:strict}
/* One barely-there lift at centre so the black reads as depth, not as a
   switched-off screen. Anything stronger stops being premium. */
.field__lift{
  position:absolute;inset:0;
  background:radial-gradient(72vw 72vh at 50% 42%, #0C0C10 0%, #050506 46%, var(--void) 78%);
}
.grain{
  position:absolute;inset:-40%;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Stage ──────────────────────────────────────────────────────── */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:clamp(2rem,6vh,3.5rem);
  padding-inline:clamp(1.25rem,5vw,3rem);
  padding-bottom:max(clamp(2rem,6vh,3.5rem),env(safe-area-inset-bottom));
}

/* ── Lockup ─────────────────────────────────────────────────────── */
/* This is the page's h1. The wordmark is inside the artwork, so the heading
   text lives in the image's alt rather than in a visible text node. */
.lockup{
  position:relative;
  margin:0;font-size:inherit;font-weight:inherit;line-height:0;
  width:clamp(9.5rem,30vw,17rem);
  aspect-ratio:889/1000;
}
.lockup__img{width:100%;height:100%;object-fit:contain}

.sheen{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url("/assets/img/lockup-mask.png");
          mask-image:url("/assets/img/lockup-mask.png");
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.sheen i{
  position:absolute;left:-10%;right:-10%;
  height:38%;top:-40%;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0) 100%);
  opacity:0;
}

/* ── Rule ───────────────────────────────────────────────────────── */
.rule{
  width:clamp(2.5rem,6vw,4rem);height:1px;
  margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;
  background:var(--hairline);
  transform-origin:center;
}

/* ── The line ───────────────────────────────────────────────────── */
.line{
  margin:clamp(1.5rem,3.8vh,2.25rem) 0 0;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  max-width:32rem;
}
.line__en{
  font-size:clamp(.78rem,2.1vw,.95rem);
  text-transform:uppercase;
  letter-spacing:.34em;
  margin-inline-end:-.34em;   /* tracking leaves a trailing gap; recentre it */
  color:var(--t-2);
  text-wrap:balance;
}
.line__ar{
  font-size:clamp(1rem,2.7vw,1.2rem);
  color:var(--t-3);
}

/* ── Coming soon ────────────────────────────────────────────────────
   The functional half of the message, under the mystique. Held a step
   quieter and a step tighter in tracking so the two lines read as a
   hierarchy rather than as two competing statements. */
.soon{
  margin:clamp(.9rem,2.4vh,1.35rem) 0 0;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  max-width:34rem;
}
.soon__en{
  font-size:clamp(.68rem,1.8vw,.8rem);
  text-transform:uppercase;
  letter-spacing:.22em;
  margin-inline-end:-.22em;   /* recentre against the trailing track */
  color:var(--t-3);
  text-wrap:balance;
}
.soon__ar{
  font-size:clamp(.85rem,2.2vw,1rem);
  color:var(--t-3);
}
/* No 600 weight is loaded, so emphasis is carried by value, not weight. */
.soon__lead{color:var(--t-2)}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{
  position:absolute;
  bottom:max(clamp(1.25rem,3.5vh,2rem),env(safe-area-inset-bottom));
  font-size:clamp(.68rem,1.7vw,.75rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--t-3);
}

/* ══ Motion ═══════════════════════════════════════════════════════
   Premium archetype: slow, decelerating, no overshoot anywhere. */
.reveal{opacity:0;transform:translateY(10px)}
.lockup.reveal{transform:translateY(10px) scale(.97)}
.is-ready .reveal{
  opacity:1;transform:none;
  transition:
    opacity var(--d-slow) var(--ease) calc(var(--i) * var(--stagger)),
    transform var(--d-slow) var(--ease-out) calc(var(--i) * var(--stagger));
}
.is-ready .rule{animation:rule-draw var(--d-slow) var(--ease-out) calc(var(--i) * var(--stagger)) both}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:no-preference){
  /* The mark rests slightly below full white so the falling light has
     somewhere to go. White light over an already-white logo is invisible;
     this is what makes the sweep read at all. Reduced-motion users get the
     mark at full strength instead, since they never see the sweep. */
  .lockup__img{opacity:.84;transition:opacity var(--d-slow) var(--ease)}

  /* The sand. Long pause, then one unhurried fall. Linear travel because a
     falling thing does not ease; the fade at each end does the softening. */
  .is-ready .sheen i{animation:sand 7s linear 1.4s infinite}
  @keyframes sand{
    0%   {transform:translateY(0);      opacity:0}
    8%   {opacity:1}
    46%  {opacity:1}
    58%  {transform:translateY(380%);   opacity:0}
    100% {transform:translateY(380%);   opacity:0}
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal,.is-ready .reveal{opacity:1;transform:none;transition:none}
  .is-ready .rule{animation:none;transform:none}
  .sheen{display:none}
}