/**
 * Scroll Animations CSS
 * Maps pp-anim-* classes to Animate.css @keyframes
 * + hover effects + entrance initial state
 */

/* ─── Initial state: hide entrance elements until triggered ─── */
[data-entrance] {
    opacity: 0;
}
[data-entrance].pp-animated {
    opacity: 1;
}

/* ─── Duration classes ─── */
.pp-anim-slow    { animation-duration: 1.5s !important; }
.pp-anim-normal  { animation-duration: 1s !important; }
.pp-anim-fast    { animation-duration: 0.5s !important; }

/* ─── Animation trigger ─── */
.pp-animated {
    animation-fill-mode: both;
}

/* ─── Fade ─── */
.pp-anim-fadeIn      { animation-name: fadeIn; }
.pp-anim-fadeInDown  { animation-name: fadeInDown; }
.pp-anim-fadeInLeft  { animation-name: fadeInLeft; }
.pp-anim-fadeInRight { animation-name: fadeInRight; }
.pp-anim-fadeInUp    { animation-name: fadeInUp; }

/* ─── Bounce ─── */
.pp-anim-bounceIn      { animation-name: bounceIn; }
.pp-anim-bounceInDown  { animation-name: bounceInDown; }
.pp-anim-bounceInLeft  { animation-name: bounceInLeft; }
.pp-anim-bounceInRight { animation-name: bounceInRight; }
.pp-anim-bounceInUp    { animation-name: bounceInUp; }

/* ─── Slide ─── */
.pp-anim-slideInDown  { animation-name: slideInDown; }
.pp-anim-slideInLeft  { animation-name: slideInLeft; }
.pp-anim-slideInRight { animation-name: slideInRight; }
.pp-anim-slideInUp    { animation-name: slideInUp; }

/* ─── Zoom ─── */
.pp-anim-zoomIn      { animation-name: zoomIn; }
.pp-anim-zoomInDown  { animation-name: zoomInDown; }
.pp-anim-zoomInLeft  { animation-name: zoomInLeft; }
.pp-anim-zoomInRight { animation-name: zoomInRight; }
.pp-anim-zoomInUp    { animation-name: zoomInUp; }

/* ─── Rotate / Flip ─── */
.pp-anim-rotateIn { animation-name: rotateIn; }
.pp-anim-flip     { animation-name: flip; }
.pp-anim-flipInX  { animation-name: flipInX; }
.pp-anim-flipInY  { animation-name: flipInY; }

/* ─── Special ─── */
.pp-anim-lightSpeedIn { animation-name: lightSpeedInRight; }
.pp-anim-rollIn       { animation-name: rollIn; }


/* ═══════════════════════════════════════════════════════════════
   @keyframes — self-contained, no dependency on animate.css
   ═══════════════════════════════════════════════════════════════ */

/* Fade */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* Bounce In */
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes bounceInDown {
    from { opacity: 0; transform: translate3d(0, -200px, 0); }
    60% { opacity: 1; transform: translate3d(0, 25px, 0); }
    75% { transform: translate3d(0, -10px, 0); }
    90% { transform: translate3d(0, 5px, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes bounceInLeft {
    from { opacity: 0; transform: translate3d(-200px, 0, 0); }
    60% { opacity: 1; transform: translate3d(25px, 0, 0); }
    75% { transform: translate3d(-10px, 0, 0); }
    90% { transform: translate3d(5px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes bounceInRight {
    from { opacity: 0; transform: translate3d(200px, 0, 0); }
    60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
    75% { transform: translate3d(10px, 0, 0); }
    90% { transform: translate3d(-5px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes bounceInUp {
    from { opacity: 0; transform: translate3d(0, 200px, 0); }
    60% { opacity: 1; transform: translate3d(0, -25px, 0); }
    75% { transform: translate3d(0, 10px, 0); }
    90% { transform: translate3d(0, -5px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

/* Slide */
@keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }

/* Zoom */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
@keyframes zoomInDown { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -500px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInLeft { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-500px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInRight { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(500px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInUp { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 500px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

/* Rotate */
@keyframes rotateIn { from { opacity: 0; transform: rotate3d(0, 0, 1, -200deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* Flip */
@keyframes flip {
    from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
    40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
    50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
    80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
    to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
}
@keyframes flipInX {
    from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
    40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
    60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
    80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
    to { transform: perspective(400px); }
}
@keyframes flipInY {
    from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
    40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
    60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
    80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
    to { transform: perspective(400px); }
}

/* LightSpeed */
@keyframes lightSpeedInRight {
    from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
    60% { transform: skewX(20deg); opacity: 1; }
    80% { transform: skewX(-5deg); }
    to { transform: translate3d(0, 0, 0); }
}

/* Roll */
@keyframes rollIn {
    from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* ═══════════════════════════════════════════════════════════════
   Hover Effects (data-hover-effect attribute)
   ═══════════════════════════════════════════════════════════════ */

[data-hover-effect] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-hover-effect="grow"]:hover       { transform: scale(1.05); }
[data-hover-effect="shrink"]:hover     { transform: scale(0.95); }
[data-hover-effect="float"]:hover      { transform: translateY(-6px); }
[data-hover-effect="sink"]:hover       { transform: translateY(6px); }
[data-hover-effect="wobble-h"]:hover   { animation: pp-wobble-h 0.8s ease; }
[data-hover-effect="wobble-v"]:hover   { animation: pp-wobble-v 0.8s ease; }
[data-hover-effect="buzz"]:hover       { animation: pp-buzz 0.15s linear infinite; }
[data-hover-effect="skew"]:hover       { transform: skew(-4deg); }

@keyframes pp-wobble-h {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-8px) rotate(-3deg); }
    30%  { transform: translateX(6px) rotate(2deg); }
    45%  { transform: translateX(-4px) rotate(-1deg); }
    60%  { transform: translateX(2px) rotate(0.5deg); }
    75%  { transform: translateX(-1px) rotate(-0.3deg); }
    100% { transform: translateX(0); }
}

@keyframes pp-wobble-v {
    0%   { transform: translateY(0); }
    15%  { transform: translateY(-8px); }
    30%  { transform: translateY(6px); }
    45%  { transform: translateY(-4px); }
    60%  { transform: translateY(2px); }
    75%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

@keyframes pp-buzz {
    0%  { transform: translate(1px, 1px); }
    25% { transform: translate(-1px, -1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 1px); }
    100%{ transform: translate(1px, 1px); }
}

/* ─── Reduced motion: disable all animations ─── */
@media (prefers-reduced-motion: reduce) {
    [data-entrance] { opacity: 1 !important; }
    .pp-animated { animation: none !important; }
    [data-hover-effect] { transition: none !important; }
    [data-hover-effect]:hover { transform: none !important; animation: none !important; }
}