/* =====================================================================
   JMK Studios — shared motion layer (linked on every page)
   Hover/entrance/ambient animation utilities used across components.
   All motion is disabled under prefers-reduced-motion.
   ===================================================================== */
html { scroll-behavior: smooth; }
/* keep anchored sections clear of the fixed nav when scrolled to via a hash link */
section[id] { scroll-margin-top: 88px; }

/* awards / kinetic marquees (used on home + the dedicated Our Awards page) */
@keyframes awardsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.awards-marquee:hover .awards-marquee-track { animation-play-state: paused; }

/* --- entrance: rise + fade (runs on load, no observer needed) --- */
@keyframes jmkRise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
.jmk-rise { opacity: 0; animation: jmkRise 900ms var(--ease-confident, cubic-bezier(.2,.7,.2,1)) both; }

@keyframes jmkFadeIn { from { opacity: 0; } to { opacity: 1; } }
.jmk-fade { opacity: 0; animation: jmkFadeIn 1100ms ease both; }

/* --- ambient loops --- */
@keyframes jmkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.jmk-float { animation: jmkFloat 6.5s ease-in-out infinite; }

@keyframes jmkSway { 0%,100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(12px) rotate(0.5deg); } }
.jmk-sway { animation: jmkSway 9s ease-in-out infinite; }

/* --- hand-drawn "paint on" reveal (hero "Box." on first load) --- */
@keyframes jmkDrawOn {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
}
.jmk-draw-on { animation: jmkDrawOn 1100ms cubic-bezier(.6,.02,.28,1) both; }

/* --- animated success tick (/thankyou) --- */
@keyframes jmkTickPop { 0% { transform: scale(0.5); opacity: 0; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes jmkTickDraw { to { stroke-dashoffset: 0; } }
.jmk-tick { animation: jmkTickPop 700ms cubic-bezier(.34,1.56,.64,1) both; }

/* --- hover lift for cards --- */
.jmk-lift { transition: transform 440ms var(--ease-confident, cubic-bezier(.2,.7,.2,1)), box-shadow 440ms var(--ease-confident, cubic-bezier(.2,.7,.2,1)); will-change: transform; }
.jmk-lift:hover { transform: translateY(-9px); box-shadow: 0 34px 70px -30px rgba(17,17,17,0.5); }

/* --- image zoom on hover (wrap the clipping container) --- */
.jmk-zoom { overflow: hidden; }
.jmk-zoom img { transition: transform 800ms var(--ease-confident, cubic-bezier(.2,.7,.2,1)); }
.jmk-lift:hover .jmk-zoom img, .jmk-zoom:hover img { transform: scale(1.07); }

/* --- shimmer sweep for placeholder / loading surfaces --- */
.jmk-shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.35) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: jmkShimmer 3s ease-in-out infinite;
}
@keyframes jmkShimmer { to { transform: translateX(130%); } }

/* --- animated underline that grows on hover --- */
.jmk-underline { position: relative; }
.jmk-underline::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: var(--color-primary); transform: scaleX(0); transform-origin: left center;
  transition: transform 380ms var(--ease-confident, cubic-bezier(.2,.7,.2,1));
}
.jmk-underline:hover::after { transform: scaleX(1); }

/* --- top scroll-progress bar --- */
.jmk-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform-origin: left center; will-change: transform;
}

/* --- blog post typography (rendered Markdown) --- */
.jmk-prose { font-family: var(--font-ui); color: var(--ink-700); font-size: var(--text-lg); line-height: 1.7; }
.jmk-prose > :first-child { margin-top: 0; }
.jmk-prose h2 { font-family: var(--font-editorial); color: var(--ink-900); font-size: clamp(26px,3.4vw,40px); line-height: 1.1; margin: 44px 0 16px; }
.jmk-prose h3 { font-family: var(--font-editorial); color: var(--ink-900); font-size: var(--text-2xl); margin: 32px 0 12px; }
.jmk-prose p { margin: 0 0 20px; }
.jmk-prose a { color: var(--color-secondary); }
.jmk-prose a:hover { color: var(--color-primary); }
.jmk-prose ul, .jmk-prose ol { margin: 0 0 20px; padding-left: 22px; }
.jmk-prose li { margin: 0 0 8px; }
.jmk-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 24px 0; }
.jmk-prose blockquote { border-left: 3px solid var(--color-primary); margin: 28px 0; padding: 4px 0 4px 22px; font-family: var(--font-editorial); font-style: italic; font-size: var(--text-xl); color: var(--ink-900); }
.jmk-prose code { background: var(--color-surface-sunken); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.jmk-prose hr { border: none; border-top: 1px solid var(--color-border); margin: 40px 0; }

/* --- animated splash --- */
@keyframes jmkSplashBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jmkSplashUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* --- full-screen "stage" sections: each fills the viewport, content centred.
   Safe for tall content too — the section simply grows past 100dvh.
   Ambient drifting brand glows behind the content add depth + motion. --- */
.jmk-stage { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.jmk-stage::before {
  content: ""; position: absolute; top: -12%; right: -8%;
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px;
  border-radius: 50%; background: var(--color-primary);
  opacity: 0.1; filter: blur(72px); pointer-events: none; z-index: 0;
  animation: heroDrift1 18s ease-in-out infinite;
}
.jmk-stage::after {
  content: ""; position: absolute; bottom: -12%; left: -8%;
  width: 36vw; height: 36vw; max-width: 540px; max-height: 540px;
  border-radius: 50%; background: var(--color-secondary);
  opacity: 0.1; filter: blur(72px); pointer-events: none; z-index: 0;
  animation: heroDrift2 15s ease-in-out infinite;
}
.jmk-stage > * { position: relative; z-index: 1; }

/* --- page-to-page dissolve (exit fade only) ---
   #root stays visible by default so a paused/throttled animation can never
   leave a page blank. On internal navigation boot.js adds .jmk-leaving to fade
   the current page out, then loads the next (which shows immediately). */
#root.jmk-leaving { opacity: 0; transition: opacity 320ms var(--ease-confident, ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #root { animation: none !important; opacity: 1 !important; }
  #root.jmk-leaving { transition: none !important; opacity: 1 !important; }
  .jmk-stage::before, .jmk-stage::after { animation: none !important; }
  .awards-marquee-track { animation: none !important; }
  .jmk-rise, .jmk-fade { opacity: 1 !important; animation: none !important; }
  .jmk-draw-on { animation: none !important; -webkit-clip-path: none !important; clip-path: none !important; }
  .jmk-float, .jmk-sway { animation: none !important; }
  .jmk-tick { animation: none !important; opacity: 1 !important; transform: none !important; }
  .jmk-tick circle, .jmk-tick path { animation: none !important; stroke-dashoffset: 0 !important; }
  .jmk-shimmer::after { display: none !important; }
  .jmk-lift:hover { transform: none !important; }
}