/* Maveryk homepage — autoplaying story hero (assets/story.js).
   One screen: the story video plays behind the headline while website
   overlays (call card, conversation, bookings) appear in time with it.
   Without JS, with reduced motion, or if autoplay is blocked, it shows the
   poster with the day's story as a still, plus a play button. */

.story{position:relative;background:#19252E}
.story-stage{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden}

.story-poster,.story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.story-video{opacity:0;transition:opacity .6s ease}
.story.has-video .story-video{opacity:1}

/* Keeps the headline, nav and overlays readable on the brightest frame. */
.story-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(25,37,46,.94) 0%,rgba(25,37,46,.78) 28%,rgba(25,37,46,.2) 56%,rgba(25,37,46,0) 72%),
    linear-gradient(180deg,rgba(25,37,46,.8) 0%,rgba(25,37,46,0) 20%),
    linear-gradient(0deg,rgba(25,37,46,.85) 0%,rgba(25,37,46,0) 26%)}

/* ---- ringing-phone highlight (dinner scene): positioned per frame by story.js ---- */
.phone-ping{--pp:96px;position:absolute;left:0;top:0;z-index:2;width:var(--pp);height:var(--pp);margin:calc(var(--pp) / -2) 0 0 calc(var(--pp) / -2);
  pointer-events:none;opacity:0;transition:opacity .45s ease;will-change:transform}
