/* =====================================================================
   Expedia live hero — an auto-playing walkthrough of the "change your
   stay" flow (Figma web_2026, section 48:20359, screens _01 → 04_):
   Change dates → pick a new check-out → review the new dates → Expedia
   loading state → "Your dates have been changed" with the bags
   illustration animating in. Loops.
   Screens are laid out at their real 375×812 size inside an iPhone body
   (409×846 incl. a 17px bezel) and scaled with --xl-s.
   Type: DM Sans stands in for Expedia's Centra No2.
   ===================================================================== */
.xl-hero{
  --xl-ink:#141d38; --xl-ink2:#343b53; --xl-ink3:#676a7d; --xl-line:#d7d4d2;
  --xl-blue:#3662d8; --xl-cta:#1668e3; --xl-green:#0d7066; --xl-grey:#f3f3f5;
  position:relative; overflow:hidden; border-radius:16px;
}
.xl-hero, .xl-hero.xl-ready{
  background:
    radial-gradient(circle at 78% 18%, rgba(22,104,227,.10) 0 22%, transparent 23%),
    radial-gradient(circle at 18% 86%, rgba(255,212,0,.16) 0 16%, transparent 17%),
    linear-gradient(160deg, #eaf1ff 0%, #f6f3f1 100%);
}
.xl-hero-static{ width:100%; height:100%; object-fit:cover; display:block; }
.xl-hero.xl-ready .xl-hero-static{ display:none; }

/* Device: whole phone visible by default (hero), sized from the box height */
.xl-phone-wrap{
  /* iPhone body in rose / pink gold: brushed metal band, then a black glass border around the display */
  position:absolute; top:4%; height:92%; left:50%; aspect-ratio:409/846; transform:translateX(-50%);
  box-sizing:border-box; border-radius:calc(62px * var(--xl-s,.5)); border:calc(8px * var(--xl-s,.5)) solid transparent;
  background:linear-gradient(#0b0b0c, #0b0b0c) padding-box,
    linear-gradient(135deg, #f6dfd3 0%, #e2b6a3 22%, #f3d4c6 46%, #cf9d89 72%, #ecc8b8 100%) border-box;
  box-shadow:inset 0 0 0 calc(1.5px * var(--xl-s,.5)) rgba(255,255,255,.55), inset 0 0 0 calc(3px * var(--xl-s,.5)) rgba(150,96,78,.35),
    0 30px 60px -18px rgba(20,29,56,.40);
}
.xl-phone-wrap::before, .xl-phone-wrap::after{ content:""; position:absolute; width:calc(3px * var(--xl-s,.5)); background:#d6a592; border-radius:2px; }
.xl-phone-wrap::before{ left:calc(-11px * var(--xl-s,.5)); top:calc(157px * var(--xl-s,.5)); height:calc(58px * var(--xl-s,.5)); box-shadow:0 calc(78px * var(--xl-s,.5)) 0 #d6a592; }
.xl-phone-wrap::after{ right:calc(-11px * var(--xl-s,.5)); top:calc(197px * var(--xl-s,.5)); height:calc(94px * var(--xl-s,.5)); }
.xl-phone{
  position:absolute; left:calc(9px * var(--xl-s,.5)); top:calc(9px * var(--xl-s,.5)); width:375px; height:812px; border-radius:45px; overflow:hidden;
  transform-origin:0 0; transform:scale(var(--xl-s,.5)); background:#fff; color:var(--xl-ink); 
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-mask-image:-webkit-radial-gradient(white, black);
}
.xl-phone *{ box-sizing:border-box; margin:0; }

/* chrome */
.xl-statusbar{ position:absolute; left:0; right:0; top:0; height:48px; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:0 8px 0 12px; font-weight:600; font-size:16px; letter-spacing:-.3px; color:#000; pointer-events:none; }
.xl-statusbar > span:first-child{ width:96px; text-align:center; }
.xl-sb-icons{ width:96px; display:flex; gap:5px; align-items:center; justify-content:center; }
.xl-sb-icons svg{ fill:currentColor; display:block; }
.xl-notch{ position:absolute; left:50%; top:0; width:156px; height:31px; margin-left:-78px; background:#000; border-radius:0 0 19px 19px; z-index:61; }

/* screens + transitions */
.xl-screen{ position:absolute; inset:0; overflow:hidden; background:#fff; will-change:transform;
  transition:transform .5s cubic-bezier(.2,.85,.25,1), opacity .4s ease; }
.xl-screen::after{ content:""; position:absolute; inset:0; background:#000; opacity:0; transition:opacity .6s cubic-bezier(.2,.85,.25,1); pointer-events:none; z-index:40; }
.xl-screen.right{ transform:translateX(100%); }
.xl-screen.left{ transform:translateX(-30%); }
.xl-screen.left::after{ opacity:.08; }
.xl-screen.down{ transform:translateY(100%); }
.xl-screen.under{ transform:scale(.94); }
.xl-screen.under::after{ opacity:.25; }
.xl-screen.front{ box-shadow:-6px 0 24px rgba(0,0,0,.10); }
.xl-screen.gone{ opacity:0; }
.xl-sb-bg{ position:absolute; left:0; right:0; top:0; height:48px; background:#fff; z-index:5; }

.xl-toolbar{ position:absolute; left:0; right:0; top:48px; height:48px; background:#fff; box-shadow:0 1px 0 rgba(0,11,38,.12); z-index:5; display:flex; align-items:center; padding-left:6px; }
.xl-icon-btn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--xl-blue); }
.xl-icon-btn svg{ width:24px; height:24px; }
.xl-abs{ position:absolute; }

/* type (EGDS scale) */
.xl-h700{ font-weight:700; font-size:32px; line-height:36px; letter-spacing:-.3px; color:var(--xl-ink); }
.xl-h600{ font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.2px; color:var(--xl-ink); }
.xl-h500{ font-weight:700; font-size:20px; line-height:24px; color:var(--xl-ink); }
.xl-h400{ font-weight:700; font-size:16px; line-height:20px; color:var(--xl-ink); }
.xl-h300{ font-weight:700; font-size:14px; line-height:18px; color:var(--xl-ink); }
.xl-p{ font-weight:400; font-size:14px; line-height:18px; color:var(--xl-ink2); }
.xl-small{ font-weight:400; font-size:12px; line-height:16px; color:var(--xl-ink2); }
.xl-link{ color:var(--xl-blue); display:inline-flex; align-items:center; gap:4px; }
.xl-link svg{ width:18px; height:18px; }
.xl-green{ color:var(--xl-green); }

.xl-2col{ display:flex; gap:24px; width:328px; }
.xl-2col > div{ flex:1 1 0; display:flex; flex-direction:column; gap:4px; }
.xl-info{ display:flex; gap:4px; align-items:flex-start; font-weight:500; font-size:14px; line-height:18px; color:var(--xl-ink2); }
.xl-info svg{ width:18px; height:18px; flex:none; color:var(--xl-ink2); }

.xl-btn-sec{ width:327px; height:38px; border:1px solid var(--xl-line); border-radius:18px; background:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:500; font-size:16px; line-height:20px; color:var(--xl-blue); transition:transform .18s ease, background .18s ease; }
.xl-btn-pri{ width:344px; height:48px; border-radius:999px; background:var(--xl-cta); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:500; font-size:16px; line-height:20px; transition:transform .18s ease, filter .18s ease; }
.xl-press{ transform:scale(.96) !important; filter:brightness(.92); background:#f1f4fc; }
.xl-btn-pri.xl-press{ background:var(--xl-cta); }
.xl-rule{ position:absolute; height:1px; background:#e0dedc; }

.xl-card{ position:absolute; background:#fff; border:1px solid #dadada; border-radius:8px; }
.xl-thumb{ position:absolute; background:#cfd8e3 center/cover no-repeat; }

/* S2 — date picker */
.xl-close{ position:absolute; left:6px; top:54px; }
.xl-field{ position:absolute; top:96px; height:44px; width:150px; display:flex; align-items:center; font-weight:700; font-size:20px; line-height:24px; color:#727483; }
.xl-field::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:var(--xl-blue); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s ease; }
.xl-field.focus{ color:var(--xl-ink2); }
.xl-field.focus::after{ transform:none; }
.xl-field .t{ transition:opacity .25s ease; }
.xl-arrow{ position:absolute; left:177px; top:108px; width:20px; height:20px; color:var(--xl-ink2); }
.xl-month{ position:absolute; left:0; right:0; text-align:center; font-weight:500; font-size:14px; line-height:18px; color:var(--xl-ink); }
.xl-wk, .xl-day{ position:absolute; width:53.57px; text-align:center; }
.xl-wk{ font-size:12px; line-height:16px; color:var(--xl-ink2); }
.xl-day{ height:44px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--xl-ink); z-index:2; transition:color .25s ease; }
.xl-day.sel{ color:#fff; }
.xl-dot{ position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--xl-blue); z-index:1;
  transition:left .45s cubic-bezier(.2,.85,.25,1), transform .3s ease; }
.xl-dot.pop{ transform:scale(.8); }
.xl-range{ position:absolute; height:44px; background:#e6ecfa; z-index:0; transition:width .45s cubic-bezier(.2,.85,.25,1); }
.xl-scrim{ position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 40%); z-index:4; }

/* S3 — review */
.xl-s3 .xl-scroll{ position:absolute; left:0; right:0; top:0; transition:transform 1s cubic-bezier(.45,.05,.25,1); }
.xl-wcard{ position:absolute; left:24px; width:327px; background:#fff; border-radius:8px; }
.xl-row{ display:flex; align-items:center; gap:8px; }
.xl-row svg{ width:24px; height:24px; color:var(--xl-ink); flex:none; }
.xl-ico18{ width:18px; height:18px; flex:none; color:var(--xl-ink2); }
.xl-bottom{ position:absolute; left:0; right:0; bottom:0; height:84px; background:#fff; box-shadow:0 -1px 0 rgba(0,11,38,.10); z-index:6; display:flex; justify-content:center; padding-top:14px; }

/* loader (between 3 and 4) — Expedia blue spinner + shimmering skeleton */
.xl-loader{ background:#fff; }
.xl-spin{ position:absolute; left:50%; top:196px; width:48px; height:48px; margin-left:-24px; border-radius:50%;
  border:4px solid rgba(22,104,227,.16); border-top-color:var(--xl-cta); animation:xlSpin .8s linear infinite; }
.xl-loadtxt{ position:absolute; left:0; right:0; top:262px; text-align:center; font-weight:500; font-size:16px; color:var(--xl-ink); }
.xl-loadsub{ position:absolute; left:0; right:0; top:286px; text-align:center; font-size:14px; color:var(--xl-ink3); }
.xl-skel{ position:absolute; left:24px; border-radius:8px; background:linear-gradient(90deg,#eceef2 0%,#f7f8fa 45%,#eceef2 90%); background-size:220% 100%; animation:xlShimmer 1.3s linear infinite; }
@keyframes xlSpin{ to{ transform:rotate(360deg); } }
@keyframes xlShimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* S4 — confirmation + animated illustration */
.xl-ill{ position:absolute; left:108px; top:132px; width:159px; height:174px; overflow:visible; }
.xl-ill .bg, .xl-ill .suit, .xl-ill .duffel, .xl-ill .ground, .xl-ill .cf{ transform-box:fill-box; transform-origin:50% 100%; }
.xl-ill .bg{ transform-origin:50% 50%; transform:scale(.5); opacity:0; }
.xl-ill .ground{ transform-origin:50% 50%; transform:scaleX(.3); opacity:0; }
.xl-ill .suit{ transform:translateY(-60px); opacity:0; }
.xl-ill .duffel{ transform:translateX(46px); opacity:0; }
.xl-ill .cf{ transform-origin:50% 50%; transform:scale(0) rotate(-90deg); opacity:0; }
.xl-s4.play .xl-ill .bg{ animation:xlBg .7s cubic-bezier(.2,.9,.3,1.2) forwards; }
.xl-s4.play .xl-ill .ground{ animation:xlGround .5s ease .55s forwards; }
.xl-s4.play .xl-ill .suit{ animation:xlDrop .8s cubic-bezier(.3,1.4,.5,1) .25s forwards, xlBob 3.2s ease-in-out 1.6s infinite; }
.xl-s4.play .xl-ill .duffel{ animation:xlSlide .7s cubic-bezier(.25,1.3,.5,1) .6s forwards, xlBob 3.2s ease-in-out 2s infinite; }
.xl-s4.play .xl-ill .cf{ animation:xlPop .55s cubic-bezier(.3,1.6,.5,1) forwards, xlTwinkle 2.4s ease-in-out infinite; animation-delay:var(--d), calc(var(--d) + .6s); }
@keyframes xlBg{ to{ transform:scale(1); opacity:1; } }
@keyframes xlGround{ to{ transform:scaleX(1); opacity:1; } }
@keyframes xlDrop{ 0%{ transform:translateY(-60px); opacity:0; } 30%{ opacity:1; } 100%{ transform:none; opacity:1; } }
@keyframes xlSlide{ 0%{ transform:translateX(46px); opacity:0; } 40%{ opacity:1; } 100%{ transform:none; opacity:1; } }
@keyframes xlBob{ 0%,100%{ transform:none; opacity:1; } 50%{ transform:translateY(-3px); opacity:1; } }
@keyframes xlPop{ to{ transform:none; opacity:1; } }
@keyframes xlTwinkle{ 0%,100%{ transform:none; opacity:1; } 50%{ transform:translateY(-4px) rotate(18deg) scale(.85); opacity:.75; } }
.xl-s4 .xl-rise{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.85,.25,1); }
.xl-s4.play .xl-rise{ opacity:1; transform:none; }

/* ghost finger (same language as the Pocket hero) */
.xl-touch{ position:absolute; left:0; top:0; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; z-index:70; pointer-events:none;
  background:rgba(20,29,56,.16); border:1.5px solid rgba(255,255,255,.95); box-shadow:0 4px 14px rgba(20,29,56,.22);
  opacity:0; transition:opacity .22s ease, scale .28s cubic-bezier(.2,.8,.3,1); scale:1.25; }
.xl-touch.show{ opacity:1; scale:1; }
.xl-touch::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--xl-cta); opacity:0; }
.xl-touch.tap::after{ animation:xlTap .6s ease-out; }
.xl-touch.down{ scale:.82; }
@keyframes xlTap{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
.xl-fade{ position:absolute; inset:0; z-index:65; background:#fff; opacity:0; transition:opacity .7s ease; pointer-events:none; }
.xl-fade.on{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .xl-screen, .xl-s3 .xl-scroll, .xl-dot, .xl-range{ transition:none !important; }
  .xl-spin, .xl-skel, .xl-ill *{ animation:none !important; }
}
/* reduced motion: final frame of the confirmation, everything in place */
.xl-s4.static .xl-ill .bg, .xl-s4.static .xl-ill .ground, .xl-s4.static .xl-ill .suit,
.xl-s4.static .xl-ill .duffel, .xl-s4.static .xl-ill .cf, .xl-s4.static .xl-rise{ transform:none !important; opacity:1 !important; animation:none !important; }

/* landing card: smaller phone, top crop (like the Pocket card) */
.xl-card-mount{ position:absolute; inset:0; display:block; border-radius:8px; pointer-events:none; }
.xl-card-mount .xl-phone-wrap{ top:16px; height:calc(80.78% - 32px); } /* whole phone above the caption bar */