/* Flowers travel behind the demo card, keeping its text and controls clear. */
#heroDemo .tt-invite-atmosphere::before,
#heroDemo .tt-invite-atmosphere::after {display:none;}
.demo-flower-field {position:absolute;inset:0;overflow:hidden;pointer-events:none;--demo-petal:#b5d3e9;}
#heroDemo[data-appearance="dark"] .demo-flower-field {--demo-petal:#9cbcd4;}
.demo-flower-halo {inset:42px -14px 78px;z-index:0;--demo-petal:var(--flower);}
.hero-demo>.demo-phone,.hero-demo>.demo-heading,.hero-demo>.demo-controls,.hero-demo>.demo-hint {position:relative;z-index:1;}
.demo-flower-path {position:absolute;top:0;height:100%;width:var(--flower-size);animation:demo-flower-fall var(--flower-fall-time) linear infinite;}
.demo-flower-drift {display:block;width:var(--flower-size);height:var(--flower-size);animation:demo-flower-sway var(--flower-sway-time) ease-in-out infinite;}
.demo-falling-flower {--petal:var(--demo-petal);width:100%;height:100%;opacity:var(--flower-opacity);animation:demo-flower-turn var(--flower-turn-time) linear infinite;}
.demo-flower-path:nth-child(5) .demo-falling-flower {--petal:color-mix(in srgb,var(--invite-accent) 50%,var(--invite-glow));}
.hero-flower-one {--flower-rest-angle:-15deg;animation:demo-flower-float 10s ease-in-out infinite;}
.demo-flower {--flower-rest-angle:16deg;animation:demo-flower-float 8s ease-in-out -3s infinite;}
.hero-inner[data-flower-motion="paused"] .demo-flower-path,
.hero-inner[data-flower-motion="paused"] .demo-flower-drift,
.hero-inner[data-flower-motion="paused"] .demo-falling-flower,
.hero-inner[data-flower-motion="paused"] .hero-flower-one,
.hero-inner[data-flower-motion="paused"] .demo-flower {animation-play-state:paused;}
.demo-controls {flex-wrap:wrap;}
.demo-motion {width:35px;padding:0;display:grid;place-items:center;}
.demo-motion-icon {position:relative;display:block;width:12px;height:12px;}
.demo-motion-icon::before,.demo-motion-icon::after {content:'';position:absolute;top:1px;width:3px;height:10px;border-radius:1px;background:currentColor;}
.demo-motion-icon::before {left:1px;}
.demo-motion-icon::after {right:1px;}
.demo-motion[data-paused="true"] .demo-motion-icon::before {left:3px;top:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid currentColor;border-radius:0;background:none;}
.demo-motion[data-paused="true"] .demo-motion-icon::after {display:none;}
@keyframes demo-flower-fall {
  0% {transform:translate3d(0,-38px,0);opacity:0;}
  8% {opacity:1;}
  86% {opacity:1;}
  100% {transform:translate3d(0,calc(100% + 38px),0);opacity:0;}
}
@keyframes demo-flower-sway {
  0%,100% {transform:translate3d(calc(-1 * var(--flower-drift)),0,0);}
  50% {transform:translate3d(var(--flower-drift),0,0);}
}
@keyframes demo-flower-turn {
  from {transform:rotate(var(--flower-angle));}
  to {transform:rotate(calc(var(--flower-angle) + 360deg));}
}
@keyframes demo-flower-float {
  0%,100% {transform:translateY(0) rotate(var(--flower-rest-angle));}
  50% {transform:translateY(-7px) rotate(calc(var(--flower-rest-angle) + 7deg));}
}
@media(prefers-reduced-motion:reduce) {
  .demo-flower-field,.demo-motion {display:none!important;}
  .hero-flower-one,.demo-flower {animation:none!important;}
  #heroDemo .tt-invite-atmosphere::before {display:block;}
}