/* =====================================================================
   NESAM — intro.css   (brand intro overlay: breeze + logo reveal)
   Most dynamic values (colors, reveal gradient, breeze particles) are
   driven by intro.js. This file sets structure + fade behaviour.
   ===================================================================== */

.intro{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:#008081;                 /* start teal; JS animates to light */
  overflow:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro.done{ opacity:0; visibility:hidden; pointer-events:none; }
.intro.removed{ display:none; }

.intro__stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background-color:#008081;            /* JS updates this */
}

.intro__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 78% 82% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,1) 135%);
  opacity:.24;                         /* JS updates this */
}

.intro__breeze{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.intro__breeze .wisp,
.intro__breeze .mote{ position:absolute; pointer-events:none; will-change:transform,opacity; }
.intro__breeze .wisp{ border-radius:999px; }
.intro__breeze .mote{ border-radius:50%; }
.intro__breeze .gust{
  position:absolute; top:-12%; height:124%; width:30%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  filter:blur(9px); mix-blend-mode:screen; transform:rotate(7deg); pointer-events:none;
}

/* ---- Logo (three mask layers, like the brand intro) ---- */
.intro__logobox{
  position:relative;
  width:min(560px, 52vw);
  aspect-ratio:1.9928;                 /* matches logo mask width/height */
}
.intro__layer{
  position:absolute; inset:0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
/* clip slices: Arabic mark = top 82.52%, NESAM wordmark = bottom */
.intro__arabic{ clip-path:inset(0 0 17.48% 0); }
.intro__nesam { clip-path:inset(82.52% 0 0 0); opacity:0; }
.intro__tip   { clip-path:inset(0 0 17.48% 0); mix-blend-mode:screen; opacity:0; filter:blur(2px); }

/* ---- Tagline (replaces the old 'Coming Soon') ---- */
.intro__tagline{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(50% + min(560px,52vw)/1.9928*0.5 + 6vh);
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  font-family:var(--font-en); font-weight:500; font-size:clamp(.78rem,1.6vw,1rem);
  letter-spacing:.42em; text-transform:uppercase; padding-inline-start:.42em;
  color:#f3f2ec; opacity:0;            /* JS fades in */
}
html[lang="ar"] .intro__tagline{ font-family:var(--font-ar); letter-spacing:.2em; }
.intro__rule{ width:0; height:1px; background:currentColor; opacity:.55; transition:width .6s var(--ease); }
.intro__tagline.show .intro__rule{ width:34px; }

/* ---- Skip ---- */
.intro__skip{
  position:absolute; bottom:26px; inset-inline-end:26px; z-index:5;
  font-family:var(--font-en); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.82); padding:.7em 1.3em; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.12);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), opacity .4s;
}
html[lang="ar"] .intro__skip{ font-family:var(--font-ar); }
.intro__skip:hover{ transform:translateY(-2px); background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.6); }

@media (max-width:600px){
  .intro__logobox{ width:80vw; }
  .intro__tagline{ top:calc(50% + 80vw/1.9928*0.5 + 5vh); letter-spacing:.18em; font-size:.7rem; max-width:94vw; }
  html[lang="ar"] .intro__tagline{ letter-spacing:.06em; }
  .intro__skip{ bottom:16px; inset-inline-end:16px; font-size:.72rem; padding:.6em 1.1em; }
}