/* ============================================================
   Channeling Akvsha — shared site styles
   Linked by index.html, product.html, order.html, reviews.html
   ============================================================ */

html { scroll-behavior: smooth; }
body {
    background-color: #0a0b10;
    color: #e2e8f0;
    overflow-x: hidden;
}

/* --- Cosmic decor --- */
.nebula-purple { background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.15) 0%, rgba(0,0,0,0) 70%); filter: blur(80px); }
.nebula-blue   { background: radial-gradient(circle at 20% 30%, rgba(49,46,129,0.2) 0%, rgba(0,0,0,0) 60%); filter: blur(100px); }
.star-field       { background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.10) 1px, transparent 0); background-size: 40px 40px; }
.star-field-dense { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 20px 20px; }
.glow-violet { text-shadow: 0 0 15px rgba(192,132,252,0.5); }
.orbit { border: 1px solid rgba(139,92,246,0.2); border-radius: 50%; position: absolute; transform: translate(-50%,-50%); }
.signal-line { width: 1px; background: linear-gradient(to bottom, transparent, rgba(192,132,252,0.8), transparent); height: 100%; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; }
.glass { background: rgba(15,17,26,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card-radial { background: radial-gradient(circle at 50% 20%, rgba(168,85,247,0.12) 0%, rgba(0,0,0,0) 65%); }

/* Logo mark — real logo art (violet linework) lifted off the near-black bg */
.site-logo { filter: drop-shadow(0 0 7px rgba(139,92,246,0.5)); }

/* Rotating-human animation: black-bg GIF, screened so only the glow shows on dark */
.soul-anim {
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 34px rgba(139,92,246,0.35));
}
@media (prefers-reduced-motion: reduce) { .soul-anim { opacity: 0.9; } }

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

/* Give anchored sections room under the fixed header */
section[id], [data-anchor] { scroll-margin-top: 6rem; }

/* --- Scroll reveal --- */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .55s ease-out, transform .55s ease-out;
        transition-delay: var(--d, 0ms);
    }
    [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* --- Mobile menu --- */
#mobileMenu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobileMenu.open { max-height: 26rem; }

/* --- FAQ accordion --- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq.open .faq-answer { max-height: 40rem; }
.faq .chevron { transition: transform .3s ease; }
.faq.open .chevron { transform: rotate(180deg); }

/* --- Forms (order form + newsletter) --- */
.field-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.375rem;
    color: #f1f5f9;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    transition: border-color .2s, background .2s;
}
.field-input::placeholder { color: rgba(255,255,255,0.30); }
.field-input:focus {
    outline: none;
    border-color: rgba(192,132,252,0.6);
    background: rgba(255,255,255,0.05);
}
textarea.field-input { resize: vertical; min-height: 6rem; }
.field-label { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 0.5rem; }
.field-hint  { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 0.35rem; }

/* Payment option cards */
.pay-option { cursor: pointer; border: 1px solid rgba(255,255,255,0.12); border-radius: 0.5rem; padding: 1.25rem 1.5rem; transition: border-color .2s, background .2s; display: block; }
.pay-option:hover { border-color: rgba(192,132,252,0.4); }
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option.selected { border-color: #c084fc; background: rgba(139,92,246,0.08); box-shadow: 0 0 24px rgba(139,92,246,0.12); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #mobileMenu, .faq-answer, .faq .chevron, .animate-float,
    .field-input, .pay-option { transition: none; animation: none; }
}