/* Plan page polish: hero art, motion and depth. Loaded last; every animation stops under prefers-reduced-motion. */

/* ---------- page backdrop: two slow lamp glows behind the paper ---------- */
body { position: relative; }
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px);
}
body::before {
  width: 520px; height: 520px; left: -160px; top: 30vh;
  background: radial-gradient(closest-side, rgba(232, 155, 44, .16), transparent);
  animation: drift 22s ease-in-out infinite alternate;
}
body::after {
  width: 600px; height: 600px; right: -200px; bottom: -120px;
  background: radial-gradient(closest-side, rgba(47, 107, 104, .14), transparent);
  animation: drift 26s ease-in-out infinite alternate-reverse;
}
@keyframes drift { to { transform: translate(80px, -60px) scale(1.12); } }

/* ---------- top bar ---------- */
.brand-mark { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 0 5px rgba(232, 155, 44, .18), 0 0 22px rgba(232, 155, 44, .5); }
.step-pill { transition: color .2s, border-color .2s, background .2s, transform .2s; }
.step-pill:hover:not(:disabled) { transform: translateY(-1px); }
.step-pill.done span { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; } }
.hero > * { max-width: none; }
.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero::after {
  /* a soft line of light sweeping across the panel every few seconds */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(231, 223, 243, .06) 50%, transparent 60%);
  background-size: 250% 100%; animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep { from { background-position: 150% 0; } 60%, to { background-position: -60% 0; } }

