/* Base hidden state */
.scroll-reveal {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When in view */
.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger via data-delay */
.scroll-reveal[data-delay="0.1s"] { transition-delay: 0.1s; }
.scroll-reveal[data-delay="0.2s"] { transition-delay: 0.2s; }
.scroll-reveal[data-delay="0.3s"] { transition-delay: 0.3s; }
.scroll-reveal[data-delay="0.4s"] { transition-delay: 0.4s; }
.scroll-reveal[data-delay="0.5s"] { transition-delay: 0.5s; }


/* Accessibility for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


:root {
  --fade-distance: 40px;
  --easing: cubic-bezier(.2,.9,.25,1);
  --anim-duration: 1s;
}

/* 1. Fade Up */
.sr-up {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  animation: sr-up-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 2. Fade Left */
.sr-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sr-left-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 3. Fade Right */
.sr-right {
  opacity: 0;
  transform: translateX(40px);
  animation: sr-right-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 4. Scale In */
.sr-scale {
  opacity: 0;
  transform: scale(0.9);
  animation: sr-scale-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 5. Rotate In */
.sr-rotate {
  opacity: 0;
  transform: rotate(-10deg);
  animation: sr-rotate-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 6. Fade Up + Scale */
.sr-up-scale {
  opacity: 0;
  transform: translateY(var(--fade-distance)) scale(0.95);
  animation: sr-up-scale-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 7. Fade Down */
.sr-down {
  opacity: 0;
  transform: translateY(-40px);
  animation: sr-down-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 8. Fade Left + Scale */
.sr-left-scale {
  opacity: 0;
  transform: translateX(-40px) scale(0.95);
  animation: sr-left-scale-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 9. Fade Right + Scale */
.sr-right-scale {
  opacity: 0;
  transform: translateX(40px) scale(0.95);
  animation: sr-right-scale-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 10. Rotate + Scale */
.sr-rotate-scale {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  animation: sr-rotate-scale-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 11. Fade Diagonal Top-Left */
.sr-diag-tl {
  opacity: 0;
  transform: translate(-30px,-30px);
  animation: sr-diag-tl-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 12. Fade Diagonal Top-Right */
.sr-diag-tr {
  opacity: 0;
  transform: translate(30px,-30px);
  animation: sr-diag-tr-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 13. Fade Diagonal Bottom-Left */
.sr-diag-bl {
  opacity: 0;
  transform: translate(-30px,30px);
  animation: sr-diag-bl-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 14. Fade Diagonal Bottom-Right */
.sr-diag-br {
  opacity: 0;
  transform: translate(30px,30px);
  animation: sr-diag-br-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* 15. Fade + Rotate + Scale */
.sr-combo {
  opacity: 0;
  transform: translateY(20px) rotate(-5deg) scale(0.95);
  animation: sr-combo-anim both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--easing);
}

/* ------------------- KEYFRAMES ------------------- */

@keyframes sr-up-anim {
  from { opacity:0; transform: translateY(var(--fade-distance)); }
  to { opacity:1; transform: translateY(0); }
}

@keyframes sr-left-anim {
  from { opacity:0; transform: translateX(-40px); }
  to { opacity:1; transform: translateX(0); }
}

@keyframes sr-right-anim {
  from { opacity:0; transform: translateX(40px); }
  to { opacity:1; transform: translateX(0); }
}

@keyframes sr-scale-anim {
  from { opacity:0; transform: scale(0.9); }
  to { opacity:1; transform: scale(1); }
}

@keyframes sr-rotate-anim {
  from { opacity:0; transform: rotate(-10deg); }
  to { opacity:1; transform: rotate(0deg); }
}

@keyframes sr-up-scale-anim {
  from { opacity:0; transform: translateY(var(--fade-distance)) scale(0.95); }
  to { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes sr-down-anim {
  from { opacity:0; transform: translateY(-40px); }
  to { opacity:1; transform: translateY(0); }
}

@keyframes sr-left-scale-anim {
  from { opacity:0; transform: translateX(-40px) scale(0.95); }
  to { opacity:1; transform: translateX(0) scale(1); }
}

@keyframes sr-right-scale-anim {
  from { opacity:0; transform: translateX(40px) scale(0.95); }
  to { opacity:1; transform: translateX(0) scale(1); }
}

@keyframes sr-rotate-scale-anim {
  from { opacity:0; transform: rotate(-10deg) scale(0.9); }
  to { opacity:1; transform: rotate(0deg) scale(1); }
}

@keyframes sr-diag-tl-anim {
  from { opacity:0; transform: translate(-30px,-30px); }
  to { opacity:1; transform: translate(0,0); }
}

@keyframes sr-diag-tr-anim {
  from { opacity:0; transform: translate(30px,-30px); }
  to { opacity:1; transform: translate(0,0); }
}

@keyframes sr-diag-bl-anim {
  from { opacity:0; transform: translate(-30px,30px); }
  to { opacity:1; transform: translate(0,0); }
}

@keyframes sr-diag-br-anim {
  from { opacity:0; transform: translate(30px,30px); }
  to { opacity:1; transform: translate(0,0); }
}

@keyframes sr-combo-anim {
  from { opacity:0; transform: translateY(20px) rotate(-5deg) scale(0.95); }
  to { opacity:1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* ------------------- Accessibility ------------------- */
@media (prefers-reduced-motion: reduce) {
  .sr-up, .sr-left, .sr-right, .sr-scale, .sr-rotate,
  .sr-up-scale, .sr-down, .sr-left-scale, .sr-right-scale,
  .sr-rotate-scale, .sr-diag-tl, .sr-diag-tr, .sr-diag-bl,
  .sr-diag-br, .sr-combo {
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}


/* ===============================
   Animation 1: RiseFade
   =============================== */
@keyframes riseFade {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ani-riseFade { animation: riseFade 1s forwards; }

/* ===============================
   Animation 2: SlideFromLeft
   =============================== */
@keyframes slideFromLeft {
  0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}
.ani-slideFromLeft { animation: slideFromLeft 1s forwards; }

/* ===============================
   Animation 3: SlideFromRight
   =============================== */
@keyframes slideFromRight {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}
.ani-slideFromRight { animation: slideFromRight 1s forwards; }

/* ===============================
   Animation 4: ZoomGrow
   =============================== */
@keyframes zoomGrow {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
.ani-zoomGrow { animation: zoomGrow 1s forwards; }

/* ===============================
   Animation 5: ZoomShrink
   =============================== */
@keyframes zoomShrink {
  0% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
.ani-zoomShrink { animation: zoomShrink 1s forwards; }

/* ===============================
   Animation 6: SpinRotate
   =============================== */
@keyframes spinRotate {
  0% { opacity: 0; transform: rotate(-180deg); }
  100% { opacity: 1; transform: rotate(0); }
}
.ani-spinRotate { animation: spinRotate 1s forwards; }

/* ===============================
   Animation 7: FlipY
   =============================== */
@keyframes flipY {
  0% { opacity: 0; transform: rotateY(90deg); }
  100% { opacity: 1; transform: rotateY(0); }
}
.ani-flipY { animation: flipY 1s forwards; }

/* ===============================
   Animation 8: SkewXEnter
   =============================== */
@keyframes skewXEnter {
  0% { opacity: 0; transform: skewX(45deg); }
  100% { opacity: 1; transform: skewX(0); }
}
.ani-skewXEnter { animation: skewXEnter 1s forwards; }

/* ===============================
   Animation 9: BounceUp
   =============================== */
@keyframes bounceUp {
  0% { opacity: 0; transform: translateY(-200px); }
  50% { transform: translateY(30px); }
  70% { transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ani-bounceUp { animation: bounceUp 1s forwards; }

/* ===============================
   Animation 10: FadeLeftEnter
   =============================== */
@keyframes fadeLeftEnter {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}
.ani-fadeLeftEnter { animation: fadeLeftEnter 1s forwards; }

/* ===============================
   Animation 11: FadeRightEnter
   =============================== */
@keyframes fadeRightEnter {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
.ani-fadeRightEnter { animation: fadeRightEnter 1s forwards; }

/* ===============================
   Animation 12: RotateScaleIn
   =============================== */
@keyframes rotateScaleIn {
  0% { opacity: 0; transform: rotate(-180deg) scale(0.5); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
.ani-rotateScaleIn { animation: rotateScaleIn 1s forwards; }

/* ===============================
   Animation 13: SlideUpEnter
   =============================== */
@keyframes slideUpEnter {
  0% { opacity: 0; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ani-slideUpEnter { animation: slideUpEnter 1s forwards; }

/* ===============================
   Animation 14: FlipRotateXY
   =============================== */
@keyframes flipRotateXY {
  0% { opacity: 0; transform: rotateX(90deg) rotateY(90deg); }
  100% { opacity: 1; transform: rotateX(0deg) rotateY(0deg); }
}
.ani-flipRotateXY { animation: flipRotateXY 1s forwards; }

/* ===============================
   Animation 15: ZoomRotateIn
   =============================== */
@keyframes zoomRotateIn {
  0% { opacity: 0; transform: scale(0.3) rotate(-180deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ani-zoomRotateIn { animation: zoomRotateIn 1s forwards; }

/* Base Animation Setup */
.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-5 { animation-delay: 0.5s; }
.fast { animation-duration: 0.3s; }
.slow { animation-duration: 2s; }
.infinite { animation-iteration-count: infinite; }

/* Entrance Animations */
.fade-in      { animation: fadeIn 1s ease-in; }
.fade-up      { animation: fadeUp 1s ease-out; }
.fade-down    { animation: fadeDown 1s ease-out; }
.fade-left    { animation: fadeLeft 1s ease-out; }
.fade-right   { animation: fadeRight 1s ease-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Hover Effects */
.hover-grow:hover       { transform: scale(1.1); transition: 0.3s; }
.hover-shrink:hover     { transform: scale(0.9); transition: 0.3s; }
.hover-rotate:hover     { transform: rotate(5deg); transition: 0.3s; }
.hover-glow:hover       { box-shadow: 0 0 10px #fff; transition: 0.4s; }
.hover-blur:hover       { filter: blur(2px); transition: 0.3s; }
.hover-shadow:hover     { box-shadow: 0px 5px 15px rgba(0,0,0,0.2); transition: 0.3s; }

/* Attention Seekers */
.shake      { animation: shake 0.6s ease; }
.bounce     { animation: bounce 1s ease infinite; }
.pulse      { animation: pulse 1.5s infinite; }
.swing      { animation: swing 1s ease; }

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* Scroll Animations */
.scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}
.scroll-fade.active {
  opacity: 1;
  transform: translateY(0);
}

/* Loading / Loop Animations */
.spin { animation: spin 1s linear infinite; }
.ping { animation: ping 1.5s infinite; }

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Responsive Media Queries */
@media (max-width: 600px) {
  .fade-up { animation: fadeUp 0.5s ease-out; }
  .hover-grow:hover { transform: scale(1.05); }
}


/* More Entrance Animations */
.slide-up    { animation: slideUp 0.8s ease-out; }
.slide-down  { animation: slideDown 0.8s ease-out; }
.slide-left  { animation: slideLeft 0.8s ease-out; }
.slide-right { animation: slideRight 0.8s ease-out; }

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Zoom Animations */
.zoom-in     { animation: zoomIn 0.6s ease-in-out; }
.zoom-out    { animation: zoomOut 0.6s ease-in-out; }

@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
  from { transform: scale(1.2); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* Rotate Animations */
.rotate-in   { animation: rotateIn 0.6s ease-in; }
.rotate-out  { animation: rotateOut 0.6s ease-in; }

@keyframes rotateIn {
  from { transform: rotate(-200deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}
@keyframes rotateOut {
  from { transform: rotate(0); opacity: 1; }
  to { transform: rotate(200deg); opacity: 0; }
}

/* Text Effects */
.text-flicker { animation: flicker 1.5s infinite; }
.text-glow    { animation: glow 1.2s ease-in-out infinite alternate; }
.text-blink   { animation: blink 1s step-start infinite; }

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0; }
}
@keyframes glow {
  from { text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #0ff; }
  to   { text-shadow: 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff; }
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Background Animation */
.bg-slide {
  background-position: 0 0;
  background-size: 200% 200%;
  animation: bgSlide 4s linear infinite;
}
@keyframes bgSlide {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

/* Button Special Effects */
.btn-press:hover {
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.btn-pop:hover {
  animation: pop 0.3s ease;
}
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Morphing Shapes */
.morph {
  animation: morph 4s ease-in-out infinite;
}
@keyframes morph {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

/* Text Typewriter */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #fff;
  animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}