/* ============================================================
   APPLE-INSPIRED DESIGN ENHANCEMENTS
   Scroll-triggered animations, parallax, smooth interactions
   ============================================================ */

/* ---- Global smooth scrolling ---- */
html {
 scroll-behavior: smooth;
}

/* ---- Apple-style scroll reveal system ---- */
.a-reveal {
 opacity: 0;
 transform: translateY(40px);
 transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 will-change: opacity, transform;
}
.a-reveal.a-from-left {
 transform: translateX(-60px);
}
.a-reveal.a-from-right {
 transform: translateX(60px);
}
.a-reveal.a-scale {
 transform: scale(0.92);
}
.a-reveal.a-visible {
 opacity: 1;
 transform: translateY(0) translateX(0) scale(1);
}

/* Stagger children */
.a-stagger > * {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.a-stagger.a-visible > *:nth-child(1) { transition-delay: 0s; }
.a-stagger.a-visible > *:nth-child(2) { transition-delay: 0.08s; }
.a-stagger.a-visible > *:nth-child(3) { transition-delay: 0.16s; }
.a-stagger.a-visible > *:nth-child(4) { transition-delay: 0.24s; }
.a-stagger.a-visible > *:nth-child(5) { transition-delay: 0.32s; }
.a-stagger.a-visible > *:nth-child(6) { transition-delay: 0.40s; }
.a-stagger.a-visible > *:nth-child(7) { transition-delay: 0.48s; }
.a-stagger.a-visible > *:nth-child(8) { transition-delay: 0.56s; }
.a-stagger.a-visible > *:nth-child(9) { transition-delay: 0.64s; }
.a-stagger.a-visible > *:nth-child(10) { transition-delay: 0.72s; }
.a-stagger.a-visible > *:nth-child(11) { transition-delay: 0.80s; }
.a-stagger.a-visible > *:nth-child(12) { transition-delay: 0.88s; }
.a-stagger.a-visible > * {
 opacity: 1;
 transform: translateY(0);
}

/* ---- Parallax layers ---- */
.a-parallax {
 will-change: transform;
 transition: transform 0.1s linear;
}

/* ---- Apple-style section divider gradient ---- */
.a-section-fade {
 position: relative;
}
.a-section-fade::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 120px;
 background: linear-gradient(to bottom, transparent, var(--gray-50, #f9fafb));
 pointer-events: none;
}

/* ---- Smooth card hover with 3D tilt ---- */
.a-tilt {
 transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 will-change: transform;
}
.a-tilt:hover {
 box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* ---- Apple-style counter animation ---- */
.a-counter {
 display: inline-block;
 font-variant-numeric: tabular-nums;
}

/* ---- Smooth image reveal ---- */
.a-img-reveal {
 overflow: hidden;
 position: relative;
}
.a-img-reveal img {
 transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 transform: scale(1.1);
}
.a-img-reveal.a-visible img {
 transform: scale(1);
}

/* ---- Floating badge pulse ---- */
.a-float {
 animation: appleFloat 6s ease-in-out infinite;
}
@keyframes appleFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}

/* ---- Progress bar that fills on scroll ---- */
.a-scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 height: 3px;
 background: linear-gradient(90deg, #00B4D8, #29A8DF, #10B981);
 z-index: 9999;
 transform-origin: left;
 transform: scaleX(0);
 transition: transform 0.15s linear;
 width: 100%;
}

/* ---- Magnetic button effect ---- */
.a-magnetic {
 transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Apple-style text gradient shimmer ---- */
.a-shimmer {
 background: linear-gradient(
  120deg,
  currentColor 0%,
  currentColor 40%,
  #29A8DF 50%,
  currentColor 60%,
  currentColor 100%
 );
 background-size: 200% 100%;
 -webkit-background-clip: text;
 background-clip: text;
 animation: appleShimmer 3s ease-in-out infinite;
}
@keyframes appleShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

/* ---- Reduced motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
 .a-reveal,
 .a-stagger > *,
 .a-parallax,
 .a-img-reveal img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
 }
 .a-scroll-progress { display: none; }
 html { scroll-behavior: auto; }
}