/* ══════════════════════════════════════════════════════════════════
   BAYTEK — Coming Soon
   Theme: Midnight Drafting Studio (Studio-Theme-v5).
   Palette anchors are exact and closed: no fifth colour, no glow,
   no chrome. Futurism lives in the motion, not in the light.
   ══════════════════════════════════════════════════════════════════ */

@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-latin-600-normal.woff2") format("woff2");font-weight:600;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;}
@font-face{font-family:"Plex Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;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{
  /* Exact identity anchors — Theme-Tokens.json rev 5 */
  --hull-navy:#020B1D;
  --port-black:#000000;
  --sail-white:#FFFFFF;
  --signal-blue:#005FFD;
  /* The one blue that is legible as text on navy (#005FFD is 3.8:1) */
  --blue-text:#9DB8FF;

  --t-1:var(--sail-white);
  --t-2:rgba(255,255,255,.72);
  --t-3:rgba(255,255,255,.56);
  --hairline:rgba(255,255,255,.16);

  /* Premium motion personality: no overshoot, generous but decisive */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-quick:180ms;
  --d-std:320ms;
  --d-slow:520ms;
  --stagger:70ms;

  --gutter:clamp(1.25rem,5vw,3.5rem);
  --stage-w:min(56rem,100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background:var(--hull-navy);
  color:var(--t-1);
  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}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal-blue);outline-offset:3px;border-radius:2px}
/* Arabic must never be tracked — letter-spacing severs the joins */
[lang="ar"]{letter-spacing:normal;font-feature-settings:"kern" 1}

/* ── Atmosphere ─────────────────────────────────────────────────── */
.field{position:fixed;inset:0;pointer-events:none;overflow:hidden;contain:strict}

