/* ============================================================================
   effects.css - the distinctive treatments, rebuilt in plain CSS.

   WHY THIS FILE EXISTS
   Aceternity, Magic UI, React Bits and most of 21st.dev are React + Framer
   Motion + Tailwind. They cannot be pasted into a static site. What makes
   them look good is not the framework - it is the technique. These are those
   techniques, rebuilt with no dependencies, working with core/tokens.css.

   HOW TO USE
   Pick ONE signature effect per site, plus at most one supporting texture.
   Three effects on one page is a demo reel, not a design. The direction file
   says which effects belong to it; obey that list.

   Everything here respects prefers-reduced-motion and is RTL-safe.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. SPOTLIGHT  (Aceternity's signature, and the doron-nahom hero)
   A soft off-centre light washing across a dark section. This is what makes a
   dark hero feel lit rather than merely black.

   <section class="fx-spotlight" style="--fx-x:70%; --fx-y:20%">
   Use on: luxury-dark, kinetic-tech. Never on a light background - it is
   invisible above roughly 25% luminance.
   --------------------------------------------------------------------------- */
.fx-spotlight { position: relative; isolation: isolate; overflow: hidden; }
.fx-spotlight::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 45% at var(--fx-x, 65%) var(--fx-y, 15%),
    var(--fx-light, color-mix(in oklab, var(--accent) 38%, transparent)) 0%,
    transparent 65%
  );
  /* A large blur on a large element is expensive. This one is static, so it
     rasterises once; never animate blur-radius itself. */
  filter: blur(60px);
}


/* ---------------------------------------------------------------------------
   2. BEAM SWEEP
   A thin arc of light crossing the section - the glowing curve in the doron
   hero. Reads as expensive because it implies a light source off-frame.
   --------------------------------------------------------------------------- */
.fx-beam { position: relative; isolation: isolate; overflow: hidden; }
.fx-beam::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -10%;
  width: 60%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    color-mix(in oklab, var(--accent) 30%, transparent) 40deg,
    transparent 90deg
  );
  filter: blur(40px);
  opacity: .8;
}


/* ---------------------------------------------------------------------------
   3. AURORA  (Magic UI / Aceternity)
   Slow drifting colour field. The only animated background here, and it must
   stay slow - anything under ~20s reads as a screensaver.
   --------------------------------------------------------------------------- */
.fx-aurora { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 25% 30%, color-mix(in oklab, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(35% 35% at 75% 60%, color-mix(in oklab, var(--fx-aurora-2, var(--accent)) 35%, transparent), transparent 70%);
  filter: blur(70px);
  /* transform-only animation = compositor-only = cheap */
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-aurora::before { animation: fx-aurora-drift 28s ease-in-out infinite alternate; }
}
@keyframes fx-aurora-drift {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}


/* ---------------------------------------------------------------------------
   4. GRID / DOT TEXTURE
   Technical surface at very low opacity. Costs nothing, adds enormous
   perceived craft on a flat dark section. kinetic-tech, luxury-dark.
   --------------------------------------------------------------------------- */
.fx-grid { position: relative; isolation: isolate; }
.fx-grid::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: var(--fx-grid-size, 72px) var(--fx-grid-size, 72px);
  opacity: var(--fx-grid-opacity, .05);
  /* Fade the grid out at the edges so it does not end in a hard line. */
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}
.fx-dots::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: var(--fx-dot-size, 26px) var(--fx-dot-size, 26px);
  opacity: var(--fx-grid-opacity, .07);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}
.fx-dots { position: relative; isolation: isolate; }


/* ---------------------------------------------------------------------------
   5. GRAIN
   Fine noise over a dark gradient. Kills the banding that makes big gradients
   look cheap, and adds a film quality. Inline SVG, so no image request.
   --------------------------------------------------------------------------- */
.fx-grain { position: relative; isolation: isolate; }
.fx-grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--fx-grain-opacity, .055);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   6. ACCENT-SPLIT HEADLINE
   Part of the headline in the accent colour. One of the highest-impact,
   lowest-effort moves available, and it works in every direction.

   <h1>כשזה חשוב באמת, <span class="fx-accent">מתחילים מדויק.</span></h1>
   --------------------------------------------------------------------------- */
