/*
 * HERO · the first screen (js/hero.js)
 * Copy on the left, the moon-as-soundhole guitar on the right.
 */

/*
 * Fraunces stand-ins, sized to Fraunces's width, so body copy wraps the same
 * before and after the web font arrives (no jump on a first visit).
 * base.css's --font-body names these faces, so they serve the whole page.
 * One face per common system serif; the first one installed wins.
 * size-adjust = Fraunces width / that font's width (Times measured: 1.148;
 * Georgia and Noto Serif scaled from Times by their average widths).
 */
@font-face {
  font-family: "Fraunces Fallback Georgia";
  src: local("Georgia");
  size-adjust: 104.6%;
}
@font-face {
  font-family: "Fraunces Fallback Noto";
  src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"), local("Droid Serif"), local("DroidSerif");
  size-adjust: 97%;
}
@font-face {
  font-family: "Fraunces Fallback Times";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif"),
    local("LiberationSerif"), local("Tinos");
  size-adjust: 114.8%;
}

.hero {
  --hero-logo-fs: clamp(6.6rem, 19.5vw, 15.5rem);
  position: relative;
  overflow-x: clip;
  padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(0.25rem, 1vw, 0.75rem);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* ---------- copy ---------- */
/*
 * Eyebrow, logo, name, CTAs. Side by side, the column sits on the floor of the
 * stage, so the CTA row lands level with the bridge and "Strum it" (hero.js lines
 * the button up exactly), with the hint tucked under the rosette.
 */
.hero__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: end;
  display: grid;
  justify-items: start;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  padding-block: 0.5rem clamp(0.5rem, 2.6vw, 2.6rem);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 2.2rem;
  height: 10px;
  border-radius: 2px;
  background: var(--stripe-band);
}
.hero__eyebrow-text {
  min-width: 0;
}
/* lines break between the " · " parts only */
.hero__eyebrow-text > span {
  white-space: nowrap;
}

.hero__title {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  margin: 0;
}

.hero__logo {
  display: flex;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--hero-logo-fs);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-shadow: var(--stripes);
  padding: 0.04em 0.16em 0.16em 0;
  margin-left: -0.04em;
  user-select: none;
  -webkit-user-select: none;
}

.hero__letter {
  display: inline-block;
  transform-origin: 50% 92%;
  animation: hero-drop 0.78s var(--ease-bounce) both;
  animation-delay: calc(var(--i, 0) * 85ms);
  transition: text-shadow 0.25s var(--ease-out), color 0.25s;
}
@media (hover: hover) {
  .hero__letter:hover {
    color: #fffaf0;
    text-shadow: 0.045em 0.045em 0 var(--mustard), 0.09em 0.09em 0 var(--orange), 0.135em 0.135em 0 var(--rust),
      0.18em 0.18em 0 var(--brown);
  }
}
.hero__letter.is-landed {
  animation: none;
}
.hero__letter.is-boing {
  animation: hero-boing 0.62s var(--ease-out);
}

@keyframes hero-drop {
  0% {
    transform: translateY(-0.22em) rotate(-7deg) scale(1.04, 0.96);
  }
  55% {
    transform: translateY(0.04em) rotate(1.5deg) scale(1.06, 0.92);
  }
  78% {
    transform: translateY(-0.03em) rotate(-0.5deg) scale(0.98, 1.03);
  }
  100% {
    transform: none;
  }
}
@keyframes hero-boing {
  0% {
    transform: none;
  }
  25% {
    transform: translateY(-0.13em) rotate(-6deg) scale(0.92, 1.1);
  }
  50% {
    transform: translateY(0.015em) rotate(3deg) scale(1.1, 0.9);
  }
  72% {
    transform: translateY(-0.03em) rotate(-1.5deg) scale(0.98, 1.03);
  }
  100% {
    transform: none;
  }
}

.hero__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  /* about as wide as the VVV above it, like a record-sleeve lockup */
  font-size: clamp(1.55rem, 3.65vw, 3rem);
  line-height: 1.05;
  color: var(--mustard);
  letter-spacing: -0.005em;
  text-shadow: 2px 2px 0 var(--rust);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.9rem;
  margin-top: clamp(0.2rem, 1.9vw, 1.6rem);
}

