/* ===========================================================================
   Hero animations — johnmoelker.com
   Load AFTER styles.css. Pairs with hero-animations.js (motes + parallax).
   Uses existing tokens: --gold, --gold-ink, --gold-glow, --ease-out.
   =========================================================================== */

/* ---- Keyframes ---- */
@keyframes jm-line-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes jm-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes jm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jm-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jm-img-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes jm-under-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jm-glow-drift {
  0%, 100% { transform: translate(-4%, -2%) scale(1); opacity: 0.8; }
  50% { transform: translate(4%, 3%) scale(1.14); opacity: 1; }
}
@keyframes jm-ink-shimmer { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@keyframes jm-mote-rise {
  0% { transform: translateY(30px); opacity: 0; }
  18% { opacity: 0.6; }
  82% { opacity: 0.45; }
  100% { transform: translateY(-110px); opacity: 0; }
}
@keyframes jm-float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- Ambient light (candle glow) ---- */
.hero { overflow: visible; }
.hero__glow { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.hero__glow span:nth-child(1) {
  position: absolute; top: -18%; left: -12%; width: 62%; height: 85%;
  background: radial-gradient(ellipse 50% 42% at 50% 45%, rgba(216, 177, 90, 0.34), rgba(216, 177, 90, 0.1) 55%, transparent 72%);
  animation: jm-glow-drift 11s ease-in-out infinite, jm-fade-in 2s ease 0.3s both;
}
.hero__glow span:nth-child(2) {
  position: absolute; top: 8%; right: -8%; width: 48%; height: 80%;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(193, 146, 58, 0.26), transparent 68%);
  animation: jm-glow-drift 14s ease-in-out -5s infinite reverse, jm-fade-in 2.4s ease 0.6s both;
}

/* ---- Dust motes (filled by hero-animations.js) ---- */
.hero__motes { position: absolute; inset: 0; pointer-events: none; animation: jm-fade-in 2.5s ease 1.4s both; will-change: transform; }
.hero__motes .mote { position: absolute; border-radius: 50%; opacity: 0; animation: jm-mote-rise var(--mote-dur, 9s) linear var(--mote-delay, 0s) infinite; }

/* ---- Headline: masked line rise ---- */
.hero__title--animated .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title--animated .line > span { display: block; }
.hero__title--animated .line:nth-child(1) > span { animation: jm-line-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.hero__title--animated .line:nth-child(2) > span { animation: jm-line-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both; }

/* "wisdom" — gold ink shimmer + drawn underline */
.wisdom-wrap { position: relative; display: inline-block; }
.wisdom {
  font-style: italic; font-weight: 500;
  background: linear-gradient(105deg, var(--gold-ink) 30%, var(--gold-glow) 48%, var(--gold) 54%, var(--gold-ink) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: jm-ink-shimmer 6s linear 2.2s infinite;
}
.wisdom-underline {
  position: absolute; left: 2%; right: 4%; bottom: 0.02em; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-glow));
  transform-origin: left;
  animation: jm-under-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

/* ---- Copy entrance stagger ---- */
.hero .eyebrow { animation: jm-fade-up 0.8s var(--ease-out) 0.25s both; }
.hero .hero__lead { animation: jm-fade-up 0.9s var(--ease-out) 1s both; }
.hero .signup { animation: jm-fade-up 0.9s var(--ease-out) 1.2s both; }

/* ---- Portrait: curtain reveal + settle + slow float ---- */
.portrait--animated { animation: jm-float-soft 7s ease-in-out 2.4s infinite; }
.portrait--animated .portrait__frame { animation: jm-curtain 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
.portrait--animated .portrait__frame img { animation: jm-img-settle 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
.portrait--animated .portrait__frame::after { animation: jm-fade-in 1s ease 1.7s both; }
.portrait--animated .portrait__caption { animation: jm-fade-up 0.8s ease 1.8s both; }

/* ---- Parallax layers (transforms set by hero-animations.js) ---- */
[data-depth] { will-change: transform; }

/* ---- Reduced motion: everything lands instantly ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__glow span, .hero__motes, .hero__motes .mote,
  .hero__title--animated .line > span, .wisdom, .wisdom-underline,
  .hero .eyebrow, .hero .hero__lead, .hero .signup,
  .portrait--animated, .portrait--animated .portrait__frame,
  .portrait--animated .portrait__frame img, .portrait--animated .portrait__frame::after,
  .portrait--animated .portrait__caption {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero__motes { display: none; }
}