/* ==========================================================================
   Dahab v24 — home scroll story (owner: STORY)
   Reference: spec 02 §6 (resolved cascade). Chapter colours come from the DB
   through custom properties set on .story-pin (fallbacks = reference values).
   ========================================================================== */

/* ---- local resets (so the story never depends on page-level resets) ---- */
.scroll-story h1,.scroll-story h2,.scroll-story p{margin:0}
.scroll-story a{color:inherit;text-decoration:none}
.scroll-story button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.scroll-story .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.scroll-story [hidden]{display:none!important}

/* ===== section + sticky pin ===== */
.scroll-story{position:relative;isolation:isolate;height:calc(650svh * var(--story-len,1))}
.story-pin{
  position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;isolation:isolate;
  background:var(--story-base,#f7d9e6);color:var(--story-base-ink,#542039);
  --body-wash:0;--hair-wash:0;--copy-opacity:1;
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.story-color{position:absolute;inset:0;pointer-events:none;transform-origin:bottom;will-change:transform;opacity:1}
.color-body{background:#d9f0f3;transform:translateY(calc((1 - var(--body-wash))*100%))}
.color-hair{background:#ffe4df;transform:translateY(calc((1 - var(--hair-wash))*100%))}
.color-extra{transform:translateY(100%)}

/* ===== masthead word ===== */
.story-masthead{
  position:absolute;bottom:19%;left:50%;transform:translate(-50%);z-index:1;
  pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;
  font-family:Damas,Arial,sans-serif;font-style:normal;font-weight:100;
  font-size:clamp(100px,15vw,260px);line-height:1;letter-spacing:.04em;
  color:var(--story-mast,#fff6);transition:color .5s;
}

/* ===== copy ===== */
.story-copy{position:absolute;z-index:8;top:28%;right:5.5%;width:41%;max-width:580px;min-height:330px;opacity:var(--copy-opacity);will-change:opacity}
.story-chapter{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transform:translateY(28px);pointer-events:none;filter:none;transition:opacity .18s,transform .28s}
.story-chapter.chapter-visible{opacity:1;transform:translateY(0);pointer-events:auto;filter:blur(0)}
.story-kicker{display:block;margin-bottom:25px;font-family:Damas,Arial,sans-serif;font-size:12px;font-weight:200;line-height:1.6;letter-spacing:1.6px;color:var(--story-muted,#795466)}
.story-chapter h1,.story-chapter h2{font-family:Damas,Arial,sans-serif;font-weight:600;font-size:clamp(39px,4.3vw,74px);line-height:1.48;letter-spacing:0;color:var(--story-ink,#542039)}
.story-chapter em{font-style:normal;color:var(--story-em,#95436b)}
.story-chapter p{max-width:380px;margin:24px 0 27px;font-family:Damas,Arial,sans-serif;font-size:18px;font-weight:300;line-height:1.8;color:var(--story-muted,#795466)}
.story-link{display:inline-flex;align-items:center;gap:26px;padding:0 0 8px;border-bottom:1px solid;font-size:17px;font-weight:500}
.story-link svg{transition:transform .3s}
.story-link:hover svg{transform:translate(-6px)}

/* ===== photo / canvas layer ===== */
.pour-stage{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.dahab-character-scene{position:absolute;inset:0;isolation:isolate}
.dahab-character-scene canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
.dahab-character-scene canvas.character-canvas-ready{opacity:1}
.dahab-character-fallback{position:absolute;top:9.5%;left:3.5%;width:auto;max-width:none;height:min(85.5svh,59vw);object-fit:contain;pointer-events:none;transform:none}
.dahab-character-fallback.is-custom{aspect-ratio:1122/1402;object-position:left bottom}
.dahab-character-fallback.character-loaded{opacity:0;visibility:hidden}
.story-side-note{display:none;position:absolute;top:50%;left:26px;z-index:8;writing-mode:vertical-rl;font:200 12px/1 Damas,Arial,sans-serif;letter-spacing:1.7px;opacity:.85;color:#875a70}

/* ===== chapter steps ===== */
.story-chapters{position:absolute;z-index:10;bottom:125px;right:6%;display:flex;gap:25px}
.story-chapters button{
  display:flex;flex-direction:column;align-items:start;gap:7px;min-width:55px;padding:0 0 9px;
  background:none;border:0;border-bottom:1px solid var(--story-line,#70445b55);color:var(--story-step,#70445b);opacity:.85;
  font-size:14px;transition:opacity .3s,border-color .3s;
}
.story-chapters button>span:first-child{font:400 12px/1.5 Damas,Arial,sans-serif;letter-spacing:1px}
.story-chapters .step-active{opacity:1;color:var(--story-ink,#542039);border-bottom:2px solid var(--story-ink,#542039)}

/* ===== bottom bar ===== */
.story-bottom{position:absolute;z-index:10;bottom:33px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px}
.scroll-invitation{display:flex;align-items:center;gap:13px;font-size:15px}
.scroll-invitation>svg{width:20px;height:30px;animation:scrollNudge 2.5s ease-in-out infinite}
.story-bottom-actions{display:flex;align-items:center;gap:25px}
.story-bottom-actions>a{display:flex;align-items:center;gap:11px;font-size:14px}
.story-motion{display:grid;place-items:center;width:34px;height:34px;background:none;border:1px solid;border-radius:50%;opacity:.95}
.scroll-story .story-motion{border:1px solid}
@keyframes scrollNudge{0%,to{transform:translateY(-3px)}50%{transform:translateY(5px)}}

/* ===== progress bar ===== */
.story-progress{position:absolute;inset:auto 0 0;z-index:20;height:3px;direction:ltr;background:#54203916}
.story-progress>div{width:100%;height:100%;transform-origin:0;transform:scaleX(0);background:var(--story-progress,#94476c)}

/* ===== per-chapter colours: reference class rules, used when the DB sets no variable =====
   (the pin carries .chapter-N; JS swaps the --story-* variables at the same moment) */
.chapter-1 .story-masthead,.chapter-2 .story-masthead{color:var(--story-mast,#ffffff40)}

/* ===== still view ===== */
.story-static{height:100svh;min-height:560px}
.story-static .story-pin{position:relative;min-height:560px}
.story-static .scroll-invitation svg{animation:none}

/* ===== EN (LTR) ===== */
[dir=ltr] .story-copy{text-align:left;direction:ltr}
[dir=ltr] .story-copy p{line-height:1.7}
[dir=ltr] .story-copy em{font-style:normal}
[dir=ltr] .story-chapters{direction:ltr}
[dir=ltr] .story-copy h1,[dir=ltr] .story-copy h2{letter-spacing:-.01em;font-size:clamp(38px,4.3vw,66px);line-height:1.2}

/* ===== breakpoints ===== */
@media (min-width:1600px){ .story-chapters{right:8%} }
@media (max-width:1150px){ .story-chapters{gap:20px;right:5%} .story-bottom{left:5%;right:5%} .story-side-note{left:15px} }
@media (max-height:720px) and (min-width:801px){
  .story-kicker{margin-bottom:17px} .story-chapter p{margin:18px 0} .story-chapters{bottom:100px}
}
@media (max-width:800px){
  .scroll-story{height:calc(600svh * var(--story-len,1))}
  .story-pin,.story-static .story-pin{min-height:620px}
  .story-copy{text-align:center;width:90%;max-width:none;min-height:155px;top:100px;right:5%}
  .story-kicker{margin-bottom:7px;font-size:11px}
  .story-chapter h1,.story-chapter h2{font-size:clamp(29px,7.3vw,39px);line-height:1.32}
  .story-chapter p{max-width:330px;margin:7px auto;font-size:15px;line-height:1.45}
  .story-link{gap:16px;padding-bottom:3px;font-size:14px}
  .dahab-character-fallback{object-position:left top;max-width:none;height:min(100% - 408px,120vw);top:280px;left:2.5%}
  .story-masthead{font-size:20vw;bottom:25%}
  .story-side-note{top:53%;left:12px;font-size:10px}
  .story-chapters{gap:24px;bottom:75px;left:50%;right:auto;transform:translate(-50%)}
  .story-chapters button{align-items:center;gap:3px;min-width:57px;padding-bottom:6px;font-size:14px}
  .story-chapters button>span:first-child{font-size:11px}
  .story-bottom{gap:8px;bottom:19px;left:5%;right:5%}
  .scroll-invitation{gap:8px;font-size:12px}
  .scroll-invitation>svg{width:15px;height:23px}
  .story-bottom-actions{gap:10px}
  .story-bottom-actions>a{gap:6px;font-size:12px}
  .story-motion{width:29px;height:29px}
  .story-static{height:100svh;min-height:620px}
  .story-static .story-bottom .scroll-invitation{display:none}
  .story-static .story-bottom{justify-content:center}
  [dir=ltr] .story-copy{text-align:center}
  [dir=ltr] .story-copy h1,[dir=ltr] .story-copy h2{font-size:clamp(27px,6.6vw,36px);line-height:1.2}
  [dir=ltr] .dahab-character-fallback{height:min(100% - 432px,120vw);top:304px}
}
@media (max-width:800px) and (max-height:729px){
  .story-copy{top:90px}
  .story-kicker{margin-bottom:4px;font-size:10px}
  .story-chapter h1,.story-chapter h2{font-size:29px}
  .story-chapter p{margin:5px auto;font-size:14px}
  .story-link{font-size:13px}
  .dahab-character-fallback{height:min(100% - 378px,120vw);top:250px}
  [dir=ltr] .dahab-character-fallback{height:min(100% - 402px,120vw);top:274px}
}
@media (max-width:480px){
  .scroll-invitation{gap:7px}
  .story-bottom-actions>a svg{width:12px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-story,.scroll-story *,.scroll-story :before,.scroll-story :after{transition:none!important;animation:none!important}
  .scroll-story{height:100svh}
  .story-static{min-height:620px}
  .story-chapter{transition:none}
  .scroll-invitation>svg{animation:none}
  .story-copy{will-change:auto}
}