/* ============================================================
* ANIMATION LIBRARY — Navapraba Wedding
* ============================================================
* Library animasi reusable untuk semua tema undangan.
*
* CARA PAKAI:
* 1. Include CSS ini di tema
* 2. Include scroll-animate.js sebelum
* 3. Tambah atribut di element yang mau di-animate:
* ...
* ...
* ...
*
* Animasi tersedia:
* - fade-up, fade-down, fade-left, fade-right
* - zoom-in, zoom-out
* - flip-up, flip-down
* - reveal-left, reveal-right (slide with mask)
*
* Optional attributes:
* - data-delay="N" → delay dalam ms (0-2000)
* - data-duration="N" → custom duration (default 800ms)
* - data-once="false" → re-animate saat scroll ulang (default true)
* ============================================================ */
/* ============ BASE: state awal sebelum animasi ============ */
[data-animate] {
opacity: 0;
transition-property: opacity, transform;
transition-duration: 800ms;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
will-change: opacity, transform;
}
/* ============ FADE UP (paling sering dipakai) ============ */
[data-animate="fade-up"] {
transform: translate3d(0, 40px, 0);
}
[data-animate="fade-up"].is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ============ FADE DOWN ============ */
[data-animate="fade-down"] {
transform: translate3d(0, -40px, 0);
}
[data-animate="fade-down"].is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ============ FADE LEFT (masuk dari kiri) ============ */
[data-animate="fade-left"] {
transform: translate3d(-50px, 0, 0);
}
[data-animate="fade-left"].is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ============ FADE RIGHT (masuk dari kanan) ============ */
[data-animate="fade-right"] {
transform: translate3d(50px, 0, 0);
}
[data-animate="fade-right"].is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ============ FADE (tanpa translate, untuk hero/banner) ============ */
[data-animate="fade"] {
transform: none;
}
[data-animate="fade"].is-visible {
opacity: 1;
}
/* ============ ZOOM IN (untuk foto pasangan, gallery item) ============ */
[data-animate="zoom-in"] {
transform: scale3d(0.85, 0.85, 1);
}
[data-animate="zoom-in"].is-visible {
opacity: 1;
transform: scale3d(1, 1, 1);
}
/* ============ ZOOM OUT (dari besar ke normal, dramatis) ============ */
[data-animate="zoom-out"] {
transform: scale3d(1.15, 1.15, 1);
}
[data-animate="zoom-out"].is-visible {
opacity: 1;
transform: scale3d(1, 1, 1);
}
/* ============ FLIP UP (3D rotate, untuk countdown box) ============ */
[data-animate="flip-up"] {
transform: perspective(800px) rotate3d(1, 0, 0, 60deg);
transform-origin: bottom;
}
[data-animate="flip-up"].is-visible {
opacity: 1;
transform: perspective(800px) rotate3d(1, 0, 0, 0);
}
/* ============ FLIP DOWN ============ */
[data-animate="flip-down"] {
transform: perspective(800px) rotate3d(1, 0, 0, -60deg);
transform-origin: top;
}
[data-animate="flip-down"].is-visible {
opacity: 1;
transform: perspective(800px) rotate3d(1, 0, 0, 0);
}
/* ============ REVEAL (slide with overlay mask, premium feel) ============ */
[data-animate="reveal-left"] {
clip-path: inset(0 100% 0 0);
opacity: 1;
}
[data-animate="reveal-left"].is-visible {
clip-path: inset(0 0 0 0);
}
[data-animate="reveal-right"] {
clip-path: inset(0 0 0 100%);
opacity: 1;
}
[data-animate="reveal-right"].is-visible {
clip-path: inset(0 0 0 0);
}
/* ============ STAGGER CHILDREN (auto delay anak2 element) ============ */
/* Pakai:
- 1
- 2
(otomatis delay 100ms)
- 3
(otomatis delay 200ms)
Handler ada di scroll-animate.js
*/
/* ============ INFINITE LOOP ANIMATIONS (ambient, tidak butuh JS) ============ */
/* Float — untuk ornament melayang */
@keyframes nv-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -10px, 0); }
}
.nv-float {
animation: nv-float 4s ease-in-out infinite;
}
/* Float slow — untuk decoration besar */
@keyframes nv-float-slow {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -8px, 0) rotate(2deg); }
}
.nv-float-slow {
animation: nv-float-slow 6s ease-in-out infinite;
}
/* Pulse — untuk tombol CTA */
@keyframes nv-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
.nv-pulse {
animation: nv-pulse 2.5s ease-in-out infinite;
}
/* Shimmer — untuk text dengan efek emas */
@keyframes nv-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.nv-shimmer {
background: linear-gradient(90deg, currentColor 0%, rgba(255,255,255,0.9) 50%, currentColor 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: nv-shimmer 3s linear infinite;
}
/* Rotate slow — untuk ornament SVG */
@keyframes nv-rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.nv-rotate-slow {
animation: nv-rotate-slow 30s linear infinite;
}
/* Heartbeat — untuk icon love kecil */
@keyframes nv-heartbeat {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.15); }
50% { transform: scale(1); }
75% { transform: scale(1.15); }
}
.nv-heartbeat {
animation: nv-heartbeat 1.5s ease-in-out infinite;
}
/* Fade-in slow (untuk decoration background) */
@keyframes nv-fade-in-slow {
from { opacity: 0; }
to { opacity: 1; }
}
.nv-fade-in-slow {
animation: nv-fade-in-slow 2s ease-out forwards;
}
/* ============ COVER SCREEN SPECIFIC ============ */
/* Saat cover screen tampil (sebelum klik "Buka Undangan"),
element di dalamnya muncul berurutan dengan animasi ini.
Class .cover-anim ditambah via JS saat cover loaded. */
.cover-anim {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity 1s ease, transform 1s ease;
}
.cover-anim.is-loaded {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.cover-anim:nth-child(1) { transition-delay: 200ms; }
.cover-anim:nth-child(2) { transition-delay: 400ms; }
.cover-anim:nth-child(3) { transition-delay: 600ms; }
.cover-anim:nth-child(4) { transition-delay: 800ms; }
.cover-anim:nth-child(5) { transition-delay: 1000ms; }
.cover-anim:nth-child(6) { transition-delay: 1200ms; }
/* ============ HOVER MICRO-INTERACTIONS ============ */
/* Lift on hover — untuk card, button */
.nv-hover-lift {
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nv-hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/* Scale on hover — untuk image */
.nv-hover-scale {
transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
overflow: hidden;
}
.nv-hover-scale:hover img,
.nv-hover-scale img:hover {
transform: scale(1.05);
}
/* Glow on hover — untuk tombol gold */
.nv-hover-glow {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.nv-hover-glow:hover {
box-shadow: 0 0 24px rgba(197, 162, 83, 0.5);
transform: translateY(-2px);
}
/* ============ RESPECT REDUCED MOTION (Accessibility) ============ */
@media (prefers-reduced-motion: reduce) {
[data-animate],
.nv-float, .nv-float-slow, .nv-pulse, .nv-shimmer,
.nv-rotate-slow, .nv-heartbeat, .nv-fade-in-slow,
.cover-anim, .nv-hover-lift, .nv-hover-scale, .nv-hover-glow {
animation: none !important;
transition: opacity 0.3s ease !important;
transform: none !important;
opacity: 1 !important;
}
[data-animate] { opacity: 1; }
[data-animate].is-visible { opacity: 1; }
}
/* ============ PRINT (kalau user print undangan) ============ */
@media print {
[data-animate],
.nv-float, .nv-float-slow, .nv-pulse, .nv-shimmer {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}