/* ============================================================
   PERKASA FAST OTP — PREMIUM ANIMATION SYSTEM v1.0
   150 animasi: scroll, 3D, micro-interaction, background, text
   Tidak mengganggu backend. Hanya lapisan visual.
   ============================================================ */

/* ── ROOT TOKENS ── */
:root {
  --anim-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --anim-ease-smooth: cubic-bezier(.4,0,.2,1);
  --anim-ease-out:    cubic-bezier(0,0,.2,1);
  --anim-ease-in:     cubic-bezier(.4,0,1,1);
  --anim-duration-fast: 180ms;
  --anim-duration-base: 320ms;
  --anim-duration-slow: 540ms;
  --anim-duration-xslow: 900ms;
}

/* ── PREFERS-REDUCED-MOTION: matikan semua ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   A. SCROLL REVEAL (IntersectionObserver driven via JS)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--anim-duration-slow) var(--anim-ease-out), transform var(--anim-duration-slow) var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-up]    { opacity: 0; transform: translateY(40px);  transition: opacity .5s var(--anim-ease-out), transform .5s var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal-down]  { opacity: 0; transform: translateY(-30px); transition: opacity .5s var(--anim-ease-out), transform .5s var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal-left]  { opacity: 0; transform: translateX(40px);  transition: opacity .5s var(--anim-ease-out), transform .5s var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal-right] { opacity: 0; transform: translateX(-40px); transition: opacity .5s var(--anim-ease-out), transform .5s var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal-up].is-visible, [data-reveal-down].is-visible,
[data-reveal-left].is-visible, [data-reveal-right].is-visible { opacity: 1; transform: none; }

/* zoom reveal */
[data-reveal-zoom] { opacity: 0; transform: scale(.9); transition: opacity .5s var(--anim-ease-out), transform .5s var(--anim-ease-spring); transition-delay: var(--d, 0s); }
[data-reveal-zoom].is-visible { opacity: 1; transform: scale(1); }

/* scroll blur */
[data-reveal-blur] { opacity: 0; filter: blur(8px); transition: opacity .6s var(--anim-ease-out), filter .6s var(--anim-ease-out); transition-delay: var(--d, 0s); }
[data-reveal-blur].is-visible { opacity: 1; filter: blur(0); }

/* scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #EC78AC, #C44E8A, #7C3AED);
  transform-origin: left; transform: scaleX(0); transition: transform .1s linear;
  pointer-events: none;
}

/* ============================================================
   B. 3D ANIMATIONS
   ============================================================ */
/* 3D Card Tilt — JS akan tambahkan via mouse */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.tilt-card:hover { box-shadow: 0 20px 40px -12px rgba(236,120,172,.35); }

/* 3D Card Flip */
.flip-card-wrap { perspective: 900px; }
.flip-card { transform-style: preserve-3d; transition: transform .5s var(--anim-ease-smooth); position: relative; }
.flip-card:hover { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { backface-visibility: hidden; position: absolute; inset: 0; }
.flip-card-back { transform: rotateY(180deg); }

/* 3D Floating Objects */
.float-3d {
  animation: float3d 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateX(0) rotateZ(0); }
  33% { transform: translateY(-12px) rotateX(4deg) rotateZ(2deg); }
  66% { transform: translateY(-6px) rotateX(-2deg) rotateZ(-2deg); }
}

