@charset "utf-8";

/* SPRING */
:root {
    --darkbase: #324043;
    --dark70: #324043B3;
    --darkbasecontrast: #485F65;
    --mid:#B6C472;
    --mid70:#B6C472B3;
    --mid50: #B6C47280;
    --bright:#619735;
    --light: #DED296;
    --nextseason-dark:#343136;
    --nextseason-mid:#CC899D;
    --nextseason-light:#E6E0D3;
}
.banner{background: linear-gradient(to bottom, #324043 60%, #324043CC 85%, #324043B3 100%);}
.search-tab {background: linear-gradient(to bottom, #324043B3 60%, #324043CC 85%, #324043 100%);}

.bread, .pagetitle {background: linear-gradient(to bottom, #324043 15%,transparent 100%);}
.divider:has(.over-control) {background: linear-gradient(to right, #324043 0%, #232D2F 100%);}

.darkgrad, .tabtop, .tabbot, .ribbon .inner, .ribbon:has(.titlebar) {background: linear-gradient(to right, #324043 0%, #232D2F 100%);}
.midgrad, header .tabtop, .nav-links, .adv-panel:hover
{background: linear-gradient(to bottom, #8FA877 0%, #B6C472 35%, #B6C472 79%, #DED296 100%); }
.brightgrad {background: linear-gradient(to bottom, #FFF36F 0%, #DED296 100%);}

.tabtop:hover, .tabbot:hover, .tabbotrans:hover  {background: linear-gradient(to bottom, #8FA877 0%, #B6C472 35%, #B6C472 79%, #DED296 100%); }

.falling-petal-field {z-index: 100; }
.dandelion-field {z-index: 100; }

/*************** SPRING ELEMENTS ********************/

main{background-image: url('../images/brand/daff1.avif'); background-repeat: no-repeat; background-position: left 10% bottom 0; }
.dandelion-field,.falling-petal-field {display: none ;}

/*************** BLOSSOM BURST ********************/
.petal-container {position: absolute;top: 50%;left: 50%; width: 1px;height: 1px;
  perspective: 2000px; display: none; overflow: visible;}
.petal-container.active {display: block;}
.petal {position: absolute; width: 85px; height: 85px;background-image: url('../images/brand/Wpetal.png');
  background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; will-change: transform;}
.active .petal {animation: organicBurst var(--duration) ease-out forwards, wildTumble var(--tumbleDuration) ease-in-out infinite alternate;}
@keyframes organicBurst { 0% { opacity: 1;transform: translate(0, 0) scale(0.8) rotateZ(0deg);}
  100% {opacity: 1; transform: translate(calc(var(--x) + var(--curve)), var(--y)) rotateZ(var(--r)) scale(1.1); }}
@keyframes wildTumble {0% { transform: rotateX(0deg) rotateY(0deg); }  100% { transform: rotateX(var(--rotX)) rotateY(var(--rotY)); }}

/*************** FLOATING DANDELION SEEDS  ********************/
.dandelion-field {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none !important;}
.d-seed {position: absolute; width: 45px; height: 60px; background-image: url('../images/brand/oneseedc.svg');
  background-size: contain; background-repeat: no-repeat; opacity: 0; will-change: transform;}
.seed-float {animation: seedDiagonalTravel var(--duration) linear forwards;}
.seed-wave {display: block; animation: organicBreeze var(--waveDuration) ease-in-out infinite alternate;}
@keyframes seedDiagonalTravel { 0% {opacity: 0; left: -100px; top: var(--startY);}
  15% { opacity: 0.5;}
  85% {opacity: 0.5;}
  100% {opacity: 0; left: 110vw;top: var(--targetY); }}
@keyframes organicBreeze {0% { transform: translateY(-25px) rotate(-8deg); }
  100% { transform: translateY(25px) rotate(8deg); }}

/*************** OCCASIONAL FALLING PETALS ********************/
.falling-petal-field {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;  overflow: hidden;pointer-events: none !important;}
.petal-stray { position: absolute; width: 60px;  height: 60px; background-image: url('../images/brand/Wpetal.png');
  background-size: contain; background-repeat: no-repeat; will-change: transform;}
.stray-fall { animation: petalVertical var(--duration) linear forwards,
    petalSway var(--swaySpeed) ease-in-out infinite alternate,petalFlip var(--flipSpeed) ease-in-out infinite alternate;}
@keyframes petalVertical {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 110%; opacity: 0; }}
@keyframes petalSway {
  from { margin-left: -80px; }
  to { margin-left: 80px; }}
@keyframes petalFlip {
  from { transform: rotateZ(0deg) rotateX(0deg); }
  to { transform: rotateZ(var(--zRot)) rotateX(180deg); }}
.petal-container{pointer-events: none !important;}

@media (min-width: 1000px)
{
  .dandelion-field, .falling-petal-field {display:block ;}
}