/* ═══════════════════════════════════════════════════════════════
   HARMONY — YEEHAW MODE
   Hidden easter egg.  Subtle western-industrial remix triggered by
   5 logo clicks, footer toggle, or hamburger menu toggle.
   Everything below is namespaced with .yeehaw-* classes (or gated
   behind body.yeehaw) so nothing ever runs when the mode is off.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Yeehaw toggle: lives only in the footer as the 4th link
   after Security.  It's an <a> element with the .yeehaw-toggle
   class, so it automatically inherits the full `.footer-legal a`
   treatment (mono, uppercase, 10.5px, 0.22em, rgba(255,255,255,0.45))
   — no custom styling needed.  Only add a tiny tint when active so
   it's visually distinguishable from Privacy / Terms / Security. */
.yeehaw-toggle { cursor: pointer; }
body.yeehaw .yeehaw-toggle { color: #C26B36; }
body.yeehaw .yeehaw-toggle:hover,
body.yeehaw .yeehaw-toggle:focus-visible { color: #D48050; }

/* ─── Activation indicator ─── */
.yeehaw-indicator {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 14px);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #B2561F;
  background: rgba(246,239,225,0.94);
  border: 1px solid rgba(194,87,45,0.35);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(.2,.7,.2,1),
    transform 0.45s cubic-bezier(.2,.7,.2,1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px -10px rgba(16,25,43,0.28);
  white-space: nowrap;
}
.yeehaw-indicator.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Boot icon inside the indicator — hops when turning ON, tips over
   and droops when turning OFF. */
.yh-ind-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  transform-origin: 40% 95%;
}
.yh-ind-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.yeehaw-indicator.is-on .yh-ind-icon {
  animation: yh-boot-hop 0.85s cubic-bezier(.3,1.4,.4,1) 0.05s 1;
}
.yeehaw-indicator.is-off .yh-ind-icon {
  animation: yh-boot-tip 1.2s cubic-bezier(.4,.0,.6,1) 0.1s 1 forwards;
}
@keyframes yh-boot-hop {
  0%   { transform: translateY(10px) rotate(-14deg) scale(0.75); opacity: 0; }
  28%  { transform: translateY(-10px) rotate(10deg) scale(1.1); opacity: 1; }
  48%  { transform: translateY(0) rotate(-6deg) scale(1); }
  68%  { transform: translateY(-4px) rotate(3deg) scale(1); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes yh-boot-tip {
  0%   { transform: translateY(0) rotate(0) scale(1); opacity: 1; filter: saturate(1); }
  35%  { transform: translateY(1px) rotate(-28deg) scale(1); opacity: 1; filter: saturate(0.8); }
  70%  { transform: translateY(6px) rotate(-70deg) scale(0.96); opacity: 0.85; filter: saturate(0.55); }
  100% { transform: translateY(14px) rotate(-92deg) scale(0.92); opacity: 0.6; filter: saturate(0.4); }
}
.yeehaw-indicator.is-off { color: rgba(178,86,31,0.6); }
.yeehaw-indicator.is-off .yh-ind-text { opacity: 0.85; }

/* ─── Activation burst.  Stronger, denser, more celebratory when
       Yeehaw Mode turns ON.  Three layered effects fire together
       (all tied to the indicator pill's anchor point so nothing
       becomes a separate page-level scene):
         1) radial sparkles in two sizes (copper sparks + dust puffs)
         2) expanding shockwave ring in dusty copper
         3) brief radial screen-warm flash rising from the bottom */
.yeehaw-burst {
  position: fixed;
  left: 50%;
  bottom: calc(32px + 18px);    /* centered on the indicator pill */
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}
.yh-spark-radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #E7B070;
  box-shadow: 0 0 10px rgba(231,176,112,0.9);
  animation: yh-burst 1.05s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Bigger, blurrier, dustier particle variant — mixed in with the
   sparks to give the burst real dust-cloud weight. */
.yh-spark-radial.is-dust {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: rgba(178, 148, 112, 0.65);
  box-shadow: 0 0 22px rgba(178, 148, 112, 0.45);
  filter: blur(3px);
  animation-duration: 1.25s;
}
.yh-spark-radial.is-copper {
  background: #C26B36;
  box-shadow: 0 0 14px rgba(194, 107, 54, 0.85);
}
@keyframes yh-burst {
  0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
  12%  { opacity: 1; transform: translate(calc(var(--bx, 0) * 0.18), calc(var(--by, 0) * 0.18)) scale(1.1); }
  100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0); opacity: 0; }
}

/* Shockwave ring — a single expanding copper outline that bursts
   outward from the indicator's center.  One-shot, forwards fill. */
.yeehaw-shockwave {
  position: fixed;
  left: 50%;
  bottom: calc(32px + 18px);
  width: 20px; height: 20px;
  margin-left: -10px;
  margin-bottom: -10px;
  pointer-events: none;
  z-index: 9997;
  border: 3px solid rgba(194, 107, 54, 0.55);
  border-radius: 50%;
  transform: translate(0, 0);
  box-sizing: border-box;
  animation: yh-shockwave 1.15s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Second, thinner inner ring for a stacked-ring feel. */
.yeehaw-shockwave.is-inner {
  border-color: rgba(231, 176, 112, 0.75);
  border-width: 2px;
  animation-duration: 0.9s;
  animation-delay: 0.06s;
}
@keyframes yh-shockwave {
  0%   { width: 24px; height: 24px; margin-left: -12px; margin-bottom: -12px; border-width: 3px; opacity: 0.95; }
  40%  { opacity: 0.7; }
  100% { width: 640px; height: 640px; margin-left: -320px; margin-bottom: -320px; border-width: 1px; opacity: 0; }
}

/* Screen-warm flash — a brief copper glow rising from the bottom
   of the viewport that fades out in under a second.  Gives the
   activation moment a site-wide "pulse" without creating a new
   scene. */
.yeehaw-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  background: radial-gradient(
    ellipse 70% 55% at 50% 95%,
    rgba(231, 176, 112, 0.28) 0%,
    rgba(231, 176, 112, 0.10) 35%,
    rgba(231, 176, 112, 0) 65%
  );
  animation: yh-flash 0.85s ease-out forwards;
}
@keyframes yh-flash {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Cursor sparkles + dust kick-up ─── */
.yeehaw-spark,
.yeehaw-dust {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
}
.yeehaw-spark {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #E7B070;
  box-shadow: 0 0 8px rgba(231,176,112,0.75);
  animation: yh-spark 0.72s ease-out forwards;
}
@keyframes yh-spark {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: scale(0.2) rotate(60deg); opacity: 0; }
}
.yeehaw-dust {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(178,148,112,0.55);
  filter: blur(2px);
  animation: yh-dust 0.9s ease-out forwards;
}
@keyframes yh-dust {
  0%   { transform: translate(0, 0) scale(0.55); opacity: 0.55; }
  100% { transform: translate(var(--dx, 10px), var(--dy, -10px)) scale(1.75); opacity: 0; }
}

/* ─── Cursor: cowboy boot when Yeehaw Mode is on ─── */
body.yeehaw,
body.yeehaw a,
body.yeehaw button,
body.yeehaw input,
body.yeehaw textarea,
body.yeehaw select,
body.yeehaw [role="button"],
body.yeehaw [data-menu-link] {
  /* Hotspot (3, 44) → tip of the boot toe (bottom-left of 41×48
     image) sits at the click point. */
  cursor: url('assets/boot-cursor.png?v=3') 3 44, auto;
}

/* ─── Active-mode subtle accents ─── */
body.yeehaw {
  /* Warm the brand rust slightly toward dusty copper */
  --rust: #C26B36;
}
body.yeehaw .corner-stamp { color: #C26B36 !important; }
body.yeehaw .kicker { color: #C26B36; }

/* A barely-there copper hairline under the masthead when active */
body.yeehaw .masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(194,107,54,0.28) 20%,
    rgba(194,107,54,0.45) 50%,
    rgba(194,107,54,0.28) 80%,
    transparent 100%);
  pointer-events: none;
}

/* ─── Reduced motion: strip animated flourishes, keep the accent
       shift + indicator text intact (those are purely visual). ─── */
@media (prefers-reduced-motion: reduce) {
  .yeehaw-spark,
  .yeehaw-dust,
  .yeehaw-burst,
  .yh-spark-radial,
  .yeehaw-shockwave,
  .yeehaw-flash {
    animation: none !important;
    display: none !important;
  }
  .yh-ind-icon { animation: none !important; }
  .yeehaw-indicator { transition: opacity 0.2s linear; }
}