/**
 * css/numerology-tool.css — Numerology brand v2 calculator pages
 *
 * Loads AFTER yes-no-tarot.css. Reuses every brand v2 base class
 * (page-hero, modal, sealed-letter, etc.) and adds:
 *   - .num-frame  (cream-parchment calculator container, state machine)
 *   - .num-result-number (massive gold-foil number, the visual hook)
 *   - .num-cross-tools (pill row linking to other 7 tools)
 *   - .num-meaning (drop-cap meaning content)
 *
 * State on .num-frame:
 *   .is-input    → form (date / name / etc.)
 *   .is-breath   → calculation animation
 *   .is-revealed → big number + meaning sections
 */

/* ─────────────── CALCULATOR FRAME ─────────────── */
.num-frame {
  position: relative;
  margin: 4rem auto 4rem;
  padding: 4rem 2.5rem 3.5rem;
  max-width: 760px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='3'/><feColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.20  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>"),
    linear-gradient(160deg, #F8EFD9 0%, #F2E5C5 100%);
  background-blend-mode: multiply;
  border: 2px solid #D4AC68;
  border-radius: 6px;
  text-align: center;
  box-shadow:
    0 4px 12px rgba(58, 31, 56, 0.1),
    0 18px 50px -12px rgba(58, 31, 56, 0.22),
    inset 0 0 0 1px rgba(184, 145, 80, 0.4);
  isolation: isolate;
}
.num-frame::before {
  /* Inner ornamental frame */
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid #B89150;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.7;
}
.num-frame::after {
  /* Top gold accent bar */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, #B89150, #D4AC68, #B89150);
}
.num-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: #8E6E3A;
  z-index: 2;
  pointer-events: none;
}
.num-corner-tl { top: 18px;    left: 18px;    border-top: 2px solid;    border-left: 2px solid; }
.num-corner-tr { top: 18px;    right: 18px;   border-top: 2px solid;    border-right: 2px solid; }
.num-corner-bl { bottom: 18px; left: 18px;    border-bottom: 2px solid; border-left: 2px solid; }
.num-corner-br { bottom: 18px; right: 18px;   border-bottom: 2px solid; border-right: 2px solid; }

/* State containers — only one visible at a time (mirrors yes/no spread frame pattern) */
.num-frame .num-state-input,
.num-frame .num-state-breath,
.num-frame .num-state-result { display: none; }
.num-frame.is-input    .num-state-input  { display: block; }
.num-frame.is-breath   .num-state-breath { display: block; }
.num-frame.is-revealed .num-state-result { display: block; }

