/* ========================================
   Decorative Elements — Flower & Leaf
   Parallax Mouse-Tracking
   ======================================== */

/* ── Decoration Container ────────────────── */
.hero-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.gate-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Gate deco fade-in (no floating needed) */
.gate-decorations .deco {
    animation: fadeIn 1s ease forwards;
    animation-delay: inherit;
}
.gate-decorations .deco-corner-tl { animation-delay: 0.2s; }
.gate-decorations .deco-corner-tr { animation-delay: 0.4s; }
.gate-decorations .deco-flower-1  { animation-delay: 0.6s; }
.gate-decorations .deco-flower-2  { animation-delay: 0.8s; }
.gate-decorations .deco-leaf-1    { animation-delay: 1.0s; }
.gate-decorations .deco-leaf-2    { animation-delay: 1.2s; }

/* Hero content z-index — above decorations */
#hero .hero-content {
    z-index: 3;
}

/* ── Generic Decoration Base ──────────────── */
.deco {
    position: absolute;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ── Corner Decorations ───────────────────── */
/* Top-left corner bracket */
.deco-corner-tl {
    top: 0;
    left: 0;
    width: clamp(120px, 18vw, 220px);
}

/* Top-right corner bracket */
.deco-corner-tr {
    top: 0;
    right: 0;
    width: clamp(100px, 15vw, 180px);
    transform: scaleX(-1);
}

/* Bottom-left corner bracket */
.deco-corner-bl {
    bottom: 0;
    left: 0;
    width: clamp(80px, 12vw, 140px);
    transform: scaleY(-1);
}

/* Bottom-right corner bracket */
.deco-corner-br {
    bottom: 0;
    right: 0;
    width: clamp(80px, 12vw, 140px);
    transform: scale(-1, -1);
}

/* ── Floating Flowers ──────────────────────── */
/* Large flower — top area */
.deco-flower-1 {
    top: 8%;
    right: 12%;
    width: clamp(60px, 8vw, 110px);
    animation: floatSlow 6s ease-in-out infinite;
}

/* Large flower — bottom-left area */
.deco-flower-2 {
    bottom: 18%;
    left: 8%;
    width: clamp(50px, 7vw, 90px);
    animation: floatSlow 8s ease-in-out infinite;
    animation-delay: -2s;
}

/* Medium flower — right mid */
.deco-flower-3 {
    top: 35%;
    right: 5%;
    width: clamp(40px, 5vw, 70px);
    animation: floatSlow 7s ease-in-out infinite;
    animation-delay: -4s;
}

/* Small flower — left mid */
.deco-flower-4 {
    top: 45%;
    left: 6%;
    width: clamp(35px, 4vw, 55px);
    animation: floatSlow 9s ease-in-out infinite;
    animation-delay: -1s;
}

/* Small flower — top-center */
.deco-flower-5 {
    top: 12%;
    left: 20%;
    width: clamp(30px, 3.5vw, 45px);
    animation: floatSlow 7s ease-in-out infinite;
    animation-delay: -3s;
}

/* ── Leaves ────────────────────────────────── */
.deco-leaf-1 {
    top: 20%;
    left: 4%;
    width: clamp(45px, 6vw, 80px);
    animation: floatSlow 10s ease-in-out infinite;
}

.deco-leaf-2 {
    bottom: 25%;
    right: 6%;
    width: clamp(50px, 7vw, 90px);
    animation: floatSlow 11s ease-in-out infinite;
    animation-delay: -5s;
}

.deco-leaf-3 {
    top: 55%;
    left: 2%;
    width: clamp(35px, 4vw, 55px);
    animation: floatSlow 8s ease-in-out infinite;
    animation-delay: -6s;
}

.deco-leaf-4 {
    top: 30%;
    right: 3%;
    width: clamp(40px, 5vw, 65px);
    animation: floatSlow 9s ease-in-out infinite;
    animation-delay: -3s;
}

.deco-leaf-5 {
    bottom: 35%;
    left: 10%;
    width: clamp(30px, 3.5vw, 48px);
    animation: floatSlow 12s ease-in-out infinite;
    animation-delay: -7s;
}

/* ── Keyframe Animations ──────────────────── */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-8px) rotate(1.5deg); }
    66%       { transform: translateY(-4px) rotate(-1deg); }
}

/* ── Opacity on load (fade in) ────────────── */
.deco {
    opacity: 0;
    animation-fill-mode: forwards;
}

.hero-decorations .deco {
    animation-name: floatSlow, fadeIn;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Delay each element */
.deco-corner-tl  { animation-duration: 0.8s, 6s; animation-delay: 0.1s, 0.1s; }
.deco-corner-tr  { animation-duration: 0.8s, 8s; animation-delay: 0.3s, 0.3s; }
.deco-corner-bl  { animation-duration: 0.8s, 7s; animation-delay: 0.2s, 0.2s; }
.deco-corner-br  { animation-duration: 0.8s, 9s; animation-delay: 0.4s, 0.4s; }
.deco-flower-1   { animation-duration: 1s, 6s;  animation-delay: 0.5s, 0.5s; }
.deco-flower-2   { animation-duration: 1s, 8s;  animation-delay: 0.8s, 0.8s; }
.deco-flower-3   { animation-duration: 1s, 7s;  animation-delay: 1.0s, 1.0s; }
.deco-flower-4   { animation-duration: 1s, 9s;  animation-delay: 0.7s, 0.7s; }
.deco-flower-5   { animation-duration: 1s, 7s;  animation-delay: 1.2s, 1.2s; }
.deco-leaf-1     { animation-duration: 1s, 10s; animation-delay: 0.6s, 0.6s; }
.deco-leaf-2     { animation-duration: 1s, 11s; animation-delay: 1.1s, 1.1s; }
.deco-leaf-3     { animation-duration: 1s, 8s;  animation-delay: 0.9s, 0.9s; }
.deco-leaf-4     { animation-duration: 1s, 9s;  animation-delay: 1.3s, 1.3s; }
.deco-leaf-5     { animation-duration: 1s, 12s; animation-delay: 0.4s, 0.4s; }

/* ── Hero Section with Deco ─────────────── */
#hero {
    position: relative;
}

/* Hide decorations on mobile to keep clean */
@media (max-width: 768px) {
    .deco-corner-tl, .deco-corner-tr,
    .deco-corner-bl, .deco-corner-br {
        display: none;
    }
    .deco-flower-3, .deco-flower-4,
    .deco-leaf-3, .deco-leaf-4 {
        display: none;
    }
    .deco-flower-1, .deco-flower-2,
    .deco-leaf-1, .deco-leaf-2, .deco-leaf-5,
    .deco-flower-5 {
        opacity: 0.4;
    }
}