/* ==========================================================================
   MEYMOONA — BRAND FOUNDATION
   Design system: "EMBER & VEIL"
   --------------------------------------------------------------------------
   The rules encoded here:
     1. The canvas is night. Black is not a background, it is the subject.
     2. Red is presence, never decoration. It marks where she is.
     3. Light is directional. Everything is rim-lit from one source.
     4. We never show her face.
   --------------------------------------------------------------------------
   Owner: iPOS · Brand: Meymoona · v1.0
   ========================================================================== */

:root {
  /* ---- CORE PALETTE --------------------------------------------------- */
  /* The dark. Five steps of night — never pure #000 except for the void.  */
  --void:            #030304;   /* absolute base, the space behind her     */
  --obsidian:        #08080A;   /* page canvas                             */
  --onyx:            #0E0E11;   /* section surface                         */
  --ash:             #16161B;   /* card surface                            */
  --slate:           #1F1F26;   /* raised surface / input                  */
  --smoke:           #2C2C35;   /* borders, dividers                       */
  --graphite:        #3D3D48;   /* strong border, disabled                 */

  /* The ember. iPOS red is the spine of the identity.                     */
  --ember:           #EA2D2E;   /* PRIMARY — iPOS brand red                */
  --ember-deep:      #E01717;   /* iPOS brand red, dark                    */
  --ember-glow:      #FF5348;   /* highlight, top of gradients             */
  --ember-lift:      #FF7A6B;   /* hover / active text                     */
  --blood:           #8E0F10;   /* deep shadow red, gradient tail          */
  --blood-dark:      #4A0708;   /* atmospheric wash                        */

  /* The light. Warm bone-white — never clinical #FFF on this canvas.      */
  --bone:            #F6F3F2;   /* primary text on dark                    */
  --linen:           #D9D5D4;   /* strong secondary                        */
  --mist:            #A3A0A3;   /* secondary text                          */
  --dusk:            #6E6B70;   /* tertiary text, captions                 */

  /* Signal (used sparingly — this is not a dashboard)                     */
  --verdant:         #3FB27F;   /* positive delta                          */
  --amber:           #E8A33D;   /* attention                               */

  /* ---- SEMANTIC TOKENS ------------------------------------------------ */
  --bg:              var(--obsidian);
  --bg-elevated:     var(--ash);
  --text:            var(--bone);
  --text-muted:      var(--mist);
  --text-faint:      var(--dusk);
  --line:            var(--smoke);
  --line-strong:     var(--graphite);
  --accent:          var(--ember);

  /* ---- GRADIENTS ------------------------------------------------------ */
  --grad-ember:      linear-gradient(135deg, var(--ember-glow) 0%, var(--ember) 45%, var(--blood) 100%);
  --grad-ember-flat: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%);
  --grad-veil:       radial-gradient(60% 60% at 50% 40%, rgba(234, 45, 46, 0.22) 0%, rgba(234, 45, 46, 0) 70%);
  --grad-doorway:    linear-gradient(180deg, rgba(255, 83, 72, 0.30) 0%, rgba(234, 45, 46, 0.10) 40%, rgba(3, 3, 4, 0) 85%);
  --grad-text:       linear-gradient(180deg, var(--bone) 0%, #B9B4B3 100%);
  --grad-fade-top:   linear-gradient(180deg, var(--obsidian) 0%, rgba(8, 8, 10, 0) 100%);
  --grad-fade-bot:   linear-gradient(0deg, var(--obsidian) 0%, rgba(8, 8, 10, 0) 100%);

  /* ---- GLOW / SHADOW -------------------------------------------------- */
  /* Glow reads as "she is present here". Use at most twice per viewport.  */
  --glow-sm:         0 0 0 1px rgba(234, 45, 46, 0.28), 0 0 24px -6px rgba(234, 45, 46, 0.55);
  --glow-md:         0 0 40px -8px rgba(234, 45, 46, 0.55), 0 0 100px -30px rgba(234, 45, 46, 0.45);
  --glow-lg:         0 0 80px -10px rgba(234, 45, 46, 0.50), 0 0 200px -40px rgba(234, 45, 46, 0.40);
  --shadow-card:     0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.9);
  --shadow-lift:     0 30px 70px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;

  /* ---- TYPOGRAPHY ----------------------------------------------------- */
  /* Display: heavy condensed grotesque, always uppercase, always tight.   */
  --font-display: "Anton", "Haettenschweiler", "Arial Narrow", "Impact", sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic:  "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — 1.250 minor third at the small end, widening.     */
  --t-micro:   0.6875rem;                                   /* 11px       */
  --t-caption: 0.78125rem;                                  /* 12.5px     */
  --t-small:   0.875rem;                                    /* 14px       */
  --t-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 → 17    */
  --t-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);  /* 17 → 21    */
  --t-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --t-h2:      clamp(2rem, 1.4rem + 3vw, 4rem);
  --t-h1:      clamp(2.75rem, 1.6rem + 5.6vw, 7rem);
  /* the wordmark is bounded by viewport HEIGHT as well as width, so it never
     eats the hero on a short laptop screen */
  --t-hero:    clamp(3.25rem, min(11.5vw, 15.5vh), 11rem);

  --lh-tight:  0.92;
  --lh-snug:   1.12;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tr-display: -0.02em;   /* display tracking, tight                     */
  --tr-eyebrow:  0.26em;   /* eyebrow / label tracking, wide              */

  /* ---- SPACE ---------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 11rem;

  --section-y: clamp(4.5rem, 9vw, 10rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --measure:   68ch;
  --wrap:      1240px;
  --wrap-wide: 1480px;
  --wrap-text: 780px;

  /* ---- FORM ----------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- MOTION --------------------------------------------------------- */
  /* She is never abrupt. Everything eases out, nothing bounces.           */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --d-fast:     180ms;
  --d-base:     360ms;
  --d-slow:     760ms;
  --d-cinema:   1600ms;

  --header-h: 68px;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* `clip` rather than `hidden`: kills stray horizontal overflow from the
     atmospheric layers without making <html> a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ember-glow);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--mist);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--ember);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--red { color: var(--ember-lift); }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-loose);
  color: var(--linen);
  max-width: var(--measure);
  text-wrap: pretty;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.ink   { color: var(--bone); }
