/**
 * 7-decorations.css
 * Christmas 3D clay-style asset decorations - REFINED VERSION
 *
 * Design Principles:
 * - Strategic placement (corners and edges only, no random floating)
 * - Consistent sizing (refined scale: 24px to 96px max)
 * - Visual hierarchy (subtle accents, not distractions)
 * - Mobile-first responsive design
 * - Performance optimized
 */

/* ============================================================================
   DECORATION BASE STYLES
   ============================================================================ */

.decoration {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0; /* Behind all content */
    opacity: 0.85; /* Slightly transparent for subtlety */
}

.decoration img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================================
   REFINED SIZE SYSTEM
   ============================================================================ */

.decoration-micro {
    width: 24px;
}

.decoration-tiny {
    width: 32px;
}

.decoration-small {
    width: 48px;
}

.decoration-medium {
    width: 64px;
}

.decoration-large {
    width: 96px; /* Only for hero/empty states */
}

/* Legacy size classes (deprecated but kept for compatibility) */
.decoration-xs { width: 32px; }
.decoration-sm { width: 48px; }
.decoration-md { width: 64px; }
.decoration-lg { width: 96px; }
.decoration-xl { width: 96px; } /* Capped at 96px */

/* ============================================================================
   STRATEGIC POSITIONING SYSTEM
   ============================================================================ */

/* Corner Anchors - Subtle, non-intrusive */
.corner-top-left {
    position: fixed;
    top: 80px; /* Below navigation */
    left: 20px;
    z-index: 0;
}

.corner-top-right {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 0;
}

.corner-bottom-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 0;
}

.corner-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 0;
}

/* Edge Peeks - Slightly visible from screen edges (desktop only) */
.edge-peek-left {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-16px); /* Mostly hidden */
    z-index: 0;
}

.edge-peek-right {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(16px); /* Mostly hidden */
    z-index: 0;
}

/* ============================================================================
   PAGE-SPECIFIC DECORATIONS
   ============================================================================ */

/* Auth Pages (Login/Register) - Fixed positions */
.auth-layout .decoration-tree-left {
    position: fixed;
    bottom: 0;
    left: 20px;
    width: 96px; /* Refined size */
    z-index: 0;
}

.auth-layout .decoration-presents-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 64px; /* Refined size */
    z-index: 0;
}

/* Remove floating decorations - too chaotic */
.auth-layout .decoration-floating {
    display: none; /* REMOVED: causes random placement */
}

/* Dashboard card decorations - small corner accents only */
.event-card {
    position: relative;
    overflow: visible;
}

.event-card .card-decoration {
    position: absolute;
    width: 32px; /* Refined: smaller, more subtle */
    pointer-events: none;
    opacity: 0.7;
    z-index: 2;
    display: none;
}

.event-card .card-decoration-tl {
    top: -12px;
    left: -12px;
}

.event-card .card-decoration-tr {
    top: -12px;
    right: -12px;
}

/* Empty State Hero - Centered composition */
.empty-state-hero {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 24px;
    max-width: 240px; /* Constrained */
}

/* Wishlist header scene - refined */
.wishlist-decoration-scene {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin: 20px auto;
    padding: 16px;
    max-width: 280px; /* Constrained */
}

/* Manage event page header decorations - REFINED */
.page-header {
    position: relative;
}

.header-decoration-left {
    position: absolute;
    left: -80px; /* Reduced from -120px */
    top: 50%;
    transform: translateY(-50%);
    width: 64px; /* Reduced from 100px */
    opacity: 0.7; /* More subtle */
}

.header-decoration-right {
    position: absolute;
    right: -80px; /* Reduced from -120px */
    top: 50%;
    transform: translateY(-50%);
    width: 64px; /* Reduced from 100px */
    opacity: 0.7; /* More subtle */
}

/* For pages with simple decorations */
.decoration-top-left {
    top: 80px;
    left: 20px;
}

.decoration-top-right {
    top: 80px;
    right: 20px;
}

/* ============================================================================
   NO AMBIENT LOOPS

   There were five here — gentle-float, subtle-bob, soft-swing, slow-rotate and
   delicate-twinkle — running at 20 to 80 seconds, forever, on the corner
   artwork of six pages. They are gone, and the classes with them.

   "Motion is feedback, not ambience": something moves because you did
   something, or because the system is telling you a thing changed. Artwork
   that drifts on a loop says nothing and never stops saying it.

   The snow stays. It is the one piece of ambience the design keeps, and it has
   its own prefers-reduced-motion kill rule in 8-polish.css.
   ============================================================================ */

/* ============================================================================
   RESPONSIVE BEHAVIOR
   ============================================================================ */