/* 3D Holographic Card */
.holo-card {
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
.holo-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(236,120,172,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.holo-card:hover::before { transform: translateX(100%); }

/* 3D Sphere */
.sphere-3d {
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #EC78AC 40%, #C44E8A 80%);
  box-shadow: inset -6px -6px 12px rgba(0,0,0,.15), 4px 8px 16px rgba(236,120,172,.4);
  animation: sphere-rotate 8s linear infinite;
}
@keyframes sphere-rotate {
  from { filter: hue-rotate(0); }
  to { filter: hue-rotate(360deg); }
}

/* ============================================================
   C. BACKGROUND ANIMATIONS
   ============================================================ */
/* Animated Gradient Background */
.bg-animated-grad {
  background: linear-gradient(270deg, #FFEAF5, #FFD6EF, #F7EBFF, #FFE3F1);
  background-size: 400% 400%;
  animation: grad-shift 12s ease infinite;
}
@keyframes grad-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particle Canvas — JS render */
#particle-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1; opacity: .4;
}

/* Aurora Background */
.aurora-bg {
  position: relative; overflow: hidden;
}
.aurora-bg::before, .aurora-bg::after {
  content: '';
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .35;
  animation: aurora-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.aurora-bg::before {
  width: 500px; height: 300px;
  background: radial-gradient(circle, #EC78AC, transparent 70%);
  top: -100px; left: -100px;
}
.aurora-bg::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #A78BFA, transparent 70%);
  bottom: -100px; right: -100px;
  animation-delay: -7s;
}
@keyframes aurora-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 30px) scale(1.15); }
}

/* Animated Wave Background */
.wave-bg { position: relative; overflow: hidden; }
.wave-bg .wave-layer {
  position: absolute; bottom: 0; left: 0; width: 200%; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23EC78AC' fill-opacity='.12' d='M0,40 C360,80 720,0 1080,40 C1260,60 1350,30 1440,40 L1440,80 L0,80Z'/%3E%3C/svg%3E") repeat-x;
  animation: wave-scroll 10s linear infinite;
}
.wave-bg .wave-layer:nth-child(2) { animation-delay: -5s; opacity: .5; height: 60px; bottom: 10px; }
@keyframes wave-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Starfield */
.star-field { position: relative; overflow: hidden; }
.star-field::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(236,120,172,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 15%, rgba(167,139,250,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(236,120,172,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(167,139,250,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 80%, rgba(236,120,172,.3) 0%, transparent 100%);
  animation: star-twinkle 4s ease-in-out infinite alternate;
}
@keyframes star-twinkle { from { opacity: .4; } to { opacity: 1; } }

/* Morphing Background */
.morph-bg {
  background: linear-gradient(135deg, #FFEAF5 0%, #F7EBFF 50%, #FFE3F1 100%);
  animation: morph-bg 8s ease-in-out infinite;
}
@keyframes morph-bg {
  0%, 100% { border-radius: 20px; }
  33% { border-radius: 40px 20px 40px 20px; }
  66% { border-radius: 20px 40px 20px 40px; }
}

/* Moving Light Effect */
.light-sweep {
  position: relative; overflow: hidden;
}
.light-sweep::after {
  content: '';
  position: absolute; top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: light-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes light-sweep { from { left: -75%; } to { left: 125%; } }

/* Mesh Gradient Animation */
.mesh-grad {
  background:
    radial-gradient(circle at 20% 20%, rgba(236,120,172,.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(167,139,250,.3) 0%, transparent 40%),
    radial-gradient(circle at 60% 30%, rgba(249,168,200,.2) 0%, transparent 30%),
    #FFEAF5;
  animation: mesh-drift 12s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  from { background-position: 0 0, 100% 100%, 50% 0; }
  to   { background-position: 10% 10%, 90% 90%, 60% 10%; }
}

/* ============================================================
   D. TEXT ANIMATIONS
   ============================================================ */
/* Typewriter — JS sets width */
.typewriter {
  overflow: hidden; white-space: nowrap; border-right: 2px solid #EC78AC;
  animation: typewriter-caret .7s step-end infinite;
}
@keyframes typewriter-caret { 50% { border-color: transparent; } }

/* Text Reveal — clip */
.text-reveal {
  overflow: hidden;
}
.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform .5s var(--anim-ease-spring);
  transition-delay: var(--d, 0s);
}
.text-reveal.is-visible span { transform: translateY(0); }

/* Gradient Text Animation */
.grad-text {
  background: linear-gradient(90deg, #EC78AC, #C44E8A, #A78BFA, #EC78AC);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-text-flow 4s linear infinite;
}
@keyframes grad-text-flow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

/* Glitch Text */
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch-text::before {
  color: #EC78AC; left: 2px;
  animation: glitch-top 3s steps(2, end) infinite;
}
.glitch-text::after {
  color: #A78BFA; left: -2px;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-bot 3s steps(2, end) infinite;
}
@keyframes glitch-top {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
}
@keyframes glitch-bot {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(2px, -1px); }
  94% { transform: translate(-2px, 1px); }
}

/* Text Wave Animation */
.wave-text .char {
  display: inline-block;
  animation: wave-char .8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .05s);
}
@keyframes wave-char { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Blur-to-Clear */
.blur-reveal {
  filter: blur(10px); opacity: 0;
  transition: filter .7s var(--anim-ease-out), opacity .7s var(--anim-ease-out);
  transition-delay: var(--d, 0s);
}
.blur-reveal.is-visible { filter: blur(0); opacity: 1; }

/* Text Scramble — JS driven class */
.scramble-text { letter-spacing: .02em; }

/* 3D Text Rotation */
.text-3d {
  transform-style: preserve-3d;
  animation: text3d-rotate 6s ease-in-out infinite;
}
@keyframes text3d-rotate {
  0%, 100% { transform: rotateX(0); }
  50% { transform: rotateX(12deg); }
}

/* Elastic Text */
.elastic-text {
  display: inline-block;
  transition: transform var(--anim-duration-base) var(--anim-ease-spring);
}
.elastic-text:hover { transform: scale(1.08); }

/* Character stagger — JS splits chars */
.stagger-text .char {
  display: inline-block; opacity: 0; transform: translateY(20px);
  animation: stagger-in .4s var(--anim-ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * .04s);
}
@keyframes stagger-in { to { opacity: 1; transform: none; } }

/* ============================================================
   E. MOUSE & TOUCH INTERACTIONS
   ============================================================ */
/* Custom Cursor */
#custom-cursor {
  position: fixed; top: 0; left: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(236,120,172,.7); pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, background .2s ease;
  z-index: 99999; mix-blend-mode: multiply;
}
#custom-cursor.cursor-hover {
  width: 36px; height: 36px;
  background: rgba(236,120,172,.25);
  border: 2px solid rgba(236,120,172,.8);
}
#cursor-trail {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(236,120,172,.4); pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .08s linear;
  z-index: 99998;
}

/* Ripple Effect */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.4); pointer-events: none;
  transform: scale(0);
  animation: ripple-expand .6s var(--anim-ease-out) forwards;
}
@keyframes ripple-expand { to { transform: scale(4); opacity: 0; } }

