/* Homepage (Newcomer, "Find your way") — loaded only by the "/" route (routes/public.js).
   Palette follows the Newcomer brand guidelines; the matching Tailwind tokens are the nc-* colours in src/tailwind.css. */

/* The page is built with Tailwind utilities, which live in cascade layers, so the unlayered base rules in
   theme.css (h1-h4, p, a, img/svg) would otherwise beat them. Inside .nc-home those elements roll back to the
   layered styles; .nc-chrome is the Newcomer header and footer. :where() keeps this at element specificity, so component classes still win. */
:where(.nc-home, .nc-chrome) :is(h1, h2, h3, h4, p, a) { all: revert-layer; }
:where(.nc-home, .nc-chrome) a:hover { all: revert-layer; }
:where(.nc-home, .nc-chrome) :is(img, svg) { max-width: revert-layer; height: revert-layer; }

/* Browser surfaces in the brand palette. */
.page-home ::selection { background: #F7EBDD; color: #0C1627; }
:where(.nc-home, .nc-chrome) :focus-visible { outline: 2px solid #0C1627; outline-offset: 3px; }
:where(.nc-home, .nc-chrome) .nc-dark :focus-visible { outline-color: #D7A171; }
:where(.nc-home) :is(input, select) { caret-color: #C8231D; accent-color: #0C1627; }
:where(.nc-home) .nc-strip { scrollbar-width: thin; scrollbar-color: #D7A171 transparent; }

/* The one authored motion moment: arrival routes draw across the hero map, then the start point breathes.
   Content is fully visible without it (reduced motion gets the finished map). */
@media (prefers-reduced-motion: no-preference) {
  .nc-route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nc-draw 1.6s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--d, 0s); }
  .nc-dest { opacity: 0; animation: nc-in .5s ease-out forwards; animation-delay: calc(var(--d, 0s) + 1s); }
  .nc-pulse { animation: nc-pulse 2.6s ease-out 1.8s infinite; transform-box: fill-box; transform-origin: center; }
}
/* Compass dial ("What are you looking for?"): the needle swings to the chosen area and settles with a slight overshoot. */
.nc-needle { transform-box: view-box; transform-origin: 200px 200px; }
@media (prefers-reduced-motion: no-preference) {
  .nc-needle { transition: transform .9s cubic-bezier(.34, 1.4, .64, 1); }
}
@keyframes nc-draw { to { stroke-dashoffset: 0; } }
@keyframes nc-in { to { opacity: 1; } }
@keyframes nc-pulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.4); opacity: 0; } }