/* Sonder Interactions — Frontend Styles v0.9.9 */

/* ── Fade ─────────────────────────────────────────────────────────────────── */
.si-fade-init   { opacity: 0.38; transition: opacity 0.5s ease; }
.si-fade-active { opacity: 1 !important; }

/* ── Blur ─────────────────────────────────────────────────────────────────── */
.si-blur-init   { filter: blur(6px); transition: filter 0.5s ease; }
.si-blur-active { filter: none !important; }

/* ── Slide Up ─────────────────────────────────────────────────────────────── */
.si-fx-slide {
    animation: si-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes si-slide-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* ── Scale Up ─────────────────────────────────────────────────────────────── */
.si-fx-scale {
    animation: si-scale-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes si-scale-up {
    from { transform: scale(0.93); }
    to   { transform: scale(1);    }
}

/* ── Bounce ───────────────────────────────────────────────────────────────── */
.si-fx-bounce {
    animation: si-bounce 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes si-bounce {
    0%, 100% { transform: translateY(0);    }
    30%       { transform: translateY(-18px);}
    60%       { transform: translateY(-8px); }
    80%       { transform: translateY(-3px); }
}

/* ── Shake ────────────────────────────────────────────────────────────────── */
.si-fx-shake {
    animation: si-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes si-shake {
    10%, 90%      { transform: translateX(-2px); }
    20%, 80%      { transform: translateX(4px);  }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60%      { transform: translateX(6px);  }
    100%          { transform: translateX(0);    }
}

/* ── Crumple (SVG filter) ─────────────────────────────────────────────────── */
.si-fx-crumple {
    filter: url(#si-crumple-filter);
    transition: filter 0.5s ease;
}

/* ── Vanish ───────────────────────────────────────────────────────────────── */
.si-hidden        { display: none !important; }
.si-vanish-hidden { visibility: hidden !important; }

/* Vanish — fade mode
 * When item.vanishFade is true the runtime adds .si-vanish-fade-target to the
 * target element at attach time, which sets the explicit starting opacity and
 * the 0.5s opacity transition.
 * applyEffect then adds .si-vanish-fade-hidden (opacity:0) instead of
 * .si-vanish-hidden (visibility:hidden), giving a smooth fade-out/fade-in.
 * pointer-events:none while hidden ensures the invisible target is not
 * accidentally interactive.
 *
 * FIX (v0.9.9): opacity:1 is now explicit on .si-vanish-fade-target so the
 * browser has a well-defined starting value for the transition. The
 * opacity:0 rule is on .si-vanish-fade-hidden alone (not a compound selector)
 * so it applies reliably as soon as that class is added — regardless of
 * whether the browser has already committed the transition setup class.
 */
.si-vanish-fade-target {
    opacity: 1;
    transition: opacity 0.5s ease;
}
.si-vanish-fade-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

/* ── Reveal ───────────────────────────────────────────────────────────────── */

/* Reveal — base (v0.9.8): snap by default, no transition.
 * .si-reveal-init starts the block at opacity:0 so it is invisible on load.
 * .si-reveal-active brings it to opacity:1.
 *
 * Fade mode: when item.revealFade is true the runtime additionally adds
 * .si-reveal-fade to the element, which layers a CSS transition on top.
 * This keeps the default snap behaviour while allowing opt-in smooth fading.
 */
.si-reveal-init {
    opacity: 0;
}
.si-reveal-init.si-reveal-active {
    opacity: 1;
}
.si-reveal-init.si-reveal-fade {
    transition: opacity 0.6s ease;
}

/* ── Block Spotlight ──────────────────────────────────────────────────────── */
.si-spotlight-low    .wp-block:not(.si-spotlight-target) { opacity: 0.85; transition: opacity 0.4s ease; }
.si-spotlight-medium .wp-block:not(.si-spotlight-target) { opacity: 0.50; transition: opacity 0.4s ease; }
.si-spotlight-high   .wp-block:not(.si-spotlight-target) { opacity: 0.15; transition: opacity 0.4s ease; }
.si-spotlight-target { position: relative; z-index: 10; }

/* ── Cursor Spotlight ─────────────────────────────────────────────────────── */
.si-cursor-spotlight-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.si-cursor-spotlight-overlay.si-cursor-active { opacity: 1; }

/* ── Media Overlay ────────────────────────────────────────────────────────── */
.si-media-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
    margin: 0;
    padding: 0;
}
.si-media-overlay.si-media-visible  { opacity: 1; }
.si-media-overlay-video             { opacity: 1; }

/* ── Elevator Doors ───────────────────────────────────────────────────────── */
.si-elevator-door-left  { transform: translateX(0); }
.si-elevator-door-right { transform: translateX(0); }
.si-elevator-open .si-elevator-door-left  { transform: translateX(-100%); }
.si-elevator-open .si-elevator-door-right { transform: translateX(100%);  }

/* ── Typewriter ───────────────────────────────────────────────────────────── */
.si-tw-char { display: inline; }

/* ── Reduced Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .si-fx-bounce,
    .si-fx-shake,
    .si-fx-slide,
    .si-fx-scale                  { animation: none !important; }
    .si-fade-init,
    .si-blur-init,
    .si-reveal-init.si-reveal-fade,
    .si-vanish-fade-target        { transition: none !important; }
}