/* ═══════════════════════════════════════════════════════════════
   Amanda Fitch's Blog — Oracle CSS
   Slime Oracle interface: glassmorphism input, chips, thinking,
   response panel
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   ORACLE HERO
   ───────────────────────────────────────── */

.oracle-hero {
  min-height: 100vh;
  background-color: hsl(272 55% 5%);
  background-image: url('../assets/images/hero-banner.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centred, not top-aligned. At 100vh the content sat 113px from the top
     with 448px of empty forest beneath it, which read as unbalanced. */
  justify-content: center;
  padding: 0 1.5rem 3rem;
  position: relative;
  overflow: hidden;
}

/* The shared #site-hero padding is tuned for the journal pages, where the
   banner is a fixed-height strip. Inside the full-viewport oracle hero the
   block is centred, so it needs far less of its own leading. */
.oracle-hero #site-hero {
  padding-top: clamp(1rem, 3vh, 2rem);
  padding-bottom: clamp(1rem, 3vh, 2rem);
}

.oracle-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    hsl(272 55%  6% / 0.88) 0%,
    hsl(278 45% 10% / 0.72) 35%,
    hsl(272 50%  7% / 0.82) 65%,
    hsl(272 55%  5% / 0.98) 100%
  );
}

/* ─────────────────────────────────────────
   ORACLE CONTAINER
   ───────────────────────────────────────── */

.oracle-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Pulls the subtitle up under the eyebrow so the two read as one title
     block; they were 36px apart, further than any other gap on the page. */
  margin-top: -0.75rem;
}

/* ─────────────────────────────────────────
   SITE HERO BANNER (shared component)
   Slime + eyebrow heading — used on home
   page and all journal pages.
   ───────────────────────────────────────── */

#site-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
  /* ↓ Single source of truth for hero vertical spacing on ALL pages */
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(2rem, 6vh, 4rem);
}

/* Slime mascot — oracle mode */
.oracle-slime {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px hsl(280 70% 65% / 0.75));
  animation: slime-bounce 2.4s ease-in-out infinite;
  margin-bottom: 1.25rem;
  transition: filter 0.3s ease, animation-duration 0.3s;
}

.oracle-slime.is-thinking {
  animation: oracle-think 0.35s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 32px hsl(44 92% 65% / 0.95));
}

/* Site title — pinned top-center of hero */
.oracle-site-title {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-logo);
  /* Jersey 15 is a tall, condensed pixel face — its glyphs sit much smaller
     within the em box than Press Start 2P's did, so it needs roughly double
     the font-size to read at the same optical weight. Clamped because the
     title is absolutely positioned with nowrap and would otherwise overflow
     a narrow viewport. */
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  line-height: 1;
  color: white;
  white-space: nowrap;
  text-shadow:
    2px 2px 0 hsl(272 50% 8% / 0.9),
    0 0 30px hsl(280 60% 60% / 0.3);
  letter-spacing: 0.1em;
  pointer-events: none;
}

.oracle-eyebrow {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  color: var(--col-yellow);
  text-shadow: 0 0 24px hsl(44 90% 58% / 0.65);
  margin-bottom: 0.35rem;
  animation: gem-pulse 3s ease-in-out infinite;
  text-align: center;
  width: 100%;
}

/* Oracle title (logo font) */
.oracle-title {
  font-family: var(--font-logo);
  font-size: clamp(0.6rem, 1.8vw, 0.95rem);
  color: white;
  line-height: 1.65;
  margin-bottom: 0.6rem;
  text-shadow:
    2px 2px 0 hsl(272 50% 8% / 0.9),
    0 0 36px hsl(280 60% 60% / 0.25);
}

/* Oracle subtitle — supporting line under the eyebrow, so it reads smaller
   than the eyebrow rather than larger. At 1.5rem in Space Grotesk it set
   bigger than the label it supports and inverted the hierarchy. */
.oracle-subtitle {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: hsl(280 18% 68%);
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   INPUT PANEL
   ───────────────────────────────────────── */

.oracle-input-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: hsl(272 48% 9% / 0.88);
  border: 2px solid hsl(278 38% 44%);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 0 0 1px hsl(278 48% 50% / 0.18),
    0 0 60px hsl(278 50% 25% / 0.12),
    inset 0 1px 0 hsl(280 50% 60% / 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  /* Tighter than the gap above it, so the bar and its chips read as one
     control rather than two separate blocks. */
  margin-bottom: 0.85rem;
}

.oracle-input-wrapper:focus-within {
  border-color: var(--col-yellow);
  box-shadow:
    0 0 0 1px hsl(44 88% 58% / 0.35),
    0 0 70px hsl(44 88% 58% / 0.1),
    inset 0 1px 0 hsl(44 90% 70% / 0.07);
}

.oracle-input-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  opacity: 0.65;
  user-select: none;
}