/* ─── INPUT STATE ─── */
.num-eyebrow {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #8E6E3A;            /* restored original gold-deep */
  margin-bottom: 0.9rem;
}
.num-prompt {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  color: #6B1F2C;
  margin: 0 0 2rem;
  line-height: 1.3;
}
.num-prompt em { color: #6B1F2C; font-weight: 600; }

.num-fields {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.num-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.num-field-label {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8E6E3A;            /* restored original gold-deep */
}
.num-field select,
.num-field input {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #3a2826;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #B89150;
  border-radius: 3px;
  padding: 0.55rem 1.2rem;
  text-align: center;
  min-width: 90px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* Centers the selected option text inside native selects WITHOUT
   stripping appearance — that way the browser keeps its normal
   "open downward when there's space below" behavior. */
.num-field select {
  text-align-last: center;
}
.num-field select:focus,
.num-field input:focus {
  outline: none;
  border-color: #D4AC68;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(212, 172, 104, 0.22);
}
.num-field input { min-width: 220px; }

.num-submit {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: #F5EFE0;
  background: #6B1F2C;
  border: 1px solid #B89150;
  border-radius: 3px;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease,
              background 0.35s ease;
  box-shadow: 0 4px 12px rgba(107, 31, 44, 0.3);
}
.num-submit:hover {
  background: #3A1F38;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(107, 31, 44, 0.4), 0 0 0 1px #D4AC68;
}
.num-submit::after {
  content: '✦';
  display: inline-block;
  margin-left: 0.6rem;
  color: #D4AC68;
  font-size: 0.85rem;
  vertical-align: middle;
}

.num-form-error {
  margin: 1rem auto 0;
  max-width: 420px;
  padding: 0.6rem 1rem;
  background: rgba(107, 31, 44, 0.08);
  border: 1px solid #6B1F2C;
  color: #6B1F2C;
  font-style: italic;
  font-size: 0.95rem;
  border-radius: 3px;
}

/* ─── BREATH STATE (calculation animation) ─── */
.num-state-breath {
  text-align: center;
  padding: 2rem 0;
}
.num-breath-equation {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: #8E6E3A;
  letter-spacing: 0.04em;
  line-height: 1.5;
  min-height: 4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.num-breath-line {
  opacity: 0;
  animation: numBreathStep 0.5s ease-out forwards;
}
.num-breath-line.step-1 { animation-delay: 0.05s; }
.num-breath-line.step-2 { animation-delay: 0.55s; }
.num-breath-line.step-3 { animation-delay: 1.05s; }
.num-breath-line.step-4 { animation-delay: 1.55s; }
@keyframes numBreathStep {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.num-breath-label {
  margin-top: 1rem;
  font-style: italic;
  color: #B89150;
  font-size: 0.95rem;
}

/* ─── REVEALED STATE — the showcase ─── */
.num-result-eyebrow {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 1.5rem;                         /* bumped 1.2rem → 1.5rem (25% larger) */
  color: #6B1F2C;
  margin-bottom: 0.6rem;
}
.num-result-script {
  font-family: 'Italianno', cursive;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: #6B1F2C;
  line-height: 1;
  margin-bottom: 0.4rem;
  /* (b) faux-bold via stroke + glow — Italianno only ships in one weight */
  -webkit-text-stroke: 0.3px #6B1F2C;
  text-shadow: 0 0 14px rgba(107, 31, 44, 0.18);
}

/* THE BIG NUMBER */
.num-result-number-wrap {
  position: relative;
  display: inline-block;
  margin: 0.4rem auto 1.4rem;
}
.num-result-number-rings {
  position: absolute;
  inset: -36px;
  pointer-events: none;
}
.num-result-number-rings svg {
  width: 100%;
  height: 100%;
  animation: numRingsRotate 22s linear infinite;
  transform-origin: center;
}
@keyframes numRingsRotate {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.num-result-number {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(7rem, 18vw, 12rem);
  line-height: 0.9;
  background: linear-gradient(
    135deg,
    #8E6E3A 0%,
    #D4AC68 18%,
    #FBE6A8 32%,
    #D4AC68 48%,
    #8E6E3A 62%,
    #C99A4F 78%,
    #FBE6A8 92%,
    #8E6E3A 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 240, 200, 0.5))
    drop-shadow(0 4px 18px rgba(58, 31, 56, 0.25))
    drop-shadow(0 0 32px rgba(212, 172, 104, 0.35));
  background-size: 220% 220%;
  animation: numFoilDrift 14s ease-in-out infinite alternate;
  display: inline-block;
}
@keyframes numFoilDrift {
  0%   { background-position: 0% 35%; }
  100% { background-position: 100% 65%; }
}

.num-result-name {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: #6B1F2C;
  margin: 0.4rem 0 0.6rem;
  line-height: 1.2;
}
.num-result-tagline {
  font-family: 'Italianno', cursive;
  font-size: clamp(1.6rem, 3vw, 2.15rem);   /* (c) bumped from 1.4–1.85 → 1.6–2.15 */
  color: #8E6E3A;
  margin: 0 0 1.5rem;
  line-height: 1;
  text-shadow: 0 0 14px rgba(212, 172, 104, 0.3);
}

/* ─── MEANING (post-result, drop-cap) ─── */
.num-meaning {
  text-align: left;
  max-width: 580px;
  margin: 1.6rem auto 0;
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.78;
  color: #3a2826;
}
.num-meaning h3 {
  font-style: italic;
  font-weight: 700;
  font-size: 1.35rem;
  color: #6B1F2C;
  margin: 1.8rem 0 0.6rem;
  line-height: 1.2;
}
.num-meaning p { margin: 0 0 1rem; }
.num-meaning p:first-of-type::first-letter {
  font-weight: 700;
  font-style: italic;
  font-size: 3.1em;
  float: left;
  line-height: 0.85;
  margin: 0.06em 0.18em 0 0;
  color: #D4AC68;
  text-shadow: 0 0 14px rgba(212, 172, 104, 0.25);
}
.num-meaning em { color: #6B1F2C; }
.num-meaning strong { color: #6B1F2C; font-weight: 700; }

/* "Calculate Again" reset link below result */
.num-recalc-wrap {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(184, 145, 80, 0.25);
  text-align: center;
}
.num-recalc-eyebrow {
  font-style: italic;
  font-weight: 600;                /* (d) slight bold */
  font-size: 0.82rem;              /* (d) tiny bump from 0.78 */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8E6E3A;
  margin-bottom: 0.5rem;
}
.num-recalc-btn {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: #6B1F2C;
  background: transparent;
  border: 1.5px solid #B89150;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  transition: all 0.3s;
}
.num-recalc-btn:hover {
  background: #6B1F2C;
  color: #F5EFE0;
  border-color: #6B1F2C;
}

/* ─── CROSS-TOOL PILLS ─── */
.num-cross-tools {
  text-align: center;
  margin: 4rem auto 4rem;
  max-width: 880px;
  padding: 0 1rem;
}
.num-cross-tools h2 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: #6B1F2C;
  margin: 0 0 0.4rem;
}
.num-cross-tools h2 em { color: #6B1F2C; font-weight: 700; }

/* (e) "also available" eyebrow — bigger inside numerology cross-tools */
.num-cross-tools .page-hero-dept {
  font-size: 1.3rem;                   /* bumped further from 1.05rem */
  font-weight: 700;
  letter-spacing: 0.36em;
  margin-bottom: 0.85rem;
}
.num-cross-tools-script {
  font-family: 'Italianno', cursive;
  font-size: clamp(2rem, 3.6vw, 2.6rem);   /* (f) bumped from 1.65 → 2-2.6 (responsive) */
  color: #8E6E3A;
  margin-bottom: 1.6rem;
  /* (f) faux-bold via stroke + glow */
  -webkit-text-stroke: 0.32px #8E6E3A;
  text-shadow: 0 0 14px rgba(212, 172, 104, 0.25);
}
.num-cross-tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
}
.num-cross-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #6B1F2C;
  background: linear-gradient(160deg, #F8EFD9 0%, #F2E5C5 100%);
  border: 1.5px solid #B89150;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 6px rgba(58, 31, 56, 0.08);
}
.num-cross-pill:hover {
  background: linear-gradient(160deg, #D4AC68 0%, #B89150 100%);
  color: #FBF6E9;
  border-color: #D4AC68;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(212, 172, 104, 0.4);
}
.num-cross-pill::after {
  content: '→';
  color: #8E6E3A;
  transition: transform 0.3s, color 0.3s;
}
.num-cross-pill:hover::after {
  color: #FBF6E9;
  transform: translateX(3px);
}

/* ─── EDITORIAL ─── */
.num-editorial {
  max-width: 720px;
  margin: 5rem auto 5rem;
  padding: 0 1.5rem;
}
.num-editorial h2 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: #6B1F2C;
  margin: 0 0 1.2rem;
  line-height: 1.15;
}
.num-editorial h3 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: #3A1F38;
  margin: 2.4rem 0 0.85rem;
}
.num-editorial p {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #3a2826;
  margin: 0 0 1.2rem;
}
.num-editorial em { font-style: italic; color: #6B1F2C; }
.num-editorial strong { font-weight: 700; color: #6B1F2C; }
.num-editorial a {
  color: #6B1F2C;
  text-decoration: underline;
  text-decoration-color: rgba(184, 145, 80, 0.55);
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.num-editorial a:hover { color: #D4AC68; }

/* ─── HERO MEDALLION ANIMATIONS (Life Path winding-path + compass) ─── */

/* Both medallions: rings have a slow continuous rotation + breathing */
.num-medallion-path .num-ring-outer,
.num-medallion-compass .num-ring-outer {
  transform-origin: 32px 32px;
  animation: numRingDrift 24s linear infinite;
}
.num-medallion-path .num-ring-inner,
.num-medallion-compass .num-ring-inner {
  transform-origin: 32px 32px;
  animation: numRingDrift 18s linear infinite reverse;
}
@keyframes numRingDrift {
  to { transform: rotate(360deg); }
}

/* LEFT — winding path: stroke "draws" along the line continuously */
.num-medallion-path .num-path-line {
  stroke-dasharray: 8 6;
  animation: numPathFlow 8s linear infinite;
}
@keyframes numPathFlow {
  to { stroke-dashoffset: -28; }
}

/* LEFT — stones along the path: pulse + glow, slower meditative cadence */
.num-medallion-path .num-stone {
  filter: drop-shadow(0 0 0 rgba(212, 172, 104, 0));
  animation: numStonePulse 4.6s ease-in-out infinite !important;
}
.num-medallion-path .num-stone-1 { animation-delay: 0s; }
.num-medallion-path .num-stone-2 { animation-delay: 0.85s; }
.num-medallion-path .num-stone-3 { animation-delay: 1.7s; }
.num-medallion-path .num-stone-4 { animation-delay: 2.55s; }
@keyframes numStonePulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.85);
    filter: drop-shadow(0 0 0 rgba(212, 172, 104, 0));
  }
  50% {
    opacity: 1;
    transform: scale(1.45);
    filter: drop-shadow(0 0 3px rgba(212, 172, 104, 0.85));
  }
}

/* LEFT — end star (gold burst at end of path): glow pulse via filter so we
   don't conflict with the SVG translate attribute on the <g> element */
.num-medallion-path .num-end-star {
  animation: numEndStarPulse 4s ease-in-out infinite;
}
@keyframes numEndStarPulse {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(212, 172, 104, 0.6)); }
  50%      { filter: drop-shadow(0 0 6px rgba(212, 172, 104, 1)); }
}

/* RIGHT — compass needles + N rotate together, slow */
.num-medallion-compass .num-compass-needle {
  transform-origin: 32px 32px;
  animation: numCompassSpin 14s ease-in-out infinite;
}
@keyframes numCompassSpin {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(72deg); }
  50%  { transform: rotate(72deg); }
  85%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

/* RIGHT — center gold dot pulses like a heartbeat */
.num-medallion-compass .num-compass-center {
  transform-origin: 32px 32px;
  animation: numCenterPulse 1.8s ease-in-out infinite;
}
@keyframes numCenterPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; filter: drop-shadow(0 0 0 rgba(212, 172, 104, 0)); }
  50%      { transform: scale(1.35); opacity: 1;    filter: drop-shadow(0 0 4px rgba(212, 172, 104, 0.9)); }
}

/* Both medallions: ambient sparks twinkle at varying rhythms */
.num-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: numSparkTwinkle 2.4s ease-in-out infinite;
}
.num-spark-1 { animation-delay: 0s;    animation-duration: 2.1s; }
.num-spark-2 { animation-delay: 0.7s;  animation-duration: 3.3s; }
.num-spark-3 { animation-delay: 1.4s;  animation-duration: 2.8s; }
.num-spark-4 { animation-delay: 0.4s;  animation-duration: 3.6s; }
@keyframes numSparkTwinkle {
  0%, 100% { opacity: 0;   transform: scale(0.4); }
  45%, 55% { opacity: 0.95; transform: scale(1.5); }
}

/* Override the shared yes-no-tarot.css twinkle to be more dramatic on numerology pages */
.num-medallion-path .hero-twinkle,
.num-medallion-compass .hero-twinkle {
  animation: numHeroTwinkle 2.8s ease-in-out infinite !important;
}
@keyframes numHeroTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.6); filter: drop-shadow(0 0 4px currentColor); }
}

