/* ============================================================
   jathol.org — polish + motion layer (site v16)
   Loaded after styles.css on every page. Readability first, then a
   few refined motions. Everything animated is skipped for visitors
   who ask their device for reduced motion.
   ============================================================ */

/* ——— Hero: copy readable over the live animation ———
   The animation stays sharp (no blur); a deeper veil sits only where
   the words are — left side on desktop, the copy band on phones. */
.hero-anim::after{
  background:linear-gradient(96deg, rgba(8,20,14,.82) 0%, rgba(8,20,14,.7) 34%, rgba(8,20,14,.32) 58%, rgba(8,20,14,.06) 78%, rgba(8,20,14,0) 100%);
}
@media (max-width:760px){
  .hero-anim::after{
    background:linear-gradient(180deg, rgba(8,20,14,.55) 0%, rgba(8,20,14,.78) 22%, rgba(8,20,14,.82) 70%, rgba(8,20,14,.6) 100%);
  }
}
/* Wide screens: the animation fades out behind the copy column and stays
   fully sharp on the right, so moving pieces never cross the headline. */
@media (min-width:761px){
  .hero-anim iframe{
    left:62%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,.6) 42%, #000 54%);
    mask-image:linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,.6) 42%, #000 54%);
  }
}
.hero-copy{ max-width:min(640px, 92vw); margin-left:max(4vw, calc((100vw - 1180px) / 2)); }
@media (max-width:760px){ .hero-copy{ margin-left:auto; } }
.hero .lede{ max-width:560px; }

/* ——— Keyboard focus: visible everywhere (accessibility) ——— */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid #E8C36A; outline-offset:3px; border-radius:6px;
}

/* ——— Sticky header offset for in-page links ——— */
html{ scroll-padding-top:88px; }

@media (prefers-reduced-motion:no-preference){

  /* Gold headline: a slow light sweep across the italic line */
  .hero h1 em{
    background:linear-gradient(100deg, #E8C36A 0%, #E8C36A 40%, #FFF1C9 50%, #E8C36A 60%, #E8C36A 100%);
    background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; animation:ofShine 6s ease-in-out 1.6s infinite;
  }
  @keyframes ofShine{ 0%{ background-position:100% 0 } 55%,100%{ background-position:-50% 0 } }

  /* Section kicker: the rule after the label draws itself in */
  .kicker::after{ transform-origin:left center; animation:ofDraw .9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes ofDraw{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

  /* Cards: lift + photo zoom on hover; staggered entrance in grids */
  .card, .plan, .entry{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
  .card:hover, .entry:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -18px rgba(22,62,46,.32); }
  .card img, .entry img{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
  .card:hover img, .entry:hover img{ transform:scale(1.045); }
  .grid-3 > [data-reveal]:nth-child(3n+2){ transition-delay:.08s; }
  .grid-3 > [data-reveal]:nth-child(3n+3){ transition-delay:.16s; }

  /* Photos fade in as they load instead of popping */
  img[loading="lazy"]{ animation:ofFade .6s ease both; }
  @keyframes ofFade{ from{ opacity:0 } to{ opacity:1 } }

  /* Feature ticker pauses when you point at it, so it can be read */
  .marquee:hover .marquee-track{ animation-play-state:paused; }

  /* Primary buttons: soft glow pulse on the main call to action */
  .nav-cta .btn-mint{ animation:ofGlow 3.6s ease-in-out 2s infinite; }
  @keyframes ofGlow{ 0%,100%{ box-shadow:0 8px 24px rgba(22,62,46,.25) } 50%{ box-shadow:0 8px 30px rgba(46,167,113,.45) } }
}