/* Custom styles for GizeWay Landing Page */

/* Inline icon SVGs (replacing the Font Awesome web font -- see
   index.html). Matches Font Awesome's own official "SVG + JS" render
   CSS exactly (display/height/vertical-align/overflow), so a glyph
   swapped from <i class="fa-solid fa-x"> to this <svg> renders
   pixel-identically: 1em square, fills with the surrounding text
   color, and sits on the same baseline. */
.icon-svg {
  display: inline-block;
  height: 1em;
  width: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}

@layer utilities {
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #7A1832;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #671329;
}

/* Phone Mockup Floating Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float {
    animation: none;
  }
}

/* Hero AI-planner demo: each itinerary stop fades/slides in one at a
   time (staggered via inline animation-delay, set per-stop in
   loadMockPrompt()) instead of all appearing at once, so the reveal
   itself reads as "the plan is being assembled" rather than a plain
   content swap. */
@keyframes stopReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stop-reveal {
  animation: stopReveal 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .stop-reveal {
    animation: none;
  }
}

/* Smart Map tab: the selected transport-mode row (Walking/Metro/Taxi)
   in the route panel, and the matching state on the illustrated
   connector line between the two stop pins. Selecting a mode is meant
   to feel like the route redraws itself for that mode. */
.route-mode {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.route-mode:hover {
  transform: translateY(-1px);
}

.route-mode[aria-pressed="true"] {
  background-color: #fff;
  border-color: currentColor;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}

.route-connector {
  transition: border-color 0.3s ease;
}

/* Day-by-Day itinerary stops: a tap/click reveals one extra line about
   why GizeWay picked that stop -- "select an activity" made tangible
   without restructuring the existing 3-day layout. */
.stop-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.stop-detail > div {
  overflow: hidden;
}

.stop-card[aria-expanded="true"] .stop-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.stop-card-chevron {
  transition: transform 0.25s ease;
}

.stop-card[aria-expanded="true"] .stop-card-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .stop-detail,
  .stop-card-chevron {
    transition: none;
  }
}

/* Hero AI-planner demo: a small celebratory "pop" on the budget-summary
   line once a plan finishes assembling -- reads as "done!" without a
   full confetti moment. Only ever applied outside prefers-reduced-motion
   (see loadMockPrompt() in app.js), so no separate media-query guard is
   needed here. */
@keyframes flourishPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.flourish-pop {
  animation: flourishPop 0.4s ease-out;
}