/* "Unveiling Medusa": the story of the amethyst and the Guardian as a cinematic timeline.
   The page's light follows the story: earthen for Ana, white-gold for Luxara, navy, violet and cyan
   in the abyss. js/medusa-story.js sets data-palette on .mstory as each act comes into view; the
   colours are registered custom properties, so they glide from one act to the next. A thin spine
   on the left carries the amethyst through every scene. Images are never cropped (2:3, contain). */
@property --st-base { syntax: '<color>'; inherits: true; initial-value: #120c08; }
@property --st-glow { syntax: '<color>'; inherits: true; initial-value: #7a5530; }
@property --st-ink { syntax: '<color>'; inherits: true; initial-value: #efe4d6; }
@property --st-accent { syntax: '<color>'; inherits: true; initial-value: #d9b27a; }
@property --st-gx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }

.mstory {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --serif: Georgia, "Times New Roman", serif;
  position: relative; isolation: isolate; color: var(--st-ink);
  transition: --st-base 1.6s ease, --st-glow 1.6s ease, --st-ink 1.2s ease, --st-accent 1.2s ease, --st-gx 1.4s ease;
}
.mstory[data-palette="earth"] { --st-base: #120c08; --st-glow: #8a5f33; --st-ink: #f1e6d6; --st-accent: #dcb47c; }
.mstory[data-palette="luxara"] { --st-base: #3a2f1c; --st-glow: #fff0c8; --st-ink: #fff8ec; --st-accent: #f4d58c; }
.mstory[data-palette="abyss"] { --st-base: #070b1d; --st-glow: #5b2fb8; --st-ink: #e8edff; --st-accent: #8fe9ff; }
.mstory[data-palette="deep"] { --st-base: #050816; --st-glow: #2a5bd8; --st-ink: #eaf0ff; --st-accent: #b9a0ff; }
.mstory[data-side="right"] { --st-gx: 70%; }
.mstory[data-side="center"] { --st-gx: 50%; }

/* The light of the current act, fixed behind the story while it scrolls. */
.mstory__sky { position: fixed; inset: 0; z-index: -1; background: var(--st-base); pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.mstory.is-on .mstory__sky { opacity: 1; }
.mstory__glow { position: absolute; inset: -10%; background: radial-gradient(ellipse 46% 52% at var(--st-gx) 52%, var(--st-glow), transparent 70%); opacity: .55; }
.mstory[data-palette="luxara"] .mstory__glow { opacity: .8; }
.mstory__grain { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#ffffff40 .6px, transparent .6px); background-size: 3px 3px; mix-blend-mode: overlay; }

/* ---- intro ---- */
.mstory__intro { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 1180px; margin: 0 auto; padding: 160px 3.2rem 80px; text-align: center; }
.mstory__kicker, .mstory__eyebrow, .mstory__act-label { font: 400 11px/1.4 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--st-accent); }
.mstory__kicker { margin: 0 0 28px; }
.mstory h1 { margin: 0 0 30px; font: 400 clamp(46px, 7vw, 118px)/.98 var(--_font-default); letter-spacing: -.05em; color: var(--st-ink); }
.mstory h1 span { display: block; }
.mstory h1 span + span { font-family: var(--serif); font-style: italic; letter-spacing: -.03em; color: var(--st-accent); }
.mstory__lead { max-width: 56ch; margin: 0 auto 22px; font: 300 clamp(16px, 1.35vw, 21px)/1.6 var(--_font-default); }
.mstory__note { max-width: 62ch; margin: 0 auto 56px; font: 300 13px/1.6 var(--_font-default); opacity: .62; }
.mstory__cue { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto; font: 400 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.mstory__gem { width: 16px; height: 22px; filter: drop-shadow(0 0 8px #9a6bffcc); }
.mstory__cue .mstory__gem { animation: mstory-bob 2.6s ease-in-out infinite; }
@keyframes mstory-bob { 50% { transform: translateY(8px); } }

/* ---- the journey and its spine ---- */
.mstory__journey { position: relative; padding: 0 3.2rem 120px; }
.mstory__spine { position: absolute; top: 0; bottom: 0; left: max(2.2rem, 3vw); width: 1px; background: color-mix(in srgb, var(--st-ink) 14%, transparent); }
.mstory__fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--st-progress, 0)); background: linear-gradient(180deg, #dcb47c, #f4d58c 35%, #9a6bff 70%, #8fe9ff); }
.mstory__rider { position: sticky; top: 50vh; display: block; width: 0; height: 0; }
.mstory__rider .mstory__gem { position: absolute; left: -8px; top: -11px; }

/* ---- act cards ---- */
.mstory__act { position: relative; }
.mstory__act-card { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 0; }
.mstory__act-label { margin: 0 0 18px; }
.mstory__act-card h2 { margin: 0 0 20px; font: italic 400 clamp(64px, 10vw, 170px)/.9 var(--serif); letter-spacing: -.03em; color: var(--st-ink); }
.mstory__act-line { max-width: 44ch; margin: 0; font: 300 clamp(15px, 1.2vw, 19px)/1.6 var(--_font-default); opacity: .78; }
.mstory__act-card::after { content: ''; width: 1px; height: 80px; margin-top: 44px; background: linear-gradient(var(--st-accent), transparent); }

/* ---- scenes: image and short text side by side, alternating ---- */
.mstory__scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 110px); max-width: 1320px; min-height: 100svh; margin: 0 auto; padding: 8svh 0 8svh max(2rem, 3vw); }
.mstory__frame { position: relative; margin: 0; justify-self: end; width: min(100%, calc(80svh * 2 / 3)); aspect-ratio: 2 / 3; }
.mstory__frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 40px 90px #000000a6, 0 0 0 1px color-mix(in srgb, var(--st-ink) 12%, transparent); }
.mstory__frame::before { /* the act's light, pooled behind the picture */
  content: ''; position: absolute; inset: -12% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--st-glow) 55%, transparent), transparent 68%); filter: blur(20px);
}
.mstory__scene--right .mstory__frame { order: 2; justify-self: start; }
.mstory__text { max-width: 40ch; }
.mstory__scene--right .mstory__text { justify-self: end; }
.mstory__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.mstory__num { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--st-accent) 55%, transparent); border-radius: 999px; font: italic 400 15px/1 var(--serif); letter-spacing: .04em; text-transform: none; color: var(--st-accent); }
.mstory__num--interlude { border-style: dashed; }
.mstory__text h3 { margin: 0 0 20px; font: 400 clamp(32px, 3.4vw, 58px)/1.02 var(--_font-default); letter-spacing: -.04em; color: var(--st-ink); }
.mstory__text p:not(.mstory__eyebrow) { margin: 0; font: 300 clamp(15px, 1.15vw, 19px)/1.7 var(--_font-default); color: color-mix(in srgb, var(--st-ink) 82%, transparent); }

/* The curse: a cold flash crosses the picture as the transformation begins. */
.mstory__scene[data-motion="flash"] .mstory__frame::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: radial-gradient(circle at 40% 55%, #c8fbff, #00e5ff66 40%, transparent 70%); opacity: var(--flash, 0); mix-blend-mode: screen; pointer-events: none; }

/* ---- finale: the Guardian, seen from behind, is the last image of the page ---- */
.mstory__finale { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1100px; margin: 0 auto; padding: 18svh 0 0 max(2rem, 3vw); }
.mstory__finale .mstory__eyebrow { justify-content: center; }
.mstory__finale h2 { margin: 0 0 48px; font: italic 400 clamp(52px, 7vw, 120px)/.95 var(--serif); letter-spacing: -.03em; color: var(--st-ink); }
.mstory__frame--finale { justify-self: center; width: min(100%, calc(90svh * 2 / 3)); }
.mstory__finale-text { max-width: 52ch; margin: 56px auto 40px; font: 300 clamp(16px, 1.3vw, 21px)/1.7 var(--_font-default); }
.mstory__end { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; font: 400 10px/1.5 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--st-accent); }

/* Without GSAP the blocks simply fade in (js adds .is-visible). */
.mstory.no-gsap .mstory__scene > *, .mstory.no-gsap .mstory__act-card > *, .mstory.no-gsap .mstory__finale > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.mstory.no-gsap .is-visible > * { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .mstory__journey { padding: 0 2.2rem 100px; }
  .mstory__spine { left: 1.1rem; }
  .mstory__scene, .mstory__scene--right { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 10svh 0 6svh 1.4rem; }
  .mstory__frame, .mstory__scene--right .mstory__frame { order: 0; justify-self: center; width: min(100%, calc(72svh * 2 / 3)); }
  .mstory__scene--right .mstory__text { justify-self: start; }
  .mstory__act-card { min-height: 60svh; padding-left: 1.4rem; }
  .mstory__finale { padding-left: 1.4rem; }
  .mstory__intro { padding: 130px 2.2rem 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .mstory, .mstory__sky { transition: none; }
  .mstory__cue .mstory__gem { animation: none; }
  .mstory.no-gsap .mstory__scene > *, .mstory.no-gsap .mstory__act-card > *, .mstory.no-gsap .mstory__finale > * { opacity: 1; transform: none; transition: none; }
}

/* ---- the book, inside the story's light ---- */
.mstory .medusa-book { padding-block: 16svh 8svh; }

/* ---- epilogue: the same being, before and after the curse ----
   Each picture pair is one SVG: the human picture aligned onto the Medusa picture, and the Medusa
   picture revealed through an organic mask with a faint violet edge (js/medusa-story.js). */
.mtrans { position: relative; padding: 10svh 3.2rem 12svh; }
.mtrans__head { text-align: center; margin: 0 auto 2svh; }
.mtrans__head .mstory__eyebrow { justify-content: center; }
.mtrans__head h2 { margin: 0; font: 400 clamp(44px, 6vw, 104px)/.98 var(--_font-default); letter-spacing: -.045em; color: var(--st-ink); }
.mtrans__head h2 em { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; color: var(--st-accent); }
.mtrans__stage { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 4svh 0; }
.mtrans__label { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--st-accent); }
.mtrans__svg { display: block; height: min(80svh, 1000px); width: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 40px 100px #000000b3, 0 0 0 1px #ffffff14; }
.mtrans__edge { opacity: 0; mix-blend-mode: screen; }
.mtrans__control { display: flex; align-items: center; gap: 14px; width: min(100%, 420px); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--st-ink) 70%, transparent); }
.mtrans__range { flex: 1; height: 44px; accent-color: #9a6bff; cursor: pointer; }
.mtrans__range:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
/* While the scroll drives the reveal (desktop), the slider is not needed. */
.mtrans.is-scrub .mtrans__control { display: none; }
@media (max-width: 899px) {
  .mtrans { padding-inline: 1.4rem; }
  .mtrans__stage { min-height: 0; padding: 6svh 0; }
  .mtrans__svg { height: auto; width: min(100%, 64svh * .56); }
}

/* The story is told in verse: one line per verse, a touch of the serif for its cadence. */
.mstory .mstory__verse { font-family: var(--serif) !important; font-style: italic; font-size: clamp(16px, 1.25vw, 21px) !important; line-height: 1.75 !important; letter-spacing: .005em; }
.mstory__finale-text.mstory__verse { font-size: clamp(18px, 1.5vw, 24px) !important; }