/* ===== RDI Impact flower =====
   Five annular-sector petals fan across the top 180° and stay visible the whole
   time. Each petal box is 278.4 x 407 with its apex (139.2, 407) pinned to the
   flower centre; the box is rotated by --slot about that apex and #petalClip
   (outer r=407, inner r=165, ~40° wide) carves the fan.

   flower.js gently rotates the fan one slot at a time (the far petal wraps to
   the other side with a quick fade) and marks the centre petal .is-center so it
   reveals its photo. Hovering a wedge snaps that petal to the centre. */

.flower-section {
    width: 100%;
    background: #FFFFFF;
    padding: 150px 0 60px;               /* more breathing room above the flower */
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.flower-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.flower {
    position: relative;
    width: 900px;
    height: 600px;
    max-width: 100%;
    transform: scale(1.1);               /* enlarge the whole flower a touch */
    transform-origin: top center;
    margin-bottom: 60px;                 /* reserve the scaled-up height */
}

/* --- Petals --- */
.flower__petal {
    position: absolute;
    left: 50%;
    top: 0;
    width: 278.4px;
    height: 407px;
    margin-left: -139.2px;
    transform-origin: 139.2px 407px;     /* apex = bottom-center = flower centre */
    transform: rotate(var(--slot, 0deg));
    transition: transform 0.75s ease, opacity 0.35s ease;
    z-index: 1;
    pointer-events: none;                /* only the wedge (shape) is hoverable */
    will-change: transform, opacity;
}

/* while wrapping to the far side the transform jumps (only the fade animates) */
.flower__petal.no-anim {
    transition: opacity 0.35s ease;
}

/* the centre petal (and any hovered petal) sits above its neighbours */
.flower__petal.is-center,
.flower__petal.is-open {
    z-index: 4;
}

/* clipped wedge — the actual hover target */
.flower__shape {
    position: absolute;
    inset: 0;
    clip-path: url(#petalClip);
    -webkit-clip-path: url(#petalClip);
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.45s ease;
}

.flower__bg {
    position: absolute;
    inset: 0;
    background: rgba(6, 71, 0, 0.16);
    transition: opacity 0.45s ease;
}

/* photo fills the wedge edge-to-edge (cropped to the fan), like the Figma */
.flower__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.55s ease;
}

/* icon sits ~65% out toward the wide end, kept upright via counter-rotation */
.flower__icon-wrap {
    position: absolute;
    left: 50%;
    top: 121px;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--slot, 0deg)));
    transition: transform 0.75s ease;
    pointer-events: none;
}

.flower__icon {
    display: block;
    width: 46px;
    height: 46px;
    color: #064700;
    fill: none;
    stroke: #064700;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* one caption element — always upright; flower.js sets its left/top so it sits
   just above whichever petal is active (centre petal at rest, hovered petal on
   hover). Positioned above the petal's outer edge, in clear space. */
.flower__caption {
    position: absolute;
    left: 450px;
    top: -30px;
    width: 280px;
    transform: translate(-50%, -100%);   /* JS overrides per petal side */
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 23px;
    line-height: 33px;
    color: rgba(6, 71, 0, 0.72);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 6;
}
.flower__caption.is-shown { opacity: 1; }

/* centre petal (resting) or hovered petal: reveal the edge-to-edge photo +
   label, hide the green tint + icon */
.flower__petal.is-center .flower__img,
.flower__petal.is-open .flower__img { opacity: 1; }
.flower__petal.is-center .flower__bg,
.flower__petal.is-open .flower__bg { opacity: 0; }
.flower__petal.is-center .flower__icon,
.flower__petal.is-open .flower__icon { opacity: 0; }

/* --- Gold core ---
   Radius 131 (petal inner arc is at 165) leaves the ~34px white ring seen in
   the Figma design. Centred on the flower centre (450, 407). */
.flower__center {
    position: absolute;
    left: 50%;
    top: 276px;                          /* centre at y=407, r=131 */
    width: 262px;
    height: 262px;
    margin-left: -131px;
    border-radius: 50%;
    background: #CF8E00;
    box-shadow: 0 0 30px rgba(207, 142, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.flower__center-text {
    max-width: 190px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    color: #064700;
}

/* ===== Responsive ===== (transform-origin is top-center, so scaling shrinks
   from the top; negative margins reclaim the fixed 600px box's leftover space) */
@media (max-width: 1100px) {
    .flower { transform: scale(0.92); margin-bottom: 0; }
    .flower-section { padding: 90px 0 40px; }
}
@media (max-width: 820px) {
    .flower { transform: scale(0.7); margin-bottom: -150px; }
    .flower-section { padding: 60px 0 20px; }
}
@media (max-width: 560px) {
    .flower { transform: scale(0.5); margin-bottom: -260px; }
    .flower-section { padding: 34px 0 10px; }
}
@media (max-width: 400px) {
    .flower { transform: scale(0.4); margin-bottom: -320px; }
    .flower-section { padding: 20px 0 0; }
}