/*
 * Xiao Ao Travel — daily plan and departure-readiness motion
 *
 * These scenes deliberately visualise only the two planning decisions that
 * already exist in the flow: a day has three deliberately chosen time beats,
 * and departure readiness brings tickets, documents and reminders together.
 * They are not illustrations and never invent a destination, reservation,
 * flight, time or document status.
 *
 * This stylesheet is loaded after update.css.  It keeps the motion inside the
 * planning stage rather than adding a separate decorative card.
 */

/* ─── A day: choose a rhythm, then make one decision at a time ─────────── */
.journey-stage-visual.visual-days {
  --day-ink: #314d63;
  --day-accent: #e86f2e;
  --day-sun: #f6b77f;
  --day-soft: rgba(232, 111, 46, .14);
  --day-paper: rgba(255, 253, 249, .92);
}

.journey-focus:has(.visual-days) {
  --journey-accent: var(--day-accent);
  --journey-accent-soft: var(--day-soft);
  --journey-ink: var(--day-ink);
}

.visual-days .day-field {
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 8vw, 54px);
  width: min(366px, 100%);
  height: 210px;
  padding: 45px 39px 35px;
}

/* The calm field makes the route read as a day plan, not as a chart. */
.visual-days .day-field::before {
  z-index: -2;
  top: 39px;
  right: 10px;
  bottom: 25px;
  left: 10px;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--day-accent) 16%, transparent);
  border-radius: 39% 61% 51% 49% / 50% 45% 55% 50%;
  background:
    radial-gradient(circle at 18% 68%, color-mix(in srgb, var(--day-sun) 14%, transparent) 0 10%, transparent 11%),
    radial-gradient(circle at 83% 30%, color-mix(in srgb, var(--day-ink) 9%, transparent) 0 9%, transparent 10%),
    linear-gradient(132deg, rgba(255,255,255,.7), rgba(255,250,246,.22));
  box-shadow: inset 0 1px rgba(255,255,255,.82);
  content: "";
}

.visual-days .day-field::after {
  position: absolute;
  z-index: -1;
  top: 117px;
  right: 24px;
  left: 24px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--day-accent) 13%, transparent), transparent 70%);
  content: "";
  filter: blur(4px);
}

/* One continuous route means early / midday / evening remain part of one day. */
.visual-days .day-time-line {
  z-index: 0;
  top: 113px;
  right: 28px;
  left: 28px;
  height: 2px;
  overflow: visible;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--day-sun), var(--day-accent) 48%, var(--day-ink));
  box-shadow: 0 1px rgba(255,255,255,.9), 0 7px 16px rgba(61, 63, 65, .08);
  transform-origin: left center;
}

.visual-days .day-time-line::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), transparent);
  content: "";
  opacity: 0;
  transform: translate(-120%, -50%);
}

/* A beat is a deliberately open time slot; its centre is intentionally blank
 * rather than pretending an attraction has already been selected. */
.visual-days .day-beat {
  z-index: 2;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-top: 3px;
  border: 5px solid var(--day-paper);
  border-radius: 15px 15px 12px 12px;
  box-sizing: border-box;
  box-shadow: 0 12px 22px rgba(67, 52, 39, .13), 0 0 0 1px color-mix(in srgb, var(--day-accent) 22%, transparent);
  transform: none;
}

.visual-days .day-beat::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.visual-days .day-beat::after {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, currentColor 48%, transparent);
  content: "";
  transform: translateX(-50%);
}

