/* Cape Ann Symphony — the home page's opening screen ("the cover").

   One full-height announcement of the next concert, printed above the
   site's own header (perch/addons/lib/home-cover.php). A dark hall: the
   concert's art glows at the two sides like windows, the Symphony's mark
   sits at the top, the concert's name in the middle, and a thin line at
   the foot leads down to the site, which follows untouched.

   Motion, in two parts:
   1. The entrance. Every piece is written in its finished state and the
      keyframes only say where it comes FROM, so the page is whole with
      animation off. --k is the tempo (1 the first time, quicker on a
      return visit in the same session: .is-brief).
   2. The hand-off. home-cover.js writes --p, how far the cover has been
      scrolled away (0 → 1). The stage falls behind the scroll, the words
      lift and fade, and the hall dims as the site rises over it.

   Colours are the cover's own (--cv-*): it is night in here whatever the
   site's theme. */

.home-cover {
  --cv-ink: #0B1016;
  --cv-bone: #F3EADA;
  --cv-bone-2: rgba(243, 234, 218, 0.8);
  --cv-bone-3: rgba(243, 234, 218, 0.64);
  --cv-line: rgba(243, 234, 218, 0.2);
  --cv-gold: #D9B05A;
  --cv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --p: 0;
  --k: 1;

  position: relative;
  isolation: isolate;
  display: grid;
  /* --cover-top: whatever sits above the cover (a message bar), measured by the script. */
  min-height: calc(100vh - var(--cover-top, 0px));
  min-height: calc(100svh - var(--cover-top, 0px));
  overflow: hidden;
  overflow: clip;
  background: var(--cv-ink);
  color: var(--cv-bone);
  -webkit-font-smoothing: antialiased;
}
.home-cover.is-brief { --k: 0.38; }

/* Where the "continue" link lands: the top of the site. */
.home-cover__end { display: block; height: 0; }


/* ── The stage: glow, art, veil ─────────────────────────────── */

.home-cover__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Falls behind the scroll, so the site seems to rise over a hall that stays put. */
  translate: 0 calc(var(--p) * 30vh);
}

/* The art, tiny and out of focus: colour in the air. */
.home-cover__glow {
  position: absolute;
  inset: -18%;
  background: var(--cover-glow, none) center / cover no-repeat;
  filter: blur(84px) saturate(1.3);
  opacity: 0.36;
  animation:
    cv-fade calc(2600ms * var(--k)) ease-out backwards,
    cv-drift 48s ease-in-out calc(2600ms * var(--k)) infinite alternate;
}

/* The art itself, twice: once at each side of the hall, set by the hall's
   height so its panes keep the proportions they were drawn with, tall and
   narrow, however wide the screen. The left copy shows the art's left
   panes, the right copy its right ones; each fades out toward the middle,
   so the words stand on calm ground. A touch under full strength: these
   are windows at night, not paper. */
.home-cover__art {
  position: absolute;
  inset: 0;
}
.home-cover__art--l { translate: 0 calc(var(--p) * 4vh); }
.home-cover__art--r { translate: 0 calc(var(--p) * 10vh); }
.home-cover__art i {
  position: absolute;
  inset: -5% 0;
  background: var(--cover-art, none) left -1.2vw top 50% / auto 112% no-repeat;
  opacity: 0.66;
  animation: cv-art calc(2400ms * var(--k)) var(--cv-ease) calc(150ms * var(--k)) backwards;
}
.home-cover__art--l i {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 13%, transparent 31%);
          mask-image: linear-gradient(90deg, #000 0%, #000 13%, transparent 31%);
}
.home-cover__art--r i {
  background-position: right -1.2vw top 50%;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 13%, transparent 31%);
          mask-image: linear-gradient(270deg, #000 0%, #000 13%, transparent 31%);
  animation-delay: calc(420ms * var(--k));
}

.home-cover__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11, 16, 22, 0.62) 0%,
      rgba(11, 16, 22, 0) 24%,
      rgba(11, 16, 22, 0) 60%,
      rgba(11, 16, 22, 0.9) 100%),
    radial-gradient(ellipse 48% 60% at 50% 48%,
      rgba(11, 16, 22, 0.66) 0%,
      rgba(11, 16, 22, 0) 100%),
    /* the outer edges fall away into the dark, so nothing at the side outshines the title */
    linear-gradient(90deg,
      rgba(11, 16, 22, 0.5) 0%,
      rgba(11, 16, 22, 0) 14%,
      rgba(11, 16, 22, 0) 86%,
      rgba(11, 16, 22, 0.5) 100%);
}
/* The hall dims as the site rises over it. */
.home-cover__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cv-ink);
  opacity: calc(var(--p) * 0.72);
}