.fx-accent { color: var(--accent); }
/* Gradient variant - dark directions only; on light backgrounds it turns muddy. */
.fx-accent-grad {
  background: linear-gradient(100deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 55%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Hebrew and other scripts with fine strokes can lose weight against a
     gradient; check it rendered before keeping this. */
}


/* ---------------------------------------------------------------------------
   7. LAYERED DEPTH LABELS
   Small tracked-out labels placed away from the main block, at low contrast.
   Cheap, and the main reason the doron hero reads as composed rather than
   centred. Position each one deliberately; do not scatter.
   --------------------------------------------------------------------------- */
.fx-label {
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 55%, transparent);
  /* isolate keeps a Latin run from disturbing the surrounding bidi order.
     Do NOT add `direction: ltr` here: it also flips the element's own inline
     axis, so inset-inline-start would resolve to the left edge on an RTL page
     while every other element resolves it to the right. Latin text renders
     left-to-right on its own; isolation is all that is needed. */
  unicode-bidi: isolate;
}
/* A hairline rule as structure, not decoration. */
.fx-rule {
  position: absolute;
  inset-block: 0;
  inline-size: 1px;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, currentColor 20%, transparent) 30%, transparent);
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   8. BORDER BEAM BUTTON  (Magic UI signature)
   A light travelling around a button's border. Use on exactly one CTA.
   --------------------------------------------------------------------------- */
.fx-beam-btn {
  position: relative;
  border-radius: 999px;          /* pill - the doron CTA shape */
  isolation: isolate;
  overflow: hidden;
}
.fx-beam-btn::before {
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg 300deg,
    color-mix(in oklab, var(--accent) 90%, #fff) 340deg,
    transparent 360deg);
}
.fx-beam-btn::after {
  content: "";
  position: absolute;
  inset: 1px;                    /* the 1px gap is the visible border */
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .fx-beam-btn::before { animation: fx-spin 4s linear infinite; }
}
@keyframes fx-spin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------------------
   9. SHIMMER  (Magic UI / React Bits)
   A highlight sweeping once across an element on entry. Use on a single
   headline or badge, never on body text.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fx-shimmer {
    background: linear-gradient(100deg,
      currentColor 40%,
      color-mix(in oklab, currentColor 45%, #fff) 50%,
      currentColor 60%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: fx-shimmer 2.6s ease-out 1 both;
  }
}
@keyframes fx-shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }


/* ---------------------------------------------------------------------------
   10. STAGGERED REVEAL  (React Bits)
   Children appear in sequence. Pairs with the IntersectionObserver already in
   blocks/shell.html - add .is-visible and the stagger runs.
   --------------------------------------------------------------------------- */
.fx-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.fx-stagger.is-visible > * { opacity: 1; transform: none; }
.fx-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fx-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.fx-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.fx-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.fx-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.fx-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .fx-stagger > * { opacity: 1; transform: none; transition: none; }
}


/* ---------------------------------------------------------------------------
   11. MARQUEE  (Magic UI)
   Continuous logo or review strip. Duplicate the children in the markup so
   the loop is seamless, and mark the copy aria-hidden.
   --------------------------------------------------------------------------- */
.fx-marquee { overflow: hidden; display: flex; gap: var(--space-7);
              mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.fx-marquee__track { display: flex; gap: var(--space-7); flex: none; min-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .fx-marquee__track { animation: fx-marquee 38s linear infinite; }
  .fx-marquee:hover .fx-marquee__track { animation-play-state: paused; }
}
/* Direction-aware: the strip must travel the way the language reads. */
@keyframes fx-marquee { to { transform: translateX(-100%); } }
[dir="rtl"] .fx-marquee__track { animation-direction: reverse; }


/* ---------------------------------------------------------------------------
   12. IMAGE HOVER LIFT
   Restrained alternative to a scale transform, which causes layout shift and
   resamples the image. Moves and deepens the shadow only.
   --------------------------------------------------------------------------- */
.fx-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fx-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }


/* ---------------------------------------------------------------------------
   PERFORMANCE
   - Animate only transform and opacity. Never blur, width, height or top.
   - At most one blurred backdrop per viewport; they are the expensive ones.
   - Effects here are decorative: they use ::before/::after with
     pointer-events:none so they can never intercept a click.
   - Test on a real phone. A hero that stutters on scroll is worse than a
     hero with no effect at all.
   --------------------------------------------------------------------------- */