/* «قصتنا» — the story told as layers, in Perla's own identity (navy, ivory, gold; Alexandria).
   Text source of truth: docs/قصتنا.md. Images: real storefronts and box; the pearl is a symbol. */
.story-page { background: #F6EFE5; }

/* Cover: fits the screen under the header (AGENTS.md rule 13) */
.story-cover { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: max(440px, calc(100svh - 170px)); padding: 3rem 1.25rem; background: radial-gradient(circle at 50% 38%, #16385f 0%, #0F2747 45%, #07192f 100%); color: #F6EFE5; text-align: center; }
.story-cover__mark { display: block; width: clamp(180px, 20vw, 300px); height: auto; margin: 0 auto 1.4rem; }
.story-cover__inner { max-width: 46rem; }
.story-cover .eyebrow { margin-bottom: 1rem; color: #C8A45D; font-size: .95rem; letter-spacing: 0; }
.story-cover h1 { max-width: none; margin: 0 0 1.1rem; color: #F6EFE5; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.25; font-weight: 600; letter-spacing: 0; }
.story-cover p { margin: 0 auto 2.4rem; color: #d9dfe7; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.story-cover__hint { display: inline-grid; justify-items: center; gap: .6rem; color: #C8A45D; font-size: .9rem; }
.story-cover__hint::after { content: ""; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* A layer: text beside one square frame; frames alternate sides */
.story-layer { width: min(100%, 1200px); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) 5vw; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.story-layer--flip .story-layer__media { order: -1; }
.story-layer__num { display: block; margin-bottom: .9rem; color: #C8A45D; font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; line-height: 1; }
.story-layer .eyebrow { color: #735a2e; font-size: .95rem; letter-spacing: 0; }
.story-layer h2 { margin-bottom: 1.2rem; color: #0F2747; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.35; letter-spacing: 0; }
.story-layer p { max-width: 34rem; margin-bottom: .9rem; color: #40516a; font-size: 1.08rem; line-height: 2; }
.story-layer__media { width: 100%; aspect-ratio: 1 / 1; margin: 0; overflow: hidden; background: #0F2747; }
.story-layer__media > *, .story-layer__media img { display: block; width: 100%; height: 100%; }
.story-layer__media img { object-fit: cover; }
.story-layer__media img[src*="storefront-hero"] { object-position: 76% 50%; }
.story-layer__media img[src*="al-kharj"] { object-position: 50% 30%; }

/* Symbols: the Perla pearl-in-shell (our own vector drawing), never a generated "product" photo */
.story-motif { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #16385f 0%, #0F2747 58%, #07192f 100%); }
.story-motif span { position: relative; display: block; }
.story-motif > img { width: 78%; height: auto; }
.story-motif--layers span { width: 70%; height: 46%; border-radius: 46% 46% 10px 10px / 70% 70% 10px 10px; background: repeating-linear-gradient(180deg, #e9cf98 0 3px, #c8a45d 3px 5px, rgba(15,39,71,.55) 5px 15px); box-shadow: 0 30px 60px rgba(0,0,0,.35); }

/* The pause (2020): words only, on navy */
.story-pause { padding: clamp(5rem, 12vw, 9rem) 1.5rem; background: #0F2747; color: #F6EFE5; text-align: center; }
.story-pause .story-layer__num, .story-pause .eyebrow { color: #C8A45D; letter-spacing: 0; }
.story-pause h2 { margin-bottom: 1.4rem; color: #F6EFE5; font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: 0; }
.story-pause p { max-width: 36rem; margin: 0 auto .9rem; color: #d9dfe7; font-size: 1.1rem; line-height: 2; }

/* Quotes between layers */
.story-quote { padding: clamp(3rem, 7vw, 5rem) 1.5rem; text-align: center; }
.story-quote p { max-width: 46rem; margin: 0 auto; color: #0F2747; font-size: clamp(1.55rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.6; }
.story-quote p::before, .story-quote p::after { content: ""; display: block; width: 56px; height: 2px; margin: 1.6rem auto; background: #C8A45D; }

/* Today */
.story-coda { padding: clamp(4.5rem, 10vw, 8rem) 1.5rem; background: #07192f; color: #F6EFE5; text-align: center; }
.story-coda .eyebrow { color: #C8A45D; letter-spacing: 0; font-size: .95rem; }
.story-coda p { max-width: 44rem; margin: 0 auto; color: #d9dfe7; font-size: 1.15rem; line-height: 2; }
.story-coda .story-coda__line { margin-top: 1.6rem; color: #C8A45D; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.6; }
.story-coda__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.4rem; }
.story-coda .underlined { color: #F6EFE5; }

/* The pearl that forms as you read (desktop): one ring per layer reached */
.story-progress { display: none; }
@media (min-width: 1100px) {
  .story-progress { position: fixed; inset-inline-end: 2rem; top: 55%; z-index: 15; display: block; width: 58px; height: 58px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .story-progress.is-visible { opacity: 1; }
  .story-progress span { position: absolute; border: 1px solid rgba(200,164,93,.22); border-radius: 50%; transition: border-color .5s ease; }
  .story-progress span.is-on { border-color: #C8A45D; }
  .story-progress span:nth-child(1) { inset: 0; } .story-progress span:nth-child(2) { inset: 4px; } .story-progress span:nth-child(3) { inset: 8px; }
  .story-progress span:nth-child(4) { inset: 12px; } .story-progress span:nth-child(5) { inset: 16px; } .story-progress span:nth-child(6) { inset: 20px; }
  .story-progress i { position: absolute; inset: 24px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffffff, #efcfd6 60%, #c993a3); }
}

/* Reveal: only sections still below the screen when the script runs start hidden (no flash) */
.story-reveal { transition: opacity .8s ease, transform .8s ease; }
.story-reveal.is-pending { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .story-reveal, .story-progress, .story-progress span { transition: none; }
  .story-reveal.is-pending { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .story-layer { grid-template-columns: 1fr; gap: 1.8rem; padding: 3.5rem 1rem; }
  .story-layer .story-layer__media { order: -1; }
  .story-cover { min-height: max(420px, calc(100svh - 150px)); padding: 2.2rem 1rem; }
  .story-cover__mark { width: 150px; margin-bottom: 1rem; }
}