.visual-days .day-beat-one { background: color-mix(in srgb, var(--day-sun) 18%, #fffaf6); color: var(--day-sun); }
.visual-days .day-beat-two { background: color-mix(in srgb, var(--day-accent) 15%, #fffaf6); color: var(--day-accent); }
.visual-days .day-beat-three { background: color-mix(in srgb, var(--day-ink) 10%, #fffaf6); color: var(--day-ink); }

/* The route marker is a current-decision cue, not a fake map pin. */
.visual-days .day-route {
  z-index: 3;
  top: 75px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 4px solid var(--day-paper);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--day-accent);
  box-shadow: 0 0 0 7px var(--day-soft), 0 8px 18px rgba(131, 67, 34, .16);
}

.visual-days .day-route::before {
  position: absolute;
  top: -17px;
  left: 5px;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--day-accent) 55%, transparent);
  content: "";
}

.visual-days .day-field b { color: var(--day-ink); }
.visual-days .day-field small { color: color-mix(in srgb, var(--day-ink) 71%, #806f62); }

/* ─── Departure readiness: bring real tickets, documents and reminders together ─ */
.journey-stage-visual.visual-prepare {
  --prepare-ink: #385c4a;
  --prepare-accent: #4b9464;
  --prepare-warm: #d98a42;
  --prepare-soft: rgba(75, 148, 100, .14);
  --prepare-paper: rgba(255, 254, 250, .96);
}

.journey-focus:has(.visual-prepare) {
  --journey-accent: var(--prepare-accent);
  --journey-accent-soft: var(--prepare-soft);
  --journey-ink: var(--prepare-ink);
}

.visual-prepare .prepare-field {
  isolation: isolate;
  width: min(366px, 100%);
  height: 210px;
}

.visual-prepare .prepare-field::before {
  z-index: -2;
  inset: 35px 14px 26px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--prepare-accent) 17%, transparent);
  border-radius: 54% 46% 48% 52% / 47% 55% 45% 53%;
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--prepare-accent) 11%, transparent) 0 15%, transparent 16%),
    linear-gradient(136deg, rgba(255,255,255,.74), rgba(249,255,250,.18));
  box-shadow: inset 0 1px rgba(255,255,255,.8);
  content: "";
  transform: rotate(2deg);
}

.visual-prepare .prepare-field::after {
  position: absolute;
  z-index: -1;
  right: 38px;
  bottom: 22px;
  left: 38px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--prepare-accent) 13%, transparent), transparent 70%);
  content: "";
  filter: blur(5px);
}

/* The route joins the three actual readiness categories. */
.visual-prepare .prepare-route {
  z-index: 1;
  top: 101px;
  right: 37px;
  left: 37px;
  height: 2px;
  overflow: visible;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--prepare-warm), var(--prepare-accent) 52%, var(--prepare-ink));
  box-shadow: 0 1px rgba(255,255,255,.9), 0 7px 16px rgba(45, 87, 59, .08);
  transform-origin: left center;
}

.visual-prepare .prepare-route::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26%;
  height: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), transparent);
  content: "";
  opacity: 0;
  transform: translate(-120%, -50%);
}

/* Tickets remain generic cards: the scene never claims they are valid or
 * displays a code.  The small notch only makes a real ticket/document stack
 * legible at a glance. */
.visual-prepare .prepare-ticket {
  z-index: 2;
  top: 57px;
  width: 72px;
  height: 92px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--prepare-ink) 22%, transparent);
  border-radius: 15px;
  background:
    linear-gradient(90deg, transparent 0 64%, color-mix(in srgb, var(--prepare-accent) 13%, transparent) 64% 65%, transparent 65%),
    linear-gradient(145deg, var(--prepare-paper), color-mix(in srgb, var(--prepare-accent) 7%, #fffaf6));
  box-shadow: 0 16px 29px rgba(48, 74, 53, .11), inset 0 1px rgba(255,255,255,.92);
}

.visual-prepare .prepare-ticket::before {
  position: absolute;
  top: 35px;
  left: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--prepare-accent) 10%, #fffaf7);
  box-shadow: 62px 0 0 color-mix(in srgb, var(--prepare-accent) 10%, #fffaf7);
  content: "";
}

.visual-prepare .prepare-ticket::after {
  top: 26px;
  right: 14px;
  left: 14px;
  height: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--prepare-ink) 28%, transparent);
  box-shadow: 0 13px 0 color-mix(in srgb, var(--prepare-ink) 18%, transparent), 0 26px 0 color-mix(in srgb, var(--prepare-ink) 23%, transparent);
}