/* ── The words ──────────────────────────────────────────────── */

.home-cover__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;   /* mark · message · way down: the message sits at the true centre */
  justify-items: center;
  row-gap: clamp(16px, 3.2vh, 36px);
  padding: clamp(22px, 4.8vh, 54px) 24px 0;
  text-align: center;
}

.home-cover__brand {
  align-self: start;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.7vh, 16px);
  opacity: calc(1 - var(--p) * 2.6);
  translate: 0 calc(var(--p) * -3vh);
  animation: cv-rise calc(1400ms * var(--k)) var(--cv-ease) calc(450ms * var(--k)) backwards;
}
.home-cover__mark {
  display: block;
  width: auto;
  height: clamp(44px, 7.6vh, 68px);
}
.home-cover__name {
  /* The header's wordmark, set on one line. */
  font-family: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-left: 0.32em;               /* the tracking's trailing space, given back so the line centres */
  white-space: nowrap;
  color: var(--cv-bone-2);
}

.home-cover__msg {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 1120px;
  opacity: calc(1 - var(--p) * 1.9);
  translate: 0 calc(var(--p) * -7vh);
}

.home-cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cv-gold);
  animation: cv-rise calc(1200ms * var(--k)) var(--cv-ease) calc(900ms * var(--k)) backwards;
}
.home-cover__kicker::before,
.home-cover__kicker::after {
  content: "";
  width: clamp(24px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  animation: cv-rule calc(1500ms * var(--k)) var(--cv-ease) calc(1000ms * var(--k)) backwards;
}
.home-cover__kicker::before { transform-origin: right center; }
.home-cover__kicker::after  { transform-origin: left center; }
.home-cover__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.home-cover__title {
  margin-top: clamp(12px, 2.4vh, 26px);
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 500;
  /* Sized by the narrower of the two: a wide, short laptop window still fits the whole cover. */
  font-size: clamp(2.7rem, min(9.4vw, 17.5vh), 6.4rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--cv-bone);
  text-wrap: balance;
}
.home-cover.is-long .home-cover__title {
  max-width: 17ch;
  font-size: clamp(2.2rem, min(6.4vw, 12.4vh), 4.7rem);
}
/* Each word rises out of its own baseline. The padding keeps a descender
   (the y of "Holiday", the p of "Pops") inside the clip. */
.home-cover__w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  overflow: clip;
  padding: 0.1em 0.05em 0.22em;
  margin: -0.1em -0.05em -0.22em;
}
.home-cover__w > span {
  display: inline-block;
  animation: cv-word calc(1500ms * var(--k)) var(--cv-ease) calc((1050ms + var(--i, 0) * 120ms) * var(--k)) backwards;
}

.home-cover__tagline {
  margin-top: clamp(12px, 2.2vh, 22px);
  max-width: 36ch;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.55vw, 1.3rem);
  line-height: 1.4;
  color: var(--cv-bone-2);
  text-wrap: balance;
  animation: cv-rise calc(1300ms * var(--k)) var(--cv-ease) calc(1500ms * var(--k)) backwards;
}