/* Magnetic Button — JS driven via inline transform */
.magnetic-btn {
  transition: transform .3s var(--anim-ease-spring);
  will-change: transform;
}

/* Hover Lift */
.hover-lift { transition: transform .25s var(--anim-ease-spring), box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(236,120,172,.3); }

/* Hover Scale */
.hover-scale { transition: transform .2s var(--anim-ease-spring); }
.hover-scale:hover { transform: scale(1.04); }

/* Hover Tilt — JS driven */
.hover-tilt { transition: transform .15s ease; will-change: transform; }

/* Interactive Card Hover */
.interactive-card {
  transition: transform .3s var(--anim-ease-spring), box-shadow .3s ease;
  will-change: transform;
}
.interactive-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px -16px rgba(236,120,172,.35);
}

/* Spotlight Cursor */
.spotlight-wrap {
  position: relative; overflow: hidden;
}
.spotlight-wrap .spotlight {
  position: absolute; width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
  opacity: 0;
}
.spotlight-wrap:hover .spotlight { opacity: 1; }

/* Touch Feedback */
.touch-feedback { position: relative; overflow: hidden; }
.touch-feedback:active::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.2);
  animation: touch-flash .3s ease forwards;
}
@keyframes touch-flash { to { opacity: 0; } }

/* ============================================================
   F. SVG & ICON ANIMATIONS
   ============================================================ */
.svg-draw path, .svg-draw circle, .svg-draw line, .svg-draw polyline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s ease;
}
.svg-draw.is-visible path,
.svg-draw.is-visible circle,
.svg-draw.is-visible line,
.svg-draw.is-visible polyline { stroke-dashoffset: 0; }

/* SVG Morphing — JS driven with SMIL or CSS */
.svg-morph { transition: d .5s ease; }