.phone-ping.is-on{opacity:1}
.pp-core{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(54,207,255,.6),rgba(54,207,255,0) 70%);animation:ppGlow 1.1s ease-in-out infinite}
.pp-ring{position:absolute;inset:26%;border-radius:50%;border:2px solid #36CFFF;box-shadow:0 0 12px rgba(54,207,255,.6);animation:ppRing 1.6s ease-out infinite}
.pp-r2{animation-delay:.8s}
.pp-arcs{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#36CFFF;stroke-width:3.5;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(54,207,255,.8));animation:ppBuzz 1.1s linear infinite}
@keyframes ppRing{0%{transform:scale(.55);opacity:.95}100%{transform:scale(2.1);opacity:0}}
@keyframes ppGlow{0%,100%{transform:scale(.85);opacity:.65}50%{transform:scale(1.25);opacity:1}}
/* buzz in bursts, like a real phone on vibrate: shake, shake, rest */
@keyframes ppBuzz{0%,8%,16%,24%,32%{transform:translateX(-2px)}4%,12%,20%,28%,36%{transform:translateX(2px)}40%,100%{transform:none;opacity:.55}}

/* ---- copy (left) ---- */
.story-copy{position:absolute;left:0;right:0;top:clamp(96px,16vh,160px);z-index:3}
.story-copy > *{max-width:560px}
.story .display{font-size:clamp(40px,4.6vw,62px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.story .display em{display:block}

/* ---- key benefit chips: stay visible on desktop ---- */
.story-chips-wrap{position:absolute;left:0;right:0;bottom:28px;z-index:3;transition:opacity .4s ease,transform .4s ease}
.story-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:calc(100% - 440px)}
.story-chips li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;
  background:rgba(25,37,46,.72);border:1px solid rgba(211,222,228,.16);backdrop-filter:blur(8px);
  font:700 15px var(--ui);color:#D3DEE4}
.story-chips svg{width:20px;height:20px;fill:none;stroke:#36CFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- story overlays (right) ---- */
.story-ui{position:absolute;z-index:3;right:max(24px,calc((100vw - 1180px)/2 + 24px));bottom:clamp(84px,10vh,110px);width:min(380px,calc(100vw - 48px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.sc-chapters{position:relative;width:100%;height:30px}
.sc-chapter{position:absolute;bottom:0;right:0;margin:0;padding:6px 12px;border-radius:999px;background:rgba(25,37,46,.8);border:1px solid rgba(54,207,255,.4);
  color:#36CFFF;font:700 13px var(--ui);letter-spacing:.04em;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.sc-chapter.is-on{opacity:1;transform:none}

.sc-stack{display:grid;width:100%;position:relative}
.sc-card{width:100%;background:#EDF2F5;color:#19252E;border-radius:14px;padding:16px 16px 14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s ease,transform .5s ease;grid-area:1/1;align-self:end}
/* only the visible card takes up space, so the chapter label sits right above it */
.sc-card:not(.is-on){position:absolute;left:0;right:0;bottom:0}
.sc-card.is-on{opacity:1;transform:none}
.sc-call-top{display:flex;align-items:center;gap:12px}
.sc-ring{width:40px;height:40px;border-radius:50%;background:#19252E;flex:none;position:relative}
.sc-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#36CFFF}
.sc-call:not(.is-answered) .sc-ring::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #36CFFF;animation:mvkPing 1.2s ease-out infinite}
@keyframes mvkPing{from{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.35)}}
.sc-k{margin:0;font:800 15px var(--ui);color:#19252E}
.sc-call .sc-answered{display:none}
.sc-call.is-answered [data-state="ringing"]{display:none}
.sc-call.is-answered .sc-answered{display:block}
.sc-sub{margin:2px 0 0;font-size:13.5px;color:#5A5A63}
.sc-lines{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.sc-lines .ln{max-width:92%;padding:8px 11px;border-radius:10px;font-size:14.5px;line-height:1.45;display:none}
.sc-lines .ln.is-on{display:block;animation:mvkPop .4s ease both}
.sc-lines .ln .who{display:block;font-size:11.5px;font-weight:700;color:#5A5A63;margin-bottom:1px}
.sc-lines .ln.caller{background:#D3DEE4;align-self:flex-start}
.sc-lines .ln.agent{background:rgba(54,207,255,.22);border:1px solid #36CFFF;align-self:flex-end}
@keyframes mvkPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sc-booked{display:none;margin-top:12px;background:#19252E;color:#D3DEE4;border-radius:10px;padding:10px 12px;font-size:14.5px}
.sc-booked.is-on{display:block;animation:mvkPop .4s ease both}
.sc-booked strong{color:#36CFFF}
.sc-booked span{display:block;color:#ADAFBA;font-size:12.5px;margin-top:2px}
.sc-big{margin:6px 0 2px;font:800 22px/1.2 var(--ui);color:#19252E}
.sc-illus{margin:0;font-size:12px;color:#ADAFBA;opacity:0;transition:opacity .35s}
.sc-illus.is-on{opacity:1}

/* ---- pause / play (WCAG 2.2.2: moving content must be pausable) ---- */
/* sits in the screen corner, clear of the floor phone and the call cards */
.story-toggle{position:absolute;z-index:4;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(25,37,46,.72);border:1px solid rgba(211,222,228,.22);backdrop-filter:blur(8px)}
.story-toggle:hover{border-color:#36CFFF}
.story-toggle svg{width:18px;height:18px;fill:#D3DEE4}
.story-toggle .i-play{display:none}
.story-toggle[aria-pressed="true"] .i-pause{display:none}
.story-toggle[aria-pressed="true"] .i-play{display:block}

/* full benefits row after the hero */
.h-benefits-band{background:#19252E;padding:56px 0 64px;border-top:1px solid var(--line)}
.h-benefits-band .benefits-row{margin:0}

/* ---- tablets and phones ---- */
@media (max-width:960px){
  .story-copy > *{max-width:520px}
  .story-chips{max-width:none}
  .story-ui{left:24px;right:24px;width:auto;align-items:stretch}
  .sc-chapter{right:auto;left:0}
  .sc-illus{align-self:flex-start}
  /* chips share the bottom with the call card here, so they step aside once it appears */
  .story-stage.is-playing .story-chips-wrap{opacity:0;transform:translateY(16px)}
  /* the demo number is on the first screen and again just below in the demo section */
  .story .h-ring{transition:opacity .35s ease}
  .story-stage.is-playing .h-ring{opacity:0}
  /* compact call card: the two latest messages, then just the booking */
  .sc-call.has-l3 .ln[data-line="1"]{display:none}
  .sc-call.is-booked .sc-lines{display:none}
}
@media (max-width:640px){
  .story-copy{top:84px}
  .story .display{font-size:clamp(34px,9.6vw,42px)}
  .story .h-lede{font-size:16.5px;margin-top:14px}
  .story .h-actions{margin-top:18px}
  .story .h-actions .btn{flex:1 1 calc(50% - 6px);padding-left:12px;padding-right:12px}
  .story .h-ring{font-size:15px}
  .story-chips-wrap{bottom:76px}
  .story-chips{gap:6px}
  .story-chips li{font-size:13px;padding:7px 11px 7px 9px}
  .story-chips svg{width:16px;height:16px}
  .story-ui{left:16px;right:16px;bottom:72px}
  .story-toggle{right:16px;bottom:16px}
  .sc-card{padding:12px 12px 10px}
  .sc-lines{margin-top:9px;gap:6px}
  .sc-lines .ln{font-size:14px;padding:7px 10px}
  .sc-booked{margin-top:9px;padding:9px 10px;font-size:14px}
  .story-scrim{background:
    linear-gradient(180deg,rgba(25,37,46,.92) 0%,rgba(25,37,46,.72) 48%,rgba(25,37,46,.25) 66%,rgba(25,37,46,.7) 100%)}
}
@media (max-height:700px) and (max-width:640px){
  .story .h-lede{display:none}
}
@media (prefers-reduced-motion: reduce){
  .sc-card,.sc-chapter,.story-video,.story-chips-wrap{transition:none}
  .sc-ring::after,.sc-lines .ln.is-on,.sc-booked.is-on,.pp-core,.pp-ring,.pp-arcs{animation:none}
  .pp-r2{display:none}
}