/* Minimal styles: rely on theme typography; only layout, SVG sizing, and animation */

/* Two-column layout: left = animation, right = text */
.ws-row { display:flex; gap:1.25rem; align-items:center; flex-direction:row; flex-wrap:nowrap; }
.ws-col { flex:1 1 0; }
.ws-col--media { max-width:560px; padding-bottom:50px; }
/* Keep two columns on all widths (prevent stacking) */
@media (max-width:800px){
  .ws-row { flex-direction:row !important; }
  .ws-col--media { max-width:none; width:100%; }
}

/* Bin SVG wrapper */
.ws-bin { position:relative; display:grid; place-items:center; margin:0 !important; }
.ws-bin-svg { display:block; max-width:540px; width:100%; height:auto; overflow:hidden; }

/* Animate both vector groups (.ws-item) and PNG <image> elements (.ws-can) */
.ws-item, .ws-can {
  opacity:0;
  transform:none;
  animation-duration:7s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:none;
  /* reliable SVG/image transforms */
  transform-box:fill-box; /* preferred */
  transform-origin:50% 0%;
  will-change:transform,opacity;
  pointer-events:none;
}

/* Staggered drops (descriptive + numbered naming schemes) */
.ws-milk{animation-name:wsFallC;animation-delay:4.35s}
.ws-carton{animation-name:wsFallB;animation-delay:2.35s}
.ws-jar{animation-name:wsFallA;animation-delay:.35s}
.ws-can-1{animation-name:wsFallA;animation-delay:.35s}   /* aluminum can: slight right */
.ws-can-2{animation-name:wsFallB;animation-delay:2.35s}  /* steel can: tiny right */
.ws-can-3{animation-name:wsFallC;animation-delay:4.35s}  /* milk jug: slight left */

/* Diagonal falls so items converge toward bin center */
@keyframes wsFallA{ /* slight right; PNG <image> friendly */
  0%   {opacity:0;visibility:hidden;transform:translate(0,-180px);animation-timing-function:linear}
  10%  {opacity:1;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  60%  {transform:translate(22px,280px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  /* HOLD at bottom, visible */
  85%  {transform:translate(24px,300px);opacity:1;visibility:visible;animation-timing-function:linear}
  /* vanish + jump back to top (no tween) */
  85.01%  {opacity:0;visibility:hidden;transform:translate(0,-180px);animation-timing-function:steps(1,start)}
  100% {opacity:0;visibility:hidden;transform:translate(0,-180px);animation-timing-function:linear}
}

@keyframes wsFallB{ /* tiny right */
  0%   {opacity:0;visibility:hidden;transform:translate(0,-190px);animation-timing-function:linear}
  10%  {opacity:1;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  60%  {transform:translate(8px,285px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  85%  {transform:translate(10px,305px);opacity:1;visibility:visible;animation-timing-function:linear}
  85.01%  {opacity:0;visibility:hidden;transform:translate(0,-190px);animation-timing-function:steps(1,start)}
  100% {opacity:0;visibility:hidden;transform:translate(0,-190px);animation-timing-function:linear}
}

@keyframes wsFallC{ /* slight left */
  0%   {opacity:0;visibility:hidden;transform:translate(0,-200px);animation-timing-function:linear}
  10%  {opacity:1;visibility:visible;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  60%  {transform:translate(-26px,292px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  85%  {transform:translate(-28px,312px);opacity:1;visibility:visible;animation-timing-function:linear}
  85.01%  {opacity:0;visibility:hidden;transform:translate(0,-200px);animation-timing-function:steps(1,start)}
  100% {opacity:0;visibility:hidden;transform:translate(0,-200px);animation-timing-function:linear}
}

@media (prefers-reduced-motion: reduce) {
  .ws-item, .ws-can { animation:none; opacity:1; transform:none; }
}

.ws-col--text .ws-h { margin:0 0 .25rem 0; font-weight:600; line-height:1.2; color:#4b8251; }
.ws-col--text .ws-sub { margin:0 0 1rem 0; font-size:1rem; font-weight:400; opacity:.85; }
.ws-col--text .ws-line { margin:.25rem 0; }

.ws-row { margin-top:0; /* remove excessive padding on top */ }

/* Tabs UI */
.ws-tabs{display:flex;gap:.5rem;margin:0 0 .5rem 0;flex-wrap:wrap}
.ws-tab{
  appearance:none;
  background:#fff;
  color:#4b8251;
  text-decoration:underline;
  text-decoration-color:#4b8251;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
  padding:.35rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
  font:inherit;
  line-height:1;
}
.ws-tab.is-active,
.ws-tab:hover{
  background:#4b8251;
  color:#fff;
  text-decoration:none;
}
.ws-view{display:none}
.ws-view.is-active{display:block}