/* =========================================================
   FLOW ENGINE — Base Styles
   ========================================================= */

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-phase] [data-role]{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Base: elements are paused until Flow.js triggers them */
[data-phase] [data-role]{
  opacity: 0;
  animation-duration: var(--flow-dur, 800ms);
  animation-timing-function: var(--flow-ease, cubic-bezier(.22,.61,.36,1));
  animation-fill-mode: both;
  animation-play-state: paused;
  /* ✅ חדש: תמיכה בדיליי פר־אלמנט */
  animation-delay: var(--flow-delay, 0ms);
  will-change: transform, opacity, filter;
}

/* Activated */
[data-phase] [data-role].anim-run{
  animation-play-state: running;
}

/* =========================================================
   EFFECTS — P1 Hero Intro
   ========================================================= */

/* A. Drop Elegant — logo/profile */
@keyframes kf-drop-elegant {
  0%   { transform: translateY(-120px) scale(.98); opacity: 0; filter: blur(6px); }
  60%  { transform: translateY(0)      scale(1.00); opacity: 1; filter: blur(0); }
  80%  { transform: translateY(-8px); }
  100% { transform: translateY(0)      scale(1.00); opacity: 1; } /* ← חובה */
}
[data-effect="drop-elegant"] { animation-name: kf-drop-elegant; }

/* (אם יש) גרסת מובייל */
@keyframes kf-drop-elegant-m {
  0%   { transform: translateY(-80px) scale(.98); opacity: 0; filter: blur(6px); }
  60%  { transform: translateY(0)     scale(1.00); opacity: 1; filter: blur(0); }
  100% { transform: translateY(0)     scale(1.00); opacity: 1; } /* ← חובה */
}
[data-effect="drop-elegant-m"] { animation-name: kf-drop-elegant-m; }

/* B. Rise Soft — title */
@keyframes kf-rise-soft {
  0%   { transform: translateY(40px); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0);    opacity: 1; filter: blur(0); }
}
[data-effect="rise-soft"] { animation-name: kf-rise-soft; }

@keyframes kf-rise-soft-m {
  0%   { transform: translateY(26px); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0);    opacity: 1; filter: blur(0); }
}
[data-effect="rise-soft-m"] { animation-name: kf-rise-soft-m; }

/* C. Fade Up — role/subtitle */
@keyframes kf-fade-up {
  0%   { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
[data-effect="fade-up"] { animation-name: kf-fade-up; }

@keyframes kf-fade-up-m {
  0%   { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
[data-effect="fade-up-m"] { animation-name: kf-fade-up-m; }

/* D. Pop In — hero CTA */
@keyframes kf-pop-in {
  0%   { transform: scale(.84); opacity: 0; filter: blur(4px); }
  60%  { transform: scale(1.02); opacity: 1; filter: blur(0); }
  100% { transform: scale(1.00); }
}
[data-effect="pop-in"] { animation-name: kf-pop-in; }

@keyframes kf-pop-in-m {
  0%   { transform: scale(.90); opacity: 0; }
  100% { transform: scale(1.00); opacity: 1; }
}
[data-effect="pop-in-m"] { animation-name: kf-pop-in-m; }

/* =========================================================
   OPTIONAL — Soft pulse (e.g. Save to Contacts button)
   ========================================================= */
@keyframes kf-pulse-soft {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.pulse-soft {
  animation: kf-pulse-soft 800ms ease-in-out 1;
}

/* =========================================================
   PARALLAX BACKGROUND
   ========================================================= */
.card {
  position: relative;
  overflow: hidden;
  z-index: 1;
  min-height: 100vh;
}

.card .parallax-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: var(--card-bg-image, none);
  background-color: var(--card-bg-fallback, #dff3ff);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 120%;

  opacity: var(--card-bg-opacity, 1);
  filter: blur(var(--card-bg-blur, 0px));
  will-change: background-position;
  transition: background-position 0.08s linear;
}

.card > *:not(.parallax-bg) { position: relative; z-index: 1; }

/* Accessibility: always white background in accessibility mode */
body.accessibility-mode .card { background: #fff !important; }
body.accessibility-mode .card .parallax-bg {
  background: #fff !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .card .parallax-bg {
    background-position: center top !important;
    transition: none !important;
    will-change: auto !important;
  }
}