/* ==========================================================================
   intro.css — the WELCOME screen that opens the shop
   --------------------------------------------------------------------------
   WHY THIS IS NOT splash.css. On the two-company site the welcome lived on a
   page of its own, so its stylesheet could carry a global reset — it was the
   only thing on that page. There is one company now, so the visitor lands
   straight on the shop and the welcome plays as an overlay ON TOP of it. A
   global reset here would reach into the shop underneath and change the
   margins of every heading and paragraph on the page.

   So: EVERY SELECTOR BELOW IS A DESCENDANT OF .intro, and every custom
   property is declared on .intro rather than on :root. Nothing in this file
   can reach the page behind it. If you add a rule, keep it that way.

   HOW IT IS ARMED. .intro ships display:none. assets/js/intro.js adds
   .intro-armed to <html> from the <head>, before the body paints, and only
   when the welcome is actually going to play. That means:
       JavaScript off      the class is never added, the overlay never shows,
                           the shop is simply there — no <noscript> needed
       already seen today  same thing, and no flash of a skipped welcome
       playing             the class is added before first paint

   PHASES are cumulative classes that intro.js adds to .intro:
       .is-line -> .is-field -> .is-welcome -> .is-reveal -> .is-done
   Timings live in intro.js. The look lives here.
   ========================================================================== */

.intro {
  /* 5M red, sampled from the logo ink — the same ramp store.css uses */
  --in-1: #ff3b3b;
  --in-2: #e00000;
  --in-3: #8f0000;
  --in-ink: #07080a;

  --in-field-boot: 0.85;   /* the red over the photo during WELCOME */
  --in-field-rest: 0.24;   /* after the snap — a wash for depth only */

  --in-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --in-fade: 520ms;        /* the dissolve; intro.js waits exactly this long */

  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--in-ink);
  /* Inter is already loading for the shop; name the same fallbacks so the
     word is never laid out in a serif for a frame. */
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* the rules the head script switches on */
html.intro-armed .intro { display: block; }
html.intro-armed,
html.intro-armed body { overflow: hidden; }

/*
  The shop underneath is deliberately NOT hidden. Hiding it would mean the
  dissolve reveals a blank page and the shop then pops in, and it would leave
  the whole site invisible if anything in intro.js ever threw. The overlay is
  opaque and covers it, and any key or click dismisses it.
*/

/* ------------------------------ the photo -------------------------------- */
/*
  This is the same file .hero::before already paints on this page
  (--brand-hero in store.css), so showing it here costs no extra download.
*/
.intro__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  filter: blur(16px) saturate(0.72) brightness(0.5);
  transition: transform 900ms var(--in-ease-out);
}

/* THE SNAP. 190ms is the whole effect — lengthen it and the intro goes soft. */
.intro.is-reveal .intro__media img {
  filter: none;
  transform: scale(1.02);
  transition: filter 190ms ease, transform 900ms var(--in-ease-out);
}

/* --------------------------- the red field ------------------------------- */
.intro__field {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--in-1), var(--in-2) 45%, var(--in-3));
  opacity: 0;
  transition: opacity 760ms ease;
}

.intro.is-field .intro__field { opacity: var(--in-field-boot); }
.intro.is-reveal .intro__field {
  opacity: var(--in-field-rest);
  transition: opacity 620ms ease;
}

/* a soft vignette so the white word never sits on a bright patch of photo */
.intro__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55));
  opacity: 0;
  transition: opacity 760ms ease;
}
.intro.is-field .intro__shade { opacity: 1; }
.intro.is-reveal .intro__shade { opacity: 0.35; }

/* ------------------------------ the line --------------------------------- */
/* draws down the middle first, then leaves as the photo snaps sharp */
.intro__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.35);
  transform: scaleY(0);
  opacity: 0;
  transition: transform 620ms var(--in-ease-out), opacity 300ms ease;
}

.intro.is-line .intro__line { transform: scaleY(1); opacity: 1; }
.intro.is-reveal .intro__line { opacity: 0; }

/* ------------------------------ the mark --------------------------------- */
.intro__mark {
  position: absolute;
  top: clamp(1.25rem, 3.2vw, 2.5rem);
  left: clamp(1.25rem, 3.2vw, 2.5rem);
  height: clamp(20px, 2.6vw, 30px);
  width: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 520ms ease 120ms, transform 620ms var(--in-ease-out) 120ms;
}

.intro.is-reveal .intro__mark { opacity: 0.96; transform: none; }

