/*
      v3 – Kért módosítások:
      - HÁTTÉRHEZ NEM NYÚLUNK (ég, hegyek, csillagok maradnak változatlanok)
      - FÁK az ELŐZŐ verzióból (realistább lombforma), de a központosítás hibáját is korrigáltam
      - FŰ a fák alatt részletesebb, textúrált réteggel
      - BOKROK az ELŐZŐ verzióból
      - VIRÁGOK vegyesen: a v2 körkörös (8 szirom) és az előző (p1..p7) típus együtt
      - Minden elem a vásznon belül marad
    */

    :root {
      /* Ég/háttér – VÁLTOZATLANUL HAGYVA */
      --sky-top-day: #87c9ff;
      --sky-mid-day: #cfe7ff;
      --sky-btm-day: #ffffff;
      --sky-top-dusk: #ffb07c;
      --sky-mid-dusk: #ffddae;
      --sky-btm-dusk: #ffeedd;
      --sky-top-night: #0b1230;
      --sky-mid-night: #0f1a44;
      --sky-btm-night: #1b285a;
      --sun: #ffd36b; --sun-core: #fff7a1; --sun-glow: rgba(255, 226, 140, .6);
      --moon: #e8eef7;
      --hill-near-1: #96c382; --hill-near-2: #7dac6a;
      --hill-mid-1: #a8d195; --hill-mid-2: #8fbc7d;
      --hill-far-1: #c7e2b6; --hill-far-2: #a9d09a;

      /* Növények/előttér */
      --trunk: #7b4a2e;
      --leaf-main: #3e9963; --leaf-shade: #2e7a4d; --leaf-highlight: #56b77d;
      --grass-dark: #1f7a33; --grass-main: #2f9b4c; --grass-light: #45b45d;
      --bush: #3d9b66; --bush-2: #2e8454;

      --flower-center: #ffd870; --petal-pink: #ff9fd6; --petal-yellow: #ffd966; --petal-purple: #bda0ff; --petal-red: #ff6f6f;
      --butterfly-1: #ff9bd1; --butterfly-2: #7bd8ff; --butterfly-3: #ffe07b;
      --bee-body: #ffcd42; --bee-stripe: #333; --bird: rgba(0,0,0,.5);
    }

    .scene { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }

    /* Ég + napszak – VÁLTOZATLAN */
    .sky { position: absolute; inset: 0; z-index: 0; transition: background 2s ease; }
    .scene:not(.is-night):not(.is-dusk):not(.is-dawn) .sky { background: linear-gradient(180deg, var(--sky-top-day), var(--sky-mid-day) 50%, var(--sky-btm-day)); }
    .scene.is-dusk .sky { background: linear-gradient(180deg, var(--sky-top-dusk), var(--sky-mid-dusk) 55%, var(--sky-btm-dusk)); }
    .scene.is-night .sky { background: linear-gradient(180deg, var(--sky-top-night), var(--sky-mid-night) 60%, var(--sky-btm-night)); }
    .scene.is-dawn .sky { background: linear-gradient(180deg, #274a86, #5e87c9 50%, #c6dcff); }

    .sunmoon { position: absolute; right: 72px; top: 72px; width: 160px; height: 160px; z-index: 1; pointer-events: none; transform-origin: center; transition: filter 2s ease, opacity 2s ease; }
    .sunmoon .sun { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--sun-core) 0 32%, var(--sun) 32% 60%, rgba(255, 211, 107, 0) 70%), radial-gradient(closest-side, rgba(255,240,180,.55), rgba(255,240,180,0)); filter: drop-shadow(0 0 22px var(--sun-glow)) drop-shadow(0 0 44px rgba(255,214,120,.35)); animation: sunPulse 12s ease-in-out infinite; }
    .sunmoon .rays { position: absolute; inset: -30%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,240,180,.0) 0 10%, rgba(255,240,180,.24) 10% 12%, rgba(255,240,180,.0) 12% 22%, rgba(255,240,180,.0) 22% 34%, rgba(255,240,180,.2) 34% 36%, rgba(255,240,180,.0) 36% 48%, rgba(255,240,180,.0) 48% 60%, rgba(255,240,180,.18) 60% 62%, rgba(255,240,180,.0) 62% 74%, rgba(255,240,180,.0) 74% 86%, rgba(255,240,180,.16) 86% 88%, rgba(255,240,180,.0) 88% 100%); filter: blur(2px) saturate(1.1); animation: raySpin 120s linear infinite; }
    .moon { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 10%, var(--moon) 10% 60%, rgba(232,238,247,0) 70%); box-shadow: 0 0 18px rgba(200,220,255,.45), 0 0 40px rgba(180,210,255,.25) inset; opacity: 0; transform: scale(.95); transition: opacity 1.6s ease, transform 2s ease; }
    @keyframes sunPulse { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(5px) } }
    @keyframes raySpin { to { transform: rotate(360deg) } }
    .scene.is-night .sun, .scene.is-night .rays { opacity: 0; }
    .scene.is-night .moon { opacity: 1; transform: scale(1); }

    /* Csillagok – VÁLTOZATLAN */
    .stars { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
    .scene.is-night .stars { opacity: .9; }
    .starfield, .starfield:before, .starfield:after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
    .starfield { background-image: radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.75) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 70% 30%, rgba(255,255,255,.55) 50%, transparent 51%); background-size: 800px 600px, 700px 500px, 900px 700px; animation: twinkle1 12s linear infinite; }
    .starfield:before { background-image: radial-gradient(1.6px 1.6px at 20% 80%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 60% 20%, rgba(255,255,255,.5) 50%, transparent 51%); background-size: 1000px 700px, 1100px 800px; animation: twinkle2 16s linear infinite; }
    .starfield:after { background-image: radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,.5) 50%, transparent 51%); background-size: 1200px 900px; animation: twinkle3 20s linear infinite; }
    @keyframes twinkle1 { to { transform: translateY(-10px) } }
    @keyframes twinkle2 { to { transform: translateY(-14px) } }
    @keyframes twinkle3 { to { transform: translateY(-18px) } }

    /* Felhők – VÁLTOZATLAN */
    .clouds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
    .cloud { position: absolute; width: 200px; height: 66px; top: 10%; left: -240px; background: #fff; border-radius: 40px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.08)); }
    .cloud:before, .cloud:after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
    .cloud:before { width: 90px; height: 90px; left: 24px; top: -34px; }
    .cloud:after { width: 120px; height: 120px; left: 84px; top: -60px; }
    .c1 { animation: cloudMove 70s linear infinite; top: 12%; opacity: .95; }
    .c2 { animation: cloudMove 90s linear infinite; top: 24%; transform: scale(1.2); opacity: .85; }
    .c3 { animation: cloudMove 110s linear infinite; top: 36%; transform: scale(1.4); opacity: .75; }
    @keyframes cloudMove { from{ transform: translateX(0) } to{ transform: translateX(130vw) } }

    /* Hegyek – VÁLTOZATLAN */
    .hills { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
    .hill { position: absolute; bottom: -4%; border-radius: 50%; filter: saturate(1.02); }
    .hf { width: 120%; height: 90%; left: -10%; background: radial-gradient(70% 60% at 60% 70%, var(--hill-far-1), var(--hill-far-2) 60%), repeating-radial-gradient( circle at 50% 60%, rgba(255,255,255,.06) 0 3px, rgba(255,255,255,0) 3px 10px); opacity: .95; }
    .hm { width: 100%; height: 75%; left: 5%; background: radial-gradient(65% 60% at 50% 65%, var(--hill-mid-1), var(--hill-mid-2) 62%), repeating-linear-gradient( 35deg, rgba(0,0,0,.04) 0 3px, rgba(0,0,0,0) 3px 10px ); }
    .hn { width: 110%; height: 60%; left: -6%; background: radial-gradient(62% 58% at 50% 60%, var(--hill-near-1), var(--hill-near-2) 64%), repeating-linear-gradient( -25deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 8px ); }

    /* Föld + Fű – részletesebb textúra a fák alatt */
    .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 6; background: linear-gradient(#6c9f57 0%, #58a24e 30%, #3b8c3c 40%, #2a6f2b 100%); }
    .grass-base { position: absolute; inset: auto 0 0; height: 30%; z-index: 7; background: linear-gradient(0deg, var(--grass-dark) 0%, var(--grass-main) 65%, var(--grass-light) 100%); mask-image: linear-gradient(to top, black 65%, transparent 100%); }
    /* új textúraréteg a valósághű hatáshoz */
    .grass-texture { position: absolute; inset: auto 0 0; height: 30%; z-index: 7; pointer-events: none; background:
      repeating-linear-gradient( 90deg, rgba(255,255,255,.04) 0 2px, rgba(255,255,255,0) 2px 6px ),
      repeating-linear-gradient( -90deg, rgba(0,0,0,.05) 0 2px, rgba(0,0,0,0) 2px 7px ),
      repeating-radial-gradient( circle at 20% 80%, rgba(0,0,0,.05) 0 2px, rgba(0,0,0,0) 2px 18px );
      mix-blend-mode: overlay; opacity: .55; mask-image: linear-gradient(to top, black 55%, transparent 100%);
    }

    /* extra fűcsomók (sway) */
    .grass-detail { position: absolute; inset: auto 0 0; height: 30%; z-index: 8; pointer-events: none; }
    .tuft { --w: 120px; --h: 70px; position: absolute; bottom: 6%; width: var(--w); height: var(--h); filter: drop-shadow(0 10px 10px rgba(0,0,0,.24)); animation: tuftSway 4.6s ease-in-out infinite; transform-origin: bottom center; }
    @keyframes tuftSway { 0%,100%{ transform: rotate(-.6deg) } 50%{ transform: rotate(.8deg) } }
    .tuft:before, .tuft:after { content: ""; position: absolute; inset: 0; }
    /*.tuft:before { background: radial-gradient(60% 100% at 50% 100%, #3aa153, rgba(0,0,0,0) 70%), repeating-linear-gradient( 180deg, #2a7d3b 0 3px, #329349 3px 6px ); mask: radial-gradient(120px 80px at 30% 100%, black 0 60%, transparent 62%), radial-gradient(140px 90px at 55% 100%, black 0 60%, transparent 62%), radial-gradient(120px 80px at 78% 100%, black 0 60%, transparent 62%); -webkit-mask-composite: source-over; mask-composite: add; }*/

    /* BOKROK – ELŐZŐ VERZIÓ */
    .bushes { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
    .bush { position: absolute; bottom: 16.5%; width: 160px; height: 70px; filter: drop-shadow(0 12px 12px rgba(0,0,0,.25)); transform-origin: bottom center; animation: bushSway 4.8s ease-in-out infinite; }
    .bush .blob { position: absolute; border-radius: 50%; }
    .bush .blob:nth-child(1) { width: 90px; height: 70px; left: 0; bottom: 0; background: radial-gradient(circle at 40% 35%, #46a56a, var(--bush)); }
    .bush .blob:nth-child(2) { width: 100px; height: 78px; left: 34px; bottom: 0; background: radial-gradient(circle at 40% 35%, #3c915a, var(--bush-2)); }
    .bush .blob:nth-child(3) { width: 80px; height: 60px; left: 90px; bottom: 0; background: radial-gradient(circle at 40% 35%, #48a56e, var(--bush)); }
    @keyframes bushSway { 0%,100%{ transform: rotate(-.6deg) } 50%{ transform: rotate(.8deg) } }

    /* FÁK – ELŐZŐ VERZIÓ lombformái + központosított elhelyezés a törzs fölé */
    .trees { position: absolute; inset: 0; z-index: 10; }
    .tree { position: absolute; bottom: 18%; width: 90px; height: 160px; transform-origin: bottom center; animation: sway 3.8s ease-in-out infinite; will-change: transform; }
    @keyframes sway { 0%,100%{ transform: rotate(-.8deg) } 50%{ transform: rotate(1.1deg) } }
    .trunk { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 70%; background: linear-gradient(#6d3f25, var(--trunk)); border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,.25); }
    /* fontos: középre igazított korona, de a RÉGI leafball elrendezéssel */
    .crown { position: absolute; bottom: 90%; left: 9%; transform: translateX(-50%); }
    .leafball { position: absolute; width: 80px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #48a86a 0 40%, var(--leaf-main) 60%, var(--leaf-shade) 100%); filter: drop-shadow(0 10px 10px rgba(0,0,0,.15)); }
    .leafball.lb1 { left: -18px; top: -10px; }
    .leafball.lb2 { left: 10px; top: -22px; transform: scale(1.05); }
    .leafball.lb3 { left: -6px; top: -40px; transform: scale(1.15); }
    .tree:before { content: ""; position: absolute; width: 48px; height: 28px; left: 21px; bottom: 18px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #3c8f57, #2e7a4d 70%); filter: blur(.4px); opacity: .9; }

    /* VIRÁGOK – kétféle: v2 körkörös (8 szirom) és RÉGI (p1..p7) mixben */
    .flowers { position: absolute; inset: 0; z-index: 11; }
    /* v2 circular */
    .flower { position: absolute; bottom: 14%; width: 18px; height: 84px; transform-origin: bottom center; animation: stemSway 2.6s ease-in-out infinite; }
    @keyframes stemSway { 0%,100%{ transform: rotate(-1deg) } 50%{ transform: rotate(1.4deg) } }
    .stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 74px; background: linear-gradient(#2a7d3b, #1e5e2c); border-radius: 3px; }
    .leaf { position: absolute; width: 14px; height: 8px; background: radial-gradient(circle at 30% 50%, #4bb16b, #2a7d3b 70%); border-radius: 20px 20px 20px 2px; transform-origin: left center; }
    .leaf.l1 { left: 6px; bottom: 32px; transform: rotate(18deg); }
    .leaf.l2 { left: 10px; bottom: 20px; transform: scaleX(-1) rotate(14deg); }
    .head { position: absolute; left: 50%; top: 4px; transform: translate(-50%, -50%); width: 34px; height: 34px; }
    .center { position: absolute; left: 43%; top: 80%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 10%, var(--flower-center) 40%, #e0b84a 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
    .flowerClassic .center { left: 40%; top: 83%; width: 32px; height: 32px;  }
    .petal { position: absolute; left: 50%; top: 50%; width: 14px; height: 20px; border-radius: 11px 11px 4px 4px; transform-origin: 0 90%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
    .petal.p0 { transform: translate(-2px,-10px) rotate(0deg); }
    .petal.p1 { transform: translate(-2px,-10px) rotate(45deg); }
    .petal.p2 { transform: translate(-2px,-10px) rotate(90deg); }
    .petal.p3 { transform: translate(-2px,-10px) rotate(135deg); }
    .petal.p4 { transform: translate(-2px,-10px) rotate(180deg); }
    .petal.p5 { transform: translate(-2px,-10px) rotate(225deg); }
    .petal.p6 { transform: translate(-2px,-10px) rotate(270deg); }
    .petal.p7 { transform: translate(-2px,-10px) rotate(315deg); }
    .flower.pink .petal { background: linear-gradient(#ffc5e7, var(--petal-pink)); }
    .flower.yellow .petal { background: linear-gradient(#ffeaa6, var(--petal-yellow)); }
    .flower.purple .petal { background: linear-gradient(#d8c9ff, var(--petal-purple)); }
    .flower.red .petal { background: linear-gradient(#ff9b9b, var(--petal-red)); }

    /* RÉGI típus (p1..p7 elrendezés) */
    .flowerClassic { position: absolute; bottom: 13.5%; width: 18px; height: 82px; transform-origin: bottom center; animation: stemSway 2.6s ease-in-out infinite; }
    .flowerClassic .stem { height: 72px; }
    .flowerClassic .head { position: absolute; left: 50%; top: 0; transform: translate(-50%, -10px); width: 32px; height: 32px; }
    .flowerClassic .petal { position: absolute; width: 14px; height: 20px; border-radius: 10px 10px 2px 2px; transform-origin: 50% 90%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
    .flowerClassic .p1 { left: 9px; top: -2px; transform: rotate(0deg); }
    .flowerClassic .p2 { left: 18px; top: 4px; transform: rotate(45deg); }
    .flowerClassic .p3 { left: 18px; top: 16px; transform: rotate(90deg); }
    .flowerClassic .p4 { left: 9px; top: 22px; transform: rotate(135deg); }
    .flowerClassic .p5 { left: -1px; top: 16px; transform: rotate(180deg); }
    .flowerClassic .p6 { left: -7px; top: 4px; transform: rotate(225deg); }
    .flowerClassic .p7 { left: -1px; top: -2px; transform: rotate(315deg); }
    .flowerClassic.pink .petal { background: linear-gradient(#ffb3d4, var(--petal-pink)); }
    .flowerClassic.yellow .petal { background: linear-gradient(#ffe9a1, var(--petal-yellow)); }
    .flowerClassic.purple .petal { background: linear-gradient(#cdb7ff, var(--petal-purple)); }
    .flowerClassic.red .petal { background: linear-gradient(#ff9b9b, var(--petal-red)); }

    /* Lepkék / Méhek / Madarak – változatlan specifikáció szerint */
    .butterflies { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
    .butterfly { --clr: var(--butterfly-1); position: absolute; width: 26px; height: 20px; left: 10%; top: 40%; transform-origin: center; animation: flyPath 22s linear infinite; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
    .bf-body { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6px; height: 18px; background: #3a2a1d; border-radius: 3px; }
    .wing { position: absolute; width: 16px; height: 14px; background: radial-gradient(circle at 35% 45%, #fff 0 12%, var(--clr) 40%, #e957a8 100%); border-radius: 12px 12px 6px 6px; transform-origin: 0% 50%; }
    .wing.left { right: 10px; animation: flap .24s ease-in-out infinite; }
    .wing.right { left: 10px; transform: rotateY(180deg); animation: flap .24s ease-in-out infinite .12s; }
    @keyframes flap { 0%,100%{ transform: rotateY(0deg) } 50%{ transform: rotateY(42deg) } }
    @keyframes flyPath { 0%{ transform: translate(0,0) rotate(0) } 25%{ transform: translate(18vw, -6vh) rotate(10deg) } 40%{ transform: translate(32vw, 4vh) rotate(-12deg) } 55%{ transform: translate(48vw, -2vh) rotate(6deg) } 70%{ transform: translate(64vw, 2vh) rotate(-6deg) } 85%{ transform: translate(86vw, -4vh) rotate(8deg) } 100%{ transform: translate(100vw, 0) rotate(0) } }
    .butterfly.b2 { --clr: var(--butterfly-2); top: 55%; animation-duration: 26s; transform: translateX(-10vw); }
    .butterfly.b3 { --clr: var(--butterfly-3); top: 28%; animation-duration: 30s; transform: translateX(-20vw); }

    .bees { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
    .bee { position: absolute; width: 16px; height: 10px; left: 20%; bottom: 24%; background: linear-gradient(90deg, var(--bee-body) 0 30%, var(--bee-stripe) 30% 40%, var(--bee-body) 40% 70%, var(--bee-stripe) 70% 80%, var(--bee-body) 80% 100%); border-radius: 10px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); animation: buzz 3.8s ease-in-out infinite; }
    .bee:before, .bee:after { content: ""; position: absolute; width: 10px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.7); top: -6px; filter: blur(.2px); }
    .bee:before { left: -2px; }
    .bee:after { right: -2px; }
    @keyframes buzz { 0%,100%{ transform: translate(0,0) } 25%{ transform: translate(10px,-6px) } 50%{ transform: translate(4px, 2px) } 75%{ transform: translate(12px,-2px) } }

    .birds { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
    .bird { position: absolute; top: 12%; left: -10vw; width: 22px; height: 10px; background: transparent; animation: birdFly 36s linear infinite; }
    .bird:before, .bird:after { content: ""; position: absolute; width: 14px; height: 2px; top: 4px; background: var(--bird); border-radius: 2px; }
    .bird:before { right: 10px; transform-origin: right center; transform: rotate(22deg); animation: wingTilt 1.2s ease-in-out infinite; }
    .bird:after { left: 10px; transform-origin: left center; transform: rotate(-22deg); animation: wingTilt 1.2s ease-in-out infinite .6s; }
    @keyframes wingTilt { 0%,100%{ transform: rotate(22deg) } 50%{ transform: rotate(-10deg) } }
    @keyframes birdFly { from{ transform: translateX(0) } to{ transform: translateX(130vw) } }
    .bird.b2 { top: 20%; animation-duration: 44s; opacity: .8; }
    .bird.b3 { top: 30%; animation-duration: 52s; opacity: .7; }

    .vignette { position: absolute; inset: 0; z-index: 99; pointer-events: none; background: radial-gradient(120% 80% at 50% 70%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.18) 100%); }

    /* Pozíciók – minden a vásznon belül */
    .tree.t1 { left: 12%; }
    .tree.t2 { left: 26%; animation-delay: .2s; transform: scale(1.06); }
    .tree.t3 { left: 72%; animation-delay: .6s; transform: scale(1.1); }

    .bush.b1 { left: 14%; }
    .bush.b2 { left: 38%; animation-delay: .4s; }
    .bush.b3 { left: 64%; animation-delay: .2s; }

    .tuft.g1 { left: 10%; }
    .tuft.g2 { left: 22%; animation-delay: .2s; }
    .tuft.g3 { left: 36%; animation-delay: .5s; }
    .tuft.g4 { left: 56%; animation-delay: .3s; }
    .tuft.g5 { left: 74%; animation-delay: .6s; }

    .flower.f1 { left: 12%; }
    .flower.f2 { left: 18%; animation-delay: .1s; }
    .flower.f3 { left: 26%; animation-delay: .2s; }
    .flower.f4 { left: 34%; animation-delay: .3s; }
    .flowerClassic.fc5 { left: 44%; animation-delay: .15s; }
    .flowerClassic.fc6 { left: 52%; animation-delay: .25s; }
    .flower.f7 { left: 62%; animation-delay: .35s; }
    .flowerClassic.fc8 { left: 72%; animation-delay: .05s; }

    .bee.b1 { left: 19%; bottom: 25%; }
    .bee.b2 { left: 51%; bottom: 26%; animation-delay: .6s; }

    .butterfly.b1 { top: 44%; }

    @media (prefers-reduced-motion: reduce) { .sunmoon *, .cloud, .tree, .flower, .flowerClassic, .butterfly, .bee, .bird, .tuft { animation: none !important; }
    }

    /* FŰCSOMÓ – élethű, hegyes pengék (clip-path), finom ringás */
.grass-detail {
  position: absolute; inset: auto 0 0; height: 30%;
  z-index: 8; pointer-events: none;
}

/* konténer */
.tuft {
  --w: 130px; --h: 80px;
  position: absolute; bottom: 6%;
  width: var(--w); height: var(--h);
  transform-origin: bottom center;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.22));
  animation: tuftSway 4.8s ease-in-out infinite;
}

/* alap ringás a teljes csomóra */
@keyframes tuftSway { 0%,100%{ transform: rotate(-.6deg) } 50%{ transform: rotate(.8deg) } }

/* egy penge (hegyes levél) */
.tuft .blade {
  --x: 0px;              /* vízszintes eltolás a csomón belül */
  --rot: 0deg;           /* penge dőlése */
  --len: 62px;           /* penge magasság */
  --wid: 6px;            /* penge szélesség (tövénél) */
  --curve: 6deg;         /* enyhe ív: skew a hegy felé */
  position: absolute; bottom: 0;
  left: calc(50% + var(--x));
  width: var(--wid); height: var(--len);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--rot)) skewY(var(--curve));
  /* zöld átmenet, halvány bordázat */
  background:
    linear-gradient(180deg, #4ab968 0%, #2f9b4c 65%, #1f7a33 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 2px, rgba(255,255,255,0) 2px 6px);
  /* hegyes forma */
  clip-path: polygon(50% 0%, 70% 8%, 100% 35%, 80% 65%, 65% 85%, 55% 100%, 45% 100%, 35% 85%, 20% 65%, 0% 35%, 30% 8%);
  border-radius: 3px;
  /* finom saját rezgés */
  animation: bladeSway 2.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  /* árnyék/kiemelés */
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.18),
    inset 0 -10px 12px rgba(0,0,0,.12);
}

@keyframes bladeSway {
  0%,100% { transform: translateX(-50%) rotate(var(--rot)) skewY(var(--curve)); }
  50%     { transform: translateX(-50%) rotate(calc(var(--rot) + 4deg)) skewY(calc(var(--curve) + 1deg)); }
}

/* kis harmat/kiemelés néhány pengén */
.tuft .blade.gloss {
  background:
    linear-gradient(180deg, #7bdc8f 0%, #3fb367 40%, #2f9b4c 70%, #1f7a33 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 5px);
}

/* variáns méretek */
.tuft--sm { --w: 100px; --h: 68px; }
.tuft--lg { --w: 160px; --h: 92px; }

/* finom zaj a tövénél, hogy ne legyen „vonalas” */
.tuft:after{
  content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  width: 70%; height: 10px; border-radius: 50%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,0));
  filter: blur(2px);
}