/* V33 — transparent brand asset, stable hero and subtle Dona foliage. */
.brand-header .brand img {
  content: url("logo-transparent.png");
  mix-blend-mode: normal;
}

.hero {
  align-items: start;
}

.hero .hero-copy {
  align-self: start;
  position: relative;
  z-index: 2;
}

.hero .quiz-card {
  align-self: start;
  position: relative;
  z-index: 3;
}

.dona-leaves {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.dona-leaf {
  position: absolute;
  top: -12%;
  left: var(--leaf-left);
  color: var(--leaf-color);
  font: 400 var(--leaf-size)/1 Georgia, serif;
  opacity: 0;
  transform-origin: center;
  animation: dona-leaf-fall var(--leaf-duration) linear var(--leaf-delay) infinite;
  filter: drop-shadow(0 4px 5px rgba(57, 72, 60, .08));
}

.dona-leaf:nth-child(1) { --leaf-left: 4%;  --leaf-size: 20px; --leaf-duration: 15s; --leaf-delay: -7s;  --leaf-color: #677A70; }
.dona-leaf:nth-child(2) { --leaf-left: 18%; --leaf-size: 15px; --leaf-duration: 18s; --leaf-delay: -13s; --leaf-color: #869C90; }
.dona-leaf:nth-child(3) { --leaf-left: 35%; --leaf-size: 18px; --leaf-duration: 17s; --leaf-delay: -3s;  --leaf-color: #D3AF64; }
.dona-leaf:nth-child(4) { --leaf-left: 51%; --leaf-size: 13px; --leaf-duration: 20s; --leaf-delay: -16s; --leaf-color: #869C90; }
.dona-leaf:nth-child(5) { --leaf-left: 67%; --leaf-size: 18px; --leaf-duration: 16s; --leaf-delay: -10s; --leaf-color: #39483C; }
.dona-leaf:nth-child(6) { --leaf-left: 82%; --leaf-size: 14px; --leaf-duration: 19s; --leaf-delay: -5s;  --leaf-color: #D3AF64; }
.dona-leaf:nth-child(7) { --leaf-left: 94%; --leaf-size: 19px; --leaf-duration: 17s; --leaf-delay: -15s; --leaf-color: #677A70; }

@keyframes dona-leaf-fall {
  0%   { opacity: 0; transform: translate3d(0, -18px, 0) rotate(-25deg); }
  12%  { opacity: .22; }
  50%  { transform: translate3d(28px, 55vh, 0) rotate(155deg); }
  88%  { opacity: .18; }
  100% { opacity: 0; transform: translate3d(-18px, 112vh, 0) rotate(340deg); }
}

@media (max-width: 800px) {
  .dona-leaf:nth-child(even) { display: none; }
  .dona-leaf { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dona-leaves { display: none; }
}