@media (prefers-reduced-motion: reduce) {
  .num-medallion-path *,
  .num-medallion-compass * {
    animation: none !important;
  }
  .num-spark { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════
   PER-TOOL MEDALLION ANIMATIONS (Soul Urge / Expression / Personality
   / Personal Day / Personal Month / Personal Year)
   Each tool has 2 unique medallions; shared rules above handle
   .num-ring-outer/inner rotation, .num-spark twinkle, .hero-twinkle.
   ═══════════════════════════════════════════════════════════ */

/* Shared ring rotation for ALL new medallions */
.num-medallion-vessel .num-ring-outer,
.num-medallion-heart  .num-ring-outer,
.num-medallion-quill  .num-ring-outer,
.num-medallion-scroll .num-ring-outer,
.num-medallion-mask   .num-ring-outer,
.num-medallion-profile .num-ring-outer,
.num-medallion-sun    .num-ring-outer,
.num-medallion-hour   .num-ring-outer,
.num-medallion-moons  .num-ring-outer,
.num-medallion-calendar .num-ring-outer,
.num-medallion-seasons .num-ring-outer,
.num-medallion-arc    .num-ring-outer {
  transform-origin: 32px 32px;
  animation: numRingDrift 24s linear infinite;
}
.num-medallion-vessel .num-ring-inner,
.num-medallion-heart  .num-ring-inner,
.num-medallion-quill  .num-ring-inner,
.num-medallion-scroll .num-ring-inner,
.num-medallion-mask   .num-ring-inner,
.num-medallion-profile .num-ring-inner,
.num-medallion-sun    .num-ring-inner,
.num-medallion-hour   .num-ring-inner,
.num-medallion-moons  .num-ring-inner,
.num-medallion-calendar .num-ring-inner,
.num-medallion-seasons .num-ring-inner,
.num-medallion-arc    .num-ring-inner {
  transform-origin: 32px 32px;
  animation: numRingDrift 18s linear infinite reverse;
}

/* ─── SOUL URGE: vessel + heart ─── */
.num-medallion-vessel .num-vessel-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: numVesselRise 3.4s ease-out infinite;
}
.num-medallion-vessel .num-vessel-light-1 { animation-delay: 0s; }
.num-medallion-vessel .num-vessel-light-2 { animation-delay: 0.6s; }
.num-medallion-vessel .num-vessel-light-3 { animation-delay: 1.2s; }
.num-medallion-vessel .num-vessel-light-4 { animation-delay: 1.8s; }
@keyframes numVesselRise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; transform: translateY(-1px) scale(1); }
  80%  { opacity: 0.85; transform: translateY(-12px) scale(1.05); filter: drop-shadow(0 0 4px rgba(212,172,104,0.85)); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.4); }
}
.num-medallion-vessel .num-vessel-cup {
  animation: numVesselGlow 3.2s ease-in-out infinite;
}
@keyframes numVesselGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(212,172,104,0.3)); }
  50%      { filter: drop-shadow(0 0 5px rgba(212,172,104,0.85)); }
}

