/* ===================== Animated φόντα ===================== */
.decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.decor > * { position: absolute; }

/* Ουρανός */
.d-sun { right: 4%; top: 4%; font-size: 64px; animation: d-spin 30s linear infinite; filter: drop-shadow(0 0 18px rgba(255, 213, 79, .9)); }
.d-cloud { top: var(--t); font-size: var(--s); opacity: var(--o, 1); left: -15%; animation: d-drift var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-bird { top: var(--t); font-size: var(--s); left: -10%; animation: d-fly var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-bird::after { content: ''; }

/* Θάλασσα */
.d-ray { left: var(--l); top: -10%; width: 60px; height: 70%; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-12deg); animation: d-ray 4s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.d-bubble { left: var(--l); bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.1)); animation: d-rise var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-fish { top: var(--t); font-size: var(--s); left: -10%; animation: d-drift var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-weed { left: var(--l); bottom: 0; font-size: var(--s); transform-origin: bottom center; animation: d-sway 3s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }

/* Διάστημα / νύχτα */
.d-star { left: var(--l); top: var(--t); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; animation: d-twinkle 1.6s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); box-shadow: 0 0 6px #fff; }
.d-shoot { left: var(--l); top: var(--t); width: 120px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); transform: rotate(25deg); opacity: 0; animation: d-shoot var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-comet { right: -10%; top: 15%; font-size: 40px; animation: d-comet 24s linear infinite; }
.d-moon { right: 6%; top: 6%; font-size: 64px; filter: drop-shadow(0 0 16px rgba(255,255,255,.7)); animation: d-bob 4s ease-in-out infinite; }
.d-firefly { left: var(--l); top: var(--t); width: 6px; height: 6px; border-radius: 50%; background: #fff176; box-shadow: 0 0 10px 3px rgba(255, 241, 118, .8); animation: d-firefly 5s ease-in-out infinite; animation-delay: var(--delay, 0s); }

/* Κήπος */
.d-butterfly { left: var(--l); top: var(--t); font-size: var(--s); animation: d-flutter var(--d) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.d-bee { top: var(--t); font-size: 26px; left: -8%; animation: d-fly var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-grass { left: var(--l); bottom: 0; font-size: 26px; transform-origin: bottom center; animation: d-sway 2.6s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }

/* Γιορτή */
.d-balloon { left: var(--l); bottom: -15%; font-size: var(--s); animation: d-float var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.d-sparkle { left: var(--l); top: var(--t); width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: d-twinkle 1.2s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }

/* Ο ήρωας-avatar */
.hero-av { position: relative; display: inline-block; line-height: 0; font-size: 16px; }
.hero-av svg { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); background: #fff; display: block; }
.hero-av .hero-prop { position: absolute; right: -40%; bottom: -10%; font-size: var(--prop, 28px); line-height: 1; }

/* Keyframes */
@keyframes d-spin { to { transform: rotate(360deg); } }
@keyframes d-drift { from { left: -15%; } to { left: 110%; } }
@keyframes d-fly { 0% { left: -10%; transform: translateY(0); } 25% { transform: translateY(-14px); } 50% { transform: translateY(6px); } 75% { transform: translateY(-10px); } 100% { left: 110%; transform: translateY(0); } }
@keyframes d-ray { from { opacity: .3; } to { opacity: .9; } }
@keyframes d-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(-50vh) translateX(14px); } 100% { transform: translateY(-100vh) translateX(-10px); opacity: 0; } }
@keyframes d-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes d-twinkle { from { opacity: .2; transform: scale(.7); } to { opacity: 1; transform: scale(1.2); } }
@keyframes d-shoot { 0%, 78% { opacity: 0; transform: rotate(25deg) translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(25deg) translateX(360px); } }
@keyframes d-comet { from { right: -10%; top: 5%; } to { right: 110%; top: 60%; } }
@keyframes d-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes d-firefly { 0%, 100% { opacity: .1; transform: translate(0, 0); } 30% { opacity: 1; transform: translate(18px, -14px); } 60% { opacity: .3; transform: translate(-10px, -26px); } }
@keyframes d-flutter { 0% { transform: translate(0, 0) scaleX(1); } 25% { transform: translate(60px, -30px) scaleX(-1); } 50% { transform: translate(120px, 10px) scaleX(-1); } 75% { transform: translate(50px, 30px) scaleX(1); } 100% { transform: translate(0, 0) scaleX(1); } }
@keyframes d-float { 0% { transform: translateY(0) rotate(-4deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(-55vh) rotate(4deg); } 100% { transform: translateY(-115vh) rotate(-4deg); opacity: .8; } }