.flower {
  display: block;
  width: auto;
  height: 540px;
  overflow: visible;

  --p-outer-0: #DEB566;  --p-outer-1: #B5842A;  --p-outer-2: #7E560E;
  --p-mid-0: #EACA83;    --p-mid-1: #C99940;    --p-mid-2: #906917;
  --p-inner-0: #F5E3BB;  --p-inner-1: #E2C381;  --p-inner-2: #B48A34;
  --p-heart-0: #FFFCF4;  --p-heart-1: #F9EDD9;  --p-heart-2: #EDD8B4;
  --p-blush-0: #FEF6EE;  --p-blush-1: #F6E2CE;  --p-blush-2: #E6C5A8;
  --p-button-0: #EED49A; --p-button-1: #CB9E48; --p-button-2: #8E6718;

  --core: #A87A22;
  --core-hi: #FEF8E9;
  --core-line: #7C5710;

  --ln-outer: #6B4809;
  --ln-mid: #7E5A12;
  --ln-inner: #9A7526;
  --ln-heart: #C0A063;

  --wisp: #B08326;
  --wisp-sage: #6E9B83;

  --aur-1: #D6B06A;
  --aur-2: #EBD49C;
  --aur-3: #A6C2B0;
  --halo: #E3C88E;

  --aur-o1: 0.16;
  --aur-o2: 0.12;
  --aur-o3: 0.05;
  --halo-o: 0.34;

  --grain-o: 0.18;

  --w-rib: 0.9;
  --w-edge: 0.65;
}

.flower[data-colorway="blush"] {
  --p-outer-0: #DDA286;  --p-outer-1: #B3705A;  --p-outer-2: #7E4531;
  --p-mid-0: #E9BCA0;    --p-mid-1: #C8836A;    --p-mid-2: #91543C;
  --p-inner-0: #F6DAC7;  --p-inner-1: #E2AE93;  --p-inner-2: #B0755A;
  --p-heart-0: #FFFBF6;  --p-heart-1: #F9E9DC;  --p-heart-2: #EFD3BF;
  --p-blush-0: #FEF4EC;  --p-blush-1: #F5DECE;  --p-blush-2: #E7C2AA;
  --p-button-0: #E9C889; --p-button-1: #C39A42; --p-button-2: #8A6620;

  --core: #B4763F;
  --core-hi: #FEF7EC;
  --core-line: #7A4526;

  --ln-outer: #6A3524;
  --ln-mid: #7E452F;
  --ln-inner: #A06B52;
  --ln-heart: #C39B80;

  --wisp: #B57657;
  --wisp-sage: #6E9B83;

  --aur-1: #DDA98D;
  --aur-2: #F0D2BC;
  --aur-3: #A6C2B0;
  --halo: #E8C7AE;
}

.flower[data-colorway="plum"] {
  --p-outer-0: #A0748F;  --p-outer-1: #77496A;  --p-outer-2: #4C2A43;
  --p-mid-0: #B58BA6;    --p-mid-1: #8B5C7C;    --p-mid-2: #5E3653;
  --p-inner-0: #D9BACE;  --p-inner-1: #B387A4;  --p-inner-2: #7E5372;
  --p-heart-0: #FFFAFC;  --p-heart-1: #F6E7EF;  --p-heart-2: #E6CCDD;
  --p-blush-0: #FDF3F6;  --p-blush-1: #F1DBE4;  --p-blush-2: #DEBECD;
  --p-button-0: #E5C88C; --p-button-1: #BE9548; --p-button-2: #7E5B22;

  --core: #7E4E70;
  --core-hi: #FBF1F6;
  --core-line: #4C2A43;

  --ln-outer: #3E1F36;
  --ln-mid: #522C48;
  --ln-inner: #7A5070;
  --ln-heart: #A98BA0;

  --wisp: #8A5C7C;
  --wisp-sage: #6E9B83;

  --aur-1: #B98FAC;
  --aur-2: #E0C6D6;
  --aur-3: #A6C2B0;
  --halo: #D9BCCE;
}

