/* STANKOMAT v3 — Animations & Effects */

/* ===== REVEAL ON SCROLL ===== */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-rotate{opacity:0;transform:perspective(800px) rotateY(12deg) translateX(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-rotate.visible{opacity:1;transform:perspective(800px) rotateY(0) translateX(0)}

/* stagger */
.stagger>*:nth-child(1){transition-delay:0s}
.stagger>*:nth-child(2){transition-delay:.08s}
.stagger>*:nth-child(3){transition-delay:.16s}
.stagger>*:nth-child(4){transition-delay:.24s}
.stagger>*:nth-child(5){transition-delay:.32s}
.stagger>*:nth-child(6){transition-delay:.4s}
.stagger>*:nth-child(7){transition-delay:.48s}
.stagger>*:nth-child(8){transition-delay:.56s}

/* ===== SHIMMER ===== */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transition:left .6s}
.shimmer:hover::after{left:100%}

/* ===== CURSOR GLOW (desktop) ===== */
.cursor-glow{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(237,54,0,.04) 0%,transparent 70%);position:fixed;pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity .3s;display:none}
@media(hover:hover){.cursor-glow{display:block}}

/* ===== HERO PARTICLES ===== */
#particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ===== RIPPLE ===== */
.ripple{position:relative;overflow:hidden}
.ripple .ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(0);animation:ripple .55s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ===== GLOW HOVER ===== */
.glow-hover{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.glow-hover:hover{box-shadow:0 8px 32px rgba(237,54,0,.18);transform:translateY(-6px)}

/* ===== TEXT GRADIENT SHINE ===== */
.text-shine{background:linear-gradient(120deg,var(--red),#ff6b3d,var(--red));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textShine 4s ease-in-out infinite}
@keyframes textShine{0%,100%{background-position:0% center}50%{background-position:200% center}}

/* ===== FLOAT ANIMATION ===== */
.anim-float{animation:floatSmooth 5s ease-in-out infinite}
@keyframes floatSmooth{0%,100%{transform:translateY(0)}25%{transform:translateY(-8px)}75%{transform:translateY(4px)}}

/* ===== COUNT-UP INDICATOR ===== */
.count-highlight{display:inline-block;transition:color .3s,transform .3s}
.count-highlight.counted{color:var(--red);transform:scale(1.05)}

/* ===== PARALLAX-LITE ===== */
.parallax-bg{will-change:transform;transition:transform .1s linear}

/* ===== SECTION DIVIDER ===== */
.section-wave{position:relative}
.section-wave::before{content:'';position:absolute;top:-1px;left:0;right:0;height:48px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48'%3E%3Cpath fill='%23f8f8f8' d='M0,32 C480,48 960,0 1440,32 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none;z-index:1}

/* ===== HERO TEXT TYPING CURSOR ===== */
.typing-cursor::after{content:'|';animation:blink 1s step-end infinite;color:var(--red);font-weight:300}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ===== CARD TILT 3D (subtle) ===== */
@media(hover:hover){
  .tilt-card{transition:transform .35s var(--ease);transform-style:preserve-3d}
  .tilt-card:hover{transform:perspective(600px) rotateX(2deg) rotateY(-2deg) translateY(-6px)}
}

/* ===== BORDER GRADIENT ===== */
.border-gradient{position:relative;border:none!important}
.border-gradient::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--red),#ff6b3d,var(--red));z-index:-1;opacity:0;transition:opacity .35s}
.border-gradient:hover::before{opacity:1}
.border-gradient::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--white);z-index:-1}

/* ===== STATS BAR COUNTER POP ===== */
.stat-pop{display:inline-block;animation:statPop .6s cubic-bezier(.16,1,.3,1) both}
@keyframes statPop{from{opacity:0;transform:scale(.6) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-rotate{opacity:1;transform:none;transition:none}
  .stagger>*{transition-delay:0s!important}
  .anim-float,.text-shine{animation:none}
  .tilt-card:hover{transform:none}
  .typing-cursor::after{animation:none}
}