/* =========================================================
   عالم يزيد — Yazed Alotifi · ink & paper manga universe
   Design system + base
   ========================================================= */

:root{
  /* palette */
  --paper:      #f2ecdd;
  --paper-2:    #e9e1cd;
  --paper-3:    #ded3ba;
  --ink:        #18130d;
  --ink-2:      #3a3329;
  --ink-soft:   #6b6253;
  --line:       #18130d;
  --accent:     #e5371d;       /* manga vermilion — the spark of colour */
  --accent-ink: color-mix(in srgb, var(--accent) 74%, #000);
  --accent-soft:color-mix(in srgb, var(--accent) 24%, #fff);
  --gray-world: #9d978a;

  /* type */
  --f-disp: "Anton", "Changa", sans-serif;          /* latin poster display */
  --f-head: "Changa", "IBM Plex Sans Arabic", sans-serif; /* arabic display */
  --f-body: "IBM Plex Sans Arabic", "Changa", sans-serif;

  --t-hero:   clamp(56px, 11vw, 168px);
  --t-h1:     clamp(38px, 6vw, 92px);
  --t-h2:     clamp(30px, 4.4vw, 64px);
  --t-h3:     clamp(22px, 2.4vw, 34px);
  --t-lead:   clamp(19px, 1.9vw, 27px);
  --t-body:   clamp(16px, 1.25vw, 19px);
  --t-small:  clamp(13px, 1vw, 15px);

  /* spacing */
  --pad-x: clamp(20px, 5vw, 96px);
  --sec-y: clamp(80px, 11vh, 168px);
  --maxw: 1440px;

  --shadow-hard: 10px 10px 0 var(--ink);
  --shadow-soft: 0 24px 60px -28px rgba(24,19,13,.55);
  --radius: 4px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--t-body);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

/* paper grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

::selection{ background:var(--accent); color:#fff; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); position:relative; z-index:2; }
section{ position:relative; z-index:2; }

.kicker{
  font-family:var(--f-disp); letter-spacing:.18em; text-transform:uppercase;
  font-size:clamp(13px,1.1vw,16px); color:var(--accent); direction:ltr;
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{ content:""; width:34px; height:3px; background:var(--accent); display:inline-block; }

.sec-head{ margin-bottom:clamp(40px,5vw,72px); max-width:980px; }
.sec-head h2{
  font-family:var(--f-head); font-weight:800; line-height:1.02;
  font-size:var(--t-h2); margin-top:.28em; letter-spacing:-.01em;
}
.sec-head .en{ font-family:var(--f-disp); direction:ltr; color:var(--ink-soft); display:block; }
.sec-head p{ font-size:var(--t-lead); color:var(--ink-2); margin-top:1em; max-width:62ch; }

/* ---------- sparkle motif ---------- */
.spark{ display:inline-block; color:var(--ink); }
.spark svg{ width:100%; height:100%; display:block; fill:currentColor; }
.spark.float{ position:absolute; z-index:2; animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.85; }
  50%{ transform:scale(1.35) rotate(20deg); opacity:1; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-head); font-weight:700; font-size:clamp(15px,1.3vw,19px);
  padding:.85em 1.5em; border:2.5px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:var(--radius); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:4px 4px 0 var(--ink); line-height:1;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn.accent{ background:var(--accent); border-color:var(--accent-ink); box-shadow:4px 4px 0 var(--accent-ink); color:#fff; }
.btn.accent:hover{ box-shadow:7px 7px 0 var(--accent-ink); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn .ar{ font-family:var(--f-head); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad-x); transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled{ background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); box-shadow:0 2px 0 var(--ink); }
.nav .brand{ display:flex; align-items:center; gap:.55em; font-family:var(--f-head); font-weight:800; font-size:clamp(20px,2vw,26px); }
.nav .brand .dot{ width:14px; height:14px; }
.nav .brand small{ font-family:var(--f-disp); direction:ltr; font-size:.5em; color:var(--ink-soft); letter-spacing:.12em; display:block; line-height:1; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav-links a{ font-family:var(--f-head); font-weight:600; font-size:16px; position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; bottom:-2px; right:0; width:0; height:2.5px; background:var(--accent); transition:width .25s ease; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.hamburger{ display:none; width:46px; height:46px; border:2.5px solid var(--ink); border-radius:var(--radius); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hamburger span{ width:22px; height:2.5px; background:var(--ink); transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:var(--pad-x); transform:translateX(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--f-head); font-weight:800; font-size:clamp(30px,9vw,52px); line-height:1.25; }
.mobile-menu a .en{ font-family:var(--f-disp); font-size:.35em; color:var(--accent); direction:ltr; margin-inline-start:.6em; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .spark.float{ animation:none; }
  html{ scroll-behavior:auto; }
}