/* ============================================================
   ASAS Scroll Reveal — full-screen before/after driven by scroll
   Namespaced .asas-sr*  |  Square images (1:1), centered, object-fit: cover
   Landscape screens: fills width, crops top/bottom.
   Portrait screens: fills height, crops left/right.
   ============================================================ */
.asas-sr{
  --sr-length: 150;          /* scroll distance for the full reveal, in % of screen height */
  --sr-feather: 15;          /* softness of the reveal edge, in % of screen height */
  --sr-a: -15%;              /* set by JS: top of the soft edge   */
  --sr-b: 0%;                /* set by JS: bottom of the soft edge */
  --sr-p: 0;                 /* set by JS: progress 0 → 1 */
  --sr-navy: var(--mellis-base, #003366);
  --sr-font: var(--mellis-font, 'Manrope', system-ui, sans-serif);
  --sr-display: var(--mellis-font-two, 'Libre Baskerville', Georgia, serif);
  position: relative;
  height: calc(100vh + var(--sr-length) * 1vh);
  height: calc(100svh + var(--sr-length) * 1svh);
  background: #0b1622;
  font-family: var(--sr-font);
  color: #fff;
}
/* theme sets .page-wrapper{overflow:hidden}, which breaks position:sticky — clip keeps it working */
.page-wrapper:has(.asas-sr){overflow:clip}
.asas-sr__stage{box-sizing:border-box;position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden}
.asas-sr__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;user-select:none;-webkit-user-drag:none}
.asas-sr__img--before{
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--sr-a), #000 var(--sr-b));
          mask-image: linear-gradient(to bottom, transparent var(--sr-a), #000 var(--sr-b));
}
/* soft scrims so text stays readable on any photo */
.asas-sr__stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom, rgba(0,12,26,.45) 0%, rgba(0,12,26,0) 22%, rgba(0,12,26,0) 70%, rgba(0,12,26,.55) 100%)}

.asas-sr__label{position:absolute;left:clamp(16px,4vw,48px);z-index:3;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;transition:opacity .25s linear}
.asas-sr__label--after{top:clamp(16px,4vh,40px);background:var(--sr-navy);opacity:calc(min(1, max(0, (var(--sr-p) - .08) * 6)))}
.asas-sr__label--before{bottom:clamp(16px,4vh,40px);background:rgba(0,12,26,.6);opacity:calc(min(1, max(0, (.94 - var(--sr-p)) * 6)))}

.asas-sr__caption{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);z-index:3;text-align:right;max-width:min(420px,60vw)}
.asas-sr__eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#cfe1f3}
.asas-sr__title,.asas-sr .asas-sr__title{color:#fff;margin:0;font-family:var(--sr-display);font-weight:400;font-size:clamp(20px,2.4vw,30px);line-height:1.25;text-wrap:balance}
.asas-sr__place{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.8)}

/* progress line on the right edge, filling top → bottom like the reveal */
.asas-sr__progress{position:absolute;top:0;right:0;width:3px;height:100%;z-index:3;background:rgba(255,255,255,.18)}
.asas-sr__progress::before{content:"";position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(var(--sr-p))}

.asas-sr__cue{position:absolute;left:50%;bottom:clamp(16px,4vh,40px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;opacity:calc(1 - min(1, var(--sr-p) * 25));pointer-events:none}
.asas-sr__cue svg{width:18px;height:18px;animation:asas-sr-bob 1.8s ease-in-out infinite}
@keyframes asas-sr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Toggle (only used in static mode: reduced motion) */
.asas-sr__toggle{display:none}

/* keep clear of the site's round scroll-to-top button (bottom-right) */
@media (min-width:768px){.asas-sr__caption{bottom:calc(clamp(16px,4vh,40px) + 64px)}}

@media (max-width:767px){
  .asas-sr__caption{left:clamp(16px,4vw,48px);right:auto;bottom:auto;top:clamp(16px,4vh,40px);text-align:left;max-width:calc(100% - 32px)}
  .asas-sr__label--after{top:auto;bottom:calc(clamp(16px,4vh,40px) + 40px)}
  .asas-sr__cue{bottom:calc(clamp(16px,4vh,40px) + 4px);left:auto;right:clamp(16px,4vw,48px);transform:none}
}

/* ── Static mode: visitor prefers reduced motion → no pinning, simple Before/After toggle ── */
.asas-sr--static{height:auto}
.asas-sr--static .asas-sr__stage{position:relative;height:100vh;height:100svh}
.asas-sr--static .asas-sr__cue,.asas-sr--static .asas-sr__progress{display:none}
.asas-sr--static .asas-sr__img--before{-webkit-mask-image:none;mask-image:none;opacity:1}
.asas-sr--static.is-after .asas-sr__img--before{opacity:0}
.asas-sr--static .asas-sr__label{display:none}
.asas-sr--static .asas-sr__toggle{display:inline-flex;position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);z-index:4;border:1px solid rgba(255,255,255,.7);background:rgba(0,12,26,.6);color:#fff;font:700 12px/1 var(--sr-font);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
.asas-sr--static .asas-sr__toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.asas-sr__cue svg{animation:none}.asas-sr__label{transition:none}}


