/* Generated from site/src/styles/components/rookery.css by wordpress/tools/sync-theme-assets.mjs – edit the source, not this copy. */
/*
 * Home: the "Rookery" joke in the first date line – the word shakes, turns red
 * and its "o" flickers through * ! ? ! * into a "c" ("Rockery"), every 12 s.
 * Ported from the Elementor HTML widget on Home (unchanged timings). Paused
 * while off-screen (rookery.js adds .is-paused) and off with reduced motion.
 * WordPress: part of the home template CSS.
 */
.rf-rockery-headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--h-date);
  line-height: 1.05;
  color: #500000;

  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Keep "Rookery Meadow" / "Rockery Meadow" together */
.rf-location-nowrap {
  display: inline-block;
  white-space: nowrap;
}

/* Shake and colour-change only Rookery/Rockery, not Meadow */
.rf-rookery-word {
  display: inline-block;
  white-space: nowrap;

  color: #500000;

  animation:
    rf-rockery-shake 12s infinite,
    rf-rockery-word-colour 12s infinite;

  transform-origin: center center;
}

/* As wide as its widest letter (the o / c, ~0.46em in Anton): the stacked
   characters size the slot, so "Rookery" keeps its normal spacing. */
.rf-morph-slot {
  display: inline-grid;
  grid-template-areas: "char";
  text-align: center;
  vertical-align: baseline;
  line-height: 1;
}

.rf-char {
  grid-area: char;
  display: inline-block;
  opacity: 0;
  transform-origin: center center;
}

/* During the quickfire section, only the animated punctuation character is red */
.rf-char-star1,
.rf-char-bang,
.rf-char-question,
.rf-char-star2,
.rf-char-star3 {
  color: #c5293F;
}

/* The normal o and the c inherit the word colour */
.rf-char-o,
.rf-char-c {
  color: inherit;
}

.rf-char-o {
  animation: rf-show-o 12s infinite;
}

.rf-char-star1 {
  animation: rf-show-star1 12s infinite;
}

.rf-char-bang {
  animation: rf-show-bang 12s infinite;
}

.rf-char-question {
  animation: rf-show-question 12s infinite;
}

.rf-char-star2 {
  animation: rf-show-star2 12s infinite;
}

.rf-char-star3 {
  animation: rf-show-star3 12s infinite;
}

.rf-char-c {
  animation: rf-show-c 12s infinite;
}

@media (max-width: 1200px) {
  .rf-rockery-headline {
    font-size: 26px;
  }
}

@media (max-width: 560px) {
  .rf-rockery-headline {
    font-size: 23px;
  }
}

/* Normal state: Rookery */
@keyframes rf-show-o {
  0%, 49%, 94%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  51%, 92% {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
    filter: blur(1px);
  }
}

/* Fast flash 1: * */
@keyframes rf-show-star1 {
  0%, 50.8%, 52.2%, 100% {
    opacity: 0;
  }

  51%, 52% {
    opacity: 1;
    transform: scale(1.2) rotate(-8deg);
  }
}

/* Fast flash 2: ! */
@keyframes rf-show-bang {
  0%, 52.4%, 53.8%, 100% {
    opacity: 0;
  }

  52.6%, 53.6% {
    opacity: 1;
    transform: scale(1.25) rotate(5deg);
  }
}

/* Fast flash 3: ? */
@keyframes rf-show-question {
  0%, 54%, 55.4%, 100% {
    opacity: 0;
  }

  54.2%, 55.2% {
    opacity: 1;
    transform: scale(1.2) rotate(-7deg);
  }
}

/* Fast flash 4: * */
@keyframes rf-show-star2 {
  0%, 55.6%, 57%, 100% {
    opacity: 0;
  }

  55.8%, 56.8% {
    opacity: 1;
    transform: scale(1.25) rotate(10deg);
  }
}

/* Fast flash 5: * */
@keyframes rf-show-star3 {
  0%, 57.2%, 58.8%, 100% {
    opacity: 0;
  }

  57.4%, 58.6% {
    opacity: 1;
    transform: scale(1.35) rotate(-12deg);
  }
}

/* Final C: Rockery — appears immediately after quickfire */
@keyframes rf-show-c {
  0%, 58.8%, 93%, 100% {
    opacity: 0;
  }

  59%, 91% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/*
  Word colour logic:
  - stays #500000 during Rookery and quickfire
  - switches to #c5293F only once C appears
  - holds red through Rockery
  - fades back quickly when Rookery returns
*/
@keyframes rf-rockery-word-colour {
  0%, 58.8% {
    color: #500000;
  }

  59%, 91% {
    color: #c5293F;
  }

  94%, 100% {
    color: #500000;
  }
}

/* Shake starts as soon as the C appears, then Rockery holds still */
@keyframes rf-rockery-shake {
  0%, 58.8%, 75%, 93%, 100% {
    transform: translateX(0) rotate(0deg);
  }

  59% {
    transform: translateX(-3px) rotate(-1.2deg);
  }

  61% {
    transform: translateX(4px) rotate(1.4deg);
  }

  63% {
    transform: translateX(-4px) rotate(-1.3deg);
  }

  65% {
    transform: translateX(3px) rotate(1deg);
  }

  67% {
    transform: translateX(-3px) rotate(-0.9deg);
  }

  69% {
    transform: translateX(2px) rotate(0.7deg);
  }

  71% {
    transform: translateX(-1px) rotate(-0.3deg);
  }

  73% {
    transform: translateX(1px) rotate(0.2deg);
  }
}

.rf-rockery-headline.is-paused,
.rf-rockery-headline.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rf-rookery-word, .rf-char { animation: none; }
  .rf-char-o { opacity: 1; }
}