/* ==========================================================================
   SCROLL-TRIGGERED ANIMATION LIBRARY
   ========================================================================== */

/* Base: hidden until .in-view is added */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity, filter, clip-path;
    animation-fill-mode: forwards;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-anim].in-view { opacity: 1; }

/* ---------- 1. SLIDE ---------- */
@keyframes animSlideInTop    { from{opacity:0;transform:translate3d(0,-80px,0);} to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animSlideInBottom { from{opacity:0;transform:translate3d(0,80px,0);}  to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animSlideInLeft   { from{opacity:0;transform:translate3d(-100px,0,0);} to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animSlideInRight  { from{opacity:0;transform:translate3d(100px,0,0);}  to{opacity:1;transform:translate3d(0,0,0);} }

[data-anim="slide-in-top"].in-view    { animation-name: animSlideInTop; }
[data-anim="slide-in-bottom"].in-view { animation-name: animSlideInBottom; }
[data-anim="slide-in-left"].in-view   { animation-name: animSlideInLeft; }
[data-anim="slide-in-right"].in-view  { animation-name: animSlideInRight; }

/* ---------- 2. FADE ---------- */
@keyframes animFadeIn      { from{opacity:0;} to{opacity:1;} }
@keyframes animFadeInUp    { from{opacity:0;transform:translate3d(0,40px,0);}  to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animFadeInDown  { from{opacity:0;transform:translate3d(0,-40px,0);} to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animFadeInLeft  { from{opacity:0;transform:translate3d(-40px,0,0);} to{opacity:1;transform:translate3d(0,0,0);} }
@keyframes animFadeInRight { from{opacity:0;transform:translate3d(40px,0,0);}  to{opacity:1;transform:translate3d(0,0,0);} }

[data-anim="fade-in"].in-view       { animation-name: animFadeIn; }
[data-anim="fade-in-up"].in-view    { animation-name: animFadeInUp; }
[data-anim="fade-in-down"].in-view  { animation-name: animFadeInDown; }
[data-anim="fade-in-left"].in-view  { animation-name: animFadeInLeft; }
[data-anim="fade-in-right"].in-view { animation-name: animFadeInRight; }

/* ---------- 3. POP / ZOOM ---------- */
@keyframes animPopIn    { 0%{opacity:0;transform:scale(.4);} 70%{opacity:1;transform:scale(1.08);} 100%{opacity:1;transform:scale(1);} }
@keyframes animBounceIn { 0%{opacity:0;transform:scale(.3);} 50%{opacity:1;transform:scale(1.15);} 70%{transform:scale(.92);} 100%{transform:scale(1);} }
@keyframes animZoomIn   { from{opacity:0;transform:scale(.6);} to{opacity:1;transform:scale(1);} }
@keyframes animZoomOut  { from{opacity:0;transform:scale(1.4);} to{opacity:1;transform:scale(1);} }

[data-anim="pop-in"].in-view    { animation-name: animPopIn; animation-duration: .7s; }
[data-anim="bounce-in"].in-view { animation-name: animBounceIn; animation-duration: .9s; }
[data-anim="zoom-in"].in-view   { animation-name: animZoomIn; }
[data-anim="zoom-out"].in-view  { animation-name: animZoomOut; }

/* ---------- 4. ROTATE / FLIP ---------- */
@keyframes animRotateIn           { from{opacity:0;transform:rotate(-200deg);} to{opacity:1;transform:rotate(0);} }
@keyframes animRotateInDownLeft   { from{opacity:0;transform:rotate(-45deg);transform-origin:left bottom;} to{opacity:1;transform:rotate(0);transform-origin:left bottom;} }
@keyframes animFlipInX            { from{opacity:0;transform:perspective(600px) rotateX(90deg);} to{opacity:1;transform:perspective(600px) rotateX(0);} }
@keyframes animFlipInY            { from{opacity:0;transform:perspective(600px) rotateY(90deg);} to{opacity:1;transform:perspective(600px) rotateY(0);} }

[data-anim="rotate-in"].in-view           { animation-name: animRotateIn; }
[data-anim="rotate-in-down-left"].in-view { animation-name: animRotateInDownLeft; }
[data-anim="flip-in-x"].in-view           { animation-name: animFlipInX; }
[data-anim="flip-in-y"].in-view           { animation-name: animFlipInY; }

/* ---------- 5. ATTENTION ---------- */
@keyframes animShake {
    0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-8px);} 40%,80%{transform:translateX(8px);}
}
@keyframes animPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
@keyframes animSwing {
    20%{transform:rotate(15deg);} 40%{transform:rotate(-10deg);} 60%{transform:rotate(5deg);} 80%{transform:rotate(-5deg);} 100%{transform:rotate(0);}
}
@keyframes animRubberBand {
    0%{transform:scale(1);} 30%{transform:scaleX(1.25) scaleY(.75);} 40%{transform:scaleX(.75) scaleY(1.25);}
    50%{transform:scaleX(1.15) scaleY(.85);} 65%{transform:scaleX(.95) scaleY(1.05);} 100%{transform:scale(1);}
}

[data-anim="shake"].in-view       { animation-name: animShake; animation-duration: .8s; }
[data-anim="pulse"].in-view       { animation-name: animPulse; animation-duration: 1.4s; }
[data-anim="swing"].in-view       { animation-name: animSwing; animation-duration: 1s; }
[data-anim="rubber-band"].in-view { animation-name: animRubberBand; animation-duration: 1s; }

/* ---------- 6. TEXT ---------- */
@keyframes animTextFocusIn { from{filter:blur(12px);opacity:0;letter-spacing:.4em;} to{filter:blur(0);opacity:1;letter-spacing:inherit;} }
@keyframes animTextReveal  { from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
@keyframes animTextLift    { from{opacity:0;transform:translateY(100%);} to{opacity:1;transform:translateY(0);} }
@keyframes animTrackingIn  { from{opacity:0;letter-spacing:1em;} to{opacity:1;letter-spacing:inherit;} }
@keyframes animTypewriter  { from{width:0;} to{width:100%;} }
@keyframes animCaretBlink  { 50%{border-color:transparent;} }
@keyframes animWordFloat   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes animGradientText{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

[data-anim="text-focus-in"].in-view { animation-name: animTextFocusIn; animation-duration: 1s; }
[data-anim="text-reveal"].in-view   { animation-name: animTextReveal; animation-duration: 1s; }
[data-anim="text-lift"].in-view     { animation-name: animTextLift; animation-duration: .9s; overflow:hidden; display:inline-block; }
[data-anim="tracking-in"].in-view   { animation-name: animTrackingIn; animation-duration: 1s; }
[data-anim="typewriter"].in-view {
    overflow:hidden; white-space:nowrap; border-right:3px solid currentColor; display:inline-block; max-width:100%;
    animation-name: animTypewriter, animCaretBlink;
    animation-duration: 2.5s, .75s;
    animation-timing-function: steps(40,end), step-end;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}

.gradient-text {
    background: linear-gradient(90deg,#667eea,#f5576c,#43e97b,#667eea);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text.in-view { animation: animGradientText 4s linear infinite; }

.word-float .word { display:inline-block; animation: animWordFloat 2.4s ease-in-out infinite; }
.word-float .word:nth-child(2){animation-delay:.15s;}
.word-float .word:nth-child(3){animation-delay:.30s;}
.word-float .word:nth-child(4){animation-delay:.45s;}
.word-float .word:nth-child(5){animation-delay:.60s;}

/* ---------- 7. IMAGE ---------- */
@keyframes animImgZoomReveal { from{opacity:0;transform:scale(1.25);filter:blur(8px);} to{opacity:1;transform:scale(1);filter:blur(0);} }
@keyframes animImgGrayReveal { from{opacity:0;filter:grayscale(100%) blur(6px);} to{opacity:1;filter:grayscale(0%) blur(0);} }
@keyframes animImgClipLeft   { from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
@keyframes animImgClipBottom { from{clip-path:inset(100% 0 0 0);} to{clip-path:inset(0 0 0 0);} }
@keyframes animImgPanUp      { from{opacity:0;transform:translateY(30px) scale(1.08);} to{opacity:1;transform:translateY(0) scale(1);} }

[data-anim="img-zoom-reveal"].in-view { animation-name: animImgZoomReveal; animation-duration: 1.1s; }
[data-anim="img-gray-reveal"].in-view { animation-name: animImgGrayReveal; animation-duration: 1.1s; }
[data-anim="img-clip-left"].in-view   { animation-name: animImgClipLeft; }
[data-anim="img-clip-bottom"].in-view { animation-name: animImgClipBottom; }
[data-anim="img-pan-up"].in-view      { animation-name: animImgPanUp; }

/* ---------- 8. HOVER EFFECTS (always available) ---------- */
.hover-zoom        { transition: transform .4s ease; }
.hover-zoom:hover  { transform: scale(1.06); }

.hover-grow        { transition: transform .3s ease; }
.hover-grow:hover  { transform: scale(1.04); }

.hover-shrink      { transition: transform .3s ease; }
.hover-shrink:hover{ transform: scale(0.96); }

.hover-lift        { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover  { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.15); }

.hover-glow        { transition: box-shadow .4s ease, filter .4s ease; }
.hover-glow:hover  { box-shadow: 0 0 18px rgba(100,150,255,.8); filter: brightness(1.08); }

.hover-rotate      { transition: transform .4s ease; }
.hover-rotate:hover{ transform: rotate(3deg) scale(1.02); }

.hover-skew        { transition: transform .4s ease; }
.hover-skew:hover  { transform: skewX(-6deg) scale(1.02); }

.hover-tilt-3d     { transition: transform .5s ease; transform-style: preserve-3d; }
.hover-tilt-3d:hover { transform: perspective(600px) rotateX(6deg) rotateY(-6deg); }

.hover-text-spacing { transition: letter-spacing .4s ease; }
.hover-text-spacing:hover { letter-spacing: 2px; }

.hover-text-glow    { transition: text-shadow .4s ease, color .4s ease; }
.hover-text-glow:hover { text-shadow: 0 0 12px currentColor; color: #4b7bec; }

.hover-underline { position: relative; text-decoration: none; }
.hover-underline::after {
    content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .35s ease;
}
.hover-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 9. IMAGE HOVER WRAPPERS ---------- */
.img-zoom-container { overflow: hidden; display: block; border-radius: inherit; }
.img-zoom-container img { transition: transform .6s ease; display: block; width: 100%; height: auto; }
.img-zoom-container:hover img { transform: scale(1.15); }

.img-gray-to-color { filter: grayscale(100%); transition: filter .6s ease; }
.img-gray-to-color:hover { filter: grayscale(0%); }

.img-blur-to-clear { filter: blur(5px); transition: filter .6s ease; }
.img-blur-to-clear:hover { filter: blur(0); }

/* ---------- 10. RESPONSIVE / MOTION ---------- */
@media (max-width: 480px) {
    [data-anim] { animation-duration: .7s; }
    [data-anim="typewriter"].in-view { white-space: normal; border-right: none; animation: animFadeIn .6s ease forwards; }
    .hover-zoom:hover { transform: scale(1.03); }
    .hover-lift:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    [data-anim] { opacity:1 !important; animation:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}