/* ============================================================
   Framed variant — smaller box with page margin, used on project pages
   <div class="asas-sr-group">
     <section class="asas-sr asas-sr--framed">…</section>
     <div class="asas-sr-sep" role="separator"></div>
     <section class="asas-sr asas-sr--framed">…</section>
   </div>
   ============================================================ */
.asas-sr-group{background:#f4f6f9;padding:clamp(40px,7vh,80px) 0}
.asas-sr--framed{
  --sr-top: 112px;                                  /* clears the site's sticky header */
  --sr-box: min(calc(100vh - var(--sr-top) - 40px), 720px);
  height:calc(var(--sr-box) + var(--sr-length) * 1vh);
  background:transparent;
}
.asas-sr--framed .asas-sr__stage{
  top:var(--sr-top);
  height:var(--sr-box);
  width:min(1200px, calc(100% - 2 * clamp(16px, 5vw, 64px)));
  margin:0 auto;
  border-radius:8px;
  box-shadow:0 24px 60px -28px rgba(10,25,50,.45);
  background:#0b1622;
}
.asas-sr--framed .asas-sr__caption{bottom:clamp(16px,4vh,32px)}
.asas-sr-sep{
  display:block;position:relative;border:0;height:1px;overflow:visible;margin:clamp(36px,6vh,64px) auto;
  width:min(1200px, calc(100% - 2 * clamp(16px, 5vw, 64px)));
  background:linear-gradient(to right, transparent, #c9d0dc 15%, #c9d0dc 85%, transparent);
  opacity:1;
}
.asas-sr-sep::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--mellis-base, #003366);box-shadow:0 0 0 6px #f4f6f9;
}
@media (max-width:767px){
  .asas-sr--framed{--sr-top:84px; --sr-box: min(calc(100svh - var(--sr-top) - 24px), 560px)}
  .asas-sr--framed .asas-sr__caption{top:16px;bottom:auto}
}
.asas-sr--framed.asas-sr--static{height:auto}
.asas-sr--framed.asas-sr--static .asas-sr__stage{height:var(--sr-box)}

/* Framed width: max 80% of the screen on tablet/desktop, edge-to-edge on phones (5 Oct 2026) */
@media (min-width:768px){
  .asas-sr--framed .asas-sr__stage,
  .asas-sr-sep{width:min(80%, 1600px)}
}
@media (max-width:767px){
  .asas-sr--framed .asas-sr__stage{width:100%;border-radius:0;box-shadow:none}
  .asas-sr-sep{width:calc(100% - 32px)}
}

/* Phones (5 Oct 2026): "Before" label at the top, "After" label bottom-left, caption bottom-right */
@media (max-width:767px){
  .asas-sr .asas-sr__label--before{top:16px;bottom:auto;left:16px}
  .asas-sr .asas-sr__label--after{top:auto;bottom:16px;left:16px}
  .asas-sr .asas-sr__caption,
  .asas-sr--framed .asas-sr__caption{top:auto;bottom:16px;left:auto;right:16px;text-align:right;max-width:calc(100% - 120px)}
  .asas-sr .asas-sr__cue{top:16px;bottom:auto;right:16px;left:auto}
}