/**
 * ThemeFlex — Interaction Engine
 * Motion presets, hover states, scroll effects — all vanilla CSS.
 * Apply via class names on any element.
 *
 * @package Starter_Flavor
 * @since   2.0.0
 */

/* ── ENTRANCE ANIMATIONS (add .sf-anim-* to any element) ── */
.sf-anim-fade-up   { opacity:0; transform:translateY(32px);  transition:opacity .6s ease, transform .6s ease; }
.sf-anim-fade-down { opacity:0; transform:translateY(-32px); transition:opacity .6s ease, transform .6s ease; }
.sf-anim-fade-left { opacity:0; transform:translateX(32px);  transition:opacity .6s ease, transform .6s ease; }
.sf-anim-fade-right{ opacity:0; transform:translateX(-32px); transition:opacity .6s ease, transform .6s ease; }
.sf-anim-zoom-in   { opacity:0; transform:scale(0.88);        transition:opacity .5s ease, transform .5s ease; }
.sf-anim-zoom-out  { opacity:0; transform:scale(1.12);        transition:opacity .5s ease, transform .5s ease; }
.sf-anim-flip-x    { opacity:0; transform:perspective(600px) rotateX(-30deg); transition:opacity .6s ease, transform .6s ease; }
.sf-anim-flip-y    { opacity:0; transform:perspective(600px) rotateY(-30deg); transition:opacity .6s ease, transform .6s ease; }
.sf-anim-blur-in   { opacity:0; filter:blur(12px);            transition:opacity .7s ease, filter .7s ease; }
.sf-anim-slide-up  { opacity:0; transform:translateY(60px);   transition:opacity .7s cubic-bezier(.34,1.56,.64,1), transform .7s cubic-bezier(.34,1.56,.64,1); }
.sf-anim-bounce    { opacity:0; transform:translateY(20px);   transition:opacity .5s ease, transform .5s cubic-bezier(.68,-.55,.265,1.55); }

/* Revealed state — IntersectionObserver adds this class */
.sf-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Stagger delays */
.sf-stagger-1 { transition-delay: 0.1s !important; }
.sf-stagger-2 { transition-delay: 0.2s !important; }
.sf-stagger-3 { transition-delay: 0.3s !important; }
.sf-stagger-4 { transition-delay: 0.4s !important; }
.sf-stagger-5 { transition-delay: 0.5s !important; }
.sf-stagger-6 { transition-delay: 0.6s !important; }
.sf-stagger-7 { transition-delay: 0.7s !important; }
.sf-stagger-8 { transition-delay: 0.8s !important; }

/* ── HOVER PRESETS (add .sf-hover-* to any element) ── */
.sf-hover-lift       { transition: transform .25s ease, box-shadow .25s ease; }
.sf-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.12); }

.sf-hover-scale       { transition: transform .2s ease; }
.sf-hover-scale:hover { transform: scale(1.04); }

.sf-hover-glow { transition: box-shadow .25s ease; }
.sf-hover-glow:hover { box-shadow: 0 0 0 4px rgba(255,94,46,.25); }

.sf-hover-tilt { transition: transform .1s ease; }

.sf-hover-underline { position:relative; }
.sf-hover-underline::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--sf-color-primary,#FF5E2E); transition:width .25s ease; }
.sf-hover-underline:hover::after { width:100%; }

.sf-hover-color { transition: color .2s ease; }
.sf-hover-color:hover { color: var(--sf-color-primary,#FF5E2E); }

.sf-hover-bg { transition: background .2s ease; }
.sf-hover-bg:hover { background: rgba(255,94,46,.06); }

.sf-hover-border { transition: border-color .2s ease; }
.sf-hover-border:hover { border-color: var(--sf-color-primary,#FF5E2E) !important; }

.sf-hover-bright { transition: filter .2s ease; }
.sf-hover-bright:hover { filter: brightness(1.1); }

.sf-hover-shadow { transition: box-shadow .25s ease; }
.sf-hover-shadow:hover { box-shadow: 0 12px 40px rgba(0,0,0,.15); }

/* ── SCROLL EFFECTS ── */
.sf-parallax { transform: translateY(var(--sf-parallax-offset, 0px)); will-change: transform; }

/* Sticky header on scroll */
.site-header.sf-sticky {
    position: sticky;
    top: 0;
    z-index: var(--sf-z-sticky, 200);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: sfHeaderIn .3s ease;
}
@keyframes sfHeaderIn { from { transform:translateY(-100%); opacity:0; } to { transform:none; opacity:1; } }

/* ── MOTION PRESETS — full animations ── */
@keyframes sfPulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes sfShake      { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes sfBounce     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes sfWiggle     { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 75%{transform:rotate(5deg)} }
@keyframes sfFlash      { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes sfRubberBand { 0%{transform:scale(1)} 30%{transform:scaleX(1.2) scaleY(.75)} 40%{transform:scaleX(.75) scaleY(1.2)} 60%{transform:scaleX(1.1) scaleY(.9)} 80%{transform:scaleX(.98) scaleY(1.02)} 100%{transform:scale(1)} }
@keyframes sfFloat      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes sfSpin       { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.sf-motion-pulse       { animation: sfPulse 2s ease-in-out infinite; }
.sf-motion-bounce      { animation: sfBounce 1.5s ease-in-out infinite; }
.sf-motion-float       { animation: sfFloat 3s ease-in-out infinite; }
.sf-motion-spin        { animation: sfSpin 2s linear infinite; }
.sf-motion-flash       { animation: sfFlash 1.5s ease-in-out infinite; }

/* One-time on hover */
.sf-motion-shake:hover      { animation: sfShake .5s ease; }
.sf-motion-wiggle:hover     { animation: sfWiggle .5s ease; }
.sf-motion-rubber:hover     { animation: sfRubberBand .6s ease; }

/* ── TYPING CURSOR ── */
.sf-cursor { display:inline-block; width:2px; height:1em; background:var(--sf-color-primary,#FF5E2E); margin-left:2px; vertical-align:middle; animation:sfBlink .7s step-end infinite; }
@keyframes sfBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── GRADIENT TEXT ── */
.sf-gradient-text {
    background: var(--sf-gradient, linear-gradient(135deg,#FF5E2E,#00D4FF));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── GLASSMORPHISM ── */
.sf-glass {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--sf-radius-lg, 12px);
}
[data-theme="dark"] .sf-glass {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.06);
}

/* ── NOISE TEXTURE ── */
.sf-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: inherit;
}

/* ── REDUCED MOTION (accessibility) ── */
@media (prefers-reduced-motion: reduce) {
    .sf-anim-fade-up, .sf-anim-fade-down, .sf-anim-fade-left, .sf-anim-fade-right,
    .sf-anim-zoom-in, .sf-anim-zoom-out, .sf-anim-flip-x, .sf-anim-flip-y,
    .sf-anim-blur-in, .sf-anim-slide-up, .sf-anim-bounce {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .sf-motion-pulse, .sf-motion-bounce, .sf-motion-float, .sf-motion-spin,
    .sf-motion-flash { animation: none !important; }
}