/* ==========================================================================
   Toner Shop - Scroll-in Entrance Animations + Hover Effects
   Lightweight, accessibility-safe: content is only ever hidden pre-reveal
   when JS is confirmed running (.has-js on <html>, added by a tiny inline
   script in <head>) AND the user has not asked for reduced motion. If JS
   is disabled/blocked, or prefers-reduced-motion is set, everything is
   fully visible immediately - see the .has-js gate and the
   prefers-reduced-motion override below, plus the <noscript> fallback in
   the page <head>.

   Re-triggering: main.js toggles .is-visible on/off as an element enters
   and leaves the viewport (both scroll directions), so this stylesheet
   defines a real "hidden" <-> "visible" pair of states rather than a
   one-time reveal - scrolling back up plays the entrance again.
   ========================================================================== */

/* Pre-reveal / "exited viewport" state - only applies once .has-js is
   present on <html>, so without JS elements never start hidden. */
.has-js .animate-on-scroll {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.has-js .animate-on-scroll--scale-in {
  transform: scale(0.82) translateY(20px);
}

/* ---------------------------------------------------------------------
   Stage 2 - per-section entrance variants, layered on the same base
   hidden/visible pair above (same easing/duration, same bidirectional
   IntersectionObserver toggling in main.js - nothing new on the JS
   side). Giving each homepage section its own of these, instead of the
   single fade-up every section used before, is the whole point of this
   stage: a shared motion "language" that still varies section to
   section rather than one animation copy-pasted everywhere.
   --------------------------------------------------------------------- */

/* Category cards ("איך אפשר לעזור לכם") converge in from alternating
   sides instead of rising from below, so this section reads differently
   from the trust-bar cards just above it. */
.has-js .animate-on-scroll--slide-right {
  transform: translateX(-56px);
}

.has-js .animate-on-scroll--slide-left {
  transform: translateX(56px);
}

/* Why-us cards sharpen into focus as they arrive (blur -> sharp), on
   top of the same fade+rise every other card gets - a small, literal
   "coming into focus" moment for the section that is making the site's
   credibility case. transition is redeclared here (not on the shared
   base rule) so only elements that opt into this variant pay for
   animating `filter`. */
.has-js .animate-on-scroll--blur-up {
  filter: blur(10px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-js .animate-on-scroll--blur-up.is-visible {
  filter: blur(0);
}

/* Reviews: a calm, centered zoom rather than a directional rise/slide -
   fits a testimonials block better than movement that implies arriving
   "from" somewhere. */
.has-js .animate-on-scroll--zoom-in {
  transform: scale(0.94);
}

/* Stage 4 - typography as animation: a heading's words reveal one at a
   time (see word_reveal_spans() in the generator) instead of the whole
   line fading in as a single block. --word-reveal is a container
   modifier: it keeps the <h2> itself permanently visible/settled (its
   words carry the animation instead) while still relying on the same
   .animate-on-scroll base class for the IntersectionObserver to add/
   remove .is-visible on scroll, exactly like every other variant here. */
.has-js .animate-on-scroll--word-reveal {
  opacity: 1;
  transform: none;
}

.has-js .word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Words reveal once their heading ancestor (hero h1 or a scroll-triggered
   h2) carries .is-visible - added once on load for the Hero (see
   initHeroMotion in main.js), or toggled on/off by the shared
   IntersectionObserver for everything else, so scrolling back up plays
   the word-in cascade again just like the rest of the site. */
.has-js .is-visible .word-reveal {
  opacity: 1;
  transform: none;
}

.has-js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
  /* Once revealed, switch to a quick transition so the hover effects
     below feel snappy - without this override the slower entrance
     transition (declared on .animate-on-scroll, which has higher
     specificity than a plain .card/.btn rule) would keep controlling
     the transform property and make hover feel sluggish. */
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

/* Stagger for sibling cards inside a grid/list, so groups of cards don't
   all pop in as one flat block - applies both entering and leaving, for
   a lively "cascade" feel each time a section crosses the viewport. */
.has-js .animate-on-scroll:nth-child(2) { transition-delay: 0.14s; }
.has-js .animate-on-scroll:nth-child(3) { transition-delay: 0.28s; }
.has-js .animate-on-scroll:nth-child(4) { transition-delay: 0.42s; }
.has-js .animate-on-scroll:nth-child(5) { transition-delay: 0.56s; }

/* Respect explicit reduced-motion preference: force full visibility, no
   animation, regardless of JS/.has-js state. */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .has-js .animate-on-scroll,
  .hero-reveal,
  .has-js .hero-reveal,
  .word-reveal,
  .has-js .word-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Hero mouse-parallax (photo + glow blobs) and the scroll-linked
     recede on the Hero text: main.js already skips attaching those
     listeners under reduced motion, this is the CSS-side safety net so
     nothing moves even if a --hero-px/--hero-py/--hero-scroll value is
     ever set. */
  .hero-media img,
  .hero-home::before,
  .hero-home::after,
  .hero-home .container {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* The accessibility widget's own "readable font" / high-contrast modes are
   about clarity, not motion preference, so they do not affect animations
   here - only prefers-reduced-motion and the JS observer (main.js) do. */

/* ---------------------------------------------------------------------
   Hover effects - CTA buttons, cards, header controls
   (deliberately more pronounced: bigger lift/scale + a stronger,
   softer-spread shadow for a responsive, slightly "3D" feel)
   --------------------------------------------------------------------- */
.btn,
.card,
.header-controls .header-cta,
.a11y-toggle-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.header-controls .header-cta:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-hover-strong);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover-strong), var(--glow-card-hover);
}

.a11y-toggle-btn:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-hover-strong);
}

/* Higher-specificity re-declarations: many cards/banners/buttons above
   also carry .animate-on-scroll.is-visible once revealed, whose
   "transform: none" rule (three classes) would otherwise outrank the
   plain :hover rules above (one class + pseudo-class) and silently
   cancel the hover lift after the entrance animation finished. */
.animate-on-scroll.is-visible.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover-strong), var(--glow-card-hover);
}

.animate-on-scroll.is-visible.btn:hover,
.header-controls .animate-on-scroll.is-visible.header-cta:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-hover-strong);
}

.animate-on-scroll.is-visible.a11y-toggle-btn:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-hover-strong);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .card:hover,
  .header-controls .header-cta:hover,
  .a11y-toggle-btn:hover {
    transform: none;
  }
}