/* =========================================================================
   UDDER NONSENSE — the delights. Site-wide, small, on the same tokens.

   Nothing here invents a colour, a font or a spacing value: it all comes from
   udder.css, which stays untouched. See DESIGN.md.

     1. The Barn Bell (moo + the camp tally)
     2. The Gate Clock (countdown to gates open)
     3. THE STAMPEDE (the easter egg)
   ========================================================================= */

/* ==================== 0. ONE SHARED-SURFACE CORRECTION ================= *
 * Found while shooting the phone view: at 640px and under, the masthead has
 * 8px of top padding and `.masthead-mark` is set at line-height 1. Retro Star's
 * capitals overshoot a 1.0 line box, so the top of "UDDER NONSENSE" was being
 * clipped by the edge of the viewport on every page.
 *
 * This lives HERE rather than in udder.css on purpose: fun.css loads after it
 * on every page, so the fix is site-wide, but three wave-2 lanes are not all
 * editing the same shared stylesheet. Move it into udder.css §8 when the waves
 * are merged.                                                                */
@media (max-width: 640px) {
  .masthead { padding-top: calc(var(--s-4) + env(safe-area-inset-top)); }
  .masthead-mark { line-height: 1.15; }
}

/* ============================= 1. THE BARN BELL ======================== */

.barn-bell {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index: 70;

  display: flex;
  align-items: center;
  gap: var(--s-2);
  /* Deliberately compact: it floats over the page, so every extra pixel of it
     is a pixel of somebody's content it is sitting on. */
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  max-width: 13rem;

  color: var(--cream);
  background: var(--midnight);
  border: var(--rule) solid var(--midnight);
  border-radius: var(--radius-pill);
  box-shadow: 5px 5px 0 var(--udder-pink);
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--dur-base) var(--ease-hose),
    box-shadow var(--dur-base) var(--ease-hose);
}
.barn-bell:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 8px 8px 0 var(--udder-pink);
}
.barn-bell:active {
  transform: translate3d(2px, 2px, 0) scale(0.97, 1.03);
  box-shadow: 2px 2px 0 var(--udder-pink);
  transition-duration: 90ms;
}

.bell-glyph {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--milk);
  border-radius: 50%;
  transform-origin: 50% 12%;
}
.bell-glyph svg { width: 26px; height: 26px; color: var(--midnight); }

.barn-bell.is-rung .bell-glyph { animation: bell-swing 620ms var(--ease-hose); }
@keyframes bell-swing {
  0%   { transform: rotate(0deg) scale(1, 1); }
  18%  { transform: rotate(-19deg) scale(1.08, 0.92); }
  46%  { transform: rotate(15deg) scale(0.94, 1.06); }
  72%  { transform: rotate(-7deg) scale(1.02, 0.98); }
  100% { transform: rotate(0deg) scale(1, 1); }
}

.bell-text {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--dusty-rose);
}
.bell-text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--udder-pink);
}

/* ============================= 2. THE GATE CLOCK ======================= */

.gate-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-6) 0 0;
  background: var(--midnight);
  color: var(--cream);
  border-radius: var(--radius-in);
  box-shadow: 6px 6px 0 var(--udder-pink);
}
.gate-clock-label {
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--udder-pink);
  margin: 0;
}
.gate-clock-units { display: flex; gap: var(--s-4); margin-left: auto; }
.gate-unit { text-align: center; min-width: 3.5rem; }
.gate-unit b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--milk);
  font-variant-numeric: tabular-nums lining-nums;
}
.gate-unit span {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dusty-rose);
}
.gate-clock-open {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--udder-pink);
  margin: 0;
}
.gate-clock[data-state='open'] .gate-clock-units { display: none; }

/* ============================== 3. THE STAMPEDE ======================== */

.stampede {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.stampede-cow {
  position: absolute;
  left: -22vw;
  bottom: calc(4vh + var(--lane) * 7vh);
  width: var(--size);
  animation: gallop 2.4s var(--delay) cubic-bezier(.42, 0, .58, 1) forwards;
}
.stampede-cow svg { width: 100%; height: auto; }

@keyframes gallop {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1); }
  8%   { transform: translate3d(10vw, -14px, 0) scale(0.94, 1.08); }
  16%  { transform: translate3d(20vw, 0, 0) scale(1.08, 0.92); }
  24%  { transform: translate3d(30vw, -14px, 0) scale(0.94, 1.08); }
  32%  { transform: translate3d(40vw, 0, 0) scale(1.08, 0.92); }
  40%  { transform: translate3d(50vw, -14px, 0) scale(0.94, 1.08); }
  48%  { transform: translate3d(60vw, 0, 0) scale(1.08, 0.92); }
  56%  { transform: translate3d(70vw, -14px, 0) scale(0.94, 1.08); }
  64%  { transform: translate3d(80vw, 0, 0) scale(1.08, 0.92); }
  72%  { transform: translate3d(90vw, -14px, 0) scale(0.94, 1.08); }
  100% { transform: translate3d(130vw, 0, 0) scale(1, 1); }
}

.stampede-card {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  margin: 0;
  padding: var(--s-4) var(--s-7);
  font-family: var(--font-display);
  font-size: var(--step-4);
  text-transform: uppercase;
  text-align: center;
  color: var(--midnight);
  background: var(--cream);
  border: var(--rule) solid var(--midnight);
  border-radius: var(--radius-in);
  box-shadow: 8px 8px 0 var(--udder-pink);
  animation: card-punch 3s var(--ease-hose) forwards;
}
@keyframes card-punch {
  0%   { opacity: 0; transform: scale(0.2) rotate(-6deg); }
  10%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
  16%  { transform: scale(1) rotate(0deg); }
  84%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.86); }
}

/* ======================= PREFERS-REDUCED-MOTION ======================== */

@media (prefers-reduced-motion: reduce) {
  .barn-bell:hover,
  .barn-bell:active { transform: none !important; }
  .barn-bell.is-rung .bell-glyph { animation: none !important; }
  .stampede-cow {
    left: auto;
    right: calc(4vw + var(--lane) * 11vw);
    animation: none !important;
  }
  .stampede-card { animation: none !important; opacity: 1; }
}

/* ============================== RESPONSIVE ============================= */

@media (max-width: 640px) {
  .barn-bell {
    right: var(--s-3);
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
    gap: var(--s-2);
  }
  .bell-glyph { width: 40px; height: 40px; }
  .bell-text { font-size: 0.58rem; letter-spacing: 0.12em; }
  .bell-text b { font-size: var(--step-0); }

  .gate-clock { gap: var(--s-3); padding: var(--s-4); }
  .gate-clock-units { margin-left: 0; width: 100%; justify-content: space-between; gap: var(--s-2); }
  .gate-unit { min-width: 0; flex: 1; }
  .gate-unit b { font-size: var(--step-2); }
  .gate-unit span { font-size: 0.55rem; letter-spacing: 0.12em; }
}