/* The performances: side by side, a hairline between. */
.home-cover__perfs {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  margin-top: clamp(20px, 4.2vh, 46px);
}
.home-cover__perf {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 3px clamp(18px, 3.1vw, 48px);
  animation: cv-rise calc(1200ms * var(--k)) var(--cv-ease) calc((1750ms + var(--i, 0) * 110ms) * var(--k)) backwards;
}
.home-cover__perf + .home-cover__perf { border-left: 1px solid var(--cv-line); }
.home-cover__perf time {
  display: grid;
  justify-items: center;
  gap: 7px;
}
.home-cover__date {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cv-bone-3);
}
.home-cover__date-short { display: none; }
.home-cover__clock {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.1vw, 1.72rem);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: var(--cv-bone);
}
.home-cover__place {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--cv-bone-2);
}
.home-cover__flag {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cv-gold);
}
.home-cover__perf.is-soldout .home-cover__clock {
  color: var(--cv-bone-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* A word from the office, under the performances: quiet, and plainly a
   sentence rather than a banner. */
.home-cover__note {
  margin-top: clamp(16px, 3vh, 30px);
  max-width: 46ch;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cv-bone-2);
  text-wrap: balance;
  animation: cv-rise calc(1200ms * var(--k)) var(--cv-ease) calc(2100ms * var(--k)) backwards;
}
.home-cover__note + .home-cover__cta { margin-top: clamp(18px, 3.2vh, 32px); }

.home-cover__cta {
  margin-top: clamp(22px, 4.6vh, 48px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px 0 32px;
  border-radius: 2px;                 /* the site's buttons */
  background: var(--cv-bone);
  color: #15181C;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.75);
  transition: background-color 240ms ease, translate 460ms var(--cv-ease), box-shadow 460ms var(--cv-ease);
  animation: cv-rise calc(1200ms * var(--k)) var(--cv-ease) calc(2300ms * var(--k)) backwards;
}
.home-cover__cta svg { flex: none; transition: translate 460ms var(--cv-ease); }
.home-cover__cta:hover {
  background: #FFFFFF;
  color: #15181C;                     /* the site's a:hover would turn it teal */
  translate: 0 -2px;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.8);
}
.home-cover__cta:hover svg { translate: 5px 0; }
.home-cover__cta:active { translate: 0 0; }
.home-cover__cta:focus-visible,
.home-cover__more:focus-visible {
  outline: 2px solid var(--cv-gold);
  outline-offset: 5px;
}

/* The way down: plain words, and a line a light keeps falling along. */
.home-cover__more {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 10px 18px 0;
  color: var(--cv-bone-2);
  opacity: calc(1 - var(--p) * 7);
  transition: color 240ms ease;
  animation: cv-rise calc(1500ms * var(--k)) var(--cv-ease) calc(2800ms * var(--k)) backwards;
}
.home-cover__more:hover { color: var(--cv-bone); }
.home-cover__more-label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-left: 0.2em;
}
.home-cover__more-line {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(30px, 6.4vh, 56px);
  background: var(--cv-line);
  overflow: hidden;
}
.home-cover__more-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(243, 234, 218, 0), var(--cv-bone));
  animation: cv-fall 2800ms cubic-bezier(0.65, 0, 0.35, 1) calc(3300ms * var(--k)) infinite backwards;
}

/* Snow (home-cover-snow.js draws it, on covers that ask for it): one
   canvas over the whole cover, in front of the words, never in the way of
   a click (and a second one behind the words, for the snow farther off). It fades in, so the first pellets arrive rather than appear. */
.home-cover__snow {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2400ms ease;
}
.home-cover__snow.is-on { opacity: 1; }
/* The far snow passes behind the words: over the art, under the text. */
.home-cover__snow--back { z-index: 0; }

/* The snow globe's one line of words (home-cover-snow.js), on a phone or
   a tablet: "Tap to shake the snow" where a tap is needed before the
   device will report its motion, "Tilt or shake your phone" where it is
   not. Over the snow, between the button and the way down. */
.home-cover__shake {
  position: absolute;
  left: 50%;
  z-index: 3;
  translate: -50% -50%;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--cv-line);
  border-radius: 2px;
  background: rgba(11, 16, 22, 0.72);
  color: var(--cv-bone);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.home-cover__shake.is-on { opacity: 1; pointer-events: auto; }
.home-cover__shake:disabled { border-color: transparent; background: rgba(11, 16, 22, 0.55); color: var(--cv-bone-2); pointer-events: none; }
.home-cover__shake.is-corner { top: 34px; left: auto; right: 12px; translate: 0 -50%; }
.home-cover__shake:focus-visible { outline: 2px solid var(--cv-gold); outline-offset: 4px; }

/* Google's reCAPTCHA badge (it comes with the newsletter form, and floats in the corner of every
   page) is hidden for as long as any of the cover is on screen. Google allows that because its
   notice is printed in words beside the form (2026/partials/newsletter-form.php). The class is
   home-cover.js's; the :has() line covers the moment before that script has run. */
html.cas-cover-up .grecaptcha-badge { visibility: hidden !important; }
/* A rule of its own: a browser that does not know :has() throws away the whole rule it is in. */
html:has(.home-cover:not(.is-away)) .grecaptcha-badge { visibility: hidden !important; }

/* Out of sight, nothing keeps moving. */
.home-cover.is-away .home-cover__glow,
.home-cover.is-away .home-cover__more-line::after { animation-play-state: paused; }


/* ── Keyframes: only where a thing comes from ───────────────── */

