/* ---------- Design extras ----------
   Each feature is scoped to a class on <html> (fx-hover, fx-press, ...), set from the FX list
   at the top of app.js. Remove a name there to switch that feature off; delete this file
   and its <link> to remove them all. */

/* Hover: buttons take a soft tint of the day's accent colour. */
.fx-hover .pill:not([aria-pressed="true"]):hover,
.fx-hover .btn:not(.btn-primary):hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  opacity: 1;
}
.fx-hover .btn-primary:hover,
.fx-hover .q-next:hover {
  background: color-mix(in srgb, var(--accent) 35%, var(--ink));
  opacity: 1;
}
.fx-hover .btn,
.fx-hover .q-next {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}
.fx-hover .essay-body a,
.fx-hover .sources-list a {
  text-decoration: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .4s cubic-bezier(.2,.7,.2,1);
}
.fx-hover .essay-body a:hover,
.fx-hover .sources-list a:hover { background-size: 100% 2px, 100% 1px; }

/* Press: a slight give when clicked or tapped. */
.fx-press .pill:active,
.fx-press .btn:active,
.fx-press .q-next:active,
.fx-press .marker:active { transform: scale(.97); }
.fx-press .pill { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .12s ease; }

/* Quiz: answers lift on hover; the right answer fills with a sweep. */
.fx-quiz .q-option {
  position: relative;
  transition: border-color .15s ease, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background-color .3s ease, opacity .3s ease;
}
.fx-quiz .q-option:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.35);
}
.fx-quiz .q-option:hover:not(:disabled) .q-letter { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fx-quiz .q-option:active:not(:disabled) { transform: translateY(0) scale(.99); box-shadow: none; }
.fx-quiz .q-option.is-right {
  background-image: linear-gradient(color-mix(in srgb, var(--ok) 12%, transparent), color-mix(in srgb, var(--ok) 12%, transparent));
  background-repeat: no-repeat;
  animation: fx-sweep .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fx-sweep { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.fx-quiz .pips li.is-current { background: var(--accent); }

/* Glow: a faint wash of the artwork's own colour behind it, lit from above like a gallery wall. */
.fx-glow .stage {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--tone, var(--wall)) 22%, transparent), transparent 75%),
    var(--wall);
}
:root[data-theme="dark"].fx-glow .stage {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--tone, var(--wall)) 28%, transparent), transparent 75%),
    var(--wall);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).fx-glow .stage {
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,.07), transparent 70%),
      radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--tone, var(--wall)) 28%, transparent), transparent 75%),
      var(--wall);
  }
}

/* Enter: on first load, caption and quiz rise in just after the artwork. */
.fx-enter .stage-bar { animation: rise .7s cubic-bezier(.2,.7,.2,1) .25s both; }
.fx-enter .quiz { animation: rise .7s cubic-bezier(.2,.7,.2,1) .4s both; }

/* Count: the score ticks up (see app.js) and the five facts arrive one by one. */
.fx-count .result.q-enter .tidbit-list li { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.fx-count .result.q-enter .tidbit-list li:nth-child(1) { animation-delay: .35s; }
.fx-count .result.q-enter .tidbit-list li:nth-child(2) { animation-delay: .45s; }
.fx-count .result.q-enter .tidbit-list li:nth-child(3) { animation-delay: .55s; }
.fx-count .result.q-enter .tidbit-list li:nth-child(4) { animation-delay: .65s; }
.fx-count .result.q-enter .tidbit-list li:nth-child(5) { animation-delay: .75s; }

/* Iris: intermittent iridescence in the letters and page background. The artwork is never touched. */
.fx-iris {
  --opal: #8f7cff, #3fb8ff, #3ed6a4, #f0c66a, #ff8fc0, #8f7cff;
}
.fx-iris .wm-l {
  transition: text-shadow 4.5s cubic-bezier(.45,0,.55,1);
}
/* Soft misprint: colour bleeding out from behind the black letter, like ink on thin paper. */
.fx-iris .wm-l.is-lit {
  text-shadow: var(--fringe);
  transition-duration: 3.5s;
}

.fx-iris .masthead { border-bottom-color: transparent; }
.fx-iris .masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--rule), #8f7cff, #3fb8ff, #3ed6a4, #f0c66a, #ff8fc0, var(--rule));
  background-size: 200% 100%;
  opacity: .55;
  animation: iris-drift 14s linear infinite;
}
@keyframes iris-drift { from { background-position: 0 0; } to { background-position: -200% 0; } }