.hero-marker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px !important; }
.hero-marker i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px rgba(232, 155, 44, .16), 0 0 22px 5px rgba(232, 155, 44, .5);
  animation: lamp 2.4s ease-in-out infinite;
}
@keyframes lamp { 50% { box-shadow: 0 0 0 8px rgba(232, 155, 44, .08), 0 0 30px 8px rgba(232, 155, 44, .35); } }
.hero-marker span { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.hero-lit {
  background: linear-gradient(90deg, #E89B2C, #F7C26B, #F08A6E, #E89B2C); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -300% 0; } }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 0; padding: 0; }
.hero-points li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px;
  background: rgba(231, 223, 243, .06); border: 1px solid rgba(231, 223, 243, .12); color: var(--pale); font-size: .9rem; font-weight: 600;
}
.hero-points b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(232, 155, 44, .18); color: var(--accent); font-size: .75rem;
}

/* hero art: one 8s loop - route draws, pins pop in turn, the "open" tag lands */
.hero-art { width: 100%; max-width: 420px; justify-self: center; overflow: visible; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }
.ha-streets path { fill: none; stroke: rgba(231, 223, 243, .08); stroke-width: 3; stroke-linecap: round; }
.ha-river-bank { fill: none; stroke: rgba(47, 107, 104, .35); stroke-width: 26; stroke-linecap: round; }
.ha-river { fill: none; stroke: #24504E; stroke-width: 16; stroke-linecap: round; }
.ha-route {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(232, 155, 44, .6));
  animation: draw 8s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes draw { 0% { stroke-dashoffset: 100; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ha-hotel rect { fill: var(--pale); }
.ha-hotel text, .ha-pin text { font: 800 11px var(--body); text-anchor: middle; }
.ha-hotel text { fill: var(--night); }
.ha-pin circle { fill: var(--accent); stroke: var(--night); stroke-width: 3; }
.ha-pin text { fill: #1E1405; }
.ha-pin > * { transform-box: fill-box; transform-origin: center; animation: pin 8s infinite; transform: scale(0); }
.ha-pin.p1 > * { animation-name: pin1; }
.ha-pin.p2 > * { animation-name: pin2; }
.ha-pin.p3 > * { animation-name: pin3; }
@keyframes pin1 { 0%, 16% { transform: scale(0); } 20% { transform: scale(1.3); } 23%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes pin2 { 0%, 33% { transform: scale(0); } 37% { transform: scale(1.3); } 40%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes pin3 { 0%, 52% { transform: scale(0); } 56% { transform: scale(1.3); } 59%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.ha-tag rect { fill: rgba(47, 107, 104, .9); stroke: rgba(159, 216, 210, .5); }
.ha-tag text { fill: #E6FFFB; font: 700 12px var(--body); text-anchor: middle; }
.ha-tag > * { animation: tag 8s infinite; opacity: 0; }
@keyframes tag { 0%, 60% { opacity: 0; transform: translateY(8px); } 66%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- steps: rise in when revealed, lift on hover ---------- */
.step {
  position: relative; animation: rise .6s cubic-bezier(.2, .7, .2, 1) both;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.step:nth-of-type(2) { animation-delay: .06s; }
.step:nth-of-type(3) { animation-delay: .12s; }
.step:nth-of-type(4) { animation-delay: .18s; }
.step:nth-of-type(5) { animation-delay: .24s; }
.step::before {
  /* marigold edge that grows when you work inside a step */
  content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), #F08A6E); transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.step:hover::before, .step:focus-within::before { transform: scaleY(1); }
.step:hover, .step:focus-within { box-shadow: 0 2px 4px rgba(42, 33, 24, .05), 0 18px 40px rgba(42, 33, 24, .1); }
.step h2 { font-size: 1.4rem; }
.num {
  width: 30px; height: 30px; font-weight: 800;
  background: linear-gradient(135deg, #F7C26B, var(--accent)); color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(232, 155, 44, .16);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.step:hover .num, .step:focus-within .num { transform: rotate(-10deg) scale(1.1); box-shadow: 0 0 0 6px rgba(232, 155, 44, .2), 0 0 18px rgba(232, 155, 44, .45); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- inputs ---------- */
input, select { transition: border-color .2s, box-shadow .2s, background .2s; }
input:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232, 155, 44, .18); }

/* ---------- city cards ---------- */
.city-card {
  position: relative; overflow: hidden; animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
  transition: border-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, background .25s;
}
.city-card:nth-child(2) { animation-delay: .07s; }
.city-card:nth-child(3) { animation-delay: .14s; }
.city-card:nth-child(n+4) { animation-delay: .2s; }
.city-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at 85% 0%, rgba(232, 155, 44, .18), transparent 60%);
}
.city-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(42, 33, 24, .12); }
.city-card:hover::before, .city-card[aria-pressed="true"]::before { opacity: 1; }
.city-card[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(232, 155, 44, .18), 0 16px 36px rgba(232, 155, 44, .18); }
.city-card::after {
  /* check badge that pops in on the chosen city */
  content: "✓"; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800;
  transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.city-card[aria-pressed="true"]::after { transform: scale(1); }
.city-card > * { position: relative; }
.city-card h3 { transition: color .2s; }
.city-card:hover h3 { color: var(--accent-text); }
.tag { transition: background .2s, border-color .2s; }
.city-card:hover .tag { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* ---------- chips, segmented, pace ---------- */
.chip, .segmented button { transition: background .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.chip:hover:not(.static), .segmented button:hover { transform: translateY(-2px); border-color: var(--accent); }
.chip[aria-pressed="true"] { box-shadow: 0 6px 16px rgba(232, 155, 44, .3); }
.chip:active:not(.static), .segmented button:active { transform: scale(.94); }
.segmented button[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(232, 155, 44, .15); }

.pace-card { position: relative; overflow: hidden; transition: border-color .25s, background .25s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.pace-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(42, 33, 24, .1); }
.pace-card[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(232, 155, 44, .18); }
.pace-icon { display: inline-block; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.pace-card:hover .pace-icon, .pace-card[aria-pressed="true"] .pace-icon { transform: scale(1.25) rotate(-8deg); }

.stepper output { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.stepper:active output { transform: scale(1.2); }
.btn.icon:hover { background: var(--accent-soft); }

.exp { transition: border-color .2s, transform .2s, background .2s; }
.exp:hover { border-color: var(--accent); transform: translateX(3px); }

/* ---------- action bar: glass, with a light sweep across the main button ---------- */
.action-bar {
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3);
  animation: barIn .5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes barIn { from { transform: translateY(100%); } }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 150% 0; animation: sweep 4s ease-in-out infinite;
}
.btn.primary:hover { box-shadow: 0 10px 30px rgba(232, 155, 44, .45); }
#goBtn:hover { transform: translateY(-2px) scale(1.02); }

/* ---------- loading: a route orbiting a pin ---------- */
.loading { backdrop-filter: blur(6px); animation: fadeIn .25s both; }
.loading-card { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; padding: 30px 36px; border: 1px solid var(--line); }
.spinner {
  width: 54px; height: 54px; border: 0; position: relative;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--accent)); border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%);
}
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- results ---------- */
.results-head { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.stat { transition: transform .25s, box-shadow .25s; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ov-card { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.ov-card:nth-child(2) { animation-delay: .06s; }
.ov-card:nth-child(3) { animation-delay: .12s; }
.ov-card:nth-child(4) { animation-delay: .18s; }
.ov-card:nth-child(n+5) { animation-delay: .24s; }
.ov-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(42, 33, 24, .12); }
.ov-meter i { animation: grow 1s .3s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.day-tab { transition: background .2s, color .2s, border-color .2s, transform .2s; }
.day-tab:hover { transform: translateY(-1px); }
.day { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; transition: box-shadow .3s; }
.day:hover { box-shadow: 0 2px 4px rgba(42, 33, 24, .05), 0 18px 40px rgba(42, 33, 24, .1); }
.tl li { animation: slideIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.tl li:nth-child(2) { animation-delay: .04s; } .tl li:nth-child(3) { animation-delay: .08s; }
.tl li:nth-child(4) { animation-delay: .12s; } .tl li:nth-child(5) { animation-delay: .16s; }
.tl li:nth-child(6) { animation-delay: .2s; } .tl li:nth-child(n+7) { animation-delay: .24s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } }
.tl li.visit .body, .tl li.event .body { transition: background .2s; border-radius: 0 10px 10px 0; }
.tl li.visit:hover .body, .tl li.event:hover .body { background: color-mix(in srgb, var(--day-color, var(--accent)) 7%, transparent); }
.tl li.current .body::before { animation: beacon 1.6s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--day-color, var(--accent)) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.stop-name { transition: color .2s; }
.stop-name:hover { color: var(--day-color, var(--accent-text)); }
.toast { box-shadow: 0 12px 30px rgba(21, 14, 34, .3); }

@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step:hover, :root:not([data-theme="light"]) .step:focus-within,
  :root:not([data-theme="light"]) .city-card:hover, :root:not([data-theme="light"]) .day:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ha-route { stroke-dashoffset: 0; }
  .ha-pin > *, .ha-tag > * { transform: none; opacity: 1; }
}
@media print { body::before, body::after, .hero-art { display: none; } }