.flower .wash {
  opacity: var(--o, 1);
}

.flower .ground .rib1 { opacity: var(--aur-o1); }
.flower .ground .rib2 { opacity: var(--aur-o2); }
.flower .ground .rib3 { opacity: var(--aur-o3); }
.flower .ground .halo { opacity: var(--halo-o); }

.flower .lines { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flower .rib   { stroke-width: var(--w-rib); }
.flower .edge  { stroke-width: var(--w-edge); }

.flower .l-outer  { stroke: var(--ln-outer);  opacity: 0.13; }
.flower .l-mid    { stroke: var(--ln-mid);    opacity: 0.14; }
.flower .l-inner  { stroke: var(--ln-inner);  opacity: 0.17; }
.flower .l-heart  { stroke: var(--ln-heart);  opacity: 0.26; }

.flower .core-ticks {
  fill: none;
  stroke: var(--core-line);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.22;
}

.flower .wisp {
  fill: none;
  stroke-linecap: round;
}
.flower .wisps { opacity: 0.9; }

.flower .grain { opacity: var(--grain-o); }

.flower .petal { transform-origin: var(--ox) var(--oy); }

.flower.is-armed .ly-outer  .petal { transform: rotate(-21deg) scale(0.14); opacity: 0; }
.flower.is-armed .ly-mid    .petal { transform: rotate(-17deg) scale(0.15); opacity: 0; }
.flower.is-armed .ly-inner  .petal { transform: rotate(-14deg) scale(0.17); opacity: 0; }
.flower.is-armed .ly-heart  .petal { transform: rotate(-11deg) scale(0.19); opacity: 0; }
.flower.is-armed .ly-button .petal { transform: rotate(-8deg)  scale(0.22); opacity: 0; }

.flower.is-armed .ground,
.flower.is-armed .grain,
.flower.is-armed .lines,
.flower.is-armed .core,
.flower.is-armed .core-ticks { opacity: 0; }

.flower.is-armed .wisp { stroke-dasharray: 100; stroke-dashoffset: 100; }

@keyframes g2-open-outer  { from { transform: rotate(-21deg) scale(0.14); opacity: 0; }
                            30%  { opacity: var(--o, 1); }
                            to   { transform: none; opacity: var(--o, 1); } }
@keyframes g2-open-mid    { from { transform: rotate(-17deg) scale(0.15); opacity: 0; }
                            30%  { opacity: var(--o, 1); }
                            to   { transform: none; opacity: var(--o, 1); } }
@keyframes g2-open-inner  { from { transform: rotate(-14deg) scale(0.17); opacity: 0; }
                            30%  { opacity: var(--o, 1); }
                            to   { transform: none; opacity: var(--o, 1); } }
@keyframes g2-open-heart  { from { transform: rotate(-11deg) scale(0.19); opacity: 0; }
                            30%  { opacity: var(--o, 1); }
                            to   { transform: none; opacity: var(--o, 1); } }
@keyframes g2-open-button { from { transform: rotate(-8deg) scale(0.22); opacity: 0; }
                            30%  { opacity: var(--o, 1); }
                            to   { transform: none; opacity: var(--o, 1); } }

@keyframes g2-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes g2-in   { from { opacity: 0; } to { opacity: var(--fo, 1); } }

@keyframes g2-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes g2-drift   { 0%, 100% { transform: rotate(-0.55deg); }
                        50%      { transform: rotate(0.55deg); } }

.flower.is-armed.is-bloomed .petal,
.flower.is-armed.is-bloomed .wisp,
.flower.is-armed.is-bloomed .ground,
.flower.is-armed.is-bloomed .grain,
.flower.is-armed.is-bloomed .lines,
.flower.is-armed.is-bloomed .core,
.flower.is-armed.is-bloomed .core-ticks {
  animation-delay: calc(var(--d, 0s) - var(--freeze, 0s));
  animation-fill-mode: both;
}

.flower.is-armed.is-bloomed .petal {
  animation-timing-function: cubic-bezier(0.17, 0.88, 0.25, 1.10);
}
.flower.is-armed.is-bloomed .ly-outer  .petal { animation-name: g2-open-outer;  animation-duration: 1.15s; }
.flower.is-armed.is-bloomed .ly-mid    .petal { animation-name: g2-open-mid;    animation-duration: 1.02s; }
.flower.is-armed.is-bloomed .ly-inner  .petal { animation-name: g2-open-inner;  animation-duration: 0.90s; }
.flower.is-armed.is-bloomed .ly-heart  .petal { animation-name: g2-open-heart;  animation-duration: 0.80s; }
.flower.is-armed.is-bloomed .ly-button .petal { animation-name: g2-open-button; animation-duration: 0.62s; }

.flower.is-armed.is-bloomed .ly-outer .petal { animation-timing-function: cubic-bezier(0.16, 0.9, 0.22, 1.14); }

.flower.is-armed.is-bloomed .wisp {
  animation-name: g2-draw;
  animation-duration: 1.35s;
  animation-timing-function: cubic-bezier(0.30, 0.62, 0.24, 1);
}

.flower.is-armed.is-bloomed .ground {
  animation-name: g2-in; animation-duration: 1.25s;
  animation-timing-function: ease-out; --d: 0s;
}
.flower.is-armed.is-bloomed .core {
  animation-name: g2-in; animation-duration: 1.05s;
  animation-timing-function: ease-out; --d: 0.05s;
}
.flower.is-armed.is-bloomed .lines,
.flower.is-armed.is-bloomed .core-ticks,
.flower.is-armed.is-bloomed .grain {
  animation-name: g2-in; animation-duration: 0.90s;
  animation-timing-function: ease-out; --d: 4.30s;
}
.flower.is-armed.is-bloomed .l-outer    { --fo: 0.13; }
.flower.is-armed.is-bloomed .l-mid      { --fo: 0.14; }
.flower.is-armed.is-bloomed .l-inner    { --fo: 0.17; }
.flower.is-armed.is-bloomed .l-heart    { --fo: 0.26; }
.flower.is-armed.is-bloomed .core-ticks { --fo: 0.22; }
.flower.is-armed.is-bloomed .grain      { --fo: var(--grain-o); }

.flower.is-bloomed {
  animation: g2-drift 17s ease-in-out 5.6s infinite;
  transform-origin: 50% 50%;
}
.flower.is-bloomed .wisps {
  animation: g2-breathe 15.4s ease-in-out 5.9s infinite;
}

.flower.is-frozen,
.flower.is-frozen .petal,
.flower.is-frozen .wisp,
.flower.is-frozen .wisps,
.flower.is-frozen .ground,
.flower.is-frozen .grain,
.flower.is-frozen .lines,
.flower.is-frozen .core,
.flower.is-frozen .core-ticks { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .flower.is-armed .ly-outer  .petal,
  .flower.is-armed .ly-mid    .petal,
  .flower.is-armed .ly-inner  .petal,
  .flower.is-armed .ly-heart  .petal,
  .flower.is-armed .ly-button .petal { transform: none; opacity: var(--o, 1); }

  .flower.is-armed .ground,
  .flower.is-armed .core { opacity: 1; }
  .flower.is-armed .grain { opacity: var(--grain-o); }
  .flower.is-armed .core-ticks { opacity: 0.22; }
  .flower.is-armed .l-outer { opacity: 0.13; }
  .flower.is-armed .l-mid   { opacity: 0.14; }
  .flower.is-armed .l-inner { opacity: 0.17; }
  .flower.is-armed .l-heart { opacity: 0.26; }
  .flower.is-armed .wisp { stroke-dasharray: none; stroke-dashoffset: 0; }

  .flower, .flower * { animation: none !important; transition: none !important; }
}