/*
 * Flower Duet: opt-in music for the landing pages. Markup is injected by
 * lucca-duet.js, so a page only needs this stylesheet and that script.
 * Prototype: landing-page/prototypes/sound-toggle.
 *
 * Two pieces:
 *  - .duet-mark — three light-brown bars just right of the LUCCA wordmark.
 *    A mark, not a control: it can't be clicked, so reaching for "home" never
 *    starts music. It moves only while the music plays.
 *  - .duet-corner — a faint play button fixed to the bottom-right corner,
 *    which does the playing. Its hover card carries the CC BY 3.0 credit.
 *
 * Never autoplays; the mp3 loads on first press. The mark shows at every
 * width (it can't be tapped, so it never gets in the way of "home"). The
 * corner button is desktop-with-pointer only: phones and touch screens have
 * no hover for the card, and the corner is where thumbs rest. So on phones
 * the mark is only ever a still mark.
 */
:root{ --duet-tan:#B7A894; --duet-tan-deep:#9A8876; --duet-wash:#EFE6D8; --duet-paper:#FBF8F3; }
@media (max-width:1080px), (hover:none){ .duet-corner{ display:none !important; } }

/* ─── The mark beside the wordmark (left/top set inline by the script) ─── */
.duet-mark{ position:absolute; z-index:5; display:flex; align-items:center; gap:2px; height:12px; padding:0 7px;
  color:var(--duet-tan); pointer-events:none; transition:color .3s ease; }
.duet-mark.duet-light{ color:rgba(255,255,255,.85); }

.duet-bars{ display:flex; align-items:center; gap:2px; height:12px; }
.duet-bars i{ display:block; width:3px; border-radius:2px; background:currentColor; height:50%; transition:height .12s linear; }
.duet-bars i:nth-child(1){ height:45%; } .duet-bars i:nth-child(2){ height:85%; } .duet-bars i:nth-child(3){ height:60%; }
/* Without Web Audio (opened from disk), a slow sway stands in for the real levels. */
.duet-sway .duet-mark .duet-bars i{ animation:duetSway 1.1s ease-in-out infinite alternate; }
.duet-sway .duet-mark .duet-bars i:nth-child(2){ animation-delay:-.4s; }
.duet-sway .duet-mark .duet-bars i:nth-child(3){ animation-delay:-.8s; }
@keyframes duetSway{ from{ height:30%; } to{ height:95%; } }
@media (prefers-reduced-motion: reduce){ .duet-sway .duet-mark .duet-bars i{ animation:none; } }

/* ─── The corner button ─── */
.duet-corner{ position:fixed; right:24px; bottom:var(--duet-bottom, 24px); z-index:90;
  display:flex; flex-direction:column; align-items:flex-end;
  transition:bottom .3s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  opacity:0; animation:duetIn .8s ease 1.2s forwards; }
@keyframes duetIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .duet-corner{ animation:none; opacity:1; } }

.duet-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:36px; padding:0 11px; margin:0;
  border:1px solid var(--duet-wash); border-radius:999px; cursor:pointer;
  background:rgba(251,248,243,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--duet-tan); opacity:.6;
  font:600 11px/1 "Nunito Sans", ui-sans-serif, system-ui, sans-serif; letter-spacing:.02em; text-transform:none;
  transition:opacity .25s, color .2s, background-color .2s, border-color .2s; }
.duet-corner:hover .duet-btn, .duet-btn:focus-visible, .duet-playing .duet-btn{ opacity:1; color:var(--duet-tan-deep); border-color:var(--duet-tan); }
.duet-btn:focus-visible{ outline:1px solid var(--duet-tan); outline-offset:2px; }
.duet-btn{ position:relative; }
.duet-ic{ display:block; width:10px; height:12px; }

/* Progress ring: once the music starts and until it ends, the button holds a
   36px circle and its border becomes a ring that fills clockwise from twelve
   o'clock, like an app downloading on an iPhone. The script sets the fill's
   stroke-dashoffset every frame. */
.duet-ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  transform:rotate(-90deg); opacity:0; transition:opacity .3s ease; pointer-events:none; overflow:visible; }
.duet-ring circle{ fill:none; stroke-width:1.5; }
.duet-ring-track{ stroke:var(--duet-wash); }
.duet-ring-fill{ stroke:var(--duet-tan-deep); stroke-linecap:round; }
.duet-ringed .duet-btn{ width:36px; padding:0; border-color:transparent; }
.duet-ringed .duet-ring{ opacity:1; }
.duet-ringed .duet-lbl{ display:none; }
.duet-ic svg{ display:block; width:100%; height:100%; fill:currentColor; }
.duet-lbl{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .3s ease, opacity .2s, margin .3s; }
.duet-corner:hover .duet-lbl, .duet-btn:focus-visible .duet-lbl{ max-width:7em; opacity:1; margin-left:8px; }

/* The card opens upward from the button, only while the pointer (or keyboard
   focus) is on it. The ::after bridges the gap so moving up keeps it open. */
.duet-now{ position:absolute; right:0; bottom:calc(100% + 12px); width:max-content; max-width:260px;
  display:flex; flex-direction:column; gap:5px; text-align:left;
  background:var(--duet-paper); border:1px solid var(--duet-wash); border-radius:8px; padding:9px 11px;
  box-shadow:0 12px 26px -20px rgba(61,48,39,.35);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .2s, transform .2s; }
.duet-now::after{ content:""; position:absolute; left:0; right:0; bottom:-14px; height:14px; }
.duet-corner:hover .duet-now, .duet-corner:has(:focus-visible) .duet-now{ opacity:1; transform:none; pointer-events:auto; }
.duet-t{ font-family:"Newsreader", "Fraunces", ui-serif, Georgia, serif; font-style:italic; font-weight:400; font-size:14px; line-height:1.3; color:var(--duet-tan-deep); }
.duet-prog{ position:relative; display:block; height:1px; background:var(--duet-wash); overflow:hidden; }
.duet-prog i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--duet-tan); }
.duet-credit{ font-family:"Nunito Sans", ui-sans-serif, system-ui, sans-serif; font-size:11px; line-height:1.5; font-weight:400; color:var(--duet-tan); }
.duet-credit a{ color:inherit; text-decoration:underline; text-decoration-color:var(--duet-wash); text-underline-offset:2px; }
.duet-credit a:hover{ color:var(--duet-tan-deep); }