/* Kit-only styles: animations, range slider, responsive helpers */
@keyframes oasisFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
.oasis-float { animation: oasisFloat 5s var(--ease-in-out) infinite; }

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

/* Range slider — gold thumb on forest track */
.oasis-range { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); outline: none; cursor: pointer; }
.oasis-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px;
  border-radius: 999px; background: var(--cream-50); border: 4px solid var(--gold-500);
  box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); }
.oasis-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.oasis-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: var(--cream-50);
  border: 4px solid var(--gold-500); box-shadow: var(--shadow-md); cursor: pointer; }

/* Light variant — forest track + forest-ringed thumb, for use on pale cards */
.oasis-range-light { background: linear-gradient(90deg, var(--leaf-500), var(--forest-700)); }
.oasis-range-light::-webkit-slider-thumb { border-color: var(--forest-700); }
.oasis-range-light::-moz-range-thumb { border-color: var(--forest-700); }

.oasis-flip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-lg); }

/* Entrance: content is ALWAYS opacity 1 (never hidden); only a gentle rise. */
.oasis-rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .oasis-rise { animation: oasisRise 0.6s var(--ease-out) both; }
}
@keyframes oasisRise {
  from { transform: translateY(22px); }
  to   { transform: translateY(0); }
}

@media (max-width: 760px) {
  .oasis-desktop-nav a { display: none; }
  .oasis-hide-sm { display: none !important; }
}

@media (min-width: 761px) {
  .oasis-mobile-cta { display: none !important; }
}

/* ===== Apply journey ===== */
.oasis-journey { position: relative; max-width: 940px; margin: 0 auto var(--space-10); padding: 8px 0; }
.oasis-trail { position: absolute; top: 18px; bottom: 64px; left: 50%; width: 0;
  border-left: 3px dashed var(--sand-400); transform: translateX(-50%); z-index: 0; }
.oasis-station { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr 72px 1fr; align-items: center; margin: 26px 0; }
.oasis-coin { grid-column: 2; justify-self: center; width: 64px; height: 64px;
  border-radius: 999px; display: grid; place-items: center; }
.oasis-station.is-left  .oasis-station-card { grid-column: 1; margin-right: 14px; }
.oasis-station.is-right .oasis-station-card { grid-column: 3; margin-left: 14px; }
.oasis-station-card { background: var(--surface-raised); border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
.oasis-finish { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 12px; margin-top: 18px; text-align: center; }
.oasis-coin-finish { width: 72px; height: 72px; }
@keyframes oasisPop { 0% { transform: scale(0.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .oasis-coin { animation: oasisPop 0.5s var(--ease-spring) both; }
}

@media (max-width: 760px) {
  .oasis-trail { left: 32px; }
  .oasis-station { grid-template-columns: 64px 1fr; column-gap: 8px; }
  .oasis-coin { grid-column: 1; width: 56px; height: 56px; }
  .oasis-station.is-left  .oasis-station-card,
  .oasis-station.is-right .oasis-station-card { grid-column: 2; margin: 0; }
  .oasis-finish { align-items: flex-start; padding-left: 4px; }
}

/* ===== Fresh-facts ticker ===== */
.oasis-ticker { display: flex; gap: 14px; width: max-content;
  animation: oasisMarquee 38s linear infinite; }
.oasis-ticker-wrap:hover .oasis-ticker { animation-play-state: paused; }
@keyframes oasisMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .oasis-ticker { animation: none; } }

/* ===== Smart shopping cart ===== */
.oasis-tip-card { background: var(--surface-raised); border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.oasis-tip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.oasis-ebt-card { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1.586;
  border-radius: 18px; padding: 22px; color: var(--cream-50); overflow: hidden;
  background: linear-gradient(135deg, var(--forest-700), var(--forest-900));
  box-shadow: var(--shadow-lg); }
.oasis-ebt-hot { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.oasis-ebt-hot:hover { transform: translateY(-2px); }

/* ===== Myth vs Fact flip ===== */
.oasis-myth { perspective: 1200px; }
.oasis-myth-inner { position: relative; transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-spring); }
.oasis-myth.flipped .oasis-myth-inner { transform: rotateY(180deg); }
.oasis-myth-face { position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; }
.oasis-myth-back { transform: rotateY(180deg); }