/*
 * Visual skin for the Fart instrument.
 * Brown launch control, McButtface theatrics, and the knobs of shame.
 *
 * Scoped to the Fart play surface (#instrument-stage) and its control grid
 * (#instrument-controls). The lab shell in style.css owns layout, tokens,
 * masthead, action bar, panel chrome, and recording UI.
 *
 * Animation classes (.lunge-out-*, .jiggle-*, .is-active on ripple) are toggled
 * by fart.js to match press-and-hold audio playback. McButtface earns his overtime.
 */
#instrument-stage[data-instrument="fart"] {
  display: contents;
}

/* --- FART button (the big brown commit button — handle with care) --- */
/* The round button is the visual and interaction center of this instrument. */
.fart-button {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  width: min(87vw, 24rem);
  aspect-ratio: 1;
  border: 1px solid rgba(138, 90, 52, 0.8);
  border-radius: 50%;
  color: #121610;
  background: var(--brown);
  box-shadow: 0 1rem 2rem var(--shadow), 0 0 0 0.75rem rgba(138, 90, 52, 0.1), inset 0 -1rem 0 rgba(92, 58, 31, 0.35);
  cursor: pointer;
  isolation: isolate;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, width 200ms ease;
}
.fart-button:hover {
  background: #9a653c;
  box-shadow: 0 1.15rem 2.5rem var(--shadow), 0 0 0 0.9rem rgba(138, 90, 52, 0.16), inset 0 -1rem 0 rgba(92, 58, 31, 0.35);
}
.fart-button:active, .fart-button.is-held { transform: scale(0.96); background: var(--brown-deep); box-shadow: 0 0.5rem 1rem var(--shadow), 0 0 0 0.6rem rgba(138, 90, 52, 0.1), inset 0 -0.5rem 0 rgba(92, 58, 31, 0.4); }
.fart-button:focus-visible { outline: 3px solid var(--brown-light); outline-offset: 4px; }
.fart-button .button-ring { position: absolute; inset: 7%; border: 1px solid rgba(18, 22, 16, 0.2); border-radius: 50%; }
.fart-mascot { position: relative; display: block; width: 73%; height: auto; margin: 0 auto; object-fit: contain; pointer-events: none; transform: translate(0, 0); filter: drop-shadow(0 0.35rem 0.6rem rgba(0, 0, 0, 0.28)); }

/* Ripple ring — shockwave for everyone downwind. */
.fart-button .button-ripple { position: absolute; inset: 0; border: 3px solid var(--brown-light); border-radius: 50%; opacity: 0; pointer-events: none; }
.fart-button .button-ripple.is-active { animation: fart-ripple 650ms ease-out; }
@keyframes fart-ripple {
  0% { transform: scale(1); opacity: 0.65; filter: blur(0px); }
  100% { transform: scale(1.6); opacity: 0; filter: blur(7px); }
}

/* --- Mascot hold animations (McButtface lunges; fart.js pulls the strings) --- */
/* Lunges out to the rim, then jiggles in place while the note is held. */
@keyframes fart-lunge-out-right {
  0% { transform: translate(0, 0); }
  40% { transform: translate(31%, 2%); }
  100% { transform: translate(29%, 17%); }
}
@keyframes fart-lunge-out-left {
  0% { transform: translate(0, 0); }
  40% { transform: translate(-31%, 2%); }
  100% { transform: translate(-29%, 17%); }
}
@keyframes fart-jiggle-right {
  0% { transform: translate(29%, 17%) rotate(0deg) scale(1); }
  20% { transform: translate(32%, 14%) rotate(4deg) scale(1.03); }
  40% { transform: translate(25%, 19%) rotate(-3deg) scale(0.97); }
  60% { transform: translate(31%, 15%) rotate(3deg) scale(1.02); }
  80% { transform: translate(27%, 18%) rotate(-4deg) scale(0.98); }
  100% { transform: translate(29%, 17%) rotate(0deg) scale(1); }
}
@keyframes fart-jiggle-left {
  0% { transform: translate(-29%, 17%) rotate(0deg) scale(1); }
  20% { transform: translate(-32%, 14%) rotate(-4deg) scale(1.03); }
  40% { transform: translate(-25%, 19%) rotate(3deg) scale(0.97); }
  60% { transform: translate(-31%, 15%) rotate(-3deg) scale(1.02); }
  80% { transform: translate(-27%, 18%) rotate(4deg) scale(0.98); }
  100% { transform: translate(-29%, 17%) rotate(0deg) scale(1); }
}
.fart-mascot.lunge-out-right { animation: fart-lunge-out-right 240ms ease-out forwards; }
.fart-mascot.lunge-out-left { animation: fart-lunge-out-left 240ms ease-out forwards; }
.fart-mascot.jiggle-right { animation: fart-jiggle-right 110ms linear infinite; }
.fart-mascot.jiggle-left { animation: fart-jiggle-left 110ms linear infinite; }

/* --- Fart-specific control tweaks --- */
/* Cheek Clapz speed slider: no clap toggle, no clap for you */
body[data-instrument="fart"] #instrument-controls .control-effect:has(#cheekClapz:not(:checked)) #cheekClapzSpeed {
  opacity: 0.45;
  pointer-events: none;
}

/* Sphincter Shift bipolar slider — brown = dive, green = whistle. You know the drill. */
body[data-instrument="fart"] #instrument-controls input[type="range"].bipolar {
  background: linear-gradient(
    to right,
    var(--brown) 0%,
    var(--brown-deep) 48%,
    var(--line) 48%,
    var(--line) 52%,
    var(--brown-deep) 52%,
    var(--green) 100%
  );
}
body[data-instrument="fart"] #instrument-controls input[type="range"].bipolar::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--brown) 70%, var(--panel)) 0%,
    color-mix(in srgb, var(--brown-deep) 55%, var(--panel)) 47%,
    var(--green-light) 47%,
    var(--green-light) 53%,
    color-mix(in srgb, var(--brown-deep) 55%, var(--panel)) 53%,
    color-mix(in srgb, var(--green) 55%, var(--panel)) 100%
  );
}
body[data-instrument="fart"] #instrument-controls input[type="range"].bipolar::-moz-range-track {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--brown) 70%, var(--panel)) 0%,
    color-mix(in srgb, var(--brown-deep) 55%, var(--panel)) 47%,
    var(--green-light) 47%,
    var(--green-light) 53%,
    color-mix(in srgb, var(--brown-deep) 55%, var(--panel)) 53%,
    color-mix(in srgb, var(--green) 55%, var(--panel)) 100%
  );
}

.share-note { max-width: 42rem; margin: 1.5rem auto 0; color: var(--muted); font-size: 0.78rem; }
.share-note strong { color: var(--ink); }

/* --- Responsive: mobile panel-open (squish the throne, keep it visible) --- */
@media (max-width: 759.98px) {
  body.panel-open .fart-button { width: min(57vw, 16.5rem); }
}

/* --- Short viewport tweaks (for cramped stalls and small screens) --- */
@media (max-height: 800px) {
  .fart-button { width: min(75vw, 21rem); }
}