/* SVG Wave */
.svg-wave { animation: wave-sway 4s ease-in-out infinite; transform-origin: bottom; }
@keyframes wave-sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-3deg); } }

/* Animated Logo Reveal */
.logo-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--anim-ease-out);
}
.logo-reveal.is-visible { clip-path: inset(0 0% 0 0); }

/* SVG Circular / spin */
.svg-spin { animation: svg-spin 8s linear infinite; transform-origin: center; }
@keyframes svg-spin { to { transform: rotate(360deg); } }

/* SVG Gradient Animation */
.svg-grad-anim stop {
  animation: grad-stop-shift 4s ease-in-out infinite alternate;
}
@keyframes grad-stop-shift { from { stop-opacity: .8; } to { stop-opacity: 1; } }

/* Icon Hover Effect */
.icon-hover {
  transition: transform .2s var(--anim-ease-spring), color .2s ease;
}
.icon-hover:hover { transform: scale(1.2) rotate(-8deg); color: #EC78AC; }

/* SVG Loading */
.svg-loading {
  animation: svg-dash-loop 1.4s ease-in-out infinite;
}
@keyframes svg-dash-loop {
  0%   { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 90 150; stroke-dashoffset: -124px; }
}

/* ============================================================
   G. UI COMPONENT ANIMATIONS
   ============================================================ */
/* Accordion */
.accordion-content {
  overflow: hidden; max-height: 0;
  transition: max-height .35s var(--anim-ease-smooth), opacity .3s ease;
  opacity: 0;
}
.accordion-content.open { max-height: 800px; opacity: 1; }
.accordion-icon { transition: transform .3s var(--anim-ease-smooth); }
.accordion-open .accordion-icon { transform: rotate(180deg); }

/* Dropdown */
.dropdown-menu {
  transform-origin: top center;
  transform: scaleY(.9) translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: transform .25s var(--anim-ease-spring), opacity .2s ease;
}
.dropdown-menu.open {
  transform: scaleY(1) translateY(0);
  opacity: 1; pointer-events: auto;
}

/* Modal Pop-up */
.modal-overlay {
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
  transform: scale(.9) translateY(20px);
  transition: transform .3s var(--anim-ease-spring), opacity .25s ease;
  opacity: 0;
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); opacity: 1; }

/* Toast Notification */
.toast-anim {
  transform: translateX(110%); opacity: 0;
  animation: toast-in .35s var(--anim-ease-spring) forwards;
}
.toast-anim.out { animation: toast-out .3s ease forwards; }
@keyframes toast-in  { to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateX(110%); opacity: 0; } }