/* Grazing light from the upper left, exactly as the studio scene is lit */
.field__light{
  position:absolute;inset:0;
  background:
    radial-gradient(78vw 62vh at 6% -6%, rgba(0,95,253,.16), transparent 62%),
    radial-gradient(66vw 56vh at 92% 8%, rgba(120,150,200,.05), transparent 64%),
    radial-gradient(120vw 110vh at 50% 118%, rgba(0,0,0,.62), transparent 70%),
    linear-gradient(180deg,var(--hull-navy) 0%, #01070f 70%, var(--port-black) 100%);
}

.cluster img{
  position:absolute;left:0;bottom:0;
  width:100%;height:auto;
  object-fit:cover;
  opacity:.92;
  /* Dissolve into open space — the guide's "cluster at a peripheral edge" */
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 24%,rgba(0,0,0,.5) 62%,transparent 97%);
          mask-image:linear-gradient(to top,#000 0%,#000 24%,rgba(0,0,0,.5) 62%,transparent 97%);
}

.draft{position:absolute;left:0;bottom:0;width:min(58vw,42rem);height:auto;display:none}
.draft__line{stroke:rgba(255,255,255,.20);stroke-width:1;vector-effect:non-scaling-stroke}
.draft__line--arc{stroke:rgba(0,95,253,.42)}
.draft__node{stroke:rgba(255,255,255,.22);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:0}
.signal{fill:var(--signal-blue);opacity:0}

.grain{
  position:absolute;inset:-40%;opacity:.05;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{
  /* No z-index here: the lockup blends with the field behind it, and a
     stacking context would sever that. DOM order already stacks it. */
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:clamp(1.75rem,5vh,3.25rem);
  padding-inline:var(--gutter);
  padding-bottom:max(clamp(1.75rem,5vh,3.25rem),env(safe-area-inset-bottom));
}
.stage > *{width:var(--stage-w)}

/* ── Lockup ─────────────────────────────────────────────────────── */
.lockup{display:flex;align-items:center;justify-content:center;gap:clamp(.85rem,2.4vw,1.35rem)}
.lockup__mark{
  width:clamp(3rem,7.5vw,4.5rem);height:auto;
  /* The artwork is authentic, on its own black ground; screen removes the
     ground without desaturating the signal-blue strokes. */
  mix-blend-mode:screen;
}
.lockup__type{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.lockup__word{width:clamp(8.5rem,20vw,13rem);height:auto;mix-blend-mode:screen}
.lockup__ar{
  font-size:clamp(.95rem,2.3vw,1.3rem);font-weight:600;line-height:1;
  color:var(--t-2);align-self:stretch;text-align:center;
  letter-spacing:.06em;
}

/* ── Eyebrow ────────────────────────────────────────────────────── */
.eyebrow,.follow__h{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem .8rem;
  margin:0;
  font-size:clamp(.75rem,1.65vw,.82rem);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--t-3);
}
.eyebrow{margin-top:clamp(1.6rem,4.4vh,2.6rem)}
.eyebrow [lang="ar"],.follow__h [lang="ar"]{text-transform:none;font-size:1.12em}
.eyebrow__sep{
  display:inline-block;width:1px;height:.85em;
  background:var(--hairline);flex:none;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{margin:clamp(.7rem,1.8vh,1.1rem) 0 0;font-weight:600;line-height:1}
.hero__en{
  display:block;
  font-size:clamp(2.6rem,11vw,6rem);
  letter-spacing:.155em;
  text-transform:uppercase;
  /* tracking adds a trailing gap; pull it back so the block stays optically centred */
  margin-inline-end:-.155em;
  text-wrap:balance;
}
.hero__en > span{display:inline-block}
.hero__ar{
  display:block;
  margin-top:clamp(.45rem,1.6vh,.9rem);
  font-size:clamp(1.9rem,7.5vw,4rem);
  color:var(--t-2);
  line-height:1.25;
}

/* The single permitted blue typographic accent */
.rule{
  width:clamp(3rem,7vw,4.5rem);height:2px;
  margin:clamp(1.3rem,3.1vh,1.9rem) auto 0;
  background:var(--signal-blue);
  transform-origin:center;
}

/* ── Punchline ──────────────────────────────────────────────────────
   The catchy second voice, between the headline and the brand line.
   Approved copy from the creative kit, not invented here. */
.punch{
  margin:clamp(1.4rem,3.4vh,2rem) 0 0;
  display:flex;flex-direction:column;gap:.35rem;
  font-size:clamp(1.05rem,2.8vw,1.45rem);
  color:var(--t-1);
  text-wrap:balance;
}
.punch__ar{color:var(--t-2);font-size:1.05em}

/* ── Tagline ────────────────────────────────────────────────────────
   Demoted a step now that the punchline leads, so the two do not
   compete for the same voice. */
.tagline{
  margin:clamp(.85rem,2.2vh,1.15rem) 0 0;
  display:flex;flex-direction:column;gap:.3rem;
  font-size:clamp(.85rem,2vw,1rem);
  color:var(--t-3);
  text-wrap:balance;
}
.tagline__ar{color:var(--t-3);font-size:1.05em}

/* ── Follow ─────────────────────────────────────────────────────── */
.follow{margin-top:clamp(1.9rem,4.8vh,2.9rem)}
.follow__h{font-size:clamp(.75rem,1.6vw,.8rem)}

.socials{
  position:relative;
  list-style:none;margin:clamp(1.1rem,2.8vh,1.5rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.5rem,1.8vw,.9rem);
}
.socials li{display:flex}
.social{
  position:relative;
  display:grid;place-items:center;
  width:clamp(2.75rem,9.5vw,3.25rem);
  aspect-ratio:1;
  padding:0;margin:0;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--t-2);
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  transition:
    color var(--d-quick) var(--ease),
    border-color var(--d-quick) var(--ease),
    background-color var(--d-quick) var(--ease),
    transform var(--d-std) var(--ease-out);
}
.social svg{width:42%;height:42%;fill:currentColor}
.social__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.social__cue{
  position:absolute;top:.15rem;inset-inline-end:.15rem;
  width:.34rem;height:.34rem;border-radius:999px;
  background:var(--signal-blue);
}

@media (hover:hover) and (pointer:fine){
  .social:hover{
    color:var(--sail-white);
    border-color:var(--signal-blue);
    background:rgba(0,95,253,.10);
    transform:translateY(-2px);
  }
}
.social:focus-visible{color:var(--sail-white);border-color:var(--signal-blue)}
.social:active{transform:translateY(0)}

.direct{margin:clamp(1rem,2.4vh,1.35rem) 0 0;font-size:clamp(.78rem,1.9vw,.9rem)}
.direct a{
  color:var(--t-3);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;
  transition:color var(--d-quick) var(--ease);
}
.direct a:hover,.direct a:focus-visible{color:var(--blue-text)}
.direct span:first-child{text-transform:uppercase;letter-spacing:.22em;font-size:.85em}
.direct__num{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.direct__handle{color:var(--t-3);margin-inline-start:.5rem}

/* ── Map card ───────────────────────────────────────────────────── */
.mapcard{
  position:absolute;bottom:calc(100% + .9rem);left:50%;
  width:min(32rem,88vw);
  padding:.5rem;
  background:rgba(2,11,29,.92);
  border:1px solid var(--hairline);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:5;
  opacity:0;
  transform:translateX(-50%) translateY(6px);
  transition:opacity var(--d-std) var(--ease),transform var(--d-std) var(--ease-out);
}
.mapcard.is-open{opacity:1;transform:translateX(-50%) translateY(0)}
.mapcard[hidden]{display:none}
.mapcard__img{width:100%;height:auto;border-radius:8px}
.mapcard__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem .9rem;
  padding:.6rem .45rem .3rem;
  font-size:clamp(.72rem,1.8vw,.82rem);
  color:var(--t-3);
  text-align:start;
}
.mapcard__go{
  color:var(--blue-text);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color var(--d-quick) var(--ease);
}
/* An inline "·" between a Latin and an Arabic run gets reordered by bidi and
   lands at the wrong end. A real element sits where it is put. */
.mapcard__go .eyebrow__sep{background:rgba(157,184,255,.4)}
.mapcard__go:hover,.mapcard__go:focus-visible{color:var(--sail-white);text-decoration:underline}

.mapscrim{
  position:fixed;inset:0;z-index:4;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity var(--d-std) var(--ease);
  border:0;padding:0;margin:0;cursor:default;
}
.mapscrim.is-open{opacity:1}
.mapscrim[hidden]{display:none}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{
  margin-top:clamp(1.6rem,4.4vh,2.5rem);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.5rem .8rem;
  font-size:clamp(.73rem,1.6vw,.8rem);
  color:var(--t-3);
}
.foot__handle{color:var(--t-2)}
/* Below this width the footer must wrap; break it on purpose before the
   copyright so no separator is left dangling at the end of a line. */
@media (max-width:560px){
  .foot__sep-last{display:none}
  .foot__copy{flex-basis:100%}
}

/* ══ Entrance choreography ══════════════════════════════════════════
   Premium: 520ms, no overshoot, 70ms stagger across 7 beats. */
.reveal{opacity:0;transform:translateY(14px)}
.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)}}