@keyframes cv-fade  { from { opacity: 0; } }
@keyframes cv-rise  { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes cv-art   { from { opacity: 0; transform: translate3d(0, 36px, 0) scale(1.035); } }
@keyframes cv-word  { from { transform: translate3d(0, 112%, 0); } }
@keyframes cv-rule  { from { transform: scaleX(0); } }
@keyframes cv-drift { to   { transform: scale(1.1) translate3d(1.6%, -1.2%, 0); } }
@keyframes cv-fall  { from { transform: translate3d(0, -110%, 0); } to { transform: translate3d(0, 230%, 0); } }


/* ── A cover without art: the hall alone ────────────────────── */

.home-cover.is-plain .home-cover__glow,
.home-cover.is-plain .home-cover__art { display: none; }
.home-cover.is-plain .home-cover__veil {
  background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(66, 103, 119, 0.3) 0%, rgba(11, 16, 22, 0) 100%);
}


/* ── In between (a tablet, a narrow window): the side art keeps to the
      edges, clear of the first and last performance ─────────── */

@media (min-width: 761px) and (max-width: 1100px) {
  .home-cover__art i { opacity: 0.56; }
  .home-cover__art--l i {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 3%, transparent 17%);
            mask-image: linear-gradient(90deg, #000 0%, #000 3%, transparent 17%);
  }
  .home-cover__art--r i {
    -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 3%, transparent 17%);
            mask-image: linear-gradient(270deg, #000 0%, #000 3%, transparent 17%);
  }
}


/* ── Narrow screens: the art goes behind, the list stacks ───── */

@media (max-width: 760px) {
  .home-cover__art--r { display: none; }
  .home-cover__art--l i {
    opacity: 0.3;
    background-position: center;
    background-size: auto 104%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0.45) 66%, #000 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0.45) 66%, #000 100%);
  }
  .home-cover__glow { opacity: 0.42; }

  .home-cover__body { padding-left: 20px; padding-right: 20px; }
  .home-cover__name { font-size: 11.5px; }
  .home-cover__title { font-size: clamp(2.5rem, min(13.2vw, 11vh), 4rem); }
  .home-cover.is-long .home-cover__title { font-size: clamp(2rem, min(9.6vw, 8.4vh), 3rem); }

  .home-cover__perfs {
    grid-auto-flow: row;
    width: min(100%, 22rem);
  }
  .home-cover__perf {
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: baseline;
    gap: 12px;
    padding: 10px 2px;
    text-align: left;
  }
  .home-cover__perf + .home-cover__perf { border-left: 0; border-top: 1px solid var(--cv-line); }
  .home-cover__perf time {
    grid-auto-flow: column;
    justify-items: start;
    align-items: baseline;
    gap: 12px;
  }
  /* The long date stays for a screen reader; the eye gets the short one. */
  .home-cover__date-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .home-cover__date-short { display: inline; }
  .home-cover__clock { font-size: 1.2rem; }
  .home-cover__place { justify-self: end; }
  .home-cover__note { display: none; }               /* on a phone the dates and the button are the message */
  .home-cover__cta { min-height: 54px; }
}


/* ── A wide but short window (a small laptop): the same cover, drawn in ── */

@media (min-width: 761px) and (max-height: 720px) {
  .home-cover__body { row-gap: 12px; padding-top: 18px; }
  .home-cover__brand { gap: 9px; }
  .home-cover__mark { height: 40px; }
  .home-cover__title { margin-top: 10px; font-size: clamp(2.7rem, min(9.4vw, 13.6vh), 6.4rem); }
  .home-cover.is-long .home-cover__title { font-size: clamp(2.2rem, min(6.4vw, 10.4vh), 4.7rem); }
  .home-cover__tagline { margin-top: 8px; }
  .home-cover__perfs { margin-top: 18px; }
  .home-cover__perf,
  .home-cover__perf time { gap: 5px; }
  .home-cover__note { margin-top: 12px; }
  .home-cover__cta,
  .home-cover__note + .home-cover__cta { margin-top: 14px; min-height: 52px; }
  .home-cover__more { gap: 9px; padding-top: 4px; }
  .home-cover__more-line { height: 26px; }
}


/* ── Reduced motion: the finished picture, at once ──────────── */

@media (prefers-reduced-motion: reduce) {
  .home-cover *,
  .home-cover *::before,
  .home-cover *::after { animation: none !important; }
  .home-cover__stage,
  .home-cover__art,
  .home-cover__brand,
  .home-cover__msg { translate: none; }
  .home-cover__cta,
  .home-cover__cta svg { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cover__snow,
  .home-cover__shake { display: none; }
}

@media print {
  .home-cover { display: none; }
}