/* ============================================================================
   0BVIOUSLY.LOVE — components.css
   Reusable UI components. Mobile-first. Depends on base.css tokens.
   ============================================================================

   COMPONENT VOCABULARY  (class names other agents reuse)
   ----------------------------------------------------------------------------
   NAV          .site-nav  .site-nav--solid  .site-nav__inner  .site-nav__brand
                .site-nav__links  .site-nav__link  .site-nav__toggle  (body.nav-open)
   BUTTONS      .btn  .btn--primary  .btn--ghost  .btn--lg
   SECTIONS     .section  .section__head  .section__eyebrow  .section__title
                .section__lede   (use ids: #concept #games #feedback)
   BEAM DIVIDER .beam-divider                       (atmospheric section break)
   CARDS        .card  .card__media  .card__body  .card__title  .card__text
                .card__foot   .card-grid
   GALLERY      .gallery  .gallery__item  .gallery__media  .gallery__caption
                (image slots are .gallery__media with data-slot="<name>")
   PILLS        .pill  .pill--accent
   FEEDBACK     .feedback-panel  .feedback-panel__head  .feedback-panel__body
                .feedback-panel__field  .feedback-panel__actions   (shell only)
   FOOTER       .site-footer  .site-footer__inner  .site-footer__col
   REVEAL       .reveal  -> .reveal.in   (scroll-reveal, JS toggles .in)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TOP NAV — sticky, transparent → solid on scroll, mobile hamburger
   ---------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              backdrop-filter var(--dur-base) var(--ease);
}
.site-nav--solid {
  background: rgba(14, 22, 34, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--c-slate-soft);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4.5rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  color: var(--c-bone);
  font-feature-settings: "zero" 1;       /* slashed zero in wordmark */
  white-space: nowrap;
}
.site-nav__brand .wordmark__love { color: var(--c-amber); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  list-style: none;
}
.site-nav__link {
  color: var(--c-driftwood);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--c-amber);
  box-shadow: var(--glow-amber);
  transition: width var(--dur-base) var(--ease);
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--c-bone); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { width: 100%; }

/* Hamburger toggle (hidden on desktop) */
.site-nav__toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-sm);
  position: relative;
}
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5rem; height: 2px;
  background: var(--c-bone);
  transform: translateX(-50%);
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.site-nav__toggle-bar { top: 50%; transform: translate(-50%, -50%); }
.site-nav__toggle-bar::before { top: -7px; }
.site-nav__toggle-bar::after  { top: 7px; }
/* open state */
body.nav-open .site-nav__toggle-bar { background: transparent; }
body.nav-open .site-nav__toggle-bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.nav-open .site-nav__toggle-bar::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 768px) {
  .site-nav__toggle { display: block; }
  .site-nav__links {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--gutter) var(--sp-6);
    background: rgba(14, 22, 34, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-slate-soft);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
  }
  body.nav-open .site-nav__links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav__link { font-size: var(--fs-base); width: 100%; }
}

/* ----------------------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

.btn--primary {
  background: linear-gradient(180deg, var(--c-amber-bright), var(--c-amber));
  color: var(--c-night);
  box-shadow: var(--glow-amber);
}
.btn--primary:hover { box-shadow: var(--glow-amber-lg); color: var(--c-night); }

.btn--ghost {
  background: transparent;
  color: var(--c-bone);
  border-color: var(--c-slate);
}
.btn--ghost:hover {
  border-color: var(--c-amber);
  color: var(--c-amber-bright);
  box-shadow: var(--glow-amber);
}

/* ----------------------------------------------------------------------------
   SECTION HEADERS
   ---------------------------------------------------------------------------- */
.section__head {
  max-width: var(--maxw-narrow);
  margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__eyebrow { /* uses .eyebrow tokens */
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.section__title { margin-bottom: var(--sp-4); }
.section__lede { /* uses .lede */ }

/* ----------------------------------------------------------------------------
   BEAM DIVIDER — a thin sweep of lantern light between sections
   ---------------------------------------------------------------------------- */
.beam-divider {
  position: relative;
  height: 1px;
  border: 0;
  margin-block: clamp(var(--sp-6), 6vw, var(--sp-8));
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-slate-soft) 18%,
    rgba(232, 163, 61, 0.55) 50%,
    var(--c-slate-soft) 82%,
    transparent
  );
}
.beam-divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40%; height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
  filter: blur(2px);
  opacity: 0.7;
}

/* ----------------------------------------------------------------------------
   CARDS
   ---------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 163, 61, 0.4);
  box-shadow: var(--shadow-md), var(--glow-amber-lg);
}
.card__media {
  aspect-ratio: 16 / 10;
  background: var(--c-deep);
  overflow: hidden;
}
.card__media > svg, .card__media > img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: var(--fs-lg); color: var(--c-bone); }
.card__text { color: var(--c-driftwood); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

/* ----------------------------------------------------------------------------
   GALLERY — image-slot grid (placeholders drop into .gallery__media)
   ---------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery__item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-slate-soft);
  background: var(--c-deep);
}
.gallery__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
}
.gallery__media > svg, .gallery__media > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery__item:hover .gallery__media > svg,
.gallery__item:hover .gallery__media > img { transform: scale(1.04); }
.gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-driftwood);
  background: linear-gradient(transparent, rgba(14, 22, 34, 0.85));
}

/* ----------------------------------------------------------------------------
   PILLS / BADGES
   ---------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-driftwood);
  background: var(--c-deep);
  border: 1px solid var(--c-slate-soft);
}
.pill--accent {
  color: var(--c-amber);
  border-color: rgba(232, 163, 61, 0.4);
  background: rgba(232, 163, 61, 0.08);
}

/* ----------------------------------------------------------------------------
   FEEDBACK PANEL — styled shell only (backend wired in a later step)
   ---------------------------------------------------------------------------- */
.feedback-panel {
  background: linear-gradient(180deg, var(--c-surface), var(--c-deep));
  border: 1px solid var(--c-slate-soft);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  box-shadow: var(--shadow-md);
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
.feedback-panel__head { margin-bottom: var(--sp-5); }
.feedback-panel__head h3 { margin-bottom: var(--sp-2); }
.feedback-panel__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.feedback-panel__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.feedback-panel__field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-driftwood);
  letter-spacing: var(--tracking-wide);
}
.feedback-panel__field input,
.feedback-panel__field textarea {
  background: var(--c-night);
  border: 1px solid var(--c-slate);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  color: var(--c-bone);
  font-size: var(--fs-base);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.feedback-panel__field input::placeholder,
.feedback-panel__field textarea::placeholder { color: var(--c-muted); }
.feedback-panel__field input:focus,
.feedback-panel__field textarea:focus {
  outline: none;
  border-color: var(--c-amber);
  box-shadow: var(--glow-amber);
}
.feedback-panel__field textarea { resize: vertical; min-height: 7rem; }
.feedback-panel__actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.feedback-panel__note { font-size: var(--fs-xs); color: var(--c-muted); }

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--c-slate-soft);
  background: var(--c-deep);
  padding-block: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-9);
}
.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-xwide);
  color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col a { color: var(--c-driftwood); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--c-amber); }
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-bone);
  font-feature-settings: "zero" 1;
}
.site-footer__brand .wordmark__love { color: var(--c-amber); }
.site-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-slate-soft);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   SCROLL-REVEAL base states (JS adds .in via IntersectionObserver)
   ---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
/* stagger helper: set --reveal-delay inline (e.g. style="--reveal-delay:120ms") */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}