/**
 * Noor Sprouts — Shared Decorations System
 * Centralized position classes, decoration variations, and animations
 * Used across all public/user pages for visual richness
 */

/* ============================================
   BASE POSITION CLASSES (12 TOTAL)
   ============================================ */

/* Corner anchors */
.deco-tl {
    top: 5%;
    left: 3%;
}

.deco-tr {
    top: 8%;
    right: 5%;
}

.deco-bl {
    bottom: 10%;
    left: 7%;
}

.deco-br {
    bottom: 12%;
    right: 4%;
}

/* Edge midpoints */
.deco-top-center {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.deco-bottom-center {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.deco-center-left {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.deco-center-right {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}

/* Floating (scattered) */
.deco-float-1 {
    top: 15%;
    left: 8%;
}

.deco-float-2 {
    top: 35%;
    right: 12%;
}

.deco-float-3 {
    bottom: 25%;
    left: 15%;
}

.deco-float-4 {
    bottom: 40%;
    right: 18%;
}

/* ============================================
   PAPER NOTEPAD VARIATIONS (6 TOTAL)
   ============================================ */

.decoration-paper {
    position: absolute;
    z-index: 0;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background:
        /* Paper texture overlay */
        linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, transparent 50%),
        /* Binding/header strip */
        linear-gradient(180deg, rgba(255, 145, 77, .22) 0 24%, rgba(255, 145, 77, .08) 24% 28%, transparent 28.2%),
        /* Ruled lines */
        repeating-linear-gradient(180deg, transparent 0 16px, rgba(45, 110, 78, .06) 16px 17px),
        /* Paper base */
        linear-gradient(180deg, #fffef9 0%, #fffffb 100%);
    box-shadow:
        /* Inner highlight for depth */
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -1px 0 rgba(0, 0, 0, .03),
        /* Layered shadows for realism */
        0 2px 4px rgba(45, 110, 78, .08),
        0 8px 16px rgba(45, 110, 78, .12),
        0 20px 40px rgba(35, 54, 44, .15);
    border: 1px solid rgba(193, 125, 71, .18);
    border-bottom: 2px solid rgba(193, 125, 71, .25);
    pointer-events: none;
    width: 82px;
    transform: rotate(-5deg);
    animation: paper-float 6s ease-in-out infinite;
}

@keyframes paper-float {
    0%, 100% {
        transform: rotate(-5deg) translateY(0px);
    }
    50% {
        transform: rotate(-5deg) translateY(-8px);
    }
}

/* Size variations */
.paper-sm {
    width: 60px;
    animation: paper-float-sm 6s ease-in-out infinite;
}

.paper-md {
    width: 82px;
    animation: paper-float-md 6s ease-in-out infinite;
}

.paper-lg {
    width: 120px;
    animation: paper-float-lg 6s ease-in-out infinite;
}

@keyframes paper-float-sm {
    0%, 100% {
        transform: rotate(-8deg) translateY(0px);
    }
    50% {
        transform: rotate(-8deg) translateY(-8px);
    }
}

@keyframes paper-float-md {
    0%, 100% {
        transform: rotate(-5deg) translateY(0px);
    }
    50% {
        transform: rotate(-5deg) translateY(-8px);
    }
}

@keyframes paper-float-lg {
    0%, 100% {
        transform: rotate(6deg) translateY(0px);
    }
    50% {
        transform: rotate(6deg) translateY(-10px);
    }
}

/* Color variations */
.paper-yellow {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 193, 7, .28) 0 24%, rgba(255, 193, 7, .12) 24% 28%, transparent 28.2%),
        repeating-linear-gradient(180deg, transparent 0 16px, rgba(255, 193, 7, .08) 16px 17px),
        linear-gradient(180deg, #fffef5 0%, #fffef8 100%);
    border-color: rgba(255, 193, 7, .22);
    border-bottom-color: rgba(255, 193, 7, .35);
}

.paper-blue {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, transparent 50%),
        linear-gradient(180deg, rgba(33, 150, 243, .28) 0 24%, rgba(33, 150, 243, .12) 24% 28%, transparent 28.2%),
        repeating-linear-gradient(180deg, transparent 0 16px, rgba(33, 150, 243, .08) 16px 17px),
        linear-gradient(180deg, #f5fbff 0%, #f8fcff 100%);
    border-color: rgba(33, 150, 243, .22);
    border-bottom-color: rgba(33, 150, 243, .35);
}

.paper-green {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, transparent 50%),
        linear-gradient(180deg, rgba(76, 175, 80, .28) 0 24%, rgba(76, 175, 80, .12) 24% 28%, transparent 28.2%),
        repeating-linear-gradient(180deg, transparent 0 16px, rgba(76, 175, 80, .08) 16px 17px),
        linear-gradient(180deg, #f5fff6 0%, #f8fff9 100%);
    border-color: rgba(76, 175, 80, .22);
    border-bottom-color: rgba(76, 175, 80, .35);
}

/* ============================================
   SPARKLE VARIATIONS (4 TOTAL)
   ============================================ */

.decoration-sparkle {
    position: absolute;
    z-index: 0;
    color: var(--secondary);
    pointer-events: none;
    user-select: none;
    font-size: 2.4rem;
    opacity: .24;
    line-height: 1;
}

.sparkle-sm {
    font-size: 1.2rem;
    opacity: .16;
}

.sparkle-md {
    font-size: 2.4rem;
    opacity: .24;
}

.sparkle-lg {
    font-size: 3.6rem;
    opacity: .32;
}

.sparkle-pulse {
    animation: sparkle-pulse 2s ease-in-out infinite;
}

@keyframes sparkle-pulse {
    0%, 100% {
        transform: scale(0.9);
        opacity: .2;
    }
    50% {
        transform: scale(1.1);
        opacity: .32;
    }
}

/* ============================================
   HAND-DRAWN ARROW DOODLES (8 VARIATIONS)
   ============================================ */

.decoration-arrow {
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 100px;
    opacity: 0.15;
    pointer-events: none;
    animation: arrow-float 8s ease-in-out infinite;
}

.decoration-arrow svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Arrow style variations */
.arrow-loop-down {
    width: 100px;
    height: 120px;
}

.arrow-curve-right {
    width: 80px;
    height: 60px;
}

.arrow-swirl {
    width: 90px;
    height: 90px;
}

.arrow-bounce {
    width: 110px;
    height: 85px;
}

.arrow-sm {
    width: 70px;
    height: 60px;
    opacity: 0.12;
}

.arrow-lg {
    width: 150px;
    height: 130px;
    opacity: 0.18;
}

/* Color variations */
.arrow-tan svg {
    stroke: #C17D47;
    stroke-width: 3;
}

.arrow-green svg {
    stroke: #2D6E4E;
    stroke-width: 3;
}

.arrow-pink svg {
    stroke: #FFB5C5;
    stroke-width: 2.5;
}

.arrow-cream svg {
    stroke: #E8C499;
    stroke-width: 3;
}

.arrow-mint svg {
    stroke: #A8D5BA;
    stroke-width: 2.5;
}

.arrow-lavender svg {
    stroke: #D4C5E0;
    stroke-width: 2.5;
}

@keyframes arrow-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

/* ============================================
   ORGANIC BLOB VARIATIONS (5 TOTAL)
   ============================================ */

.decoration-blob {
    position: absolute;
    z-index: -1;
    width: 200px;
    height: 200px;
    opacity: 0.15;
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
}

.decoration-blob svg {
    width: 100%;
    height: 100%;
}

/* Color variations */
.blob-pink svg {
    fill: #FFD4D4;
}

.blob-blue svg {
    fill: #D4E5FF;
}

.blob-green svg {
    fill: #D4FFE5;
}

.blob-yellow svg {
    fill: #FFF4D4;
}

.blob-purple svg {
    fill: #E5D4FF;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

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

/* Tablet: Hide marked elements */
@media (max-width: 1024px) {
    .deco-hide-tablet {
        display: none;
    }
}

/* Mobile: Hide marked elements, scale down blobs */
@media (max-width: 768px) {
    .deco-hide-mobile {
        display: none;
    }

    .decoration-blob {
        width: 120px;
        height: 120px;
    }
}

/* Print: Hide all decorations */
@media print {
    .decoration-paper,
    .decoration-sparkle,
    .decoration-blob {
        display: none;
    }
}