@charset "utf-8";

/* SUMMER */

    :root {
    --darkbase: #343136;
    --dark70: #343136B3;
    --darkbasecontrast: #675f6d;
    --mid:#CC899D;
    --mid70:#CC899DB3;
    --mid50: #CC899D80;
    --bright:#BC5E7A;
    --light: #E6E0D3;
    --nextseason-dark:#322F2B;
    --nextseason-mid:#C8A655;
    --nextseason-light:#FFEDC3;
}

.banner{background: linear-gradient(to bottom, #343136 60%, #343136CC 85%, #343136B3 100%);}

.search-tab {background: linear-gradient(to bottom, #343136B3 60%, #343136CC 85%, #343136 100%);}

.bread, .pagetitle {background: linear-gradient(to bottom, #343136 15%,transparent 100%);}
.darkgrad, .tabtop, .tabbot, .ribbon .inner, .ribbon:has(.titlebar), .divider:has(.over-control) {background: linear-gradient(to right, #343136 0%, #231f25 100%);}
.midgrad, header .tabtop, .nav-links, .adv-panel:hover
{background: linear-gradient(to bottom, #CC899D 0%, #CC899D 35%, #CC899D 79%, #CC899D 100%); }
.brightgrad {background: linear-gradient(to bottom, #FFF36F 0%, #DED296 100%);}

.tabtop:hover, .tabbot:hover, .tabbotrans:hover  {background: linear-gradient(to bottom, #CC899D 0%, #CC899D 35%, #bb96b8 79%, #E6E0D3 100%); }

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

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

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

/*************** 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/bubble.png');
  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(calc(var(--waveAmp, 25px) * -1)) rotate(-8deg); }
  100% { transform: translateY(var(--waveAmp, 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 ;}
}