/* The story (preview). One phone stays on screen, and each scroll, key press, swipe or tap moves it to the next screen of the
   app, like slides: no fading or sliding between them. preview.js drives it; this file is how it looks. */

  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0;}

  .story{padding:0; position:relative; background:var(--bg); overflow-x:clip;}
  .story-track{position:relative; height:calc(var(--steps) * 60vh + 22vh);}
  .story-stage{
    position:sticky; top:64px; height:calc(100vh - 64px); height:calc(100svh - 64px);
    max-width:1120px; margin-inline:auto; padding:16px 20px 24px;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(20px, 5vw, 72px);
  }
  /* soft light behind the phone, tinted by the category colour of the screen. Five fixed layers, one showing at a time. */
  .glows{position:absolute; inset:-6% -30%; z-index:0; pointer-events:none;}
  .glows i{position:absolute; inset:0; opacity:0;
    background:
      radial-gradient(closest-side at 72% 50%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%),
      radial-gradient(closest-side at 18% 88%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%);}
  .glows i.on{opacity:1;}
  .story-copy, .story-cell{position:relative; z-index:1;}

  /* captions: all stacked in one cell, so the box is as tall as the tallest one; the current one shows */
  .story-copy{display:grid; align-self:center;}
  .cap{grid-area:1 / 1; opacity:0; pointer-events:none;}
  .cap.on{opacity:1; pointer-events:auto;}
  .cap .kicker{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pink-text);}
  .cap .kicker b{font-family:'Baloo 2',sans-serif; font-size:15px; letter-spacing:.02em;}
  .cap h2{font-size:clamp(34px, 4.8vw, 58px); font-weight:800; letter-spacing:-0.015em; margin-top:12px; max-width:15ch;}
  .cap p{font-size:clamp(17px, 1.7vw, 20px); color:var(--muted); margin-top:18px; max-width:34ch;}

  /* the phone */
  .story-cell{height:100%; min-height:0; display:flex; align-items:center; justify-content:center;}
  .story-phone{
    position:relative; height:min(100%, 780px); aspect-ratio:640 / 1385; max-width:100%;
    padding:9px; border-radius:46px; background:var(--bezel);
    box-shadow:var(--shadow), 0 0 0 1.5px rgba(255,255,255,0.07) inset;
    transform:perspective(1400px) rotateY(-6deg);
  }
  .screen{position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden; background:#0B0A1F; container-type:size; isolation:isolate;}
  .scr{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; background:#0B0A1F;}
  .scr.on{opacity:1;}

  /* a clean status bar and the camera island, drawn over the screenshots */
  .sb{position:absolute; z-index:3; top:1.35%; left:0; right:0; height:3.4%; padding:0 7% 0 9.4%; display:flex; align-items:center; justify-content:space-between;
      font-size:clamp(9px, 3.7cqw, 18px); font-weight:600; color:#fff; font-family:-apple-system, 'Inter', sans-serif; letter-spacing:.01em; pointer-events:none;}
  .sb.dark{color:#15122e;}
  .sb-icons{display:flex; align-items:center; gap:.42em;}
  .sb-icons svg{height:.78em; width:auto; display:block;}
  .island{position:absolute; z-index:4; top:1.25%; left:50%; width:31%; height:3.7%; margin-left:-15.5%; border-radius:99px; background:#000; pointer-events:none;}

  /* previous / next arrows and the dots between them: tap any to go to that screen */
  .story-nav{position:absolute; z-index:5; right:-38px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center;}
  .story-arrow, .story-dot{display:flex; align-items:center; justify-content:center; width:32px; height:28px; padding:0; border:0; background:none; cursor:pointer; color:var(--muted);}
  .story-arrow{height:34px; border-radius:50%;}
  .story-arrow svg{width:18px; height:18px;}
  .story-arrow:hover:not(:disabled){color:var(--text);}
  .story-arrow:disabled{opacity:.3; cursor:default;}
  .story-dot::before{content:''; width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--muted) 45%, transparent);}
  .story-dot.on::before{background:var(--pink); transform:scale(1.45);}

  @media (max-width:900px){
    .story-stage{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:14px; padding:10px 18px 18px; align-items:stretch;}
    .story-cell{order:-1;}
    .story-copy{min-height:196px; align-self:end;}
    .cap h2{font-size:clamp(28px, 8vw, 38px); margin-top:8px; max-width:none;}
    .cap p{font-size:16px; margin-top:10px; max-width:none;}
    .cap .kicker{font-size:12px;}
    .story-phone{border-radius:38px; padding:7px; transform:perspective(1200px) rotateY(-3deg);}
    .screen{border-radius:31px;}
    .story-nav{right:-4px;}
    .story-arrow, .story-dot{height:24px;}
    .story-arrow{height:30px;}
    .glows{inset:-6% -60%;}
  }
  @media (max-height:640px) and (max-width:900px){
    .story-copy{min-height:150px;}
    .cap p{display:none;}
  }