.num-medallion-heart .num-heart-shape {
  transform-origin: 32px 32px;
  animation: numHeartbeat 1.6s ease-in-out infinite;
}
@keyframes numHeartbeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(107,31,44,0.4)); }
  20%      { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(212,172,104,0.85)); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.06); }
}
.num-medallion-heart .num-heart-glow {
  animation: numHeartGlow 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes numHeartGlow {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.3); }
}
.num-medallion-heart .num-heart-ripple {
  transform-origin: 32px 33px;
  animation: numHeartRipple 3.2s ease-out infinite;
  opacity: 0;
}
.num-medallion-heart .num-heart-ripple-1 { animation-delay: 0s; }
.num-medallion-heart .num-heart-ripple-2 { animation-delay: 1.1s; }
.num-medallion-heart .num-heart-ripple-3 { animation-delay: 2.2s; }
@keyframes numHeartRipple {
  0%   { opacity: 0;    transform: scale(0.4); }
  20%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(2.8); }
}

/* ─── EXPRESSION: quill + scroll ─── */
.num-medallion-quill .num-quill-body {
  transform-origin: 22px 46px;
  animation: numQuillWrite 3.2s ease-in-out infinite;
}
@keyframes numQuillWrite {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}
.num-medallion-quill .num-ink-drop {
  transform-box: fill-box;
  transform-origin: center;
  animation: numInkDrop 2.6s ease-in infinite;
  opacity: 0;
}
.num-medallion-quill .num-ink-drop-1 { animation-delay: 0s; }
.num-medallion-quill .num-ink-drop-2 { animation-delay: 0.8s; }
.num-medallion-quill .num-ink-drop-3 { animation-delay: 1.6s; }
@keyframes numInkDrop {
  0%   { opacity: 0; transform: translateY(-6px); }
  30%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 0.8; transform: translateY(6px); }
  100% { opacity: 0; transform: translateY(8px); }
}
.num-medallion-quill .num-letter {
  animation: numLetterFloat 4s ease-in-out infinite;
  opacity: 0;
}
.num-medallion-quill .num-letter-1 { animation-delay: 0s; }
.num-medallion-quill .num-letter-2 { animation-delay: 1s; }
.num-medallion-quill .num-letter-3 { animation-delay: 2s; }
.num-medallion-quill .num-letter-4 { animation-delay: 3s; }
@keyframes numLetterFloat {
  0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
  20%      { opacity: 0.85; }
  60%      { opacity: 0.85; }
  100%     { opacity: 0; transform: translateY(-6px) translateX(2px); }
}

