/* ==========================================================
   YOUSEF ZYADA — COMING SOON
   Reuses the exact design tokens, preloader, ambient glow,
   starfield and social-icon styling from the main site's
   style.css so the visual identity is preserved 1:1. Nothing
   here is a redesign — it's the same premium dark-studio theme,
   collapsed onto a single centered screen.
   ========================================================== */

:root{
  --black:#050505;
  --black-soft:#0b0b0b;
  --red:#78020b;
  --red-bright:#a3070f;
  --red-name:#e5121d;
  --white:#ffffff;

  --text-muted:rgba(255,255,255,0.62);
  --text-faint:rgba(255,255,255,0.42);
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);

  --fg:rgba(255,255,255,0.85);
  --fg-soft:rgba(255,255,255,0.75);
  --surface-1:rgba(255,255,255,0.03);
  --surface-2:rgba(255,255,255,0.06);
  --surface-3:rgba(255,255,255,0.1);
  --border-soft:rgba(255,255,255,0.3);
  --glow-white:rgba(255,255,255,0.19);

  --font:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1180px;
  --gutter:32px;
  --radius:10px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-soft:0 12px 40px -20px rgba(0,0,0,0.6);
  --shadow-card:0 8px 24px -12px rgba(0,0,0,0.55);
  --shadow-lift:0 24px 60px -24px rgba(0,0,0,0.7);
  --glow-red:0 8px 30px -8px rgba(120,2,11,0.55);
  --glow-red-lg:0 20px 50px -12px rgba(120,2,11,0.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.2s;
  --dur-base:.4s;
  --dur-slow:.7s;
  --ease-intro:cubic-bezier(.16,1,.3,1);
}

@media (max-width:860px){:root{--gutter:24px;}}
@media (max-width:420px){:root{--gutter:18px;}}

/* -------------------- RESET -------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{overflow:hidden;max-width:100%;height:100%;}
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar{width:0;height:0;}
body{
  margin:0;
  height:100%;
  background:var(--black);
  color:var(--fg);
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:relative;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
h1{font-family:var(--font);margin:0;font-weight:700;letter-spacing:-0.02em;color:var(--white);}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

::selection{background:var(--red);color:var(--white);}
::-moz-selection{background:var(--red);color:var(--white);}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:999;
  background:var(--red);color:#fff;
  padding:12px 18px;border-radius:var(--radius);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:12px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* -------------------- AMBIENT BACKGROUND GLOW -------------------- */
/* Identical to the main site: soft red light bleeding in from the
   left, soft white light from the right, fixed behind everything. */