/* ── Desktop composition ────────────────────────────────────────── */
@media (min-width:900px){
  .cluster img{
    width:46vw;max-width:41.25rem;
    -webkit-mask-image:radial-gradient(118% 118% at 0% 100%,#000 0%,#000 40%,rgba(0,0,0,.52) 66%,transparent 89%);
            mask-image:radial-gradient(118% 118% at 0% 100%,#000 0%,#000 40%,rgba(0,0,0,.52) 66%,transparent 89%);
  }
  .draft{display:block}
  .stage{padding-inline:clamp(2rem,6vw,5rem)}
}

/* ── Phone: the map card becomes a bottom sheet ─────────────────── */
@media (max-width:699px){
  .mapcard{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;
    border-radius:14px 14px 0 0;
    border-inline:0;border-bottom:0;
    padding:.6rem .6rem calc(.9rem + env(safe-area-inset-bottom));
    transform:translateX(0) translateY(100%);
    transition:opacity var(--d-std) var(--ease),transform var(--d-slow) var(--ease-out);
  }
  .mapcard.is-open{transform:translateX(0) translateY(0)}
  .mapcard__foot{justify-content:center;text-align:center}
}

/* ── Ambient motion, only where it is welcome ───────────────────── */
@media (prefers-reduced-motion:no-preference){
  .is-ready .draft__line{
    stroke-dasharray:var(--len,1400);
    stroke-dashoffset:var(--len,1400);
    animation:draw 1.5s var(--ease) calc(.5s + var(--n) * .16s) forwards;
  }
  .is-ready .draft__node{animation:node-in .5s var(--ease) calc(1.5s + var(--n) * .12s) forwards}
  .is-ready .signal{
    offset-path:path("M-10 352 H236 l58-58 H610");
    offset-rotate:0deg;
    animation:signal-in .6s var(--ease) 2.4s forwards,
              travel 5.5s linear 2.4s infinite;
  }
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes node-in{to{opacity:1}}
  @keyframes signal-in{to{opacity:.9}}
  @keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.is-ready .reveal{opacity:1;transform:none;transition:none}
  .is-ready .rule{animation:none;transform:none}
  .draft__line{stroke-dasharray:none;stroke-dashoffset:0}
  .draft__node{opacity:1}
  .signal{display:none}
  .mapcard,.mapscrim{transition:none}
  *{scroll-behavior:auto}
}