/* ============================================================
   PREMIUM ANIMATIONS LAYER
   ============================================================ */

/* ---- 1. Scroll progress bar (top) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%);
  box-shadow: 0 0 12px rgba(200, 165, 91, .6);
  transition: width .12s ease-out;
}

/* ---- 2. Floating particles in hero ---- */
.hero__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__particles span {
  position: absolute; display: block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  opacity: 0; bottom: -10px;
  filter: drop-shadow(0 0 6px rgba(200, 165, 91, .9));
  animation: floatUp 14s linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .6; }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}

/* ---- 3. Magnetic / shimmer button ---- */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn--gold::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s ease;
  pointer-events: none;
}
.btn--gold:hover::before { transform: translateX(120%); }

.btn--ghost::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200,165,91,.18), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.btn--ghost:hover::after { opacity: 1; }

/* ---- 4. Card 3D tilt ---- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.tilt-inner { transform: translateZ(20px); }

/* ---- 5. Portrait extras ---- */
.hero__portrait-frame { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hero__portrait-frame img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.hero__portrait-frame:hover img { transform: scale(1.04); }

/* spinning ring around portrait */
.hero__portrait-ring {
  position: absolute; inset: -14px;
  border-radius: 36px; pointer-events: none;
  border: 1px dashed rgba(200,165,91,.35);
  animation: spinSlow 38s linear infinite;
}
.hero__portrait-ring::before,
.hero__portrait-ring::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(200,165,91,.7);
}
.hero__portrait-ring::before { top: -5px; left: 50%; transform: translateX(-50%); }
.hero__portrait-ring::after { bottom: -5px; left: 50%; transform: translateX(-50%); }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---- 6. Gradient shimmer for key serif headings ---- */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--navy) 35%,
    var(--gold) 50%,
    var(--navy) 65%,
    var(--navy) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmerMove 5s ease-in-out infinite;
}
@keyframes shimmerMove {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

/* dark variants (for hero / vision / contact) */
.shimmer--light {
  background: linear-gradient(90deg, #fff 0%, #fff 35%, var(--gold) 50%, #fff 65%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- 7. Pulsing dot on eyebrows ---- */
.eyebrow__dot { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,165,91,.45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 12px rgba(200,165,91,0);   transform: scale(1.15); }
}

/* ---- 8. Stagger reveal (extends existing .reveal) ---- */
.reveal { transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-stagger.is-visible > *  { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .47s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: .54s; }

/* ---- 9. Journal row marquee ---- */
.journal-row {
  position: relative; overflow: hidden;
  flex-wrap: nowrap !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  padding: 4px 0;
}
.journal-row__track {
  display: flex; gap: 10px; flex-wrap: nowrap;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.journal-row:hover .journal-row__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 10. Section eyebrow gold sweep ---- */
.section-head__eyebrow { position: relative; padding-left: 38px; }
.section-head__eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 1px; background: var(--gold);
  animation: lineGrow .8s ease-out forwards;
  transform-origin: left;
}
@keyframes lineGrow {
  from { transform: translateY(-50%) scaleX(0); }
  to   { transform: translateY(-50%) scaleX(1); }
}

/* ---- 11. Timeline dot heartbeat on view ---- */
.timeline__item.is-visible .timeline__year::after {
  animation: dotPop .6s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes dotPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---- 12. Hero title gold underline drag ---- */
.hero__title-tagline em {
  position: relative;
}
.hero__title-tagline em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: underline 1.6s ease-out 1.6s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

/* ---- 13. A28 molecule glow + slow rotation of group ---- */
.a28__molecule { animation: rotateGroup 60s linear infinite; }
@keyframes rotateGroup { to { transform: rotate(360deg); } }

/* ---- 14. Hover lift for pubs / awards ---- */
.pub, .award, .media-card, .leader-card, .vision-card, .speak-card {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}

/* ---- 15. Cursor-follow gold glow inside cards ---- */
.glow-card { position: relative; overflow: hidden; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(200,165,91,.16), transparent 40%);
  opacity: 0; transition: opacity .4s ease;
}
.glow-card:hover::before { opacity: 1; }

/* ---- 16. Vision card icon micro-bounce on view ---- */
.vision-card.is-visible i {
  animation: bobIn .8s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes bobIn {
  0%   { transform: translateY(20px) scale(.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- 17. Smooth gold ring around brand mark ---- */
.nav__brand-mark { position: relative; }
.nav__brand-mark::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 14px;
  background: conic-gradient(from 0deg, transparent 0deg, var(--gold) 90deg, transparent 180deg);
  opacity: 0; transition: opacity .35s ease;
  z-index: -1; filter: blur(5px);
  animation: spinSlow 6s linear infinite;
}
.nav__brand:hover .nav__brand-mark::after { opacity: .9; }

/* ---- 18. CTA bounce on speaking section ---- */
.speaking__cta .btn--gold { animation: ctaPulse 3.4s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(200,165,91,.35); }
  50%      { box-shadow: 0 14px 40px rgba(200,165,91,.55); }
}

/* ---- 19. Impact stat number flicker glow ---- */
.impact-stat__num { text-shadow: 0 0 24px rgba(200,165,91,0); transition: text-shadow .6s ease; }
.impact-stat.is-visible .impact-stat__num { text-shadow: 0 0 32px rgba(200,165,91,.5); }

/* ---- Reduce on motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__particles, .shimmer, .hero__portrait-ring, .a28__molecule,
  .scroll-progress, .speaking__cta .btn--gold { animation: none !important; }
  .journal-row__track { animation: none !important; }
}