/**
 * Hero — the tagline, the animated REC-IKL-ART logo, and the festival dates.
 *
 * The logo is a single SVG whose three word-parts (rec / ikl / art) are
 * animated independently: they fly in from off-canvas and settle into place,
 * then rest for the remainder of the loop. Timing/size come from theme tokens
 * so editors can tune them (see reciklart_preprocess_html()).
 */
/* Start the hero a little below the top of the page. Viewport-relative so it
 * scales with screen height; start conservative (5vh) and bump toward 10vh to
 * taste. Revert if it fights the logo's negative-margin overlap. */
.reciklart-hero { margin-top: 5vh; }

.reciklart-hero__tagline { padding: 3rem; text-align: right; }
.reciklart-hero__tagline .h1-reciklart { margin-left: 10vw; }
.reciklart-hero__dates { padding: 3rem; text-align: left; }
.reciklart-hero__dates .h1-reciklart { margin-right: 10vw; }

.h1-reciklart {
  font-family: var(--hero-title-font);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  color: var(--hero-title-color);
  line-height: 1;
  word-break: break-word;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .h1-reciklart { font-size: 12vw; }
}

/* Animated REC-IKL-ART logo */
.reciklart-logo-animated {
  position: relative;
  z-index: 1;
  margin-top: -12%;
  width: var(--hero-logo-size);
}
.reciklart-logo-animated svg { width: 100%; height: auto; }
.reciklart-logo-animated svg path { fill: var(--color-fg); }

/*
 * Geometry-INDEPENDENT animation. The three parts (.rec/.ikl/.art) each rest at
 * `transform: none` (their authored position) and briefly fly out + snap back,
 * staggered. transform-box:fill-box makes every % relative to each group's OWN
 * box, so any spec-conforming SVG (docs/hero-logo.md) animates proportionally
 * regardless of the parts' sizes/positions — no per-logo retuning.
 */
.reciklart-logo-part {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: var(--hero-duration);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.reciklart-logo-part.rec { animation-name: reciklart-logo-rec; animation-delay: 1s; }
.reciklart-logo-part.ikl { animation-name: reciklart-logo-ikl; animation-delay: 1.1s; }
.reciklart-logo-part.art { animation-name: reciklart-logo-art; animation-delay: 1.2s; }

/*
 * Legacy inline logo only: its authored groups aren't assembled-at-rest, so
 * they need per-part positioning. Kept on the individual translate/scale
 * properties (NOT `transform`) so they compose with — instead of being clobbered
 * by — the animated `transform` above. A spec-compliant uploaded SVG omits the
 * .reciklart-logo--legacy class and rests at its authored position.
 */
.reciklart-logo--legacy .reciklart-logo-part.rec { translate: 2% 5%; scale: 0.8; }
.reciklart-logo--legacy .reciklart-logo-part.ikl { translate: -18% -14%; scale: 1.3; }

@keyframes reciklart-logo-rec {
  0%, 30%, 100% { transform: none; }
  3%            { transform: translate(-40%, 12%) rotate(-20deg); }
}
@keyframes reciklart-logo-ikl {
  0%, 30%, 100% { transform: none; }
  3%            { transform: translate(120%, -160%) rotate(50deg); }
}
@keyframes reciklart-logo-art {
  0%, 30%, 100% { transform: none; }
  3%            { transform: translate(60%, 200%) rotate(-60deg); }
}

@media (prefers-reduced-motion: reduce) {
  .reciklart-logo-part.rec,
  .reciklart-logo-part.ikl,
  .reciklart-logo-part.art { animation: none !important; }
}