/* mortgage-device.css
   Only used by case-study-mortgages.html. Two jobs:
   1. Put every app screen inside an iPhone 16 Pro frame (.mg-bz).
   2. Small animations. All motion is wrapped in "no-preference" media queries or in
      the .mg-motion class that mortgage-motion.js adds, so people who ask their
      system for less motion see a still page, and nothing is hidden without JavaScript. */

/* ---------- 1. iPhone 16 Pro frame ----------
   Screen 402x874 + black bezel (2.6% each side) + titanium edge + side buttons.
   Corner radii are percentages, so the frame scales with its width. */
.mg-bz{
  --edge:#76777c;
  position:relative;isolation:isolate;display:block;box-sizing:border-box;width:100%;
  padding:2.6%;background:#0d0e10;border-radius:15%/7.1%;
  box-shadow:inset 0 0 0 1.5px var(--edge),inset 0 0 0 3px #2b2c30,0 28px 48px -26px #12263a8c;
  transition:translate .8s cubic-bezier(.2,.8,.2,1),opacity .8s ease;
}
/* Dynamic Island, with a tiny camera dot */
.mg-bz::before{
  content:"";position:absolute;z-index:3;top:2.46%;left:50%;width:29.7%;height:4.16%;
  transform:translateX(-50%);border-radius:99px;pointer-events:none;
  background:radial-gradient(circle at 83% 50%,#1b2438 0 7%,transparent 8%),#050506;
}
/* Side buttons: action + volume on the left, power on the right */
.mg-bz::after{
  content:"";position:absolute;z-index:-1;inset:0 -1.1%;pointer-events:none;
  background:
    linear-gradient(var(--edge),var(--edge)) left 0 top 15%/3px 3.4% no-repeat,
    linear-gradient(var(--edge),var(--edge)) left 0 top 22%/3px 6.4% no-repeat,
    linear-gradient(var(--edge),var(--edge)) left 0 top 31%/3px 6.4% no-repeat,
    linear-gradient(var(--edge),var(--edge)) right 0 top 26%/3px 10% no-repeat;
}

/* Still screenshots (the three figures in the case study) */
.mortgage-case .mg-bz>img{
  display:block;width:100%;height:auto;max-height:none;aspect-ratio:402/874;
  object-fit:cover;object-position:top;border-radius:12.5%/5.75%;background:#f1f8f3;
}
.mortgage-case .cx-pair .cx-figure .fv-zoom,.mortgage-case .cx-story>.cx-figure .fv-zoom{max-width:300px;margin-inline:auto}

/* Interactive prototype: the screen scrolls inside the phone when the Figma frame is taller than the display */
.mg-proto-screen .mg-bz{max-width:320px}
.mg-bz-screen{
  position:relative;aspect-ratio:402/874;overflow-x:hidden;overflow-y:auto;
  border-radius:12.5%/5.75%;background:#f1f8f3;scrollbar-width:none;
}
.mg-bz-screen::-webkit-scrollbar{display:none}
.mg-bz .mg-phone.mg-phone-figma{width:100%}
.mg-bz .mg-figma-image{border-radius:0}

/* "Scroll" hint, shown only when there is more screen below */
.mg-bz-hint{
  position:absolute;z-index:4;left:50%;bottom:6%;translate:-50% 8px;opacity:0;pointer-events:none;
  padding:7px 12px 7px 14px;border-radius:99px;background:#27232cdd;color:#fff;
  font:500 10px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;
  transition:opacity .3s ease,translate .3s ease;
}
.mg-bz-hint::after{content:" ↓";display:inline-block}
.mg-bz.has-more:not(.is-scrolled) .mg-bz-hint{opacity:1;translate:-50% 0}

/* Hotspot press feedback (always on; it is a response, not decoration) */
.mg-figma-spot{transition:background .15s ease,transform .12s ease}
.mg-figma-spot:active{background:#009bbc33;transform:scale(.97)}
.mg-proto-tabs button:active{transform:scale(.97)}

/* ---------- 2. Motion ---------- */
@keyframes mgIsland{        /* the island stretches, like it does when an app does something */
  0%,100%{width:29.7%}
  35%{width:40%}
  60%{width:36%}
}
@keyframes mgScreenIn{      /* a screen arrives */
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes mgHintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes mgDotRing{0%{box-shadow:0 0 0 5px #f3f0f6,0 0 0 5px #17a8bd88}100%{box-shadow:0 0 0 5px #f3f0f6,0 0 0 16px #17a8bd00}}

@media (prefers-reduced-motion:no-preference){
  /* Prototype */
  .mg-proto-screen .mg-bz::before{animation:mgIsland .9s .08s ease-in-out}
  .mg-bz-screen>.mg-phone{animation:mgScreenIn .42s cubic-bezier(.2,.8,.2,1)}
  .mg-bz.has-more:not(.is-scrolled) .mg-bz-hint::after{animation:mgHintBounce 1.2s ease-in-out infinite}
  .mg-proto-tabs button:hover{transform:translateY(-1px)}

  /* The island wakes up when a phone scrolls into view */
  .mg-bz.is-ping::before{animation:mgIsland .9s ease-in-out}

  /* Cards: a small lift on hover */
  .mg-decisions article,.mg-integration-notes article{transition:translate .25s ease,box-shadow .25s ease,border-color .25s ease}
  .mg-decisions article:hover{translate:0 -3px;border-top-color:#69488f}
  .mg-integration-notes article:hover{translate:0 -4px;box-shadow:0 14px 26px -18px #332b3e66}

  /* Scroll reveals. Only active once mortgage-motion.js adds .mg-motion, so without JavaScript everything stays visible. */
  .mg-motion .mg-bz[data-mg-phone]:not(.is-in){opacity:0;translate:0 44px}
  .mg-motion .mg-timeline li{opacity:0;translate:0 16px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*.16s)}
  .mg-motion .mg-timeline li::before{scale:0;transition:scale .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i,0)*.16s + .2s)}
  .mg-motion .mg-timeline.is-in li{opacity:1;translate:0 0}
  .mg-motion .mg-timeline.is-in li::before{scale:1}
  .mg-motion .mg-timeline.is-in li:last-child::before{animation:mgDotRing 1.8s 1.1s ease-out 3}
  .mg-motion .mg-bar>span{clip-path:inset(0 100% 0 0 round 5px);transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}
  .mg-motion .mg-bar-after>span{transition-delay:.25s}
  .mg-motion .mg-bars.is-in .mg-bar>span{clip-path:inset(0 0 0 0 round 5px)}
}

@media (max-width:760px){.mg-proto-screen .mg-bz{max-width:300px}}

/* Stops "38% → 88%" from jittering while it counts up */
.mortgage-case .mg-metrics strong{font-variant-numeric:tabular-nums}

/* Fixed status bar: when the prototype screen is scrolled, content slides under a frosted status bar
   instead of running behind the Dynamic Island. Hidden at the top, where the Figma image has its own. */
.mg-bz-glass{position:absolute;z-index:2;inset:1.23% 2.6%;border-radius:12.5%/5.75%;overflow:hidden;pointer-events:none;container-type:inline-size}
.mg-bz-status{
  display:flex;align-items:center;justify-content:space-between;height:6.4%;min-height:0;padding:0 7.5% 0 9%;box-sizing:border-box;
  background:color-mix(in srgb,var(--glass,#f1f8f3) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .2s ease;
}
.mg-bz.is-scrolled .mg-bz-status{opacity:1}
.mg-bz-status b{font:600 4.1cqw/1 'DM Sans',sans-serif;color:#091723}
.mg-bz-status svg{width:16.5cqw;height:auto}