.bg-glow{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bg-glow::before,
.bg-glow::after{
  content:'';
  position:absolute;
  width:min(60vw,760px);
  height:min(60vw,760px);
  border-radius:50%;
  filter:blur(120px);
}
.bg-glow::before{
  left:-18%;
  top:8%;
  background:radial-gradient(circle, rgba(120,2,11,0.66) 0%, rgba(120,2,11,0) 70%);
  animation:cs-glow-breathe-red 9s ease-in-out infinite;
}
.bg-glow::after{
  right:-18%;
  top:28%;
  background:radial-gradient(circle, var(--glow-white) 0%, rgba(255,255,255,0) 70%);
  animation:cs-glow-breathe-white 11s ease-in-out infinite;
  animation-delay:1.5s;
}
@keyframes cs-glow-breathe-red{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}
@keyframes cs-glow-breathe-white{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .bg-glow::before,.bg-glow::after{animation:none;}
}
.cs-main{position:relative;z-index:1;}

/* -------------------- STARFIELD -------------------- */
.stars-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
#bg-stars{z-index:0;}

/* -------------------- PRELOADER -------------------- */
/* Identical to the main site's splash — only the hand-off at the end
   differs (see script.js: the logo fades/scales out instead of
   flying into a header, since this page has none). */
.preloader{
  position:fixed;inset:0;z-index:9999;
  height:100dvh;width:100%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
}
.preloader.is-done{pointer-events:none;}
body.is-loading{overflow:hidden;}
.preloader-overlay{
  position:absolute;inset:0;z-index:0;
  background:var(--black);
  opacity:1;
  will-change:opacity;
  transition:opacity 1400ms cubic-bezier(.76,0,.24,1);
}
.preloader-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.preloader-glow::before,.preloader-glow::after{
  content:'';position:absolute;width:min(60vw,760px);height:min(60vw,760px);
  border-radius:50%;filter:blur(120px);
}
.preloader-glow::before{left:-18%;top:8%;background:radial-gradient(circle, rgba(120,2,11,0.66) 0%, rgba(120,2,11,0) 70%);animation:cs-glow-breathe-red 9s ease-in-out infinite;}
.preloader-glow::after{right:-18%;top:28%;background:radial-gradient(circle, var(--glow-white) 0%, rgba(255,255,255,0) 70%);animation:cs-glow-breathe-white 11s ease-in-out infinite;animation-delay:1.5s;}
@media (prefers-reduced-motion:reduce){
  .preloader-glow::before,.preloader-glow::after{animation:none;}
}
.preloader-logo{
  position:relative;z-index:1;
  width:clamp(140px,38vw,220px);
  opacity:0;transform:translate3d(0,0,0) scale(.9);
  animation:preloaderFadeIn 550ms var(--ease) forwards;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.preloader-logo img{width:100%;display:block;}
@keyframes preloaderFadeIn{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.9);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .preloader-logo{animation:none;opacity:1;transform:none;}
}

/* -------------------- COMING SOON LAYOUT -------------------- */
/* One screen, no scroll: a flex column that pins the centered stack
   to the middle and floats the footer at the bottom, sized entirely
   with clamp()/vw so it never overflows on any breakpoint. */
.cs-main{
  height:100dvh;height:100vh;width:100%;
  overflow:hidden;
}
.cs-stage{
  height:100%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(28px,5vh,56px) var(--gutter) clamp(20px,3.5vh,32px);
  text-align:center;
  opacity:0;filter:blur(var(--intro-blur,16px));
  transform:translateY(18px);
  transition:opacity 1s var(--ease-intro),filter 1s var(--ease-intro),transform 1s var(--ease-intro);
}
.cs-stage.is-in{opacity:1;filter:blur(0);transform:translateY(0);}

.cs-center{
  flex:1;
  width:100%;max-width:720px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.2vh,32px);
  margin:auto 0;
}

