:root{
    --pink:#e6407a;
    --pink-deep:#c2255f;
    --pink-mid:#f7a8c4;
    --pink-soft:#fde3ed;
    --pink-tint:#fff4f8;
    --white:#ffffff;
    --ink:#3b1a28;
    --ink-soft:#8a6474;
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --ease-out:cubic-bezier(.22,1,.36,1);
  }
  
  .loc{
    position:relative;overflow:hidden;isolation:isolate;
    padding:88px 24px 96px;
    background:
      radial-gradient(900px 420px at 15% -10%, var(--pink-soft), transparent 70%),
      radial-gradient(800px 420px at 100% 30%, var(--pink-tint), transparent 70%),
      var(--white);
  }
  /* drifting soft blobs */
  .drift{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;animation:drift 18s ease-in-out infinite alternate}
  .drift.a{width:320px;height:320px;background:var(--pink-soft);top:-80px;right:8%}
  .drift.b{width:260px;height:260px;background:#ffd6e6;bottom:-60px;left:6%;animation-duration:22s;animation-delay:-6s}
  @keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
 
  .wrap{max-width:1180px;margin:0 auto}
 
  .head{max-width:620px;margin:0 auto 44px;text-align:center}
  .head h2{
    font-family:'Fraunces',Georgia,'Times New Roman',serif;
    font-weight:500;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink)
  }
  .head p{margin-top:14px;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
 
  /* ---------- Switch ---------- */
  .switch{
    position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
    padding:8px;background:var(--white);border-radius:30px;
    box-shadow:0 1px 0 var(--pink-soft), 0 24px 60px -24px rgba(230,64,122,.35), 0 0 0 1.5px var(--pink-soft);
  }
  .blob{
    position:absolute;z-index:0;border-radius:24px;pointer-events:none;
    background:linear-gradient(135deg,var(--pink) 0%,var(--pink-deep) 100%);
    box-shadow:0 14px 30px -10px rgba(194,37,95,.6);
    transition:left .65s var(--ease-spring), top .65s var(--ease-spring), width .65s var(--ease-spring), height .65s var(--ease-spring);
  }
  .blob::after{ /* shimmer that sweeps on every change */
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
    background-size:250% 100%;background-position:150% 0;
  }
  .blob.sweep::after{animation:sweep .9s var(--ease-out)}
  @keyframes sweep{from{background-position:150% 0}to{background-position:-50% 0}}
  .no-anim, .no-anim *{transition:none !important}
 
  .btn{
    --mx:50%;--my:50%;
    position:relative;z-index:1;overflow:hidden;
    display:flex;align-items:center;gap:12px;text-align:left;
    padding:16px 16px;border:0;border-radius:24px;background:transparent;
    font:inherit;color:var(--ink);cursor:pointer;
    transition:color .35s ease, transform .35s var(--ease-spring);
  }
  .btn::before{ /* cursor-follow glow */
    content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
    background:radial-gradient(160px circle at var(--mx) var(--my), var(--pink-soft), transparent 70%);
    transition:opacity .3s ease;
  }
  .btn:hover::before{opacity:1}
  .btn:hover{transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
  .btn[aria-selected="true"]{color:var(--white)}
  .btn[aria-selected="true"]::before{opacity:0}
 
  .pin{
    position:relative;flex:none;width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;background:var(--pink-soft);color:var(--pink);
    transition:background .35s ease,color .35s ease;
  }
  .pin svg{width:22px;height:22px;fill:currentColor;transform-origin:50% 100%}
  .btn:hover .pin svg{animation:wiggle .6s ease}
  @keyframes wiggle{25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}100%{transform:rotate(0)}}
  .btn[aria-selected="true"] .pin{background:rgba(255,255,255,.22);color:var(--white)}
  .btn[aria-selected="true"] .pin svg{animation:drop .7s var(--ease-spring)}
  @keyframes drop{0%{transform:translateY(-26px) scale(.6);opacity:0}60%{opacity:1}100%{transform:none}}
  .btn[aria-selected="true"] .pin::after{ /* radar rings */
    content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);
    animation:ring 2.2s ease-out infinite;
  }
  @keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
 
  .txt{min-width:0;flex:1}
  .txt b{display:block;font-weight:600;font-size:1rem;line-height:1.2}
  .txt small{display:block;margin-top:3px;font-size:.78rem;line-height:1.3;color:var(--ink-soft);transition:color .35s ease}
  .btn[aria-selected="true"] small{color:rgba(255,255,255,.82)}
 
  .num{
    flex:none;min-width:30px;padding:3px 9px;border-radius:99px;text-align:center;
    font-size:.8rem;font-weight:600;background:var(--pink-tint);color:var(--pink-deep);
    transition:background .35s ease,color .35s ease;
  }
  .btn[aria-selected="true"] .num{background:rgba(255,255,255,.95);color:var(--pink-deep)}
 
  .ripple{
    position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;
    background:rgba(230,64,122,.35);animation:ripple .7s ease-out forwards;
  }
  .btn[aria-selected="true"] .ripple{background:rgba(255,255,255,.4)}
  @keyframes ripple{to{transform:scale(28);opacity:0}}
 
  /* ---------- Route track with hopping pin ---------- */
  .track{position:relative;height:64px;margin:6px 0 0}
  .track .base{position:absolute;left:0;right:0;top:46px;border-top:2px dashed var(--pink-mid);opacity:.7}
  .track .fill{
    position:absolute;top:45px;height:4px;border-radius:4px;left:0;width:0;
    background:linear-gradient(90deg,var(--pink-mid),var(--pink));
    transition:left .7s var(--ease-out), width .7s var(--ease-out);
  }
  .stop{
    position:absolute;top:41px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
    background:var(--white);border:2px solid var(--pink-mid);
    transition:background .4s ease,border-color .4s ease,transform .4s var(--ease-spring);
  }
  .stop.hit{background:var(--pink);border-color:var(--pink)}
  .rider{
    position:absolute;top:0;width:0;height:0;
    transition:left .7s var(--ease-out);
  }
  .rider .hopper{position:absolute;left:-16px;top:6px;width:32px;height:40px}
  .rider svg{display:block;width:32px;height:40px;fill:var(--pink);filter:drop-shadow(0 6px 6px rgba(194,37,95,.3))}
  .rider.hop .hopper{animation:hop .7s var(--ease-out)}
  @keyframes hop{
    0%{transform:translateY(0) scale(1,1)}
    18%{transform:translateY(3px) scale(1.12,.86)}
    50%{transform:translateY(-18px) scale(.92,1.1)}
    82%{transform:translateY(2px) scale(1.1,.9)}
    100%{transform:translateY(0) scale(1,1)}
  }
  .shadow{
    position:absolute;left:-10px;top:44px;width:20px;height:6px;border-radius:50%;background:rgba(194,37,95,.3);
  }
  .rider.hop .shadow{animation:shadow .7s var(--ease-out)}
  @keyframes shadow{50%{transform:scale(.55);opacity:.4}}
 
  /* ---------- Status ---------- */
  .status{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:18px 0 30px;color:var(--ink-soft);font-size:1rem;text-align:center;flex-wrap:wrap}
  .status .big{
    font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2.2rem;color:var(--pink);line-height:1;
    min-width:1.4ch;display:inline-block;
  }
  .status .where{color:var(--ink);font-weight:600}
 
  /* ---------- Hotel cards ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;perspective:1200px}
  .card{
    position:relative;display:flex;flex-direction:column;gap:14px;
    padding:20px;border-radius:22px;background:var(--white);text-decoration:none;color:inherit;
    box-shadow:0 0 0 1.5px var(--pink-soft);
    opacity:0;animation:cardIn .6s var(--ease-out) forwards;
    transition:box-shadow .3s ease, transform .3s var(--ease-spring);
  }
  @keyframes cardIn{
    from{opacity:0;transform:translateY(26px) rotateX(-14deg) scale(.96)}
    to{opacity:1;transform:none}
  }
  .card:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--pink),0 20px 36px -18px rgba(230,64,122,.55)}
  .card:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
  .card .top{display:flex;align-items:center;gap:12px}
  .mono{
    flex:none;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
    font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1rem;letter-spacing:.02em;
    background:var(--pink-tint);color:var(--pink-deep);
    transition:background .3s ease,color .3s ease,border-radius .35s var(--ease-spring);
  }
  .card:hover .mono{background:var(--pink);color:var(--white);border-radius:50%}
  .card h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.12rem;line-height:1.25;letter-spacing:-.01em}
  .card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
  .card[hidden]{display:none}
  .tag{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:500;color:var(--pink-deep)}
  .tag::before{
    content:"";width:14px;height:14px;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6407a' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .view{
    position:relative;font-size:.86rem;font-weight:600;color:var(--pink-deep);
  }
  .view::after{
    content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--pink);
    transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
  }
  .card:hover .view::after{transform:scaleX(1)}
 
  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .switch{grid-template-columns:repeat(2,1fr)}
    .track{display:none}
    .status{margin-top:22px}
  }
  @media (max-width:480px){
    .loc{padding:64px 16px 72px}
    .btn{padding:12px;gap:9px}
    .pin{width:36px;height:36px}
    .txt small{display:none}
    .txt b{font-size:.92rem}
  }
 
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
    .card{opacity:1}
  }