.num-medallion-scroll .num-glyph {
  transform-box: fill-box;
  transform-origin: center;
  animation: numGlyphPulse 2.8s ease-in-out infinite;
}
.num-medallion-scroll .num-glyph-1 { animation-delay: 0s; }
.num-medallion-scroll .num-glyph-2 { animation-delay: 0.7s; }
.num-medallion-scroll .num-glyph-3 { animation-delay: 1.4s; }
.num-medallion-scroll .num-glyph-4 { animation-delay: 2.1s; }
@keyframes numGlyphPulse {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 4px rgba(212,172,104,0.85)); }
}
.num-medallion-scroll .num-scroll-glow {
  transform-origin: 32px 33px;
  animation: numScrollHalo 3s ease-in-out infinite;
}
@keyframes numScrollHalo {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50%      { opacity: 0.7; transform: scale(1.08); }
}

/* ─── PERSONALITY: mask + profile ─── */
.num-medallion-mask .num-mask-aura {
  transform-origin: 32px 32px;
  animation: numMaskAura 3.4s ease-in-out infinite;
}
@keyframes numMaskAura {
  0%, 100% { opacity: 0.18; transform: scale(0.9); }
  50%      { opacity: 0.5;  transform: scale(1.18); }
}
.num-medallion-mask .num-aura-ring {
  transform-origin: 32px 32px;
  animation: numAuraRing 3.6s ease-out infinite;
  opacity: 0;
}
.num-medallion-mask .num-aura-ring-1 { animation-delay: 0s; }
.num-medallion-mask .num-aura-ring-2 { animation-delay: 1.2s; }
.num-medallion-mask .num-aura-ring-3 { animation-delay: 2.4s; }
@keyframes numAuraRing {
  0%   { opacity: 0;    transform: scale(0.5); }
  25%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(1.7); }
}
.num-medallion-mask .num-mask-shape {
  animation: numMaskGlow 2.8s ease-in-out infinite;
}
@keyframes numMaskGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(212,172,104,0.3)); }
  50%      { filter: drop-shadow(0 0 5px rgba(212,172,104,0.8)); }
}