.red   { color: var(--ember); }

.grad-ink {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-red {
  background: var(--grad-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[lang="ar"], .arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--gutter); }

.section { position: relative; padding-block: var(--section-y); overflow: clip; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--onyx  { background: var(--onyx); }
.section--void  { background: var(--void); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: transform var(--d-fast) var(--ease),
              box-shadow var(--d-base) var(--ease),
              background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--ember);
  --btn-fg: #fff;
  --btn-bd: transparent;
  background-image: var(--grad-ember-flat);
  box-shadow: 0 10px 30px -12px rgba(234, 45, 46, 0.9);
}
.btn--primary:hover { box-shadow: 0 16px 44px -14px rgba(234, 45, 46, 1), var(--glow-md); }

.btn--ghost { --btn-bd: var(--graphite); }
.btn--ghost:hover { --btn-bd: var(--ember); --btn-fg: #fff; background: rgba(234, 45, 46, 0.08); }

.btn--quiet { --btn-bd: transparent; --btn-fg: var(--mist); padding-inline: 0.4em; }
.btn--quiet:hover { --btn-fg: var(--bone); }

.btn--lg { padding: 1.15em 2.2em; font-size: var(--t-body); }
.btn--block { width: 100%; }

.btn .arw { transition: transform var(--d-base) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* ==========================================================================
   CHIPS / PILLS / TAGS
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--linen);
  letter-spacing: 0.01em;
}
.pill--live {
  border-color: rgba(234, 45, 46, 0.4);
  color: var(--ember-lift);
  background: rgba(234, 45, 46, 0.07);
}
.pill--soon {
  border-color: rgba(232, 163, 61, 0.35);
  color: var(--amber);
  background: rgba(232, 163, 61, 0.06);
}

/* The ember dot — the single most-repeated brand mark. It breathes. */
.ember-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(234, 45, 46, 0.7);
  animation: pulse 2.6s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(234, 45, 46, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(234, 45, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 45, 46, 0); }
}

/* ==========================================================================
   SURFACES
   ========================================================================== */

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%), var(--ash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease-out);
}

/* Rim-light: the house detail. One warm edge, top-left, like a light source
   just out of frame. Applied to every raised surface. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 83, 72, 0.35), rgba(255, 255, 255, 0.04) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }

.card--flat { box-shadow: none; background: var(--onyx); }
.card--flat:hover { transform: none; }

/* ==========================================================================
   ATMOSPHERE — the veil, the doorway, the grain
   ========================================================================== */

.veil {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 90%;
  background: var(--grad-veil);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Faint technical grid — "the interface behind the dark" */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* ==========================================================================
   REVEAL — scroll-in choreography
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--s-4);
  z-index: 10000;
  padding: 0.75em 1.2em;
  background: var(--ember);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}