/* Tab Switching */
.tab-indicator {
  transition: left .3s var(--anim-ease-spring), width .3s var(--anim-ease-spring);
}
.tab-content-item {
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.tab-content-item.active {
  opacity: 1; transform: none;
  pointer-events: auto;
}

/* Skeleton Loading */
.skeleton-pulse {
  background: linear-gradient(90deg, #f0e6f6 25%, #f8e8f3 50%, #f0e6f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Progress Bar */
.progress-bar-fill {
  width: 0; height: 100%;
  background: linear-gradient(90deg, #EC78AC, #C44E8A);
  border-radius: inherit;
  transition: width .8s var(--anim-ease-out);
  position: relative; overflow: hidden;
}
.progress-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: progress-shine 1.5s ease-in-out infinite;
}
@keyframes progress-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Circular Progress */
.circular-progress { transform: rotate(-90deg); }
.circular-progress circle {
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  transition: stroke-dashoffset 1s var(--anim-ease-out);
}

/* Toggle Switch */
.toggle-switch-knob {
  transition: transform .25s var(--anim-ease-spring), background .25s ease;
}
.toggle-switch-bg { transition: background .25s ease; }

/* Animated Navbar */
.anim-navbar {
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.anim-navbar.scrolled {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -8px rgba(236,120,172,.2);
}

/* Sidebar Slide */
.sidebar-anim {
  transform: translateX(-100%);
  transition: transform .3s var(--anim-ease-spring);
}
.sidebar-anim.open { transform: translateX(0); }

/* Mobile Menu */
.mobile-menu-item {
  opacity: 0; transform: translateX(-20px);
  transition: opacity .2s ease, transform .2s ease;
  transition-delay: calc(var(--i, 0) * .05s);
}
.mobile-menu-open .mobile-menu-item { opacity: 1; transform: none; }

/* Notification Badge */
.notif-badge { animation: badge-pop .3s var(--anim-ease-spring); }
@keyframes badge-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Floating Action Button */
.fab {
  transition: transform .2s var(--anim-ease-spring), box-shadow .2s ease;
  box-shadow: 0 6px 18px -6px rgba(236,120,172,.5);
}
.fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 10px 24px -8px rgba(236,120,172,.55); }
.fab:active { transform: scale(.96); }

/* Tooltip Reveal */
.tooltip-anim {
  transform: translateY(6px) scale(.95);
  opacity: 0; pointer-events: none;
  transition: transform .2s var(--anim-ease-spring), opacity .2s ease;
}
.tooltip-trigger:hover .tooltip-anim,
.tooltip-trigger:focus .tooltip-anim { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* Floating Notification */
.floating-notif {
  animation: float-notif 4s ease-in-out infinite;
}
@keyframes float-notif {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  75% { transform: translateY(-4px) rotate(-1deg); }
}

/* ============================================================
   H. CINEMATIC & PREMIUM
   ============================================================ */
/* Cinematic Hero Entrance */
.cinematic-hero {
  opacity: 0; transform: scale(1.04);
  animation: cinematic-in 1s var(--anim-ease-out) .2s forwards;
}
@keyframes cinematic-in { to { opacity: 1; transform: scale(1); } }

/* Apple-Style Section */
.apple-section {
  opacity: 0; transform: translateY(60px);
  transition: opacity .9s var(--anim-ease-out), transform .9s var(--anim-ease-out);
}
.apple-section.is-visible { opacity: 1; transform: translateY(0); }

/* Glass Reflection */
.glass-reflect {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 32px -16px rgba(236,120,172,.18), inset 0 1px 0 rgba(255,255,255,.9);
  position: relative; overflow: hidden;
}
.glass-reflect::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  pointer-events: none; border-radius: inherit;
}

/* Cinematic Image Reveal */
.cinematic-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--anim-ease-out);
}
.cinematic-reveal.is-visible { clip-path: inset(0 0% 0 0); }

/* Curtain Reveal */
.curtain-wrap { position: relative; overflow: hidden; }
.curtain-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #FFEAF5, #FFD6EF);
  transform: translateX(0);
  transition: transform .8s var(--anim-ease-out);
  pointer-events: none;
}
.curtain-wrap.revealed::after { transform: translateX(100%); }

/* Circular Mask Reveal */
.circle-reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .8s var(--anim-ease-spring);
}
.circle-reveal.is-visible { clip-path: circle(100% at 50% 50%); }

/* Blur Dissolve */
.blur-dissolve {
  filter: blur(20px); opacity: 0;
  transition: filter .6s ease, opacity .6s ease;
}
.blur-dissolve.is-visible { filter: blur(0); opacity: 1; }

/* Morphing Card */
.morph-card {
  border-radius: 20px;
  transition: border-radius .4s var(--anim-ease-spring), transform .3s var(--anim-ease-spring), box-shadow .3s ease;
}
.morph-card:hover {
  border-radius: 32px;
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(236,120,172,.3);
}

/* Radial Zoom */
.radial-zoom {
  transform: scale(.85); opacity: 0;
  transition: transform .6s var(--anim-ease-spring), opacity .5s ease;
}
.radial-zoom.is-visible { transform: scale(1); opacity: 1; }

/* Split Image Reveal */
.split-reveal {
  position: relative; overflow: hidden;
}
.split-reveal::before {
  content: '';
  position: absolute; inset: 0;
  background: #FFEAF5; z-index: 1;
  transform-origin: left;
  animation: split-wipe .8s var(--anim-ease-out) forwards;
}
@keyframes split-wipe { to { transform: scaleX(0); } }

/* ============================================================
   I. SLIDERS & CAROUSELS
   ============================================================ */
