/* ============================================================
   Pixva — shared styles (slim scrollbar, scroll animations)
   ============================================================ */

/* ---------- Site layout (wider content, tighter gutters) ---------- */
.site-wrap {
    width: 100%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
@media (min-width: 640px) {
    .site-wrap { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 1024px) {
    .site-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---------- Slim scrollbar (site-wide) ---------- */
html {
    scrollbar-width: thin;
    scrollbar-color: #C3B2FD transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #C3B2FD;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #8460F5; }

/* Slim scrollbar for horizontal scrollers (template rows, etc.) */
.slim-scroll {
    scrollbar-width: thin;
    scrollbar-color: #C3B2FD #F1F0FB;
    -webkit-overflow-scrolling: touch;
}
.slim-scroll::-webkit-scrollbar { height: 6px; }
.slim-scroll::-webkit-scrollbar-track {
    background: #F1F0FB;
    border-radius: 999px;
}
.slim-scroll::-webkit-scrollbar-thumb {
    background: #C3B2FD;
    border-radius: 999px;
}
.slim-scroll::-webkit-scrollbar-thumb:hover { background: #8460F5; }

/* ---------- Animate on scroll (AOS-like: 1s ease, once) ---------- */
[data-animate] {
    opacity: 0;
    transform: translate3d(0, 70px, 0);
    transition:
        opacity 1s ease,
        transform 1s ease;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
[data-animate="left"]  { transform: translate3d(-80px, 0, 0); }
[data-animate="right"] { transform: translate3d(80px, 0, 0); }
[data-animate="scale"] { transform: scale(.94) translate3d(0, 50px, 0); }
[data-animate].in-view {
    opacity: 1;
    transform: none;
}

/* Word-by-word heading reveal (words slide in with stagger) */
.w-reveal .word {
    display: inline-block;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: var(--wd, 0ms);
    will-change: opacity, transform;
}
.w-reveal.in-view .word {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1; transform: none; transition: none; }
    .w-reveal .word { opacity: 1; transform: none; transition: none; }
}

/* ---------- Decorations ---------- */
.dot-grid {
    background-image: radial-gradient(rgba(108, 71, 255, .18) 1px, transparent 1px);
    background-size: 18px 18px;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.animate-float { animation: float 7s ease-in-out infinite; }

@keyframes float-sm {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.animate-float-sm { animation: float-sm 5s ease-in-out infinite; }

/* ---------- Nav ---------- */
#site-nav.scrolled {
    box-shadow: 0 1px 0 rgba(30, 29, 74, .06), 0 8px 24px rgba(30, 29, 74, .06);
}

/* ---------- Mobile menu: left slide-in drawer ---------- */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(86vw, 320px);
    max-height: none;
    transform: translateX(-100%);
    visibility: hidden;
    transition:
        transform .4s cubic-bezier(.22, .8, .3, 1),
        visibility 0s linear .4s;
    box-shadow: 24px 0 60px rgba(30, 29, 74, .18);
}
#mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform .4s cubic-bezier(.22, .8, .3, 1),
        visibility 0s;
}

#menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(30, 29, 74, .4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
}
#menu-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease, visibility 0s;
}

body.menu-open { overflow: hidden; }

/* Mobile nav sub-panels (indented from parent) */
.mobile-nav-panel {
    display: grid;
    grid-template-rows: 0fr;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid #E2E8F0;
    transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1);
}
.mobile-nav-panel > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
}
.mobile-nav-panel.open { grid-template-rows: 1fr; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron { transform: rotate(180deg); }

@media (min-width: 1024px) {
    #mobile-menu, #menu-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu, #menu-backdrop { transition: none; }
}

/* Desktop dropdown menus */
.nav-drop > .nav-panel {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-drop:hover > .nav-panel,
.nav-drop:focus-within > .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* ---------- FAQ accordion ---------- */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* ---------- Template carousel ---------- */
.carousel-track {
    overflow: hidden;
}
.carousel-inner {
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}
.carousel-btn {
    display: grid;
    height: 2.5rem;
    width: 2.5rem;
    place-items: center;
    border-radius: 9999px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(30, 29, 74, .04), 0 8px 24px rgba(30, 29, 74, .06);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.carousel-btn:hover:not(:disabled) {
    border-color: #C3B2FD;
    color: #6C47FF;
    background: #F5F3FF;
}
.carousel-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .carousel-inner { transition: none; }
}