/* Order tracking scroll slider, ported from the Oct 2026 prototype with the chosen options baked in:
   glow contrast, drift layout, glass frames, ink-on-page illustrations, handwritten sentence captions. */
.ot-slider{--sage:#dbe2dc;--ink-soft:#4e6b75;--step:70vh;--hand:"Kalam","Comic Sans MS",cursive;--hand-size:17px}
.ot-slider .track{position:relative;height:calc(var(--step) * 7 + 100vh)}
.ot-slider .stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.ot-slider .glow{position:absolute;width:min(105vh,100vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,96,70,.85), rgba(255,128,96,.7) 32%, rgba(255,170,125,.45) 55%, rgba(255,214,170,.2) 78%, rgba(219,226,220,0) 100%);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.ot-slider .scene{position:relative;width:min(1240px,100%);height:100%;display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:clamp(28px,5vw,88px);padding-inline:16px}
.ot-slider .side{position:relative;display:grid;align-items:center}
.ot-slider .side.left{justify-items:start}
.ot-slider .side.right{justify-items:end}
.ot-slider .slot{position:relative;width:clamp(150px,20vw,280px);aspect-ratio:1;margin-top:-56px;border-radius:20%;
  transform:translateY(calc(var(--dy, 0) * 20vh));transition:transform 1.2s cubic-bezier(.25,.8,.25,1), opacity .6s ease}
.ot-slider .slot.empty{opacity:0}
.ot-slider .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.96);border-radius:20%;
  transition:opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ot-slider .slot img.on{opacity:1;transform:scale(1)}
.ot-slider .cap{position:absolute;top:calc(100% + 14px);left:0;right:0;text-align:center;font-family:var(--hand);font-size:var(--hand-size);line-height:1.25;color:var(--ocean)}
.ot-slider .cap .sent{display:block;transition:opacity .3s ease}
.ot-slider .cap .sent.out{opacity:0}
.ot-slider .cap .sent em{font-style:normal;font-weight:700;color:inherit;padding:0 .18em;margin:0 -.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23ff856d' fill-opacity='.7' d='M4 9 C30 5 70 4 116 7 C118 12 117 20 114 24 C80 26 40 27 6 25 C2 20 2 14 4 9Z'/%3E%3C/svg%3E") center 68%/104% 72% no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Glass material (frames, arrows, dots) */
.ot-slider .glass{position:relative;isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.16) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 0 14px rgba(255,255,255,.22),
             0 10px 26px -14px rgba(51,87,101,.45), 0 1px 2px rgba(51,87,101,.08)}