.num-medallion-profile .num-energy-wave {
  transform-origin: 28px 32px;
  animation: numEnergyWave 4s ease-out infinite;
  opacity: 0;
}
.num-medallion-profile .num-energy-wave-1 { animation-delay: 0s; }
.num-medallion-profile .num-energy-wave-2 { animation-delay: 1.3s; }
.num-medallion-profile .num-energy-wave-3 { animation-delay: 2.6s; }
@keyframes numEnergyWave {
  0%   { opacity: 0;   transform: scale(0.5); }
  25%  { opacity: 0.85; }
  100% { opacity: 0;   transform: scale(2.5); }
}
.num-medallion-profile .num-profile-glow {
  transform-origin: 28px 32px;
  animation: numProfileGlow 2.8s ease-in-out infinite;
}
@keyframes numProfileGlow {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50%      { opacity: 0.7;  transform: scale(1.08); }
}
.num-medallion-profile .num-profile-shape {
  animation: numProfileBob 6s ease-in-out infinite;
}
@keyframes numProfileBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* ─── PERSONAL DAY: sun + hourglass ─── */
.num-medallion-sun .num-sun-disc {
  transform-origin: 32px 32px;
  animation: numSunPulse 2.4s ease-in-out infinite;
}
@keyframes numSunPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 2px rgba(212,172,104,0.6)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(212,172,104,1)); }
}
.num-medallion-sun .num-sun-rays {
  transform-origin: 32px 32px;
  animation: numSunRotate 24s linear infinite;
}
@keyframes numSunRotate { to { transform: rotate(360deg); } }
.num-medallion-sun .num-sun-ray {
  animation: numSunRayTwinkle 2.6s ease-in-out infinite;
}
.num-medallion-sun .num-sun-ray-1 { animation-delay: 0s; }
.num-medallion-sun .num-sun-ray-2 { animation-delay: 0.3s; }
.num-medallion-sun .num-sun-ray-3 { animation-delay: 0.6s; }
.num-medallion-sun .num-sun-ray-4 { animation-delay: 0.9s; }
.num-medallion-sun .num-sun-ray-5 { animation-delay: 1.2s; }
.num-medallion-sun .num-sun-ray-6 { animation-delay: 1.5s; }
.num-medallion-sun .num-sun-ray-7 { animation-delay: 1.8s; }
.num-medallion-sun .num-sun-ray-8 { animation-delay: 2.1s; }
@keyframes numSunRayTwinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.num-medallion-sun .num-sun-glow {
  transform-origin: 32px 32px;
  animation: numSunHalo 3.2s ease-in-out infinite;
}
@keyframes numSunHalo {
  0%, 100% { opacity: 0.2; transform: scale(0.95); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}

.num-medallion-hour .num-hour-frame {
  transform-origin: 32px 32px;
  animation: numHourTilt 8s ease-in-out infinite;
}
@keyframes numHourTilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(0.6deg); }
}
.num-medallion-hour .num-hour-grain {
  animation: numHourGrain 1.8s linear infinite;
  opacity: 0;
}
.num-medallion-hour .num-hour-grain-1 { animation-delay: 0s; }
.num-medallion-hour .num-hour-grain-2 { animation-delay: 0.6s; }
.num-medallion-hour .num-hour-grain-3 { animation-delay: 1.2s; }
@keyframes numHourGrain {
  0%   { opacity: 0;   transform: translateY(-6px); }
  20%  { opacity: 1; }
  80%  { opacity: 1;   transform: translateY(8px); }
  100% { opacity: 0;   transform: translateY(10px); }
}
.num-medallion-hour .num-hour-sand-top {
  animation: numHourSandTop 12s ease-in-out infinite;
  transform-origin: 32px 17px;
}
@keyframes numHourSandTop {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.5); }
}
.num-medallion-hour .num-hour-sand-bottom {
  animation: numHourSandBottom 12s ease-in-out infinite;
  transform-origin: 32px 47px;
}
@keyframes numHourSandBottom {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.4); }
}