/* Fade Slider */
.fade-slider { position: relative; }
.fade-slider .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
}
.fade-slider .slide.active { opacity: 1; position: relative; }

/* Infinite Marquee */
.marquee-wrap { overflow: hidden; }
.marquee-track {
  display: flex; gap: 24px; width: max-content;
  animation: marquee-scroll 20s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Coverflow — 3D stack */
.coverflow-wrap { perspective: 800px; display: flex; gap: 16px; overflow: hidden; justify-content: center; }
.coverflow-item {
  transition: transform .4s ease, opacity .4s ease;
  flex: 0 0 240px;
}
.coverflow-item.active { transform: scale(1.08); }
.coverflow-item:not(.active) { transform: scale(.88) rotateY(20deg); opacity: .6; }

/* Cube Slider */
.cube-wrap { perspective: 1000px; position: relative; }
.cube-slider {
  transform-style: preserve-3d;
  transition: transform .7s var(--anim-ease-smooth);
}

/* ============================================================
   J. ADVANCED MICRO-INTERACTIONS
   ============================================================ */
/* Number Counter — JS driven */
.count-up { font-variant-numeric: tabular-nums; transition: color .2s ease; }

/* Flip Clock */
.flip-digit {
  display: inline-block;
  animation: flip-in .5s var(--anim-ease-smooth);
  transform-origin: top;
}
@keyframes flip-in { from { transform: rotateX(-90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }

/* Confetti — JS particle burst */
.confetti-particle {
  position: fixed; width: 8px; height: 8px;
  pointer-events: none; z-index: 99999;
  border-radius: 2px;
  animation: confetti-fall 2.5s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 60px), calc(100vh + 50px)) rotate(720deg); opacity: 0; }
}

/* Heartbeat */
.heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}

/* Pulse */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(236,120,172,.5);
  animation: pulse-out 1.5s ease-out infinite;
}
@keyframes pulse-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* Elastic Bounce */
.elastic-bounce { animation: elastic-bounce .5s var(--anim-ease-spring); }
@keyframes elastic-bounce { 0% { transform: scale(1); } 40% { transform: scale(.92); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Spring Physics */
.spring-pop {
  transition: transform .4s var(--anim-ease-spring);
}
.spring-pop:active { transform: scale(.92); }

/* Success Checkmark — SVG stroke */
.check-draw {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset .4s var(--anim-ease-out) .1s;
}
.check-draw.done { stroke-dashoffset: 0; }

/* Error Shake */
.shake-error { animation: shake-x .4s ease; }
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* Animated Status Indicator */
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: status-pulse 2s ease-in-out infinite;
}
.status-dot.wait { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
.status-dot.error { background: #ef4444; animation-name: status-pulse-red; }
@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
@keyframes status-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }

/* Smooth Loading Transition */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: linear-gradient(135deg, #FFEAF5, #F7EBFF);
  transform: translateY(0);
  transition: transform .5s var(--anim-ease-smooth), opacity .5s ease;
}
.page-transition-overlay.done { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Input Focus Animation */
.input-anim-wrap { position: relative; }
.input-anim-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; right: 50%;
  height: 2px; background: linear-gradient(90deg, #EC78AC, #C44E8A);
  transition: left .25s ease, right .25s ease;
}
.input-anim-wrap:focus-within::after { left: 0; right: 0; }

/* Button Press */
.btn-press {
  transition: transform .15s var(--anim-ease-out), box-shadow .15s ease;
}
.btn-press:active { transform: scale(.95); box-shadow: 0 2px 6px -3px rgba(236,120,172,.3); }

/* Layered Depth */
.depth-layer {
  transition: transform .3s var(--anim-ease-spring);
  will-change: transform;
}
.depth-layer:nth-child(1) { transform: translateZ(20px); }
.depth-layer:nth-child(2) { transform: translateZ(10px); }

/* Abstract Geometry animation */
.geo-rotate {
  animation: geo-rotate 20s linear infinite;
}
.geo-rotate:nth-child(even) { animation-direction: reverse; }
@keyframes geo-rotate { to { transform: rotate(360deg); } }

/* Mouse Parallax — JS adds translateX/Y via inline style */
.parallax-layer { will-change: transform; transition: transform .1s linear; }

/* Animated OTP status ticker */
.otp-status-anim {
  animation: otp-blink 1.2s step-start infinite;
}
@keyframes otp-blink { 50% { opacity: .4; } }

/* Particle network canvas */
#network-canvas {
  position: fixed; inset: 0; z-index: -1; opacity: .25; pointer-events: none;
}

/* Scroll-triggered morphing shape */
.morph-shape {
  border-radius: 20px;
  transition: border-radius 1s var(--anim-ease-spring);
}
.morph-shape.round { border-radius: 50%; }

/* Dynamic Color Transition */
.color-shift {
  animation: color-shift 8s ease-in-out infinite;
}
@keyframes color-shift {
  0%, 100% { filter: hue-rotate(0); }
  50% { filter: hue-rotate(30deg); }
}

/* Floating SVG Shapes */
.float-shape {
  animation: float-shape 7s ease-in-out infinite;
}
.float-shape:nth-child(2) { animation-delay: -3s; }
.float-shape:nth-child(3) { animation-delay: -5s; }
@keyframes float-shape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-14px) rotate(6deg); }
  66% { transform: translateY(-7px) rotate(-4deg); }
}