.ot-slider .glass::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%)}
.ot-slider .glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;z-index:3;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.1) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* Phone (iPhone 16 proportions from Figma: 4 titanium, 8 bezel, radii 62/58/52) */
.ot-slider .center{display:grid;justify-items:center;gap:22px}
@keyframes ot-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * -9))}}
.ot-slider .phone{--w:min(25vw, 34vh, 330px);--u:calc(var(--w) / 377);width:var(--w);aspect-ratio:377/785;position:relative;
  border-radius:calc(var(--u) * 62);padding:calc(var(--u) * 4);animation:ot-levitate 4.8s ease-in-out infinite;
  background:linear-gradient(160deg,#efeccb 0%,#e7e3bf 30%,#d9d4ae 70%,#ebe8c8 100%);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(82,75,64,.55), inset 0 0 calc(var(--u) * 3) rgba(82,75,64,.35),
             0 calc(var(--u) * 40) calc(var(--u) * 70) calc(var(--u) * -30) rgba(51,87,101,.45)}
.ot-slider .phone .pbtn{position:absolute;width:calc(var(--u) * 3.5);border-radius:calc(var(--u) * 2);background:linear-gradient(90deg,#cfc9a3,#ece8c9);
  box-shadow:inset 0 0 0 calc(var(--u) * .6) rgba(82,75,64,.35)}
.ot-slider .phone .pbtn.l{left:calc(var(--u) * -3)}
.ot-slider .phone .pbtn.r{right:calc(var(--u) * -3)}
.ot-slider .bezel{position:relative;width:100%;height:100%;background:#000;border-radius:calc(var(--u) * 58);padding:calc(var(--u) * 8);
  box-shadow:inset 0 0 0 calc(var(--u) * .4) rgba(255,255,255,.6), inset 0 0 calc(var(--u) * 6) rgba(135,145,148,.35)}
.ot-slider .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--u) * 52);overflow:hidden;background:#f3efe4}
.ot-slider .shot{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:750/1624;transform:translateX(-50%);container-type:inline-size;overflow:hidden}
.ot-slider .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.ot-slider .screen img.on{opacity:1}
.ot-slider .pbar{position:absolute;z-index:3;left:4.267%;width:91.47%;top:var(--pt,21.8%);height:.985%;border-radius:999px;background:#f2f2f3;overflow:hidden;transition:top .45s ease}
.ot-slider .pbar i{display:block;height:100%;width:var(--pw,9.9%);background:#009e81;border-radius:999px;transition:width 1s cubic-bezier(.45,.05,.2,1)}
.ot-slider .moto{position:absolute;z-index:1;width:24.13%;aspect-ratio:1;left:var(--mx,63.3%);top:var(--my,71.6%);opacity:0;
  transform:translate(-50%,-50%) rotate(var(--mr,95.4deg)) scale(var(--ms,1));
  filter:drop-shadow(calc(100cqw * 10 / 375) calc(100cqw * 6 / 375) calc(100cqw * 6 / 375) rgba(0,0,0,.25));
  transition:left 1.1s cubic-bezier(.45,.05,.25,1), top 1.1s cubic-bezier(.45,.05,.25,1), transform 1.1s cubic-bezier(.45,.05,.25,1), opacity .4s ease}
.ot-slider .moto.on{opacity:1}
.ot-slider .moto img{position:static;width:100%;height:100%;opacity:1;display:block}
.ot-slider .mapz{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.45,.05,.25,1)}
.ot-slider .mapz.zoom{transform:translate(19.71%,-19.21%) scale(1.6)}
.ot-slider .route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease}
.ot-slider .route.on{opacity:1}
.ot-slider .route path{fill:none;stroke:url(#rg);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:249.9 249.9;stroke-dashoffset:var(--ro,0);transition:stroke-dashoffset 1.2s cubic-bezier(.45,.05,.25,1)}
.ot-slider .screen img.pin{position:absolute;z-index:1;inset:auto;width:12.93%;height:auto;opacity:0;transform-origin:44.1% 78.3%;
  transition:transform 1.2s cubic-bezier(.45,.05,.25,1), opacity .3s}
.ot-slider .screen img.pin.on{opacity:1}
.ot-slider .mapz.zoom img.pin{transform:scale(.625)}
.ot-slider .mapz.zoom .moto{--ms:.625}
.ot-slider .screen img.card7{position:absolute;z-index:2;top:0;left:0;width:100%;height:auto;opacity:0;transition:opacity .45s ease;
  filter:drop-shadow(0 calc(100cqw * 4 / 375) calc(100cqw * 8 / 375) rgba(0,0,0,.12))}
.ot-slider .screen img.card7.on{opacity:1}
.ot-slider .mapz img.grow{opacity:1;transition:none;animation:ot-cardGrow .6s cubic-bezier(.4,0,.2,1) both}
.ot-slider .mapz img.stay{opacity:1!important;transition:none}
.ot-slider .veil{position:absolute;z-index:1;inset:0;background:linear-gradient(transparent 32.2%, #fff 32.2%, #fff 40.1%, transparent 40.1%);opacity:0;pointer-events:none}
.ot-slider .veil.run{animation:ot-cardGrow .6s cubic-bezier(.4,0,.2,1) both, ot-veil .65s ease-out both}
@keyframes ot-veil{0%,30%{opacity:1}100%{opacity:0}}
@keyframes ot-cardGrow{
  from{clip-path:inset(0 0 68.47% 0 round 0 0 calc(100cqw * 21 / 375) calc(100cqw * 21 / 375))}
  to{clip-path:inset(0 0 59.11% 0 round 0 0 calc(100cqw * 21 / 375) calc(100cqw * 21 / 375))}
}
.ot-slider .screen img.bbar{position:absolute;z-index:2;inset:auto;left:29.33%;top:91.13%;width:41.33%;height:auto;opacity:1}
.ot-slider .island{position:absolute;top:calc(var(--u) * 20);left:50%;transform:translateX(-50%);width:calc(var(--u) * 111);height:calc(var(--u) * 31);background:#000;border-radius:999px;z-index:4}

/* Controls */
.ot-slider .nav{display:flex;align-items:center;gap:12px}
.ot-slider .dots{display:flex;align-items:center;gap:8px;padding:11px 15px;border-radius:999px}
.ot-slider .dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(51,87,101,.28);cursor:pointer;transition:width .35s cubic-bezier(.3,.7,.2,1), background .35s}
.ot-slider .dots button.on{width:22px;background:var(--coral)}
.ot-slider .arrow{width:46px;height:46px;border-radius:50%;color:var(--ocean);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .25s cubic-bezier(.3,.7,.2,1), opacity .3s}
.ot-slider .arrow:hover{transform:scale(1.06)}
.ot-slider .arrow:active{transform:scale(.93)}
.ot-slider .arrow:disabled{opacity:.4;cursor:default;transform:none}
.ot-slider .arrow svg{width:20px;height:20px}
.ot-slider .hint{display:inline-flex;align-items:center;gap:10px;color:var(--ink-soft)}
.ot-slider .hint i{width:1px;height:28px;background:var(--teal);display:block;animation:ot-drip 1.8s ease-in-out infinite}
@keyframes ot-drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}

@media (max-width:760px){
  .ot-slider .scene{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;height:auto;gap:14px}
  .ot-slider .side.left{grid-column:1;grid-row:1;justify-items:center}
  .ot-slider .side.right{grid-column:2;grid-row:1;justify-items:center}
  .ot-slider .center{grid-column:1 / -1;grid-row:2;margin-top:72px}
  .ot-slider .slot{width:min(34vw,140px);transform:none;margin-top:0}
  .ot-slider .phone{--w:min(60vw, 30vh, 260px)}
  .ot-slider{--hand-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ot-slider *{transition:none!important;animation:none!important}
}

/* Looping version (home page): no scroll track, plays on its own */
.ot-slider.loop{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(40px,5vw,72px)}
.ot-slider.loop .track{height:auto}
.ot-slider.loop .stage{position:relative;height:clamp(560px,52vw,760px)}
.ot-slider.loop .slot{transform:translateY(calc(var(--dy, 0) * clamp(60px,9vw,140px)))}
.ot-slider.loop .phone{--w:min(25vw, 300px)}
@media (max-width:760px){
  .ot-slider.loop .stage{height:auto;padding-block:40px}
  .ot-slider.loop .slot{transform:none}
  .ot-slider.loop .phone{--w:min(58vw, 250px)}
}

.ot-slider.loop .nav,.ot-slider.loop .ot-status{display:none}
/* Loop mode: keep the whole glow inside the stage so its edge never gets cut */
.ot-slider.loop .glow{width:auto;height:100%;max-width:100%;aspect-ratio:1}
@media (max-width:760px){.ot-slider.loop .glow{width:100%;height:auto;max-height:100%}}
/* The bar is drawn only by the overlay (baked-in bars removed from the screens); going backwards it snaps instead of shrinking */
.ot-slider .pbar.snap,.ot-slider .pbar.snap i{transition:none}
.ot-slider.rewind *,.ot-slider.rewind *::before,.ot-slider.rewind *::after{transition:none!important}
.ot-slider.loop .stage{height:calc(min(25vw,300px) * 2.06 + clamp(96px,10vw,160px))}
@media (max-width:760px){.ot-slider.loop .stage{height:auto}}