* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
    overflow: hidden;
    background: radial-gradient(circle at center,
                #fffbe8 0%, #fff4bd 45%, #ffe994 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Capa aparte para el parallax del mouse:
   así no compite con las animaciones del SVG. */
.parallax {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .25s ease-out;
    will-change: transform;
}

/* =========================================
   RAMO
========================================= */
.bouquet {
    width: min(850px, 95vw);
    height: min(850px, 95vh);
    overflow: visible;
    opacity: 0;
    animation:
        bouquetAppear 1.5s ease forwards,
        floating 5s ease-in-out 7s infinite;
}

@keyframes bouquetAppear {
    from { opacity: 0; transform: translateY(80px) scale(.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(.7deg); }
}

/* =========================================
   TALLOS
   pathLength="1" evita depender del largo real
========================================= */
.stem {
    fill: none;
    stroke: #39752d;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    animation: drawStem 2.5s ease forwards;
}

.stem-1 { animation-delay: .5s; }
.stem-2 { animation-delay: .8s; }
.stem-3 { animation-delay: 1s; }
.stem-4 { animation-delay: 1.2s; }
.stem-5 { animation-delay: 1.4s; }

@keyframes drawStem { to { stroke-dashoffset: 0; } }

/* =========================================
   HOJAS
========================================= */
.leaf {
    fill: #4d8c38;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: leafAppear .8s cubic-bezier(.17,.67,.32,1.4) forwards;
}

.leaf-1 { animation-delay: 2.4s; }
.leaf-2 { animation-delay: 2.6s; }
.leaf-3 { animation-delay: 2.8s; }
.leaf-4 { animation-delay: 3s; }
.leaf-5 { animation-delay: 3.2s; }
.leaf-6 { animation-delay: 3.4s; }

@keyframes leafAppear {
    from { opacity: 0; transform: scale(0) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* =========================================
   GIRASOLES
   El <g> exterior lleva translate/scale (atributo).
   El <g> interior sólo se anima: no se pisan.
========================================= */
.flower {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: flowerAppear 1s cubic-bezier(.17,.67,.32,1.4) forwards;
    animation-delay: var(--start);
}

.flower-1 { --start: 3.3s; }
.flower-2 { --start: 3.8s; }
.flower-3 { --start: 4.3s; }

@keyframes flowerAppear {
    0%   { opacity: 0; transform: scale(0); }
    70%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   PÉTALOS
   La rotación vive en el <g> contenedor,
   la animación sólo escala el pétalo.
========================================= */
.petal {
    fill: #ffd21f;
    transform-box: fill-box;
    transform-origin: 50% 100%;   /* crece desde el centro de la flor */
    opacity: 0;
    animation: petalAppear .7s cubic-bezier(.17,.67,.32,1.4) forwards;
    animation-delay: calc(var(--start) + var(--i) * .06s);
}

.p1  { --i: 1; }  .p2  { --i: 2; }  .p3  { --i: 3; }
.p4  { --i: 4; }  .p5  { --i: 5; }  .p6  { --i: 6; }
.p7  { --i: 7; }  .p8  { --i: 8; }  .p9  { --i: 9; }
.p10 { --i: 10; } .p11 { --i: 11; } .p12 { --i: 12; }

@keyframes petalAppear {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* =========================================
   CENTRO DEL GIRASOL
========================================= */
.flower-center {
    fill: #4c2b13;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: centerAppear .8s cubic-bezier(.17,.67,.32,1.4) forwards;
    animation-delay: calc(var(--start) + .45s);
}

.flower-seeds {
    fill: none;
    stroke: #7a4a1c;
    stroke-width: 3;
    opacity: 0;
    animation: seedsAppear .6s ease forwards;
    animation-delay: calc(var(--start) + .8s);
}

@keyframes centerAppear {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes seedsAppear {
    from { opacity: 0; }
    to   { opacity: .55; }
}

/* =========================================
   FLORES PEQUEÑAS
========================================= */
.small-flower {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: popIn .8s cubic-bezier(.17,.67,.32,1.4) forwards;
}

.sf-1 { animation-delay: 4.8s; }
.sf-2 { animation-delay: 5s; }
.sf-3 { animation-delay: 5.2s; }

@keyframes popIn {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* =========================================
   PAPEL
========================================= */
.paper {
    transform-box: fill-box;
    transform-origin: center top;
    opacity: 0;
    animation: paperAppear 1.2s cubic-bezier(.17,.67,.32,1.2) forwards;
    animation-delay: 5.5s;
}

@keyframes paperAppear {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* =========================================
   LAZO
========================================= */
.ribbon {
    transform-box: fill-box;
    transform-origin: center top;
    opacity: 0;
    animation: popIn .8s cubic-bezier(.17,.67,.32,1.4) forwards;
    animation-delay: 6.4s;
}

/* =========================================
   BRILLO
========================================= */
.glow {
    fill: #fff6a0;
    opacity: 0;
    animation: glowAppear 2s ease forwards;
    animation-delay: 6.8s;
}

@keyframes glowAppear {
    from { opacity: 0; }
    to   { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .bouquet, .stem, .leaf, .flower, .petal, .flower-center,
    .flower-seeds, .small-flower, .paper, .ribbon, .glow {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
    .stem { stroke-dashoffset: 0; }
}