/* "Est. ~10 yrs ago" sticker, slapped on the corner of the logo */
.hero__est {
  --tilt: 7deg;
  position: absolute;
  /* pinned to the logo's corner: hero.js sets --hero-eyebrow-h, so a wrapping eyebrow pushes it down too */
  top: calc(clamp(2.6rem, 6vw, 3.4rem) + var(--hero-eyebrow-h, 20px) - 20px);
  left: calc(var(--hero-logo-fs) * 1.7);
  width: max-content;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.3s var(--ease-bounce);
}
.hero__est-line {
  display: block;
}
.hero__est-small {
  display: block;
  font-family: var(--font-script);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rust-ink);
}
@media (hover: hover) {
  .hero__est:hover {
    transform: rotate(-4deg) scale(1.08);
  }
}

/* ---------- stage: art, controls, stickers ---------- */
.hero__stage {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  margin-right: calc(-1 * clamp(0px, 4vw, 70px));
}

.hero__art {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 660;
  margin-top: clamp(-3rem, -3vw, -1rem);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.hero__art > * {
  position: absolute;
}
.hero__moonwrap,
.hero__strings,
.hero__ripples {
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__moonwrap > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__moonwrap {
  transform-origin: 50% 43.9%;
  will-change: transform;
}

/* moonbeams: a slow 70s sunburst behind the moon */
.hero__rays {
  left: 50%;
  top: 43.9%;
  width: 165%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 240, 194, 0.085) 0deg 5deg,
    rgba(255, 240, 194, 0) 5deg 15deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  border-radius: 50%;
  animation: hero-spin 160s linear infinite;
  pointer-events: none;
}
.hero__glow {
  left: 50%;
  top: 43.9%;
  width: 118%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 240, 194, 0.5) 0%,
    rgba(255, 220, 160, 0.2) 48%,
    rgba(255, 200, 140, 0.06) 70%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
}
@keyframes hero-spin {
  to {
    rotate: 360deg;
  }
}

/* the checkered ring turns a notch with every strum (js); it never idles, so the moon never repaints */
.hero__mosaic {
  transform-box: view-box;
  transform-origin: 50% 43.9%;
}

/* sound waves leaving the soundhole */
.hero__ripples {
  pointer-events: none;
}
.hero__ripple {
  position: absolute;
  left: 50%;
  top: 43.9%;
  width: 72.5%;
  aspect-ratio: 1;
  margin: -36.25% 0 0 -36.25%;
  border: 3px solid var(--c, var(--mustard));
  border-radius: 50%;
  opacity: 0;
  animation: hero-ripple 1.25s var(--ease-out) forwards;
}
@keyframes hero-ripple {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ---------- strings ---------- */
.hero__strings {
  display: block;
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
}
.hero__art.is-played .hero__strings {
  cursor: crosshair;
}
.hero__str-shadow {
  fill: none;
  stroke: #1e1424;
  stroke-opacity: 0.28;
  stroke-linecap: round;
}
.hero__str-core,
.hero__str-wind,
.hero__str-sheen {
  fill: none;
  stroke-linecap: round;
}
.hero__str-core {
  stroke: #e9e1cf;
  transition: stroke 0.2s;
}
.is-wound > .hero__str-core {
  stroke: #cf9a55;
}
.hero__str-wind {
  stroke: #6b3a1f;
  stroke-opacity: 0.55;
  stroke-dasharray: 1.1 1.5;
}
.hero__str-sheen {
  stroke: #fffaf0;
  stroke-opacity: 0.85;
}
.is-wound > .hero__str-sheen {
  stroke: #ffe3a8;
  stroke-opacity: 0.75;
}
.hero__str-blur {
  fill: #fff0c2;
  stroke: none;
}
.hero__string.is-lit > .hero__str-core {
  stroke: var(--mustard);
}
.hero__str-tail {
  stroke: #e9e1cf;
  stroke-linecap: round;
}
.hero__str-tail.is-wound {
  stroke: #cf9a55;
}

.hero__tune {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--mustard);
  opacity: 0.8;
  transform-box: fill-box;
  transform-origin: 50% 60%;
  transition: fill 0.5s, opacity 0.5s, transform 0.5s var(--ease-out);
}
/* the tuning letter under a string flares when that string rings */
.hero__tune.is-on {
  fill: var(--cream);
  opacity: 1;
  transform: scale(1.35);
  transition: fill 0.05s, opacity 0.05s, transform 0.18s var(--ease-bounce);
}