/* Animated Noise Texture (subtle) */
.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: '';
  position: absolute; inset: 0;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none; border-radius: inherit;
  animation: noise-drift 8s steps(2) infinite;
}
@keyframes noise-drift { from { background-position: 0 0; } to { background-position: 50px 50px; } }

/* Parallax Scrolling via data attribute — JS updates --py */
[data-parallax] { transform: translateY(var(--py, 0px)); will-change: transform; }

/* Pin Section — JS adds .pinned class */
.pin-section { transition: opacity .3s ease; }
.pin-section.pinned { opacity: .85; }

/* Horizontal Scroll */
.h-scroll-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  gap: 16px; padding: 8px;
}
.h-scroll-track::-webkit-scrollbar { display: none; }
.h-scroll-track > * { scroll-snap-align: start; flex: 0 0 auto; }

/* 3D Product Showcase orbit */
.product-orbit {
  animation: orbit 12s linear infinite;
  transform-origin: 150px 150px;
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* 3D Scene Transition (page level) */
.scene-out {
  animation: scene-exit .5s ease forwards;
}
.scene-in {
  animation: scene-enter .5s ease forwards;
}
@keyframes scene-exit { to { opacity: 0; transform: scale(.95) translateY(-20px); } }
@keyframes scene-enter { from { opacity: 0; transform: scale(1.05) translateY(20px); } to { opacity: 1; transform: none; } }

/* SVG Liquid Animation */
.liquid-svg path {
  animation: liquid-morph 6s ease-in-out infinite;
}
@keyframes liquid-morph {
  0%, 100% { d: path("M 0 50 Q 25 30 50 50 Q 75 70 100 50 L 100 100 L 0 100 Z"); }
  50% { d: path("M 0 50 Q 25 70 50 50 Q 75 30 100 50 L 100 100 L 0 100 Z"); }
}

/* 3D Interactive Gallery */
.gallery-3d-item {
  transition: transform .4s var(--anim-ease-spring), z-index 0s .4s;
  transform-style: preserve-3d;
}
.gallery-3d-item:hover {
  transform: scale(1.12) rotateY(8deg);
  z-index: 10;
  transition: transform .3s var(--anim-ease-spring), z-index 0s;
}

/* 3D Layered Depth parallax */
.layer-deep  { transform: translateZ(-20px) scale(1.1); }
.layer-mid   { transform: translateZ(0); }
.layer-front { transform: translateZ(20px) scale(.95); }

/* 3D Text Extrusion */
.text-extrude {
  text-shadow:
    1px 1px 0 rgba(236,120,172,.5),
    2px 2px 0 rgba(196,78,138,.4),
    3px 3px 0 rgba(196,78,138,.3),
    4px 4px 0 rgba(196,78,138,.2);
  transition: text-shadow .3s ease;
}
.text-extrude:hover {
  text-shadow:
    1px 1px 0 rgba(236,120,172,.7),
    3px 3px 0 rgba(196,78,138,.5),
    6px 6px 0 rgba(196,78,138,.35),
    9px 9px 0 rgba(196,78,138,.2);
}

/* 3D Perspective Entrance */
.perspective-in {
  opacity: 0; transform: perspective(800px) rotateX(20deg) translateY(30px);
  transition: opacity .7s ease, transform .7s var(--anim-ease-spring);
}
.perspective-in.is-visible { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }

/* Kinetic Typography */
.kinetic-word {
  display: inline-block;
  animation: kinetic-bounce .6s var(--anim-ease-spring) infinite alternate;
  animation-delay: calc(var(--i, 0) * .1s);
}
@keyframes kinetic-bounce { to { transform: translateY(-4px); } }

/* Rotating Text (ticker) */
.rotating-text-wrap { overflow: hidden; height: 1.2em; }
.rotating-text-item {
  animation: rotate-text-up .5s ease forwards;
}
@keyframes rotate-text-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rotating-text-item.out {
  animation: rotate-text-down .5s ease forwards;
}
@keyframes rotate-text-down { to { transform: translateY(-100%); opacity: 0; } }

/* Letter-by-Letter Reveal */
.letter-reveal .char {
  opacity: 0; transform: translateY(10px);
  animation: letter-in .3s var(--anim-ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * .03s);
}
@keyframes letter-in { to { opacity: 1; transform: none; } }

/* Text Mask Reveal */
.text-mask-reveal {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: 100%;
  mask-position: 100%;
  transition: -webkit-mask-position .7s ease, mask-position .7s ease;
}
.text-mask-reveal.is-visible {
  -webkit-mask-position: 0;
  mask-position: 0;
}

/* Animated Price Counter (+ shimmer) */
.price-animate {
  animation: price-pop .4s var(--anim-ease-spring);
}
@keyframes price-pop { 0% { transform: scale(1.2); color: #EC78AC; } 100% { transform: scale(1); } }

/* Vertical Carousel */
.v-carousel-track {
  display: flex; flex-direction: column;
  animation: v-scroll 15s linear infinite;
}
@keyframes v-scroll { to { transform: translateY(-50%); } }

/* Multi-Layer Slider parallax layers */
.ml-slider-bg   { transition: transform .5s ease; transform: translateX(calc(var(--offset, 0) * .3px)); }
.ml-slider-mid  { transition: transform .5s ease; transform: translateX(calc(var(--offset, 0) * .6px)); }
.ml-slider-fg   { transition: transform .5s ease; transform: translateX(calc(var(--offset, 0) * 1px)); }

/* ============================================================
   K. UTILITY
   ============================================================ */
.will-change-transform { will-change: transform; }
.gpu-accel { transform: translateZ(0); backface-visibility: hidden; }
.lazy-anim { opacity: 0; }
.lazy-anim.loaded { opacity: 1; transition: opacity .4s ease; }

/* Smooth Loading overlay page */
#pftloading {
  position: fixed; inset: 0; z-index: 99997; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEAF5, #F7EBFF);
  transition: opacity .5s ease;
}
#pftloading.done { opacity: 0; }
.pftloading-spin {
  width: 40px; height: 40px;
  border: 3px solid rgba(236,120,172,.2);
  border-top-color: #EC78AC;
  border-radius: 50%;
  animation: spin360 .8s linear infinite;
}
@keyframes spin360 { to { transform: rotate(360deg); } }

/* ============================================================
   L. SLIDER CSS ONLY (homepage hero banner)
   ============================================================ */
.hero-slider {
  position: relative; overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s ease;
}
.hero-slide.active { opacity: 1; position: relative; }

/* Creative transition */
.creative-slide-in  { animation: creative-in .6s var(--anim-ease-spring) forwards; }
.creative-slide-out { animation: creative-out .6s var(--anim-ease-smooth) forwards; }
@keyframes creative-in  { from { transform: translateX(60px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes creative-out { to { transform: translateX(-60px) scale(.96); opacity: 0; } }

/* Parallax Slider layer */
.parallax-slide-bg { transform: translateX(calc(var(--px, 0) * .4px)); transition: transform .1s linear; }