/* Dahlia et Papillon — complete stylesheet */
/* Keep horizontal overflow from flying butterflies from causing a scrollbar. */
html, body { overflow-x: clip; }

/* Butterfly: original styling and behavior retained. */
.bf { position: absolute; left: 0; top: 0; z-index: 45; pointer-events: none; will-change: transform; }
.bf svg { display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(43, 36, 48, .18)); }
.bf__fore { fill: url(#bfFore); }
.bf__hind { fill: url(#bfHind); }
.bf__fore, .bf__hind { stroke: #3B4750; stroke-width: 2; stroke-linejoin: round; }
.bf__vein { fill: none; stroke: #1F2830; stroke-width: .9; stroke-linecap: round; }
.bf__dot { fill: #fff; }
.bf__body { fill: #3B4750; }
.bf__antenna { fill: none; stroke: #3B4750; stroke-width: 1.1; stroke-linecap: round; }
.bf__wing { transform-box: view-box; animation: bfRest 2.4s ease-in-out infinite; }
.bf__wing--l, .bf__wing--r { transform-origin: 30px 30px; }
.bf.is-flying .bf__wing { animation: bfFlap .16s ease-in-out infinite alternate; }
@keyframes bfFlap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes bfRest { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(.35); } 90% { transform: scaleX(.9); } }
.bf--perched { z-index: 2; }

/* Hero area */
.hero { position: relative; overflow: hidden; padding-bottom: 200px; }
.hero__copy { position: relative; }
.hero .bf { z-index: 2; }

/* Botanical dahlia (six hand-shaped layers, pale pink, no dark outlines). */
.dh { display: inline-block; line-height: 0; vertical-align: bottom; }
.dh svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dh__stem { fill: none; stroke: url(#dhStem); stroke-width: 2.5; stroke-linecap: round; }
.dh__leaf { fill: url(#dhLeaf); stroke: rgba(111,132,96,.22); stroke-width: .55; }
.dh__leaf-vein { fill: none; stroke: rgba(250,249,233,.60); stroke-width: .65; }
.dh__petal-fill { stroke: rgba(205,123,149,.30); stroke-width: .34; stroke-linejoin: round; }
.dh__petal-vein { fill: none; stroke: rgba(255,255,255,.46); stroke-width: .6; stroke-linecap: round; }
.dh__center { opacity: .94; }

/* The CSS transform origin is the flower's center in both viewBoxes. */
.dh__head, .dh__ring { transform-box: view-box; transform-origin: 50px 50px; }
.dh__head { animation: dhSway 7s ease-in-out infinite; }
/* Layers open from the inner petals toward the outer ones. */
.dh.is-blooming .dh__ring {
  animation: dhBloom 1.85s cubic-bezier(.19,.75,.2,1) both;
  animation-delay: var(--delay, .15s);
}
@keyframes dhBloom {
  0% { transform: scale(.12) rotate(-23deg); opacity: 0; }
  42% { opacity: .94; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes dhSway { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.6deg); } }
.dh.is-boing .dh__head { animation: dhBoing .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dhBoing {
  0% { transform: scale(1); }
  30% { transform: scale(.88, 1.08); }
  60% { transform: scale(1.08, .94); }
  100% { transform: scale(1); }
}

/* Homepage positioning: centered low on mobile, right on desktop. */
.hero__dahlia {
  position: absolute; left: 50%; bottom: -24px;
  width: 120px !important; height: 180px !important;
  margin-left: -60px; cursor: pointer; z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) {
  .hero { padding-bottom: 96px; }
  .hero__dahlia {
    left: auto; right: 8%; margin-left: 0;
    width: 170px !important; height: 255px !important; bottom: -30px;
  }
}

/* Accessible motion behavior: flowers remain visible, no movement. */
@media (prefers-reduced-motion: reduce) {
  .bf { display: none; }
  .hero .bf { display: block; }
  .bf__wing, .bf.is-flying .bf__wing,
  .dh__head, .dh.is-blooming .dh__ring, .dh.is-boing .dh__head { animation: none !important; }
}

/* Plain hero without decorative padding. */
.hero.hero--plain { padding-bottom: 72px; }
@media (min-width: 768px) {
  .hero.hero--plain { padding: 120px var(--gutter); }
}