/* Large desktop - slightly larger */
@media (min-width: 1400px) {
    .header-decoration-left {
        left: -100px;
        width: 72px;
    }

    .header-decoration-right {
        right: -100px;
        width: 72px;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .header-decoration-left,
    .header-decoration-right {
        display: none; /* Hide on smaller desktops to prevent overlap */
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .decoration-large {
        width: 80px;
    }

    .decoration-medium,
    .decoration-md {
        width: 56px;
    }

    .decoration-small,
    .decoration-sm {
        width: 40px;
    }

    .corner-top-left,
    .corner-top-right {
        top: 70px;
    }

    .auth-layout .decoration-tree-left {
        width: 80px;
    }

    .auth-layout .decoration-presents-right {
        width: 56px;
    }
}

/* Small tablet / Large mobile */
@media (max-width: 768px) {
    .decoration-large,
    .decoration-lg {
        width: 64px;
    }

    .decoration-medium,
    .decoration-md {
        width: 48px;
    }

    .decoration-small,
    .decoration-sm {
        width: 32px;
    }

    .decoration-tiny,
    .decoration-xs {
        width: 24px;
    }

    .decoration-micro {
        display: none;
    }

    /* Hide edge peeks */
    .edge-peek-left,
    .edge-peek-right {
        display: none;
    }

    /*
     * Below the navigation, which is what the base rule's comment promises and
     * what its 80px delivers against a 73px nav. These overrides did not: the
     * nav is 69px tall at both mobile widths, so 60px put the tree's star and
     * the top of the gift 9px behind an opaque bar, and 55px put them 14px
     * behind it. Both ornaments sit at z-index 0, so the nav simply ate them.
     */
    .corner-top-left,
    .corner-top-right {
        top: 76px;
    }

    .auth-layout .decoration-tree-left {
        width: 64px;
        left: 12px;
    }

    .auth-layout .decoration-presents-right {
        width: 48px;
        right: 12px;
    }

    .empty-state-hero {
        gap: 8px;
        max-width: 200px;
    }

    .wishlist-decoration-scene {
        gap: 12px;
        max-width: 220px;
    }

    /* Hide card decorations on tablet */
    .event-card .card-decoration {
        display: none;
    }
}

/* Mobile */
@media (max-width: 480px) {
    /* Further reduce sizes */
    .decoration-medium,
    .decoration-md {
        width: 40px;
    }

    .decoration-small,
    .decoration-sm {
        width: 28px;
    }

    .decoration-tiny,
    .decoration-xs {
        width: 20px;
    }

    /* Hide bottom corners on mobile to save space */
    .corner-bottom-left,
    .corner-bottom-right {
        display: none;
    }

    .corner-top-left,
    .corner-top-right {
        top: 76px;
        opacity: 0.6; /* More subtle on mobile */
    }

    .auth-layout .decoration-tree-left {
        width: 48px;
        left: 8px;
        bottom: 8px;
    }

    .auth-layout .decoration-presents-right {
        width: 36px;
        right: 8px;
        bottom: 8px;
    }

    .empty-state-hero {
        gap: 6px;
        max-width: 160px;
    }

    .empty-state-hero .decoration,
    .empty-state-hero img {
        max-width: 48px;
    }

    .wishlist-decoration-scene {
        gap: 8px;
        max-width: 180px;
        padding: 12px;
    }

    .wishlist-decoration-scene .decoration,
    .wishlist-decoration-scene img {
        max-width: 44px;
    }
}

/* Very small mobile */
@media (max-width: 360px) {
    /* Hide all corner decorations except empty state heroes */
    .corner-top-left,
    .corner-top-right,
    .auth-layout .decoration-tree-left,
    .auth-layout .decoration-presents-right {
        display: none;
    }

    .empty-state-hero {
        gap: 4px;
        max-width: 140px;
    }

    .empty-state-hero .decoration,
    .empty-state-hero img {
        max-width: 40px;
    }

    .wishlist-decoration-scene {
        gap: 6px;
        max-width: 150px;
    }

    .wishlist-decoration-scene .decoration,
    .wishlist-decoration-scene img {
        max-width: 36px;
    }
}

/* ============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================ */

/*
 * Nothing here animates any more, so there is no reduced-motion rule to write:
 * the decorations are still images. The snow layer keeps its own, in
 * 8-polish.css, because the snow is still moving.
 *
 * will-change and the translateZ hint went with the animations — they promoted
 * every decoration to its own compositor layer to smooth a transform that no
 * longer happens.
 */

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.decoration-fade {
    opacity: 0.6;
}

.decoration-subtle {
    opacity: 0.5;
}

/* Hide specific decorations if needed */
.decoration-hidden-mobile {
    display: block;
}

@media (max-width: 768px) {
    .decoration-hidden-mobile {
        display: none;
    }
}