/* ══════════════════════════════════════════════════════════
   IN-APP BROWSER SHEET
   Mimics the Instagram/Facebook in-app browser: a sheet rises
   from the bottom, header tinted from the demo's own theme
   colour, domain centred, site inside.

   Driven by a sticky stage + scroll progress — the page never
   stops scrolling normally, so nothing is hijacked on touch.
   ══════════════════════════════════════════════════════════ */

/* site.css sets section{padding:72px 40px;contain:layout style} — the stage
   must be full-bleed, and `contain` would box in the sticky viewport. */
.stage{position:relative;height:230vh;padding:0;contain:none;}
@media(max-width:900px){.stage{height:200vh;}}

.stage-vp{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}

/* Dimmed backdrop, matches the feed receding behind the sheet */
.stage-dim{
  position:absolute;inset:0;background:#000;
  opacity:calc(var(--p,0) * 0.72);
  transition:opacity .1s linear;pointer-events:none;
}

/* The sheet itself */
.sheet{
  position:relative;
  width:100%;max-width:var(--sheet-w,420px);
  height:calc(100vh - 34px);
  background:#fff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 60px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform:translate3d(0,calc((1 - var(--p,0)) * 100%),0);
  will-change:transform;
}
@media(max-width:900px){
  .sheet{max-width:100%;height:calc(100vh - 26px);border-radius:18px 18px 0 0;}
}

/* Grab handle */
.sheet-grab{
  flex-shrink:0;padding:8px 0 5px;background:var(--tint,#1c1c1e);
  display:flex;justify-content:center;
}
.sheet-grab::before{
  content:'';width:38px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.42);
}

/* Tinted header — the browser chrome */
.sheet-bar{
  flex-shrink:0;background:var(--tint,#1c1c1e);color:#fff;
  padding:9px 14px 13px;
  display:flex;align-items:center;gap:10px;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
}
.sheet-lock{opacity:.62;flex-shrink:0;}
.sheet-domain{
  flex:1;text-align:center;font-size:15px;font-weight:600;
  letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sheet-x{
  flex-shrink:0;width:26px;height:26px;border:none;background:none;
  color:#fff;opacity:.75;cursor:pointer;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.sheet-x:hover{opacity:1;background:rgba(255,255,255,.14);}
.sheet-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* The demo itself */
.sheet-frame{
  flex:1;width:100%;border:0;background:#fff;display:block;
  /* stays inert until the sheet is fully up, so a scrolling finger
     is never captured mid-animation */
  pointer-events:none;
}
.stage.is-open .sheet-frame{pointer-events:auto;}

/* Loading shimmer behind the frame until it paints */
.sheet-load{
  position:absolute;inset:auto 0 0;top:74px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#8a8a8a;font-size:13px;gap:9px;
  font-family:'Inter',sans-serif;
}
.sheet-load.gone{display:none;}
.sheet-spin{
  width:15px;height:15px;border:2px solid rgba(0,0,0,.13);
  border-top-color:rgba(0,0,0,.45);border-radius:50%;
  animation:sheetSpin .7s linear infinite;
}
@keyframes sheetSpin{to{transform:rotate(360deg);}}

/* Hint that scrolling brings it up */
.stage-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:26px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(232,232,232,.6);
  opacity:calc(1 - var(--p,0) * 2.6);pointer-events:none;
}
.stage-hint svg{animation:hintBob 1.7s ease-in-out infinite;}
@keyframes hintBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* Open full screen / reset, sits under the stage */
.stage-tools{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:26px 20px 0;
}

@media(prefers-reduced-motion:reduce){
  .sheet{transform:none;opacity:calc(.15 + var(--p,0));}
  .stage{height:auto;}
  .stage-vp{position:static;height:auto;padding:20px 0;}
  .sheet-frame{pointer-events:auto;}
  .stage-hint,.sheet-grab::before{animation:none;}
}