/* =============================================
   SPARSH — Cloud & Feather Decor System
   Reusable decorative imagery used on every page
   except the homepage (which has its own master
   GSAP narrative). All decor is purely cosmetic:
   aria-hidden, pointer-events: none, low opacity.
   ============================================= */

/* ---------- Decor wrapper ---------- */
.page-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* The decor sits below content (z-index 2+) and below
   the navbar (z-index 1000000), but above the
   .products-bg-ambient stars layer (z-index: 0). */

/* ---------- CLOUD BLOBS ---------- */
.deco-cloud {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    animation: cloudFloatA 14s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12)); /* Subtle depth shadow */
}

/* Right-anchored clouds drift on a slower, opposite cadence so the
   pair never feels mechanical or in lock-step. */
.deco-cloud--top-right,
.deco-cloud--mid-right,
.deco-cloud--bottom-right {
    animation: cloudFloatB 16s ease-in-out infinite;
    animation-delay: -4s;
}

.deco-cloud--mid-left,
.deco-cloud--bottom-left {
    animation-duration: 18s;
    animation-delay: -2s;
}

/* Per-instance static rotation, used as a base so the keyframe sweep
   stays around each cloud's starting tilt. */
.deco-cloud--top-left { --cloud-rot: -6deg; }
.deco-cloud--top-right { --cloud-rot: 8deg; }
.deco-cloud--mid-right { --cloud-rot: -4deg; }
.deco-cloud--bottom-left { --cloud-rot: -8deg; }
.deco-cloud--bottom-right { --cloud-rot: 6deg; }

/* Generous translate range so the float reads as actual drift, not
   a static cloud. Three-keyframe path produces a soft figure-8 feel
   instead of a straight back-and-forth. */
@keyframes cloudFloatA {
    0% {
        transform: translate(0, 0) rotate(var(--cloud-rot, 0deg));
    }
    33% {
        transform: translate(22px, -16px) rotate(calc(var(--cloud-rot, 0deg) + 1.4deg));
    }
    66% {
        transform: translate(36px, 6px) rotate(calc(var(--cloud-rot, 0deg) + 0.6deg));
    }
    100% {
        transform: translate(0, 0) rotate(var(--cloud-rot, 0deg));
    }
}

@keyframes cloudFloatB {
    0% {
        transform: translate(0, 0) rotate(var(--cloud-rot, 0deg));
    }
    33% {
        transform: translate(-26px, -12px) rotate(calc(var(--cloud-rot, 0deg) - 1.2deg));
    }
    66% {
        transform: translate(-38px, 8px) rotate(calc(var(--cloud-rot, 0deg) - 0.4deg));
    }
    100% {
        transform: translate(0, 0) rotate(var(--cloud-rot, 0deg));
    }
}

/* The .hero-cloud class is unused now (every page is on .deco-cloud),
   but keep the rules so legacy markup still floats if any exists. */
.hero-cloud {
    will-change: transform;
    animation: cloudFloatA 14s ease-in-out infinite;
}

.hero-cloud.cloud-right {
    animation: cloudFloatB 16s ease-in-out infinite;
    animation-delay: -4s;
}

@media (prefers-reduced-motion: reduce) {
    .deco-cloud,
    .hero-cloud {
        animation: none !important;
    }
}

.deco-cloud--top-left {
    top: 60px;
    left: -120px;
    width: 360px;
    opacity: 0.55; /* Increased from 0.32 */
    transform: rotate(-6deg);
}

.deco-cloud--top-right {
    top: 90px;
    right: -150px;
    width: 400px;
    opacity: 0.5; /* Increased from 0.28 */
    transform: rotate(8deg);
}

.deco-cloud--mid-left {
    top: 45%;
    left: -180px;
    width: 320px;
    opacity: 0.45; /* Increased from 0.20 */
}

.deco-cloud--mid-right {
    top: 38%;
    right: -160px;
    width: 340px;
    opacity: 0.48; /* Increased from 0.22 */
    transform: rotate(-4deg);
}

.deco-cloud--bottom-left {
    bottom: 40px;
    left: -140px;
    width: 380px;
    opacity: 0.52; /* Increased from 0.24 */
    transform: rotate(-8deg);
}

.deco-cloud--bottom-right {
    bottom: 60px;
    right: -120px;
    width: 360px;
    opacity: 0.54; /* Increased from 0.26 */
    transform: rotate(6deg);
}

/* Smaller variant for content-dense pages (blog posts, legal) */
.deco-cloud--soft {
    opacity: 0.18;
    width: 260px;
}

/* ---------- FEATHERS ---------- */
/* The .feather class is also used by the homepage hero;
   the existing initFeatherFloat() in script.js will
   automatically animate any element with class .feather. */
.deco-feather {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.deco-feather--a {
    top: 22%;
    right: 8%;
    width: 56px;
    opacity: 0.55;
    transform: rotate(-22deg);
}

.deco-feather--b {
    top: 60%;
    left: 7%;
    width: 48px;
    opacity: 0.5;
    transform: rotate(15deg);
}

.deco-feather--c {
    top: 38%;
    right: 12%;
    width: 64px;
    opacity: 0.45;
    transform: rotate(8deg);
}

.deco-feather--d {
    bottom: 18%;
    right: 10%;
    width: 52px;
    opacity: 0.55;
    transform: rotate(-18deg);
}

.deco-feather--e {
    top: 14%;
    left: 9%;
    width: 44px;
    opacity: 0.5;
    transform: rotate(-30deg);
}

/* Tiny accent feather used on legal pages (very subtle) */
.deco-feather--accent {
    top: 18%;
    right: 10%;
    width: 38px;
    opacity: 0.4;
    transform: rotate(-22deg);
}

/* ---------- Mobile: trim clutter ---------- */
@media (max-width: 768px) {
    /* Hide only the most redundant decor on small screens */
    .deco-cloud--mid-right,
    .deco-cloud--bottom-right,
    .deco-feather--e {
        display: none;
    }

    /* Smaller, slightly more transparent on mobile */
    .deco-cloud {
        opacity: 0.18;
        width: 220px;
    }

    .deco-feather {
        width: 36px;
    }

    .deco-feather--accent {
        width: 30px;
        opacity: 0.35;
    }
}

/* ---------- Reduced motion: keep static ---------- */
@media (prefers-reduced-motion: reduce) {
    .deco-cloud,
    .deco-feather,
    .feather {
        animation: none !important;
        transform: rotate(0) !important;
    }
}