/* ---------- controls under the moon ---------- */
.hero__controls {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 5.8%; /* js lines the button up with the CTA row exactly */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: min(16rem, 40%);
}
/* cream outline like the gig CTA: mustard belongs to "Hear the tapes" and the starburst */
.hero__strum.btn {
  --btn-bg: rgba(10, 8, 32, 0.55);
  flex: none;
}
.hero__pick {
  display: inline-grid;
  width: 1.15rem;
  height: 1.25rem;
  transform-origin: 50% 20%;
}
.hero__pick svg {
  width: 100%;
  height: 100%;
  fill: var(--rust);
  stroke: var(--ink);
  stroke-width: 2;
}
.hero__strum.is-strum-down .hero__pick {
  animation: hero-pick-down 0.4s var(--ease-out);
}
.hero__strum.is-strum-up .hero__pick {
  animation: hero-pick-up 0.4s var(--ease-out);
}
@keyframes hero-pick-down {
  0% { transform: translateY(-5px) rotate(-18deg); }
  45% { transform: translateY(6px) rotate(14deg); }
  100% { transform: none; }
}
@keyframes hero-pick-up {
  0% { transform: translateY(5px) rotate(14deg); }
  45% { transform: translateY(-6px) rotate(-18deg); }
  100% { transform: none; }
}

.hero__hint {
  order: -1;
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding-right: 1.6rem;
  font-family: var(--font-script);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.12;
  color: var(--cream);
}
.hero__hint::after {
  /* a hand-drawn arrow toward the strings */
  content: "";
  position: absolute;
  right: -0.4rem;
  top: -1.6rem;
  width: 2.2rem;
  height: 2.2rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23f4b33c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 36 C 10 24 18 14 33 8'/%3E%3Cpath d='M24 6 L 34 7.5 L 30 17'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero__hint-more {
  display: block;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--fg-dim);
}

/* ---------- the Nov 14 starburst ---------- */
.hero__gig.sticker {
  --tilt: -10deg;
  position: absolute;
  z-index: 4;
  top: clamp(-0.5rem, 1vw, 1rem);
  left: clamp(-1rem, -1vw, 0rem);
  display: grid;
  place-items: center;
  width: clamp(9.4rem, 14vw, 11.6rem);
  aspect-ratio: 1;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  transition: transform 0.35s var(--ease-bounce);
}
@media (hover: hover) {
  .hero__gig.sticker:hover {
    transform: rotate(-4deg) scale(1.07);
  }
}
.hero__gig.sticker:focus-visible {
  /* the default mustard ring would vanish into a mustard starburst */
  outline: 3px dashed var(--cream);
  outline-offset: 10px;
  border-radius: 50%;
}
.hero__gig.sticker:active {
  transform: rotate(-6deg) scale(0.98);
}
.hero__gig-burst {
  position: absolute;
  inset: -4%;
}
/* two separate spinning layers so the hard shadow always falls down-right */
.hero__gig-burst svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: hero-spin 48s linear infinite;
}
.hero__gig-shadow {
  translate: 8px 8px;
}
.hero__gig-shadow polygon {
  fill: var(--rust);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.hero__gig-face polygon {
  fill: var(--mustard);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.hero__gig-face circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 3 6;
  opacity: 0.5;
}
.hero__gig-text {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  width: 64%;
  line-height: 1;
}
.hero__gig-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--mustard);
  padding: 0.22rem 0.4rem 0.18rem;
  border-radius: 3px;
  margin-bottom: 0.15rem;
}
.hero__gig-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__gig-date {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: calc(var(--gig-date-k, 1) * clamp(1.45rem, 2.2vw, 1.85rem));
  line-height: 0.9;
  white-space: nowrap;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero__gig-what {
  max-width: 5.6rem;
  font-family: var(--font-script);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brown);
  margin-top: 0.2rem;
  text-wrap: balance;
}
/* after the gig it points at the legend: "Legend" is a longer word than "Nov 14" */
.hero__gig.is-evergreen {
  --gig-date-k: 0.84;
}

/*
 * ---------- narrow side by side ----------
 * Just past the stack, the CTAs wrap to two rows and "Strum it" (level with the lower
 * one) leaves no room for the hint under the rosette: it stays for screen readers only.
 */