.cs-title{
  font-size:clamp(30px,10.5vw,112px);
  font-weight:900;
  line-height:0.98;
  letter-spacing:-0.02em;
  display:inline-flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;
  gap:0.26em;
  max-width:100%;
  white-space:nowrap;
}
.cs-title-line{
  display:inline-block;color:var(--white);text-transform:uppercase;
  opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-title-line{opacity:1;transform:translateY(0);}
.cs-stage.is-in .cs-title-line:nth-of-type(1){transition-delay:.05s;}
.cs-stage.is-in .cs-title-line:nth-of-type(2){transition-delay:.18s;}
.cs-title-accent{color:var(--red-name);}

/* -------------------- ROLE LINE -------------------- */
/* Reads as one continuous sentence — "Graphic Designer [icon] Visual
   Artist [icon] Let's work together" — that simply wraps onto two
   lines: line 1 is the two role words with the logo icon between
   them, line 2 is "Let's work together" with a matching icon just
   before it. Both icons are pure decoration (no accessible weight),
   never rotate, and behave identically: invisible/width:0 at first,
   then a while after the page has settled they grow from nothing up
   to full icon size and stay put — no looping. See script.js:
   showIcons(). Text on both lines cascades in word-by-word right
   when the intro finishes (.cs-stage.is-in), each word a beat after
   the last — see the staggered transition-delays below. */
.cs-role-block{
  --role-icon-size:clamp(24px,4.6vw,50px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.4vh,14px);
  margin-bottom:clamp(14px,3vh,32px);
}

.cs-roles{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(8px,1.2vw,12px);
  transition:gap .7s var(--ease-spring);
}
/* Once the icon is shown, the words step apart just slightly to make
   room for it growing to full text size between them — kept small so
   the whole line stays put on one row. */
.cs-roles.is-shown{gap:clamp(12px,1.8vw,18px);}
.cs-role-word{
  display:inline-block;
  font-family:var(--font);
  font-weight:800;
  font-size:clamp(16px,4.2vw,52px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-role-word{opacity:1;transform:translateY(0);}
.cs-stage.is-in .cs-role-word:nth-of-type(1){transition-delay:.30s;}
.cs-stage.is-in .cs-role-word:nth-of-type(2){transition-delay:.44s;}

/* "Let's work together" — same bold/uppercase treatment as the role
   words above it, but solid white so it reads as the stronger line.
   Now a small flex row so the icon can sit right before the text. */
.cs-together{
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.4vw,14px);
  transition:gap .7s var(--ease-spring);
}
.cs-together.is-shown{gap:clamp(14px,2.2vw,20px);}
.cs-together-text{
  font-family:var(--font);
  font-weight:800;
  font-size:clamp(16px,4.2vw,52px);
  line-height:1.05;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-together-text{opacity:1;transform:translateY(0);transition-delay:.58s;}

/* Both logo icons: hidden at first (width:0) so the surrounding text
   sits at a normal reading gap with no reserved space for them. On
   .is-shown they grow in width up to the exact height/size of the
   surrounding text — never rotating, never looping. The image uses
   object-fit:contain (not a fixed pixel width) so the whole logo
   scales down/up together as the box grows — nothing is ever sliced
   or clipped mid-animation. */
.cs-role-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:0;height:var(--role-icon-size);
  overflow:hidden;
  opacity:0;
  transition:width .7s var(--ease-spring),opacity .55s ease;
}
.cs-role-icon img{width:100%;height:100%;object-fit:contain;flex:none;display:block;}
.cs-role-icon.is-shown{width:var(--role-icon-size);opacity:1;}
@media (prefers-reduced-motion:reduce){
  .cs-role-icon,.cs-roles,.cs-together,.cs-role-word,.cs-together-text{transition:none!important;}
}

/* "The site is currently under construction" — semi-bold (lighter
   than the bold lines above it) but still large, matching the rest
   of the block. Last step of the word-by-word cascade above, fading
   up right after "Let's work together". */
.cs-status{
  font-size:clamp(18px,3.6vw,40px);
  font-weight:600;
  line-height:1.25;
  text-transform:uppercase;
  color:var(--white);
  letter-spacing:.02em;
  max-width:680px;
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-status{opacity:1;transform:translateY(0);transition-delay:.72s;}
@media (prefers-reduced-motion:reduce){
  .cs-status{transition:none!important;}
}

/* -------------------- FOOTER -------------------- */
/* No background, no card, no colored strip — content floats directly
   over the page, exactly as requested. */
.cs-footer{
  width:100%;max-width:var(--container);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.8vh,18px);
  flex:none;
}

/* Shared row: portfolio button + social icons, all centered together
   so the whole footer reads as one aligned block. */
.cs-footer-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,2vw,18px);
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-footer-row{opacity:1;transform:translateY(0);transition-delay:.68s;}

/* Primary footer CTA — same glassmorphism language as the rest of the
   page, solid red on hover/focus so it reads as the one clear action. */
.cs-portfolio-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  border-radius:var(--radius-pill);
  background:rgba(20,20,20,0.55);
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  color:var(--white);
  font-size:13px;font-weight:600;letter-spacing:.02em;
  box-shadow:var(--shadow-card);
  transition:border-color 240ms var(--ease),transform 240ms var(--ease-spring),box-shadow 240ms var(--ease),background 240ms var(--ease);
}
.cs-portfolio-btn i{font-size:11px;}
.cs-portfolio-btn:hover,
.cs-portfolio-btn:focus-visible{
  border-color:var(--red-bright);
  background:var(--red);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card),0 0 24px -6px rgba(163,7,15,0.55);
}
/* Arrow idles with a gentle back-and-forth drift so it always reads
   as "clickable", then travels further and quicker on hover. */
.cs-portfolio-arrow{
  animation:csArrowDrift 1.8s ease-in-out infinite;
  transition:transform 240ms var(--ease);
}
.cs-portfolio-btn:hover .cs-portfolio-arrow{
  animation-play-state:paused;
  transform:translateX(5px);
}
@keyframes csArrowDrift{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(3px);}
}
@media (prefers-reduced-motion:reduce){
  .cs-portfolio-arrow{animation:none;}
}

.cs-copyright{
  font-size:11px;color:var(--text-faint);line-height:1.6;
  opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease-intro),transform .65s var(--ease-intro);
}
.cs-stage.is-in .cs-copyright{opacity:1;transform:translateY(0);transition-delay:.84s;}

/* Divider between the social icons and the email action — a short
   vertical dash, quieter than the icons on either side of it. */
.cs-social-divider{
  width:1px;
  height:18px;
  background:var(--line);
  margin:0 4px;
}
@media (max-width:640px){
  .cs-social-divider{display:none;}
}

/* Email copy button — same circular treatment as the social icons,
   with a small popover tooltip (box + arrow) above it that swaps
   its label from "Copy Mail" to "Copied Mail" on click. */
