/* ═══════════════════════════════════════
   BASE
════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
  /* Bottom padding = sticky CTA height on mobile */
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* ═══════════════════════════════════════
   HERO DECORATIVE WORDMARK
════════════════════════════════════════ */
.deco-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, Cambria, 'Times New Roman', serif;
  font-size: clamp(3.5rem, 14vw, 13rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196, 154, 42, 0.10);
  text-stroke: 1px rgba(196, 154, 42, 0.10);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  z-index: 1;
}

/* ═══════════════════════════════════════
   HERO SVG — slow rotation on reduced-motion: no-preference
════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .hero-svg {
    animation: rings-rotate 55s linear infinite;
    transform-origin: center;
  }
}

@keyframes rings-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════
   MARQUEE
════════════════════════════════════════ */
.marquee-track {
  display: inline-flex;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee-scroll 32s linear infinite;
  }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-copy {
  display: inline-block;
  padding-right: 0; /* spacing already in the text */
}

/* ═══════════════════════════════════════
   SCROLL NUDGE DOT
════════════════════════════════════════ */
.scroll-dot {
  width: 6px;
  height: 6px;
  background: #C49A2A;
  border-radius: 50%;
  opacity: 0.45;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-dot {
    animation: dot-bounce 2.2s ease-in-out infinite;
  }
}

@keyframes dot-bounce {
  0%, 100% { transform: translateY(0);    opacity: 0.45; }
  50%       { transform: translateY(9px); opacity: 0.9;  }
}

/* ═══════════════════════════════════════
   COLLECTION CARDS
════════════════════════════════════════ */
.collection-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collection-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════
   STICKY MOBILE CTA BAR
════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.18);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }
}

.sticky-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.sticky-cta-btn.primary {
  background: #C49A2A;
  color: #1f2937;
}

.sticky-cta-btn.primary:hover,
.sticky-cta-btn.primary:focus-visible {
  background: #9B6E1E;
  color: #fff;
}

.sticky-cta-btn.secondary {
  background: #7B1C2E;
  color: #F4E8D0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.sticky-cta-btn.secondary:hover,
.sticky-cta-btn.secondary:focus-visible {
  background: #5a1422;
}

/* Accessibility FAB sits above the sticky CTA on mobile */
:root {
  --a11y-bottom: 64px;
}

@media (min-width: 768px) {
  :root {
    --a11y-bottom: 16px;
  }
}

/* ═══════════════════════════════════════
   FORM FOCUS RING
════════════════════════════════════════ */
input[type="checkbox"]:focus-visible {
  outline: 3px solid #C49A2A;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════
   HERO FADE-IN
════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  header > div {
    animation: fade-up 0.7s ease-out both;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}