/* ─── PERSONAL MONTH: moon phases + calendar ─── */
.num-medallion-moons .num-moon {
  transform-box: fill-box;
  transform-origin: center;
  animation: numMoonPhase 8s ease-in-out infinite;
}
.num-medallion-moons .num-moon-1 { animation-delay: 0s; }
.num-medallion-moons .num-moon-2 { animation-delay: 2s; }
.num-medallion-moons .num-moon-3 { animation-delay: 4s; }
.num-medallion-moons .num-moon-4 { animation-delay: 6s; }
@keyframes numMoonPhase {
  0%, 100% { opacity: 0.45; transform: scale(0.95); }
  25%      { opacity: 1;    transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(212,172,104,0.85)); }
  50%      { opacity: 0.45; transform: scale(0.95); }
}
.num-medallion-moons .num-moon-3 {
  animation-name: numMoonFull;
}
@keyframes numMoonFull {
  0%, 100% { opacity: 0.6; transform: scale(0.95); filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
  25%      { opacity: 1;    transform: scale(1.2);  filter: drop-shadow(0 0 8px rgba(212,172,104,1)); }
  50%      { opacity: 0.6; transform: scale(0.95); }
}

.num-medallion-calendar .num-cal-highlight {
  transform-origin: 35.5px 35px;
  animation: numCalPulse 2.2s ease-in-out infinite;
}
@keyframes numCalPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
  50%      { transform: scale(1.18); opacity: 1;    filter: drop-shadow(0 0 5px rgba(212,172,104,1)); }
}
.num-medallion-calendar .num-cal-glow {
  transform-origin: 35.5px 35px;
  animation: numCalHalo 3s ease-in-out infinite;
}
@keyframes numCalHalo {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}
.num-medallion-calendar .num-cal-frame {
  transform-origin: 32px 32px;
  animation: numCalFlutter 7s ease-in-out infinite;
}
@keyframes numCalFlutter {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-0.5deg); }
}