.oracle-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: white;
  caret-color: var(--col-yellow);
  min-width: 0;
}

.oracle-input::placeholder {
  color: hsl(280 14% 52%);
  font-style: italic;
}

.oracle-submit {
  flex-shrink: 0;
  background: var(--col-purple);
  border: 2px solid hsl(272 48% 28%);
  border-radius: 3px;
  color: white;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 1.15rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
  line-height: 1.25;
  white-space: nowrap;
}

.oracle-submit:hover {
  background: var(--col-yellow);
  color: hsl(272 50% 12%);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 hsl(272 48% 28%);
}

.oracle-submit:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* ─────────────────────────────────────────
   SUGGESTION CHIPS
   ───────────────────────────────────────── */

/* Chips span the full width of the ask bar above them — both sit inside the
   700px .oracle-container, but the chips were centred at their natural width
   and sat 25px inside each edge.

   flex: 1 rather than justify-content: space-between: the chips then grow to
   fill the row, and a wrapped row still fills its width instead of leaving
   the last one or two stranded across a gap. */
.oracle-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.oracle-chips > .oracle-chip {
  flex: 1 1 auto;
  justify-content: center;
}

/* Sized so all five chips sit on one row inside the 700px container. Space
   Grotesk sets wider than the VT323 it replaced, which pushed "All" onto a
   second line at the previous size. */
.oracle-chip {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border: 1.5px solid hsl(278 28% 44% / 0.5);
  border-radius: 2px;
  color: hsl(280 16% 72%);
  background: hsl(272 38% 11% / 0.72);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  line-height: 1.35;
  user-select: none;
  text-decoration: none;   /* reset <a> underline */
  display: inline-flex;    /* consistent layout for both <a> and <button> */
  align-items: center;
}

.oracle-chip:hover {
  color: var(--col-yellow);
  border-color: hsl(44 88% 58% / 0.75);
  background: hsl(272 38% 15% / 0.82);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px hsl(44 88% 40% / 0.14);
}

/* ─────────────────────────────────────────
   THINKING ANIMATION
   ───────────────────────────────────────── */

.oracle-thinking {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1.75rem 0 0.5rem;
}

.oracle-thinking.is-active {
  display: flex;
}

.oracle-thinking__label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: hsl(280 16% 62%);
  letter-spacing: 0.06em;
  margin-right: 0.35rem;
  font-style: italic;
}

.oracle-thinking__dot {
  width: 9px;
  height: 9px;
  background: var(--col-purple);
  border-radius: 50%;
  animation: dot-pulse 1.1s ease-in-out infinite;
}

.oracle-thinking__dot:nth-child(3) { animation-delay: 0.18s; }
.oracle-thinking__dot:nth-child(4) { animation-delay: 0.36s; }

@keyframes dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.65);
    opacity: 0.45;
    background: var(--col-purple);
  }
  40% {
    transform: scale(1.25);
    opacity: 1;
    background: var(--col-yellow);
  }
}

@keyframes oracle-think {
  from { transform: scaleX(1)    scaleY(1);    }
  to   { transform: scaleX(0.88) scaleY(1.14); }
}

/* ─────────────────────────────────────────
   ORACLE RESULTS SECTION
   ───────────────────────────────────────── */

.oracle-results {
  display: none;
  padding: var(--space-12) 0 var(--space-16);
}

.oracle-results.is-visible {
  display: block;
  animation: fade-slide-up 0.45s ease both;
}

/* RPG speech bubble — oracle response message */
.oracle-message {
  max-width: 680px;
  margin: 0 auto var(--space-8);
  background: var(--col-surface);
  border: 3px solid var(--col-purple-deep);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-8);
  box-shadow: var(--panel-shadow);
  position: relative;
  text-align: center;
}

.oracle-message::before {
  content: '🔮';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  background: var(--col-bg);
  padding: 0 0.5rem;
  line-height: 1;
}

.oracle-message__intro {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--col-text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.oracle-message__text {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--col-purple-deep);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* Reset / ask again bar */
.oracle-reset-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────
   ORACLE NAV (minimal homepage nav)
   ───────────────────────────────────────── */

.oracle-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */

@media (max-width: 640px) {
  .oracle-hero      { padding: clamp(4rem, 12vh, 8rem) 1rem 2rem; }
  .oracle-title     { font-size: 0.58rem; }
  .oracle-subtitle  { font-size: 1.25rem; }
  .oracle-slime     { width: 68px; height: 68px; }

  .oracle-input-wrapper {
    padding: 0.75rem 0.9rem;
    gap: 0.5rem;
  }

  .oracle-submit { font-size: 1.1rem; padding: 0.4rem 0.85rem; }

  .oracle-message__text { font-size: 1.4rem; }
}