/* ----------------------------- the welcome ------------------------------- */
.intro__welcome {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vh, 1.6rem);
  padding: 1.5rem;
  text-align: center;
  pointer-events: none;
}

.intro__word {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  font-size: clamp(2.4rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: clamp(0.06em, 1.2vw, 0.16em);
  color: #fff;
  text-shadow: 0 8px 60px rgba(0, 0, 0, 0.45);
  /* HIDDEN UNTIL ITS PHASE. Without this the raw "WELCOME" text shows for a
     frame on the black boot screen — before intro.js splits it into letters —
     and with the word now arriving at the END of the timeline that early flash
     reads as a second, earlier WELCOME. Revealed at .is-welcome below. */
  opacity: 0;
}

/* the word (and, for Urdu, the whole-word fade) only becomes visible once its
   phase begins; the per-letter / whole-word animations then play as before */
.intro.is-welcome .intro__word { opacity: 1; }

/* one span per letter, staggered by --i (intro.js sets it) */
.intro__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) scale(0.94);
  filter: blur(9px);
}

.intro.is-welcome .intro__word span {
  animation: introLetterIn 760ms var(--in-ease-out) forwards;
  animation-delay: calc(var(--i) * 62ms);
}

@keyframes introLetterIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/*
  URDU DOES NOT GET SPLIT. Nastaliq joins its letters into one continuous
  stroke, so cutting the word into a span per character breaks every ligature
  and what is left is not the word any more. intro.js checks the language and
  leaves the word whole, marking it .is-whole — this fades that in as one piece.
*/
.intro__word.is-whole {
  display: block;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(0.2em);
}

.intro.is-welcome .intro__word.is-whole {
  animation: introWordIn 900ms var(--in-ease-out) forwards;
}

@keyframes introWordIn {
  to { opacity: 1; filter: blur(0); transform: none; }
}

.intro__sub {
  margin: 0;
  font-size: clamp(0.66rem, 1.5vw, 0.94rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(14px);
}

.intro.is-welcome .intro__sub {
  animation: introSubIn 900ms var(--in-ease-out) 620ms forwards;
}

@keyframes introSubIn {
  to { opacity: 1; transform: none; }
}

/* WELCOME now arrives AFTER the photo has snapped sharp, so it rises over the
   shop itself rather than over the opening red field. It no longer fades out on
   its own — the whole overlay dissolves (.is-done) a beat later and takes the
   word with it. A little of the red wash and the shade come back up under the
   word so the white letters stay crisp over a bright patch of the photograph. */
.intro.is-welcome .intro__field { opacity: 0.42; }
.intro.is-welcome .intro__shade { opacity: 0.5; }

/* ------------------------------- the skip -------------------------------- */
.intro__skip {
  position: absolute;
  bottom: clamp(1.1rem, 3vh, 2rem);
  right: clamp(1.1rem, 3vw, 2rem);
  z-index: 20;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.intro__skip:hover,
.intro__skip:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

/* ------------------------------ the exit --------------------------------- */
.intro.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--in-fade) ease;
}

/* ------------------------------- Urdu ------------------------------------ */
/*
  --ur-face is declared by assets/css/urdu.css. Nastaliq has no capitals, no
  room for this much tracking, and needs roughly twice the leading of Latin.
*/
[lang="ur"] .intro__word {
  font-family: var(--ur-face, "Noto Nastaliq Urdu", serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 7.5vw, 6rem);
  line-height: 1.9;
  letter-spacing: normal;
  text-transform: none;
}

[lang="ur"] .intro__sub {
  font-family: var(--ur-face, "Noto Nastaliq Urdu", serif);
  font-size: clamp(0.7rem, 1.7vw, 1rem);
  line-height: 2;
  letter-spacing: normal;
  text-transform: none;
}

[dir="rtl"] .intro__mark { left: auto; right: clamp(1.25rem, 3.2vw, 2.5rem); }
[dir="rtl"] .intro__skip { right: auto; left: clamp(1.1rem, 3vw, 2rem); }

/* --------------------------- narrow screens ------------------------------ */
@media (max-width: 640px) {
  .intro__line { display: none; }   /* nothing to divide on one column */
  .intro__mark { height: 22px; }
}

/* ---------------------------- reduced motion ----------------------------- */
/*
  intro.js skips the welcome entirely when the operating system asks for less
  motion, so these rules are a belt-and-braces guard for the dissolve only.
*/
@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}