/* ─── PERSONAL YEAR: seasons wheel + sun arc ─── */
.num-medallion-seasons .num-season-wheel {
  transform-origin: 32px 32px;
  animation: numSeasonsRotate 60s linear infinite;
}
@keyframes numSeasonsRotate { to { transform: rotate(360deg); } }
.num-medallion-seasons .num-season {
  animation: numSeasonPulse 8s ease-in-out infinite;
}
.num-medallion-seasons .num-season-spring  { animation-delay: 0s; }
.num-medallion-seasons .num-season-summer  { animation-delay: 2s; }
.num-medallion-seasons .num-season-autumn  { animation-delay: 4s; }
.num-medallion-seasons .num-season-winter  { animation-delay: 6s; }
@keyframes numSeasonPulse {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
  25%      { opacity: 1;    filter: drop-shadow(0 0 4px rgba(212,172,104,0.85)); }
  50%      { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
}

.num-medallion-arc .num-arc-sun {
  animation: numArcTravel 16s ease-in-out infinite;
}
@keyframes numArcTravel {
  0%   { transform: translate(12px, 42px); }
  25%  { transform: translate(22px, 26px); }
  50%  { transform: translate(32px, 18px); }
  75%  { transform: translate(42px, 26px); }
  100% { transform: translate(52px, 42px); }
}
.num-medallion-arc .num-arc-glow {
  animation: numArcGlow 16s ease-in-out infinite;
  transform-origin: 32px 22px;
}
@keyframes numArcGlow {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.55; }
}
.num-medallion-arc .num-arc-path {
  stroke-dasharray: 2 3;
  animation: numArcFlow 4s linear infinite;
}
@keyframes numArcFlow { to { stroke-dashoffset: -10; } }

@media (prefers-reduced-motion: reduce) {
  .num-medallion-vessel *,
  .num-medallion-heart *,
  .num-medallion-quill *,
  .num-medallion-scroll *,
  .num-medallion-mask *,
  .num-medallion-profile *,
  .num-medallion-sun *,
  .num-medallion-hour *,
  .num-medallion-moons *,
  .num-medallion-calendar *,
  .num-medallion-seasons *,
  .num-medallion-arc * {
    animation: none !important;
  }
}

/* ─── 3-FIELD NAME LAYOUT (Soul Urge, Expression, Personality) ─── */
.num-fields-name {
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.num-fields-name .num-field-name {
  min-width: 160px;
  flex: 1 1 30%;
  max-width: 220px;
}
.num-fields-name .num-field-name input {
  width: 100%;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(184, 145, 80, 0.5);
  background: rgba(255, 251, 240, 0.85);
  color: #3a2826;
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.num-fields-name .num-field-name input:focus {
  outline: none;
  border-color: #6B1F2C;
  box-shadow: 0 0 0 2px rgba(212, 172, 104, 0.25);
}
.num-fields-name .num-field-name input::placeholder {
  color: rgba(142, 110, 58, 0.55);
  font-style: italic;
}
.num-required {
  color: #6B1F2C;
  font-weight: 700;
  margin-left: 2px;
}
.num-optional {
  display: inline-block;
  margin-left: 4px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: #8E6E3A;
  opacity: 0.75;
}
.num-name-helper {
  max-width: 560px;
  margin: 1rem auto 1.75rem;
  padding: 0 1rem;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.55;
  color: #5e4a3a;
}
.num-name-helper strong {
  color: #6B1F2C;
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 700px) {
  .num-fields-name { gap: 0.6rem; }
  .num-fields-name .num-field-name { flex-basis: 100%; max-width: 100%; }
}

/* ─── ASTRO LAYER (inside numerology calc frame) ─── */
.num-astro-prompt {
  margin: 2.5rem auto 0;
  max-width: 720px;
}
.num-astro-prompt.sealed-letter {
  /* keep the brand letter aesthetic but breathe inside the parchment */
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.96) 0%, rgba(247, 235, 210, 0.92) 100%);
  border: 1px solid rgba(184, 145, 80, 0.45);
  box-shadow: 0 14px 38px rgba(74, 28, 38, 0.08);
}

.num-astro-result {
  margin: 2.5rem auto 0;
  max-width: 760px;
  text-align: left;
}
.num-astro-result .yn-astro-result-title {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
  color: #6B1F2C;
}
.num-astro-result .yn-astro-result-body p {
  font-family: 'EB Garamond', serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #3a2826;
  margin: 0 0 1rem;
}
.num-astro-result .yn-astro-result-body p:last-child { margin-bottom: 0; }
.num-astro-result .trio-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #8E6E3A;
  text-transform: uppercase;
}
.num-astro-result .trio-sign {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: #6B1F2C;
  font-weight: 600;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 700px) {
  .num-frame { padding: 3rem 1.4rem 2.6rem; }
  .num-fields { gap: 0.5rem; }
  .num-field select,
  .num-field input { min-width: 75px; padding: 0.45rem 0.7rem; }
  .num-field input { min-width: 100%; }
  .num-astro-prompt { margin-top: 2rem; }
  .num-astro-result { margin-top: 2rem; }
}