.visual-prepare .prepare-ticket-one { left: 42px; transform: rotate(-10deg); }
.visual-prepare .prepare-ticket-two { right: 42px; transform: rotate(10deg); }

/* The beacon is a single readiness point.  It remains visually quiet until
 * the user arrives at this actual final planning step. */
.visual-prepare .prepare-beacon {
  z-index: 4;
  top: 78px;
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  background: var(--prepare-accent);
  box-shadow: 0 0 0 9px var(--prepare-soft), 0 12px 23px rgba(40, 91, 58, .16);
}

.visual-prepare .prepare-beacon::before {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 18px;
  height: 9px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  content: "";
  transform: rotate(-45deg);
}

.visual-prepare .prepare-beacon::after { display: none; }

.visual-prepare .prepare-field em {
  z-index: 4;
  bottom: 26px;
  min-width: 40px;
  padding: 5px 8px;
  border-color: color-mix(in srgb, var(--prepare-accent) 30%, transparent);
  background: rgba(255,254,251,.74);
  color: color-mix(in srgb, var(--prepare-ink) 83%, #42634f);
  box-shadow: 0 7px 14px rgba(54, 82, 59, .06);
  letter-spacing: .03em;
  text-align: center;
}

.visual-prepare .prepare-field em:nth-of-type(1) { left: 18px; }
.visual-prepare .prepare-field em:nth-of-type(2) { left: calc(50% - 28px); }
.visual-prepare .prepare-field em:nth-of-type(3) { right: 15px; }
.visual-prepare .prepare-field b { color: var(--prepare-ink); }
.visual-prepare .prepare-field small { color: color-mix(in srgb, var(--prepare-ink) 70%, #806f62); }

/* Enter once, then rest.  The glints trace an existing planning route; no
 * perpetual unrelated motion runs while the user is trying to make a choice. */
@media (prefers-reduced-motion: no-preference) {
  .journey-flow.is-entering .visual-days .day-time-line,
  .journey-flow.is-entering .visual-prepare .prepare-route {
    animation: semanticDayTicketRouteDraw 560ms 110ms cubic-bezier(.2,.8,.2,1) both;
  }

  .journey-flow.is-entering .visual-days .day-beat {
    animation: semanticDayBeatArrive 460ms cubic-bezier(.2,.85,.2,1) both;
  }
  .journey-flow.is-entering .visual-days .day-beat-two { animation-delay: 100ms; }
  .journey-flow.is-entering .visual-days .day-beat-three { animation-delay: 190ms; }
  .journey-flow.is-entering .visual-days .day-route { animation: semanticDayDecisionLand 500ms 220ms cubic-bezier(.2,.85,.2,1) both; }

  .journey-flow.is-entering .visual-prepare .prepare-ticket-one { animation: semanticTicketDockLeft 560ms 150ms cubic-bezier(.18,.82,.25,1) both; }
  .journey-flow.is-entering .visual-prepare .prepare-ticket-two { animation: semanticTicketDockRight 560ms 230ms cubic-bezier(.18,.82,.25,1) both; }
  .journey-flow.is-entering .visual-prepare .prepare-beacon { animation: semanticPrepareConfirm 510ms 250ms cubic-bezier(.2,.85,.2,1) both; }

  .visual-days .day-time-line::before,
  .visual-prepare .prepare-route::before { animation: semanticDayTicketGlint 7s 1.4s ease-in-out infinite; }
}

@keyframes semanticDayTicketRouteDraw {
  from { opacity: 0; transform: scaleX(.08); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes semanticDayBeatArrive {
  from { opacity: 0; transform: translateY(13px) scale(.7); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes semanticDayDecisionLand {
  from { opacity: 0; transform: translateY(-13px) scale(.68); }
  72% { opacity: 1; transform: translateY(2px) scale(1.07); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes semanticTicketDockLeft {
  from { opacity: 0; transform: translate(30px, 16px) rotate(-20deg) scale(.88); }
  to { opacity: 1; transform: translate(0, 0) rotate(-10deg) scale(1); }
}

@keyframes semanticTicketDockRight {
  from { opacity: 0; transform: translate(-30px, 16px) rotate(20deg) scale(.88); }
  to { opacity: 1; transform: translate(0, 0) rotate(10deg) scale(1); }
}

@keyframes semanticPrepareConfirm {
  from { opacity: 0; transform: translateY(-14px) scale(.65); }
  72% { opacity: 1; transform: translateY(2px) scale(1.06); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes semanticDayTicketGlint {
  0%, 67%, 100% { opacity: 0; transform: translate(-120%, -50%); }
  75% { opacity: .7; }
  91% { opacity: 0; transform: translate(410%, -50%); }
}

@media (max-width: 760px) {
  .visual-days .day-field,
  .visual-prepare .prepare-field { width: min(286px, 100%); height: 176px; }
  .visual-days .day-field { gap: clamp(24px, 9vw, 34px); padding: 35px 25px 26px; }
  .visual-days .day-field::before { top: 30px; right: 5px; bottom: 16px; left: 5px; }
  .visual-days .day-field::after { top: 98px; right: 17px; left: 17px; }
  .visual-days .day-time-line { top: 96px; right: 19px; left: 19px; }
  .visual-days .day-beat { width: 35px; height: 35px; border-width: 4px; border-radius: 12px 12px 10px 10px; }
  .visual-days .day-beat::before { width: 7px; height: 7px; }
  .visual-days .day-beat::after { top: calc(100% + 7px); height: 8px; }
  .visual-days .day-route { top: 64px; left: calc(50% - 8px); width: 16px; height: 16px; border-width: 3px; }
  .visual-days .day-route::before { top: -14px; left: 4px; height: 10px; }

  .visual-prepare .prepare-field::before { inset: 27px 6px 17px; }
  .visual-prepare .prepare-field::after { right: 25px; bottom: 13px; left: 25px; }
  .visual-prepare .prepare-route { top: 81px; right: 27px; left: 27px; }
  .visual-prepare .prepare-ticket { top: 43px; width: 57px; height: 75px; border-radius: 12px; }
  .visual-prepare .prepare-ticket-one { left: 26px; }.visual-prepare .prepare-ticket-two { right: 26px; }
  .visual-prepare .prepare-ticket::before { top: 28px; box-shadow: 48px 0 0 color-mix(in srgb, var(--prepare-accent) 10%, #fffaf7); }
  .visual-prepare .prepare-ticket::after { top: 21px; right: 11px; left: 11px; box-shadow: 0 11px 0 color-mix(in srgb, var(--prepare-ink) 18%, transparent), 0 22px 0 color-mix(in srgb, var(--prepare-ink) 23%, transparent); }
  .visual-prepare .prepare-beacon { top: 62px; left: calc(50% - 19px); width: 38px; height: 38px; }
  .visual-prepare .prepare-beacon::before { top: 9px; left: 9px; width: 16px; height: 8px; }
  .visual-prepare .prepare-field em { bottom: 16px; min-width: 34px; padding: 4px 6px; font-size: 9px; }
  .visual-prepare .prepare-field em:nth-of-type(1) { left: 6px; }.visual-prepare .prepare-field em:nth-of-type(2) { left: calc(50% - 26px); }.visual-prepare .prepare-field em:nth-of-type(3) { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-days .day-time-line::before,
  .visual-prepare .prepare-route::before,
  .visual-days .day-beat,
  .visual-days .day-route,
  .visual-prepare .prepare-ticket,
  .visual-prepare .prepare-beacon {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .visual-days .day-field::before,
  .visual-days .day-time-line,
  .visual-days .day-beat,
  .visual-days .day-route,
  .visual-prepare .prepare-field::before,
  .visual-prepare .prepare-route,
  .visual-prepare .prepare-ticket,
  .visual-prepare .prepare-beacon,
  .visual-prepare .prepare-field em {
    forced-color-adjust: auto;
    box-shadow: none;
  }
}