.fx-iris .result.q-enter .score-num {
  background: linear-gradient(100deg, var(--ink) 0 38%, #8f7cff 43%, #3fb8ff 48%, #3ed6a4 53%, #f0a85a 58%, #ff8fc0 62%, var(--ink) 67% 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: iris-once 1.6s cubic-bezier(.45,0,.25,1) 1.4s both;
}
@keyframes iris-once { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* A faint pearlescent haze that breathes in the page background (behind content, never over the artwork). */
.fx-iris body { background: transparent; }
.fx-iris { background: var(--bg); }
.fx-iris body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 85% 70%, color-mix(in srgb, #8f7cff 22%, transparent), transparent 70%),
    radial-gradient(36vmax 28vmax at 12% 92%, color-mix(in srgb, #3ed6a4 18%, transparent), transparent 70%),
    radial-gradient(30vmax 24vmax at 60% 105%, color-mix(in srgb, #ff8fc0 16%, transparent), transparent 70%);
  filter: blur(20px);
  opacity: .35;
  animation: iris-breathe 16s ease-in-out infinite;
}
@keyframes iris-breathe {
  0%, 100% { opacity: .15; transform: translate3d(0, 0, 0); }
  50% { opacity: .6; transform: translate3d(-2vmax, -1vmax, 0); }
}

/* Details: make "Show details" the obvious next step on the artwork. */
.fx-details #toggle-details {
  position: relative;
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  font-weight: 600; padding: 9px 16px;
}
.fx-details #toggle-details:hover { background: color-mix(in srgb, var(--accent) 40%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 40%, var(--ink)); }
.fx-details #toggle-details[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fx-details #toggle-details .pill-dot { background: currentColor; }
.fx-details #toggle-details::after {
  /* The same soft misprint as the wordmark: colour bleeds out from behind the button
     and slowly shifts around it. Always on, never pulsing. */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  box-shadow: 3px 2px 3px 0 rgba(255,70,60,.72), 5px 4px 4.5px 0 rgba(255,190,40,.72), -3px -2px 3px 0 rgba(40,120,255,.66);
  animation: details-shift 16s ease-in-out infinite;
}
@keyframes details-shift {
  0%, 100% { box-shadow: 3px 2px 3px 0 rgba(255,70,60,.72), 5px 4px 4.5px 0 rgba(255,190,40,.72), -3px -2px 3px 0 rgba(40,120,255,.66); }
  20% { box-shadow: -3px 2.5px 3px 0 rgba(236,0,140,.62), -5px 4.5px 4.5px 0 rgba(255,214,0,.72), 3px -2.5px 3px 0 rgba(0,174,239,.66); }
  40% { box-shadow: 0 -3.5px 3px 0 rgba(255,120,40,.72), 2px -5.5px 4.5px 0 rgba(130,80,230,.62), 0 3.5px 3px 0 rgba(0,170,160,.66); }
  60% { box-shadow: 3.5px 0 3px 0 rgba(255,110,170,.72), 5.5px 2px 4.5px 0 rgba(150,130,255,.66), -3.5px 0 3px 0 rgba(60,200,150,.66); }
  80% { box-shadow: -2.5px -3px 3px 0 rgba(255,95,80,.72), -4.5px -5px 4.5px 0 rgba(160,210,40,.62), 2.5px 3px 3px 0 rgba(70,170,255,.66); }
}