/* pulled3.com brand skin -- loaded after styles.css, only on this domain.
   Overrides color tokens + swaps the base typeface to Euclid Circular B.
   Doesn't touch styles.css itself, so the shared file stays identical
   across all three domains. */

@font-face {
  font-family: 'EuclidCircularB';
  src: url('./fonts/EuclidCircularB-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EuclidCircularB';
  src: url('./fonts/EuclidCircularB-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EuclidCircularB';
  src: url('./fonts/EuclidCircularB-Semibold-Web.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EuclidCircularB';
  src: url('./fonts/EuclidCircularB-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1C1C1C;
  --bg-panel: #262626;
  --ink: #F7F1E4;
  --ink-dim: #B5AFA3;
  --accent: #FFD700;
  --accent-ink: #1C1C1C;
  --accent-2: #4B0082;
  --accent-3: #00FF7F;
  --footer-1: #171717;
  --footer-2: #202020;
  --footer-3: #262626;
  --border: rgba(255,255,255,0.14);
}

body {
  font-family: 'EuclidCircularB', sans-serif;
  font-weight: 400;
}

h1, h2 {
  font-family: 'EuclidCircularB', sans-serif;
  font-weight: 700;
}

.eyebrow,
.btn,
.tarot-upsell-tag {
  font-family: 'EuclidCircularB', sans-serif;
  font-weight: 500;
}

::selection {
  background: var(--accent-2);
  color: var(--ink);
}

@font-face {
  font-family: 'TheWNYC';
  src: url('./fonts/TheWNYC-Regular-Web.woff2') format('woff2'),
       url('./fonts/TheWNYC-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.tarot-p3-eyebrow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, calc(-100% - 8px));
  margin: 0;
  font-family: 'TheWNYC', 'EuclidCircularB', sans-serif;
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
}

/* The new heading copy ("Which THREE CARDS will you pull?") runs a good
   bit longer than the original "Your Tarot Experience" -- on a narrow
   phone the base nowrap/clamp sizing would run it off the screen edges.
   Letting it wrap here only below 480px keeps desktop/tablet exactly as
   tuned. */
@media (max-width: 480px) {
  #tarot-heading {
    white-space: normal;
    font-size: 17px;
    line-height: 1.35;
    max-width: 84vw;
  }
  .tarot-p3-eyebrow { font-size: 14px; }
}

/* Golden/Special tag: a slow, subtle pulse so it reads as a little bit
   alive without being distracting -- opacity only, no size change, so it
   doesn't nudge surrounding layout. */
@keyframes p3TagPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.tarot-upsell-tag {
  animation: p3TagPulse 2.4s ease-in-out infinite;
}

/* Candle flame/glow: warm orange swapped for a light lavender, worked into
   the palette after the first pass barely showed the purple anywhere. */
.tarot-candle-flame {
  background: radial-gradient(circle at 50% 32%, #fbf6ff 0%, #c9a3ff 42%, #8a5fc7 78%, transparent 100%);
}
.tarot-candle-glow {
  background: radial-gradient(circle, rgba(186,140,255,0.34), transparent 70%);
}