@media (min-width: 861px) and (max-width: 980px) {
  .hero__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- phone + tablet: stack ---------- */
@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__copy {
    padding-block: 0.5rem;
  }
  .hero__stage {
    justify-self: center;
    width: min(100%, 560px);
    margin-right: 0;
    margin-top: 0.5rem;
  }
  .hero__art {
    width: 100%;
    margin-top: 0;
  }
  .hero__controls {
    position: relative;
    left: auto;
    bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    width: 100%;
    margin-top: 0.25rem;
  }
  .hero__hint {
    order: 0;
    flex: 1 1 11rem;
    max-width: 17rem;
    padding-right: 0;
  }
  .hero__hint::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero {
    --hero-logo-fs: clamp(5.4rem, 36vw, 9rem);
  }
  .hero__est {
    --tilt: 9deg;
    top: calc(4.6rem + var(--hero-eyebrow-h, 40px) - 40px); /* tuned for a two-line eyebrow */
    right: -0.5rem;
    max-width: 6.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.45rem 0.3rem;
  }
  .hero__est-small {
    font-size: 1rem;
  }
  .hero__gig.sticker {
    width: 9rem;
    left: -0.6rem;
    top: -0.5rem;
  }
  .hero__gig-text {
    width: 74%;
  }
  .hero__gig-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding-inline: 0.3rem;
  }
  .hero__gig-day {
    font-size: 0.75rem;
  }
  .hero__gig-date {
    font-size: calc(var(--gig-date-k, 1) * 1.32rem);
  }
  .hero__gig-what {
    font-size: 0.86rem;
    max-width: 4.6rem;
  }
  .hero__ctas .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  /* a shorter stripe and tighter tracking keep the eyebrow to two lines */
  .hero__eyebrow {
    letter-spacing: 0.08em;
  }
  .hero__eyebrow::before {
    width: 1.4rem;
  }
  .hero__est {
    position: static;
    --tilt: -4deg;
    max-width: none;
    margin: 0.2rem 0 0.6rem 0.3rem; /* clear of the starburst below */
  }
  .hero__est-line,
  .hero__est-small {
    display: inline;
  }
  .hero__ctas .btn {
    padding-inline: 0.9rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }
}

/* ---------- landscape phones: side by side again, sized by the screen's height ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    --hero-logo-fs: min(11.5vw, 25vh);
    padding-block: 0.25rem 0;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
  }
  /* a short screen: centered beside the moon (the CTA row still meets "Strum it") */
  .hero__copy {
    align-self: center;
    gap: 0.5rem;
    padding-block: 0;
  }
  .hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
  .hero__name {
    font-size: clamp(1.25rem, 6.4vh, 1.6rem);
  }
  .hero__ctas {
    gap: 0.6rem;
    margin-top: 0.15rem;
  }
  .hero__ctas .btn {
    min-height: 2.6rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
  .hero__est {
    --tilt: 8deg;
    top: calc(1.9rem + var(--hero-eyebrow-h, 19.2px) - 19.2px);
    left: calc(var(--hero-logo-fs) * 2.12);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.5rem;
  }
  .hero__est-small {
    font-size: 0.95rem;
  }
  .hero__stage {
    justify-self: end;
    width: min(80vh, 46vw);
    margin: 0;
  }
  .hero__art {
    margin-top: 0;
  }
  .hero__controls {
    position: absolute;
    left: -0.5rem;
    bottom: 4%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 46%;
    margin: 0;
  }
  .hero__strum.btn {
    min-height: 2.6rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
  }
  /* no room beside the strings: the hint stays for screen readers (it's a live region) */
  .hero__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero__gig.sticker {
    width: 7.4rem;
    left: -1.5rem;
    top: 0;
  }
  .hero__gig-text {
    width: 74%;
  }
  .hero__gig-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding-inline: 0.3rem;
  }
  .hero__gig-day {
    font-size: 0.75rem;
  }
  .hero__gig-date {
    font-size: calc(var(--gig-date-k, 1) * 1.15rem);
  }
  .hero__gig-what {
    font-size: 0.82rem;
    max-width: 4.4rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 830px) {
  .hero__cta-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero__eyebrow::before {
    display: none;
  }
}

/* ---------- motion: the spinners rest off-screen and under dialogs ---------- */
.hero.is-offscreen .hero__rays,
.hero.is-offscreen .hero__gig-burst svg,
html.has-dialog .hero__rays,
html.has-dialog .hero__gig-burst svg {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero__letter,
  .hero__letter.is-boing,
  .hero__rays,
  .hero__gig-burst svg,
  .hero__ripple,
  .hero__pick {
    animation: none !important;
  }
  .hero__ripple {
    display: none;
  }
}