/* Animated hero (front page), inspired by the Fourth Wing wide animation
   (marketing/Content/magic-bookmark-animations/fourth-wing/fourth-wing-wide.html).
   The phone screen is authored in iPhone app points (393x852) and scaled with --s,
   so its contents match the real app layout. hero.js drives the timeline. */

.hero.hero-anim{
  padding:48px 0 64px;
  background:linear-gradient(90deg,#1a2526 0%,#273b3e 38%,#344e53 100%);
  isolation:isolate;
}
.hero.hero-anim:before{display:none}
.hero-anim .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;min-height:640px}
.hero-anim h1{font-size:clamp(40px,5.6vw,68px);margin:18px 0 22px;color:var(--aqua-50);text-wrap:balance}
.hero-anim p.lede{color:var(--aqua-200)}
.hero-anim .eyebrow{color:var(--brown-250)}

/* ---------- cover wall: drifting columns behind the phone */
.hero-wall{position:absolute;inset:-10% -6% -10% 34%;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.hero-wall-tilt{position:absolute;inset:-20% -10%;display:flex;gap:18px;justify-content:center;transform:rotate(-9deg);opacity:var(--wall-o,.22);transition:opacity 1.2s ease}
.hero-wall-col{display:flex;flex-direction:column;gap:18px;flex:0 0 118px;animation:hero-wall-up 70s linear infinite}
.hero-wall-col:nth-child(even){animation-name:hero-wall-down;animation-duration:84s}
.hero-wall-col img{width:118px;height:177px;border-radius:6px;object-fit:cover;display:block;box-shadow:0 10px 26px rgba(0,0,0,.45)}
@keyframes hero-wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes hero-wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero-anim.is-paused .hero-wall-col{animation-play-state:paused}
/* the wall comes forward between loops: the phone shrinks into it and the next cover flies out of it */
.hero-anim.wall-up{--wall-o:.6}

/* ---------- stage: phone + step indicator */
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;--s:.74}
.mb-phone{position:relative;transform-origin:50% 50%;width:calc(393px * var(--s));height:calc(852px * var(--s));border-radius:calc(56px * var(--s));overflow:hidden;
  background:#12191A;box-shadow:0 0 0 1.5px #3d494b,0 0 0 9px #070a0b,0 0 0 10.5px #556365,0 0 0 12px #1a2021,0 40px 90px rgba(0,0,0,.5)}
.mb-screen{position:absolute;left:0;top:0;width:393px;height:852px;transform:scale(var(--s));transform-origin:0 0;
  font-family:"Nunito Sans",sans-serif;color:#F6F3F2;overflow:hidden}
.mb-screen *{box-sizing:border-box}
.mb-screen .a{position:absolute}
.mb-island{position:absolute;left:135px;top:11px;width:123px;height:36px;border-radius:20px;background:#000;z-index:9}
.mb-home{position:absolute;left:129px;top:838px;width:135px;height:5px;border-radius:100px;background:#DBD0CC;z-index:9}
.mb-b{font-weight:700}
.mb-body{font-size:14px;line-height:19px}

/* camera */
.mb-scan{position:absolute;inset:0;background:#1F1916;overflow:hidden}
/* the real Fourth Wing scan footage, framed as in the animation (393pt wide, 30pt above the top) */
.mb-cam{position:absolute;left:0;top:-30px;width:393px;height:698.67px;object-fit:cover;display:block}
.mb-cutout{position:absolute;left:26px;top:108px;width:343px;height:466px;box-shadow:0 0 0 1200px rgba(0,0,0,.66)}
.mb-dim{position:absolute;left:26px;top:108px;width:343px;height:466px;background:rgba(0,0,0,.45)}
.mb-corner{position:absolute;width:40px;height:40px;border:0 solid #E7EFEF}
.mb-corner.tl{left:23px;top:105px;border-top-width:6px;border-left-width:6px}
.mb-corner.tr{left:332px;top:105px;border-top-width:6px;border-right-width:6px}
.mb-corner.bl{left:23px;top:537px;border-bottom-width:6px;border-left-width:6px}
.mb-corner.br{left:332px;top:537px;border-bottom-width:6px;border-right-width:6px}
.mb-scanline{position:absolute;left:46px;top:119px;width:303px;height:5px;border-radius:3px;background:#F6F3F2;
  box-shadow:0 0 12px 4px rgba(255,255,255,.95),0 0 56px 20px rgba(205,236,236,.38)}
.mb-pillwrap{position:absolute;left:0;right:0;top:322px;display:flex;justify-content:center}
.mb-pill{padding:9px 18px;border-radius:100px;background:rgba(18,25,26,.72);font-size:14px;line-height:19px;white-space:nowrap}
.mb-iconbtn{position:absolute;border-radius:100px;display:grid;place-items:center}
.mb-shutter-ring{position:absolute;left:162px;top:687px;width:69px;height:69px;border-radius:50%;border:4px solid #fff}
.mb-shutter-core{position:absolute;left:169.4px;top:694.4px;width:54.2px;height:54.2px;border-radius:50%;background:#fff}
.mb-cambar{position:absolute;left:0;top:747px;width:393px;height:105px;background:linear-gradient(to bottom,rgba(18,25,26,0),rgba(18,25,26,.85))}
.mb-mode{position:absolute;top:20px;font-size:14px;line-height:19px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;font-weight:700}
.mb-accurate{position:absolute;left:128px;top:47px;display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:8px;background:#2B3F40;font-size:14px;line-height:19px}
.mb-flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:8}

/* app */
.mb-app{position:absolute;inset:0;background:#12191A}
.mb-cover{position:absolute;left:66px;top:59px;width:56px;height:81px;border-radius:5px;object-fit:cover}
.mb-title{position:absolute;left:134px;top:64.8px;font-size:20px;line-height:27px;font-weight:700;white-space:nowrap}
.mb-track{position:absolute;left:138.5px;top:103.3px;width:128px;height:4px;border-radius:100px;background:#2B3F40;overflow:hidden}
.mb-fill{width:46px;height:4px;border-radius:100px;background:#F6F3F2;transform-origin:0 50%}
.mb-pct{position:absolute;left:274.6px;top:95.8px;font-size:14px;line-height:19px;font-weight:700}
.mb-pagel{position:absolute;left:134px;top:114.8px;white-space:nowrap}
.mb-tabtrack{position:absolute;left:24px;top:163.6px;width:345px;height:59px;border-radius:100px;background:#2B3F40}
.mb-tabind{position:absolute;left:32px;top:171.6px;width:110px;height:43px;border-radius:100px;background:#507576}
.mb-tab{position:absolute;top:183.6px;display:flex;align-items:center;gap:7px;font-size:14px;line-height:19px;font-weight:700}
.mb-content{position:absolute;left:0;top:238.6px;width:393px;height:613.4px;overflow:hidden}
.mb-panel{position:absolute;inset:0}
.mb-card{position:absolute;left:0;top:0;width:393px;height:430px;display:grid;place-items:center}
.mb-card p{width:313px;font-family:"Sedan",serif;font-size:24px;line-height:29px;color:#DBD0CC;text-align:center;margin:0}
.mb-dots{position:absolute;left:158px;top:440px;display:flex;gap:8px}
.mb-dots i{width:9px;height:9px;border-radius:50%;background:#DBD0CC;opacity:.2}
.mb-nothing{position:absolute;left:0;top:466px;width:393px;text-align:center;opacity:.8}
.mb-cast{position:absolute;left:36px;top:10px;width:321px}
.mb-cast h3{font-family:"Nunito Sans",sans-serif;font-size:16px;line-height:22px;font-weight:700;margin:0 0 12px;letter-spacing:0;transform-origin:0 50%}
.mb-row{display:flex;align-items:center;gap:12px;padding:10px 0;margin-bottom:4px}
.mb-avatar{flex:none;width:43px;height:43px;border-radius:50%;background:#507576;display:grid;place-items:center;font-size:16px}
.mb-row .t{width:266px}
.mb-ctx{position:absolute;left:36px;top:8px;width:321px;text-align:center}
.mb-mark{position:relative;display:inline-block;padding:3px 10px}
.mb-hl{position:absolute;inset:0;border-radius:9px;background:rgba(182,158,150,.55);transform-origin:0 50%}
.mb-mark span{position:relative;opacity:.85}
.mb-ubub{position:absolute;right:36px;top:52px;max-width:280px;padding:12px 24px;border-radius:20px;background:#2B3F40}
.mb-typing{position:absolute;left:36px;top:120px;display:flex;gap:5px;padding:13px 14px;border-radius:20px;background:#192424}
.mb-typing i{width:7px;height:7px;border-radius:50%;background:rgba(246,243,242,.7);animation:mb-dot 1s ease-in-out infinite}
.mb-typing i:nth-child(2){animation-delay:.15s}.mb-typing i:nth-child(3){animation-delay:.3s}
@keyframes mb-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.mb-answer{position:absolute;left:36px;top:120px;width:280px;padding:8px 12px;border-radius:20px;background:#192424}
.mb-composer{position:absolute;left:24px;top:742.2px;width:345px}
.mb-field{position:absolute;left:0;top:1px;width:281px;height:50px;border-radius:25px;background:#3E2F2A;padding:0 0 0 25px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.mb-field .ph{opacity:.75}
.mb-caret{display:inline-block;width:1.5px;height:18px;margin-left:1px;background:#F6F3F2;vertical-align:middle}
.mb-send{position:absolute;left:293px;top:0;width:52px;height:52px;border-radius:50%;background:#293D3D;display:grid;place-items:center}
.mb-hint{position:absolute;left:0;top:59px;width:345px;text-align:center;opacity:.6}

/* the cover that flies out of the wall into the viewfinder (positioned by hero.js, in hero coordinates) */
.hero-fly{position:absolute;left:0;top:0;width:100px;height:150px;object-fit:fill;border-radius:3px;z-index:5;pointer-events:none;opacity:0;
  transform-origin:50% 50%;box-shadow:0 20px 50px rgba(0,0,0,.45)}

/* the snapped photo, cropped to the viewfinder, flies into the header's cover slot */
.mb-snap{position:absolute;left:26px;top:108px;width:343px;height:466px;transform-origin:0 0;border-radius:4px;overflow:hidden;opacity:0;z-index:7}
.mb-snap canvas{display:block;width:100%;height:100%}
.mb-snapdim{position:absolute;inset:0;background:#000;opacity:.5}

/* step indicator + pause */
.hero-steps{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:6px;border-radius:100px;background:rgba(18,25,26,.5)}
.hero-steps li{display:block}
.hero-steps button{font:inherit;font-family:var(--sans);font-size:13px;line-height:1;padding:8px 14px;border:0;border-radius:100px;background:transparent;color:var(--aqua-250);cursor:pointer;transition:background .4s,color .4s}
.hero-steps button:hover{color:#F6F3F2}
.hero-steps button:focus-visible{outline:2px solid var(--brown-250);outline-offset:2px}
.hero-steps button.on{background:#2B3F40;color:#F6F3F2}
.hero-pause{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--aqua-250);display:grid;place-items:center;cursor:pointer;padding:0}
.hero-pause:hover{color:#F6F3F2}
.hero-pause:focus-visible{outline:2px solid var(--brown-250);outline-offset:2px}
.hero-pause .play{display:none}
.is-paused .hero-pause .play{display:block}
.is-paused .hero-pause .pause{display:none}

@media(max-width:900px){
  .hero.hero-anim{padding:44px 0 56px;background:linear-gradient(180deg,#1a2526 0%,#273b3e 45%,#344e53 100%)}
  .hero-anim .hero-grid{grid-template-columns:1fr;min-height:0;gap:44px}
  .hero-wall{inset:38% -20% -10% -20%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
  .hero-stage{--s:.7}
}
@media(max-width:460px){
  .hero-stage{--s:.64}
  .hero-steps button{padding:7px 10px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.hero-wall-col,.mb-typing i{animation:none}}