.cs-email-btn{
  --brand-bg:var(--red);
  --brand-fg:#ffffff;
  --brand-glow:rgba(163,7,15,0.45);
  position:relative;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--fg);
  background:transparent;cursor:pointer;padding:0;font:inherit;
  transition:background 280ms var(--ease),border-color 280ms var(--ease),color 280ms var(--ease),transform 280ms var(--ease-spring),box-shadow 280ms var(--ease);
}
.cs-email-btn i{font-size:14px;position:relative;z-index:1;}
.cs-email-btn:hover,
.cs-email-btn:focus-visible,
.cs-email-btn.is-copied{
  background:var(--brand-bg);border-color:transparent;color:var(--brand-fg);
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 12px 28px -8px var(--brand-glow);
}
.cs-email-btn:active{transform:translateY(-1px) scale(1.02);}

.cs-email-tooltip{
  position:absolute;
  bottom:calc(100% + 11px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  display:inline-flex;align-items:center;gap:5px;
  background:var(--black-soft);
  color:var(--white);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:6px 11px;
  border-radius:6px;
  white-space:nowrap;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  opacity:0;
  pointer-events:none;
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),color 200ms var(--ease);
}
.cs-email-tooltip.is-copied{color:var(--red-bright);}
.cs-email-tooltip .cs-check-icon{font-size:11px;color:var(--red-bright);}
.cs-email-tooltip::after{
  content:'';
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  width:8px;height:8px;
  background:var(--black-soft);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.cs-email-btn:hover .cs-email-tooltip,
.cs-email-btn:focus-visible .cs-email-tooltip,
.cs-email-btn.is-copied .cs-email-tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .cs-email-tooltip{transition:opacity 150ms linear;}
}

/* -------------------- SOCIAL ICONS -------------------- */
/* Identical markup/behavior to the main site's .social-row — same
   per-brand hover colors, lift, glow and scale. */
.social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items: center;}
.social-row a{
  --brand-bg:var(--red);
  --brand-fg:#ffffff;
  --brand-glow:rgba(163,7,15,0.45);
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--fg);
  background:transparent;position:relative;
  transition:background 280ms var(--ease),border-color 280ms var(--ease),color 280ms var(--ease),transform 280ms var(--ease-spring),box-shadow 280ms var(--ease);
}
.social-row a i{font-size:14px;position:relative;z-index:1;transition:transform 280ms var(--ease);}
.social-row a:hover{background:var(--brand-bg);border-color:transparent;color:var(--brand-fg);transform:translateY(-4px) scale(1.08);box-shadow:0 12px 28px -8px var(--brand-glow);}
.social-row a:active{transform:translateY(-1px) scale(1.02);}
.social-row a:focus-visible{outline-color:var(--brand-bg);}

.social-row a[data-brand="facebook"]{--brand-bg:#1877F2;--brand-glow:rgba(24,119,242,0.5);}
.social-row a[data-brand="linkedin"]{--brand-bg:#0A66C2;--brand-glow:rgba(10,102,194,0.5);}
.social-row a[data-brand="behance"]{--brand-bg:#1769FF;--brand-glow:rgba(23,105,255,0.5);}
.social-row a[data-brand="whatsapp"]{--brand-bg:#25D366;--brand-glow:rgba(37,211,102,0.45);}
.social-row a[data-brand="x"]{--brand-bg:#ffffff;--brand-fg:#0b0b0b;--brand-glow:rgba(255,255,255,0.3);}
.social-row a[data-brand="instagram"]{--brand-glow:rgba(193,53,132,0.5);}
.social-row a[data-brand="instagram"]:hover{background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D,#F56040,#FCAF45,#FFDC80);}
@media (prefers-reduced-motion:reduce){
  .social-row a{transition:background 150ms linear,color 150ms linear,border-color 150ms linear;}
  .social-row a:hover{transform:none;}
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width:640px){
  .cs-center{gap:18px;}
  .cs-status{max-width:320px;}
  .social-row a,.cs-email-btn{width:36px;height:36px;}
}
@media (max-height:560px){
  .cs-stage{padding-top:18px;padding-bottom:14px;}
  .cs-center{gap:14px;}
  .cs-title{font-size:clamp(24px,8vw,58px);}
  .cs-role-word,.cs-together{font-size:clamp(17px,4.4vw,28px);}
  .cs-status{font-size:clamp(14px,3.2vw,20px);}
}
@media (max-width:360px){
  .cs-title{font-size:clamp(24px,11vw,44px);gap:.2em;}
}