/* ============================================================
   SANNAWAVE — SCROLL ANIMATION CLASSES
   Controlled by GSAP ScrollTrigger via assets/js/animations.js
   ============================================================ */

/* ─── Base: tất cả elements có [data-anim] bắt đầu hidden ─── */
[data-anim] {
    visibility: hidden; /* GSAP sẽ set visible khi init */
}

/* ─── Animation variants (áp dụng qua data-anim="...") ──────
   Các class này là CSS initial state.
   GSAP sẽ tween từ các trạng thái này về default.
─────────────────────────────────────────────────────────── */

/* fade-up (default) */
[data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

/* fade-down */
[data-anim="fade-down"] {
    opacity: 0;
    transform: translateY(-30px);
}

/* fade-left */
[data-anim="fade-left"] {
    opacity: 0;
    transform: translateX(50px);
}

/* fade-right */
[data-anim="fade-right"] {
    opacity: 0;
    transform: translateX(-50px);
}

/* fade (chỉ opacity) */
[data-anim="fade"] {
    opacity: 0;
}

/* scale-up */
[data-anim="scale-up"] {
    opacity: 0;
    transform: scale(0.88);
}

/* scale-down */
[data-anim="scale-down"] {
    opacity: 0;
    transform: scale(1.12);
}

/* zoom-in */
[data-anim="zoom-in"] {
    opacity: 0;
    transform: scale(0.75);
}

/* flip-up (perspective) */
[data-anim="flip-up"] {
    opacity: 0;
    transform: perspective(600px) rotateX(20deg) translateY(30px);
}

/* text-reveal (clip-path) */
[data-anim="text-reveal"] {
    clip-path: inset(0 100% 0 0);
}

/* stagger wrapper — children nhận delay tự động */
[data-anim-stagger] > * {
    opacity: 0;
    transform: translateY(32px);
}

/* ─── Parallax ───────────────────────────────────────────── */
[data-parallax] {
    will-change: transform;
}

/* ─── Counter số ─────────────────────────────────────────── */
[data-counter] {
    display: inline-block;
}

/* ─── Line draw (SVG) ────────────────────────────────────── */
[data-line-draw] path,
[data-line-draw] line,
[data-line-draw] polyline,
[data-line-draw] circle {
    stroke-dashoffset: 1;
    stroke-dasharray: 1;
}

/* ─── Section separators animated ───────────────────────── */
.sw-section-line {
    height: 2px;
    background: linear-gradient(90deg, var(--sw-teal), var(--sw-indigo));
    transform-origin: left;
    transform: scaleX(0);
    border-radius: var(--radius-full);
}
.sw-section-line--center {
    transform-origin: center;
}

/* ─── Card hover lift (CSS supplement to GSAP) ───────────── */
.sw-card-hover {
    transition: transform var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease-out);
    will-change: transform;
}
.sw-card-hover:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* ─── Magnetic button effect CSS ────────────────────────── */
.btn-magnetic {
    position: relative;
    transition: transform var(--dur-fast) var(--ease-out);
    will-change: transform;
}

/* ─── Text split animation chars ────────────────────────── */
.char {
    display: inline-block;
    transform-origin: bottom center;
}
.word {
    display: inline-block;
    overflow: hidden;
}
.line {
    display: block;
    overflow: hidden;
}

/* ─── Number ticker ──────────────────────────────────────── */
.sw-ticker {
    display: inline-flex;
    overflow: hidden;
    height: 1.2em;
    vertical-align: bottom;
}
.sw-ticker__inner {
    display: flex;
    flex-direction: column;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

/* ─── Noise grain texture overlay ───────────────────────── */
.sw-noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ─── Animated gradient mesh background ─────────────────── */
.sw-gradient-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.sw-gradient-mesh__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat 8s ease-in-out infinite;
}
.sw-gradient-mesh__orb:nth-child(1) {
    width: 40vw; height: 40vw;
    background: rgba(29,158,117,.12);
    top: -10%; right: -5%;
    animation-duration: 9s;
}
.sw-gradient-mesh__orb:nth-child(2) {
    width: 30vw; height: 30vw;
    background: rgba(83,74,183,.1);
    bottom: -5%; left: 5%;
    animation-duration: 11s;
    animation-delay: -3s;
}
.sw-gradient-mesh__orb:nth-child(3) {
    width: 20vw; height: 20vw;
    background: rgba(44,181,160,.08);
    top: 40%; left: 40%;
    animation-duration: 7s;
    animation-delay: -5s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(2%, 3%) scale(1.05); }
    66%       { transform: translate(-2%, -2%) scale(.97); }
}

/* ─── Horizontal scroll ticker tape ─────────────────────── */
.sw-ticker-tape {
    overflow: hidden;
    white-space: nowrap;
    padding: var(--space-4) 0;
}
.sw-ticker-tape__track {
    display: inline-flex;
    gap: var(--space-12);
    animation: tickerScroll 20s linear infinite;
}
.sw-ticker-tape__track:hover { animation-play-state: paused; }
.sw-ticker-tape__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--sw-text-muted);
    letter-spacing: .04em;
}
.sw-ticker-tape__sep {
    color: var(--sw-teal);
    opacity: .5;
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}