/* GadgetX delivery story: real product imagery, four connected scenes. */
.delivery-story { padding-block: 90px 64px; }
.journey-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:36px; }
.journey-heading h2 { font-size:clamp(36px,4.5vw,64px); line-height:1.04; letter-spacing:-.055em; margin:0; }
.journey-heading > p { color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 5px; }
.journey-stage { --journey-ink:#fff; --journey-sub:#bab6bc; position:relative; height:580px; overflow:hidden; border-radius:28px; isolation:isolate; color:var(--journey-ink); background:#111013; transition:background 600ms ease,color 400ms ease; }
.journey-stage[data-scene="1"] { background:#ece9e6; --journey-ink:#202126; --journey-sub:#69666c; }
.journey-stage[data-scene="2"] { background:#291a22; }
.journey-stage[data-scene="3"] { background:#e9eef0; --journey-ink:#202126; --journey-sub:#686f74; }
.journey-top { position:absolute; inset:27px 32px auto; display:flex; align-items:center; justify-content:space-between; z-index:5; font-size:10px; letter-spacing:.13em; font-weight:650; }
.journey-top-muted { color:var(--journey-sub); font-weight:400; }
.journey-scene { position:absolute; inset:68px 0 125px; opacity:0; visibility:hidden; transform:translateY(22px) scale(.97); transition:opacity 400ms ease,transform 550ms cubic-bezier(.22,1,.36,1),visibility 550ms; pointer-events:none; }
.journey-scene.is-active { opacity:1; visibility:visible; transform:none; }
.journey-caption { position:absolute; bottom:31px; left:38px; right:38px; display:flex; gap:28px; align-items:flex-start; z-index:3; }
.journey-caption > span { padding-top:7px; color:var(--journey-sub); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.journey-caption h3 { font-size:clamp(25px,3vw,36px); line-height:1.13; letter-spacing:-.035em; margin:0 0 9px; color:inherit; }
.journey-caption p { font-size:14px; color:var(--journey-sub); margin:0; line-height:1.5; }
.journey-large-word { position:absolute; left:12%; top:24%; font-size:clamp(100px,15vw,210px); font-weight:650; letter-spacing:-.075em; color:#ffffff10; line-height:1; }
.journey-phone { position:absolute; height:112%; width:48%; object-fit:contain; left:38%; top:-7%; transform:rotate(-12deg); filter:drop-shadow(0 20px 30px #0007); }
.is-active .journey-phone { animation:journey-phone-in .9s cubic-bezier(.16,1,.3,1) both,journey-float 5s .9s ease-in-out infinite alternate; }
@keyframes journey-phone-in { from{opacity:0;transform:translate(90px,70px) rotate(12deg) scale(.72)} to{opacity:1;transform:translate(0,0) rotate(-12deg) scale(1)} }
@keyframes journey-float { from{transform:translateY(0) rotate(-12deg)} to{transform:translateY(-12px) rotate(-8deg)} }
.journey-orbit { position:absolute; border:1px solid #ffffff12; border-radius:50%; width:490px; height:490px; left:calc(58% - 245px); top:-60px; }
.orbit-two { width:640px; height:640px; left:calc(58% - 320px); top:-135px; }
.journey-product-tag,.journey-arrival-badge { position:absolute; display:flex; align-items:center; gap:13px; border:1px solid #ffffff20; border-radius:18px; padding:16px 22px; background:#272328d9; box-shadow:0 18px 45px #0002; backdrop-filter:blur(14px); }
.journey-product-tag { left:16%; bottom:40px; }
.journey-product-tag strong,.journey-arrival-badge strong { display:block; font-size:15px; }
.journey-product-tag small,.journey-arrival-badge small { display:block; font-size:11px; margin-top:6px; color:var(--journey-sub); }
.journey-tick { width:30px; height:30px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; }
.is-active .journey-product-tag { animation:journey-rise 600ms 300ms both; }
.journey-color-dots { position:absolute; top:25%; right:15%; display:grid; gap:12px; }
.journey-color-dots i { width:15px; height:15px; border:3px solid #111013; outline:1px solid #fff4; border-radius:50%; background:#733f52; }
.journey-color-dots i:nth-child(2) { background:#d7dce0; }
.journey-color-dots i:nth-child(3) { background:#36383a; }
.journey-address-card { position:absolute; width:320px; left:22%; top:8%; background:#fff; border-radius:20px; padding:24px; box-shadow:0 24px 60px #36302b16; transform:rotate(-3deg); }
.journey-card-heading { display:flex; align-items:center; gap:12px; font-size:19px; font-weight:600; margin-bottom:18px; }
.journey-pin-icon { font-size:25px; color:#733f52; }
.journey-address-card > small { font-size:8px; letter-spacing:.13em; color:#777; }
.journey-field { border-bottom:1px solid #ecebed; padding:12px 0; }
.journey-field > span { display:block; font-size:9px; color:#79747a; margin-bottom:5px; }
.journey-field strong { display:block; font-size:13px; font-weight:500; }
.journey-card-footer { display:flex; gap:8px; align-items:center; color:#733f52; font-size:10px; margin-top:15px; }
.is-active .journey-field strong { animation:journey-reveal .7s .2s both; }
.is-active .journey-field:nth-of-type(3) strong { animation-delay:.5s; }
.is-active .journey-field:nth-of-type(4) strong { animation-delay:.8s; }
@keyframes journey-reveal { from{clip-path:inset(0 100% 0 0);opacity:.3} to{clip-path:inset(0);opacity:1} }
.journey-location-mark { position:absolute; width:90px; height:112px; right:22%; top:24%; color:#733f52; filter:drop-shadow(0 20px 12px #733f5230); }
.journey-location-mark svg { width:100%; height:100%; }
.is-active .journey-location-mark { animation:journey-pin-in .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes journey-pin-in { from{opacity:0;transform:translateY(-90px) scale(.7)} to{opacity:1;transform:none} }
.journey-location-orbit { position:absolute; right:calc(22% - 40px); top:58%; width:170px; height:55px; border:1px solid #733f5240; border-radius:50%; box-shadow:0 0 0 20px #733f5207,0 0 0 40px #733f5205; }
.journey-review-card { position:absolute; width:350px; left:calc(50% - 175px); top:6%; background:#ffffff0c; border:1px solid #ffffff20; border-radius:22px; padding:27px; box-shadow:0 25px 60px #0002; }
.journey-review-label { font-size:8px; letter-spacing:.18em; color:#d1a6b7; }
.journey-review-card h3 { font-size:24px; letter-spacing:-.035em; margin:16px 0; color:#fff; }
.journey-review-line { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#e2d7df; padding:15px 0; border-bottom:1px solid #ffffff12; }
.journey-review-line i { display:grid; place-items:center; border-radius:50%; width:19px; height:19px; background:#d4b6c4; color:#291a22; font-size:11px; font-style:normal; }
.is-active .journey-review-line i { animation:journey-rise .45s .3s both; }
.is-active .journey-review-line:nth-of-type(2) i { animation-delay:.6s; }
.is-active .journey-review-line:nth-of-type(3) i { animation-delay:.9s; }
.journey-review-bottom { display:flex; justify-content:space-between; font-size:11px; margin-top:23px; color:#d4b6c4; }
.journey-check-ring { width:94px; height:94px; position:absolute; right:calc(50% - 230px); top:62%; background:#422c37; border-radius:50%; box-shadow:0 10px 35px #0003; }
.journey-check-ring svg { width:100%;height:100%;fill:none;stroke:#e7ced8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.is-active .journey-check-ring { animation:journey-rise .6s 1.2s both; }
.journey-route-map { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.journey-roads { stroke:#d9e0e3; stroke-width:1; transform:rotate(-7deg); transform-origin:center; }
.journey-route-base { stroke:#ccd3d6; stroke-width:3; stroke-dasharray:5 9; }
.journey-route-line { stroke:#733f52; stroke-width:3; stroke-linecap:round; }
.journey-route-map text { fill:#6a7077; font-size:13px; font-family:inherit; }
.journey-arrival-badge { left:calc(50% - 160px); top:6%; background:#fffffff0; color:#202126; border-color:#fff; opacity:0; transform:translateY(12px); transition:opacity 450ms ease,transform 450ms ease; }
.journey-stage.has-arrived .journey-arrival-badge { opacity:1; transform:none; }
.journey-arrival-ring { opacity:0; transform:scale(.8); transition:opacity 400ms,transform 600ms; }
.journey-stage.has-arrived .journey-arrival-ring { opacity:.5;transform:scale(1.2); }
.journey-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:27px; }
.journey-controls button { border:0; background:none; text-align:left; padding:0 0 12px; color:#202126; position:relative; }
.journey-step-line { display:block; height:3px; border-radius:4px; background:#dedee3; margin-bottom:20px; overflow:hidden; }
.journey-step-line i { display:block; height:100%; background:#733f52; transform:scaleX(0); transform-origin:left; }
.journey-controls small { font-size:11px; color:#77727a; display:block; margin-bottom:8px; }
.journey-controls strong { font-size:18px; display:block; letter-spacing:-.035em; margin-bottom:7px; }
.journey-controls button > span:last-child { font-size:12px; color:#77727a; line-height:1.5; display:block; }
.journey-controls button[aria-pressed="true"] strong { color:#733f52; }
.journey-controls button:hover strong { color:#733f52; }
.journey-controls button:focus-visible { outline:2px solid #9d637b; outline-offset:6px; border-radius:4px; }
.journey-footnote { border-top:1px solid #dedee3; margin-top:18px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.journey-footnote p { max-width:550px; color:#828087; font-size:11px; line-height:1.6; margin:0; }
.journey-footnote a { flex-shrink:0; font-size:12px; }
@keyframes journey-rise { from{opacity:0;translate:0 20px} to{opacity:1;translate:0 0} }
.delivery-story.is-paused * { animation-play-state:paused!important; }
@media(max-width:700px) {
 .delivery-story { padding-block:60px 40px; }
 .journey-heading { display:block; margin-bottom:26px; }
 .journey-heading > p { margin-top:20px; font-size:13px; }
 .journey-stage { height:540px; border-radius:22px; }
 .journey-top { inset:20px 19px auto; font-size:8px; letter-spacing:.07em; }
 .journey-top-muted { display:none; }
 .journey-scene { inset:74px 0 140px; }
 .journey-caption { left:23px; right:23px; bottom:24px; gap:12px; }
 .journey-caption > span { font-size:9px; padding-top:4px; }
 .journey-caption h3 { font-size:25px; }
 .journey-caption p { font-size:12px; }
 .journey-large-word { left:6%; top:25%; font-size:108px; }
 .journey-phone { left:25%; width:65%; height:98%; top:-1%; }
 .journey-product-tag { left:7%; bottom:13px; padding:12px 15px; gap:9px; }
 .journey-product-tag strong { font-size:13px; }
 .journey-product-tag small { font-size:9px; }
 .journey-color-dots { right:8%; }
 .journey-address-card { width:250px; padding:20px; left:calc(50% - 138px); top:0; }
 .journey-location-mark { right:6%; top:55%; width:61px; height:76px; }
 .journey-location-orbit { display:none; }
 .journey-review-card { width:270px; left:calc(50% - 135px); padding:22px; top:0; }
 .journey-review-card h3 { font-size:23px; }
 .journey-review-line { font-size:10px; }
 .journey-check-ring { right:5%; top:70%; width:65px; height:65px; }
 .journey-route-map { top:44px; height:240px; width:110%; left:-5%; }
 .journey-arrival-badge { top:0; left:calc(50% - 133px); padding:12px 15px; }
 .journey-arrival-badge strong { font-size:12px; }
 .journey-controls { gap:16px; grid-template-columns:1fr 1fr; margin-top:21px; }
 .journey-controls strong { font-size:16px; }
 .journey-step-line { margin-bottom:12px; }
 .journey-footnote { display:block; }
 .journey-footnote a { display:inline-block; margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .delivery-story * { animation:none!important;transition:none!important; }
 .journey-arrival-badge { opacity:1;transform:none; }
}