/* ═══════════════════════════════════════════════════════════════════════
   MOCK 3 — extras.css
   Styles for the subdued atmospherics in extras.js. None of these are
   announced or labelled in the UI — they just sit on the page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. time-of-day tint overlay ─────────────────────────────────── */
#time-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: transparent;
  mix-blend-mode: soft-light;
  transition: opacity 4s ease, background-color 6s ease;
}
html.time-morning #time-tint { opacity: 0.22; background-color: rgb(255, 200, 130); }
html.time-day     #time-tint { opacity: 0;    background-color: rgb(0, 0, 0);       }
html.time-dusk    #time-tint { opacity: 0.32; background-color: rgb(150, 70, 50);   }
html.time-night   #time-tint { opacity: 0.46; background-color: rgb(20, 35, 80);    }

/* ── 2. "in residence" dot — bottom-left, very quiet ─────────────── */
#live-dot {
  position: fixed;
  bottom: 18px;
  left: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(214, 173, 106, 0.55);
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#live-dot.scrolled-away {
  opacity: 0;
  transform: translateY(12px);
}
#live-dot .ld-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(214, 173, 106);
  box-shadow: 0 0 8px rgba(214, 173, 106, 0.55);
  animation: ldPulse 2.6s ease-in-out infinite;
}
@keyframes ldPulse {
  0%, 100% { opacity: 0.4;  transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* on phones — pull tighter, smaller letters */
@media (max-width: 700px) {
  #live-dot {
    bottom: 14px;
    left: 14px;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    gap: 8px;
  }
  #live-dot .ld-dot { width: 5px; height: 5px; }
}

/* ── 3. stop hint — pill shown while hidden track is playing ───── */
#stop-hint {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 9500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: rgba(20, 16, 10, 0.78);
  border: 1px solid rgba(214, 173, 106, 0.55);
  color: rgb(240, 208, 130);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45),
              0 0 0 4px rgba(214, 173, 106, 0.06);
  font: 600 10.5px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
#stop-hint.visible { opacity: 1; transform: translateY(0) scale(1); }
#stop-hint:hover {
  background: rgba(40, 30, 18, 0.86);
  border-color: rgba(240, 208, 130, 0.85);
  transform: translateY(0) scale(1.04);
}
#stop-hint .sh-glyph {
  font-size: 16px;
  line-height: 1;
  animation: shPulse 1.8s ease-in-out infinite;
  display: inline-block;
}
#stop-hint .sh-label {
  display: inline-block;
  line-height: 1;
}
@keyframes shPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1;    }
}
@media (max-width: 700px) {
  #stop-hint {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 16px;
    padding: 12px 18px 12px 14px;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.24em;
    background: rgba(20, 16, 10, 0.92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6),
                0 0 0 6px rgba(214, 173, 106, 0.10);
  }
  #stop-hint .sh-glyph { font-size: 16px; }
}

/* When the electric side track is playing, switch the pill accent to magenta */
body[data-orb="electric"] #stop-hint,
html.page-electric #stop-hint {
  border-color: rgba(255, 45, 146, 0.55);
  color: rgb(255, 45, 146);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45),
              0 0 0 4px rgba(255, 45, 146, 0.06);
}
body[data-orb="electric"] #stop-hint:hover,
html.page-electric #stop-hint:hover {
  border-color: rgba(255, 130, 180, 0.85);
  color: rgb(255, 180, 210);
}

/* ── 4. quote trigger + overlay ─────────────────────────────────── */
.quote-trigger {
  display: inline-block;
  cursor: pointer;
  color: var(--accent, rgba(214, 173, 106, 0.6));
  opacity: 0.55;
  font: italic 400 14px/1 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0;
  padding: 4px 6px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  user-select: none;
  background: none;
  border: none;
}
.quote-trigger:hover { opacity: 1; transform: scale(1.18); }
.quote-trigger.used  { opacity: 0.18; pointer-events: none; cursor: default; }

/* one-time twinkle when the trigger first scrolls into view — catches the
   eye, then settles back to its quiet state */
.quote-trigger.twinkling {
  animation: quoteTwinkle 1.7s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}
