/* Atlas Kitchen — layout polish that complements the CDN Tailwind theme.
   Keep this small: structural niceties only (the warm color theme lives in
   base.html's tailwind.config). */

/* Smooth, consistent motion across interactive cards/buttons. */
.atlas-tile,
.atlas-card-lift {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1),
              box-shadow .18s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

/* Cuisine gallery tile: layered warm gradient + soft inner sheen.
   The per-cuisine accent gradient is applied with Tailwind classes; this adds
   the glassy top highlight + depth that's awkward in utilities alone. */
.cuisine-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cuisine-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, .55) 0%, transparent 55%);
  z-index: -1;
}
.cuisine-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  pointer-events: none;
}
.cuisine-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -14px rgba(120, 70, 40, .45);
}
.cuisine-tile:active {
  transform: translateY(-1px) scale(.98);
}

/* Section eyebrow — small uppercase label used across the site. */
.atlas-eyebrow {
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* "How it works" connector line behind the numbered steps (desktop). */
@media (min-width: 768px) {
  .howto-rail {
    position: relative;
  }
  .howto-rail::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(
      90deg, rgba(192, 102, 63, .35) 0 10px, transparent 10px 20px);
    z-index: 0;
  }
}

/* Dish hero — shimmer skeleton while the photo loads. */
.dish-hero-skeleton {
  background: linear-gradient(
    110deg,
    rgba(245, 237, 228, .9) 0%,
    rgba(232, 220, 208, .95) 40%,
    rgba(245, 237, 228, .9) 80%
  );
  background-size: 200% 100%;
  animation: dish-shimmer 1.4s ease-in-out infinite;
}
@keyframes dish-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dish-hero-skeleton { animation: none; }
}

/* Landing — "Choose your path" navigation guide. */
.nav-guide-shell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(192, 102, 63, .08) 0%, transparent 55%),
    radial-gradient(700px 280px at 100% 100%, rgba(125, 138, 90, .1) 0%, transparent 50%),
    rgba(255, 253, 248, .92);
}
.nav-guide-tab {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.nav-guide-tab[aria-selected="true"] {
  background: #fffdf8;
  border-color: rgba(192, 102, 63, .45);
  box-shadow: 0 10px 28px -14px rgba(120, 70, 40, .35);
}
.nav-guide-tab:active {
  transform: scale(.98);
}
.nav-guide-steps {
  position: relative;
}
.nav-guide-steps::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(192, 102, 63, .35) 0%, rgba(125, 138, 90, .25) 100%);
  border-radius: 2px;
}
@media (min-width: 1024px) {
  .nav-guide-steps::before {
    left: 1.25rem;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .atlas-tile,
  .atlas-card-lift,
  .cuisine-tile,
  .nav-guide-tab {
    transition: none;
  }
}