/* ============================================================================
 * Moxa Panel — Motion Engine CSS
 * Çalışma prensibi:
 *   1) data-motion="reveal:fade-up" gibi attribute'ler ile JS tarafından
 *      .is-in-view sınıfı eklenir. Bu dosya bu sınıfa göre animasyonları yönetir.
 *   2) data-motion="loop:..." sürekli çalışan animasyonlar; JS gerekmez.
 *   3) Sayfa kademeli kaskat: <section data-motion="reveal:stagger"> içindeki
 *      doğrudan çocuklar 60ms aralıklı görünür.
 * ========================================================================== */

/* ─── Reveal primitives ──────────────────────────────────────────────────── */
[data-motion^="reveal:"] {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition:
        opacity .9s cubic-bezier(.21,.95,.27,1),
        transform .9s cubic-bezier(.21,.95,.27,1),
        filter .9s cubic-bezier(.21,.95,.27,1);
    will-change: opacity, transform, filter;
}
[data-motion="reveal:fade-up"]     { transform: translate3d(0, 32px, 0); }
[data-motion="reveal:fade-down"]   { transform: translate3d(0, -32px, 0); }
[data-motion="reveal:fade-left"]   { transform: translate3d(-48px, 0, 0); }
[data-motion="reveal:fade-right"]  { transform: translate3d(48px, 0, 0); }
[data-motion="reveal:scale"]       { transform: scale(.88); }
[data-motion="reveal:blur"]        { filter: blur(16px); }
[data-motion="reveal:rotate"]      { transform: rotate(-6deg) scale(.94); }
[data-motion="reveal:flip"]        { transform: perspective(1200px) rotateX(45deg); transform-origin: center bottom; }
[data-motion="reveal:tilt"]        { transform: perspective(1000px) rotateY(15deg) translateX(40px); transform-origin: left center; }

[data-motion^="reveal:"].is-in-view {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Stagger — children cascade */
[data-motion="reveal:stagger"] > * {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .8s var(--mvar-easing, cubic-bezier(.21,.95,.27,1)), transform .8s var(--mvar-easing, cubic-bezier(.21,.95,.27,1));
    will-change: opacity, transform;
}
[data-motion="reveal:stagger"].is-in-view > * {
    opacity: 1;
    transform: none;
}
[data-motion="reveal:stagger"].is-in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(2) { transition-delay: 80ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(3) { transition-delay: 160ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(4) { transition-delay: 240ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(5) { transition-delay: 320ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(6) { transition-delay: 400ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(7) { transition-delay: 480ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(8) { transition-delay: 560ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(9) { transition-delay: 640ms; }
[data-motion="reveal:stagger"].is-in-view > *:nth-child(n+10) { transition-delay: 720ms; }

/* ─── Loop primitives (sürekli çalışan) ──────────────────────────────────── */
[data-motion="loop:float"]    { animation: pbm-float 6s ease-in-out infinite; }
[data-motion="loop:pulse"]    { animation: pbm-pulse 3.4s ease-in-out infinite; }
[data-motion="loop:glow"]     { animation: pbm-glow 4s ease-in-out infinite; }
[data-motion="loop:tilt-3d"]  { animation: pbm-tilt3d 9s ease-in-out infinite; transform-style: preserve-3d; }
[data-motion="loop:wobble"]   { animation: pbm-wobble 5s ease-in-out infinite; }
[data-motion="loop:shine"]    {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-motion="loop:shine"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: pbm-shine 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* ─── Magnetic ───────────────────────────────────────────────────────────── */
[data-motion="magnetic"] {
    transition: transform .35s var(--mvar-easing, cubic-bezier(.21,.95,.27,1));
    will-change: transform;
}

/* ─── Tilt on hover ──────────────────────────────────────────────────────── */
[data-motion="tilt-hover"] {
    transform-style: preserve-3d;
    transition: transform .4s var(--mvar-easing, cubic-bezier(.21,.95,.27,1));
    will-change: transform;
}

/* ─── Parallax ───────────────────────────────────────────────────────────── */
[data-motion="parallax"] {
    will-change: transform;
    transition: transform .12s linear;
}

/* ─── Count-up ───────────────────────────────────────────────────────────── */
[data-motion="count-up"] { font-variant-numeric: tabular-nums; }

/* ─── Typewriter ─────────────────────────────────────────────────────────── */
[data-motion="typewriter"] {
    display: inline-block;
    border-right: 2px solid currentColor;
    animation: pbm-caret 0.9s steps(1) infinite;
    white-space: pre;
}

/* ─── Ripple ─────────────────────────────────────────────────────────────── */
[data-motion="ripple"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.pbm-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
    transform: scale(0);
    pointer-events: none;
    animation: pbm-ripple .7s ease-out forwards;
    z-index: 99;
    mix-blend-mode: difference;
}

/* ─── Page-level smooth scroll cascade for first viewport ───────────────── */
.pbm-page-enter > .layout-row,
.pbm-page-enter > .module,
.lp-page.pbm-page-enter > .lp-chrome-main > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: pbm-enter .9s cubic-bezier(.21,.95,.27,1) forwards;
}
.pbm-page-enter > .layout-row:nth-child(1),
.lp-page.pbm-page-enter > .lp-chrome-main > *:nth-child(1) { animation-delay: 80ms; }
.pbm-page-enter > .layout-row:nth-child(2),
.lp-page.pbm-page-enter > .lp-chrome-main > *:nth-child(2) { animation-delay: 220ms; }
.pbm-page-enter > .layout-row:nth-child(3),
.lp-page.pbm-page-enter > .lp-chrome-main > *:nth-child(3) { animation-delay: 360ms; }

@keyframes pbm-enter {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ─── Mouse-trail glow on body (opsiyonel) ───────────────────────────────── */
body.pbm-trail-on {
    background-image: radial-gradient(180px 180px at var(--pbm-mx,-100px) var(--pbm-my,-100px),
        rgba(255,184,0,.06), transparent 70%);
    background-attachment: fixed;
}

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes pbm-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -8px, 0); }
}
@keyframes pbm-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@keyframes pbm-glow {
    0%, 100% { filter: drop-shadow(0 0 0 currentColor) brightness(1); }
    50%      { filter: drop-shadow(0 0 14px currentColor) brightness(1.08); }
}
@keyframes pbm-tilt3d {
    0%, 100% { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); }
    50%      { transform: perspective(1000px) rotateY(3deg) rotateX(-2deg); }
}
@keyframes pbm-wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(1.2deg); }
    75%      { transform: rotate(-1.2deg); }
}
@keyframes pbm-shine {
    0%   { transform: translateX(-120%); }
    65%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
@keyframes pbm-caret {
    50% { border-right-color: transparent; }
}
@keyframes pbm-ripple {
    to { transform: scale(4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    [data-motion^="reveal:"] { opacity: 1 !important; transform: none !important; filter: none !important; }
    [data-motion^="loop:"]   { animation: none !important; }
    [data-motion="parallax"] { transform: none !important; }
    .pbm-page-enter > .layout-row,
    .pbm-page-enter > .module { opacity: 1; animation: none !important; transform: none !important; }
}