@keyframes quoteTwinkle {
  0%   { opacity: 0.32; transform: scale(1)    rotate(0deg);  text-shadow: 0 0 0 currentColor;   filter: brightness(1); }
  35%  { opacity: 1;    transform: scale(1.55) rotate(14deg); text-shadow: 0 0 14px currentColor; filter: brightness(1.4); }
  100% { opacity: 0.32; transform: scale(1)    rotate(0deg);  text-shadow: 0 0 0 currentColor;   filter: brightness(1); }
}
/* in the footer, the resting opacity is 0.55 not 0.32 — keep parity */
footer .quote-trigger.twinkling,
.foot-grid .quote-trigger.twinkling { animation-name: quoteTwinkleFooter; }
@keyframes quoteTwinkleFooter {
  0%   { opacity: 0.55; transform: scale(1)    rotate(0deg);  text-shadow: 0 0 0 currentColor;   filter: brightness(1); }
  35%  { opacity: 1;    transform: scale(1.55) rotate(14deg); text-shadow: 0 0 14px currentColor; filter: brightness(1.4); }
  100% { opacity: 0.55; transform: scale(1)    rotate(0deg);  text-shadow: 0 0 0 currentColor;   filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .quote-trigger.twinkling { animation: none !important; }
}

/* ── ✱ standalone marker placed between sections (just under hero) ── */
.quote-mark {
  display: flex;
  justify-content: center;
  padding: 3.6rem 0 0;
  position: relative;
  z-index: 5;
  pointer-events: none;
}
.quote-mark .quote-trigger {
  pointer-events: auto;
  font-size: 22px;
  opacity: 0.32;
  padding: 10px;
}
.quote-mark .quote-trigger:hover { opacity: 0.85; }
@media (max-width: 700px) {
  .quote-mark { padding: 2.6rem 0 0; }
  .quote-mark .quote-trigger { font-size: 18px; padding: 8px; }
}

#quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
  background: rgba(5, 4, 3, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  cursor: pointer;
  transition: opacity 1.1s ease;
  text-align: center;
}
#quote-overlay.in  { opacity: 1; }
#quote-overlay.out { opacity: 0; }
#quote-overlay blockquote {
  max-width: 800px;
  margin: 0;
  padding: 0;
  font-family: 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.32;
  color: rgba(245, 235, 215, 0.94);
}
#quote-overlay .qo-text { display: block; }
#quote-overlay .qo-author {
  display: block;
  margin-top: 1.6em;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(214, 173, 106, 0.7);
}
@media (max-width: 700px) {
  #quote-overlay { padding: 14vh 8vw; }
  #quote-overlay blockquote { font-size: 22px; line-height: 1.36; }
}

/* ── 5. Roman numeral mark before piano section labels ─────────
   Brighter, slightly larger, brighter gold so it reads cleanly
   against the wide-tracked uppercase label that follows it. */
.section-label[data-num]::before {
  content: attr(data-num);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6em;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 0.55em;
  opacity: 1;
  color: #ffffff;
  display: inline-block;
  vertical-align: -0.04em;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
}

/* ── 6. album hover tilt — applied via JS .album-cover[data-tilt] ── */
.album-cover[data-tilt] {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.album-cover[data-tilt] img {
  transition: filter 0.45s ease;
}
.album-cover[data-tilt]:hover img { filter: brightness(1.08); }
@media (hover: none) and (pointer: coarse) {
  /* tilt is desktop-only; phones get their flip-record / haptic instead */
  .album-cover[data-tilt] { transform: none !important; }
}

/* ── 7. side-pills slide up while scrolling, drop back when stopped ── */
.side-tag, .mx-side-tag, .side-nav, .mx-side-nav {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.28s ease;
}
body.pills-hidden .side-tag,
body.pills-hidden .mx-side-tag {
  transform: translateY(-130%);
  opacity: 0.4;
}
body.pills-hidden .side-nav,
body.pills-hidden .mx-side-nav {
  transform: translateY(-130%);
  opacity: 0.4;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #live-dot .ld-dot { animation: none; opacity: 0.7; }
  #time-tint { transition: none; }
  #stop-hint .sh-glyph { animation: none; }
  .album-cover[data-tilt] { transform: none !important; }
}