/**
 * qotd_painting.css
 * 🌅 The landing's Quote of the Day card on the painted canvas: the masterpiece that tells the quote drifts slowly behind it,
 * under the same veils, golden dust and museum plaque as the World Clock, the Hall of Wisdom and the Immersive Reader
 * (the canvas itself is world_clock.css's .wc-canvas). static/js/qotd_painting.js builds the canvas and the foot (plaque +
 * switch) inside .qotd-parchment and toggles the classes used here:
 *   .awq-card      the card, once the module has set it up (its palette lives here)
 *   .has-quote     a quote has been shown: the foot (plaque + background switch) appears
 *   .is-painted    the painting background is on (the switch's choice); off = the card's classic dark-glass look
 *   .is-offscreen  the card is out of view: the drift and the dust rest
 * Loaded after active_theory_landing.css, whose QOTD rules use !important: the painted look wins by specificity.
 */

/* ---------- the card's palette (the full-screen screens define theirs on .wc-root) ---------- */
.qotd-parchment.awq-card {
    --u: 1;
    --wc-gold: #ffd700;
    --wc-gold-warm: #ffd98a;
    --wc-base: #030604;
    --wc-hairline: rgba(255, 210, 122, 0.34);
    --wc-hairline-faint: rgba(255, 210, 122, 0.18);
    --wc-cream: #f3e9d2;
    --wc-cream-soft: rgba(243, 233, 210, 0.86);
    --wc-label: rgba(255, 217, 138, 0.8);
    --wc-serif: 'Baskerville', 'Baskervville', 'Libre Baskerville', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --wc-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
}

/* ---------- the canvas: only while the painting background is on ---------- */
.qotd-parchment.awq-card > .awq-canvas {
    z-index: 0;
}

.qotd-parchment.awq-card:not(.is-painted) > .awq-canvas {
    display: none;
}

/* the text stays readable over any masterpiece: a soft darkening gathered behind the words, lighter towards the edges */
.awq-veil {
    background: radial-gradient(ellipse 90% 78% at 50% 46%, rgba(3, 6, 4, 0.26) 0%, rgba(3, 6, 4, 0.17) 58%, rgba(3, 6, 4, 0.06) 100%);
}

/* the dust rises through the card (the screens' own motes rise through the window) */
.awq-canvas .wc-dust i {
    animation-name: awq-mote;
}

@keyframes awq-mote {
    0% { opacity: 0; transform: translate3d(0, calc(var(--awq-h, 560px) * 0.98), 0); }
    15% { opacity: var(--peak); }
    70% { opacity: calc(var(--peak) * 0.6); }
    100% { opacity: 0; transform: translate3d(var(--sway), calc(var(--awq-h, 560px) * 0.1), 0); }
}

/* out of view, or behind a full-screen painted screen: the drift and the dust rest */
.qotd-parchment.is-offscreen .wc-painting,
.qotd-parchment.is-offscreen .wc-dust i,
html.wc-lock .qotd-parchment .wc-painting,
html.wc-lock .qotd-parchment .wc-dust i {
    animation-play-state: paused;
}

.qotd-parchment.is-offscreen .wc-painting {
    will-change: auto;
}

/* ---------- the painted card ---------- */
.qotd-parchment.is-painted {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 2.4rem 2.6rem 1.15rem;
    background: var(--wc-base) !important;
    border: 1px solid var(--wc-hairline) !important;
    border-radius: 16px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), 0 0 44px rgba(255, 215, 0, 0.06) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* the parchment's paper grain has no place on a painting */
.qotd-parchment.is-painted::before {
    display: none;
}

/* a thin gold mat inside the edge, like a framed picture */
.qotd-parchment.is-painted::after {
    content: '';
    position: absolute;
    inset: 7px;
    z-index: 1;
    border: 1px solid var(--wc-hairline-faint);
    border-radius: 10px;
    pointer-events: none;
}

.qotd-parchment.is-painted > .qotd-loading,
.qotd-parchment.is-painted > .qotd-content,
.qotd-parchment.is-painted > .qotd-error,
.qotd-parchment.awq-card > .awq-foot {
    position: relative;
    z-index: 2;
}

/* ---------- the words ---------- */
.qotd-parchment.is-painted .qotd-text {
    font-family: var(--wc-serif) !important;
    font-style: italic;
    line-height: 1.6;
    color: var(--wc-cream) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.8) !important;
}

.qotd-parchment.is-painted .qotd-text::before,
.qotd-parchment.is-painted .qotd-text::after {
    color: var(--wc-gold-warm);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.qotd-parchment.is-painted .qotd-author {
    width: fit-content;
    max-width: 100%;
    margin: 1.4rem auto 0;
    padding: 0.55rem 1.3rem;
    border: 1px solid var(--wc-hairline-faint);
    border-radius: 22px;
    background: rgba(6, 8, 5, 0.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.qotd-parchment.is-painted .qotd-author,
.qotd-parchment.is-painted .qotd-author cite {
    color: var(--wc-gold-warm) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 10px rgba(0, 0, 0, 0.8) !important;
}

.qotd-parchment.is-painted .author-divider {
    color: var(--wc-gold-warm);
}

.qotd-parchment.is-painted .qotd-badge {
    background: rgba(8, 10, 7, 0.6) !important;
    border-color: var(--wc-hairline) !important;
    color: var(--wc-gold-warm) !important;
}

.qotd-parchment.is-painted .qotd-description,
.qotd-parchment.is-painted .qotd-curator-notes {
    background: rgba(6, 8, 5, 0.6) !important;
    border: 1px solid var(--wc-hairline-faint) !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--wc-cream-soft) !important;
}

.qotd-parchment.is-painted .qotd-curator-notes p {
    color: var(--wc-cream-soft) !important;
    text-shadow: none;
}

.qotd-parchment.is-painted .qotd-loading p {
    color: var(--wc-label);
}

/* ---------- the buttons: glass pills with a gold hairline, as on the other painted screens ---------- */
.qotd-parchment.is-painted .qotd-btn {
    background: rgba(8, 10, 7, 0.68) !important;
    border: 1px solid rgba(255, 210, 122, 0.4) !important;
    color: var(--wc-cream) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4) !important;
}

.qotd-parchment.is-painted .qotd-btn:hover {
    background: rgba(34, 27, 7, 0.8) !important;
    border-color: rgba(255, 215, 0, 0.72) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.4) !important;
}

.qotd-parchment.is-painted .qotd-btn-save.saved {
    border-color: rgba(255, 99, 71, 0.75) !important;
}

/* while the narrator speaks, Listen keeps its gold ring and glow (narration.css, which the pill rule above would outrank) */
.qotd-parchment.is-painted .qotd-btn-listen.is-playing {
    background: rgba(34, 27, 7, 0.82) !important;
    border-color: var(--wc-gold) !important;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.32), 0 6px 14px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- the foot: the painting's museum plaque, and the switch between the painting and the classic look ---------- */
.awq-foot {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.1rem;
    padding: 0 56px;
}

.qotd-parchment.has-quote > .awq-foot {
    display: flex;
}

.awq-plaque {
    margin: 0;
    padding: 0;
    text-wrap: balance;
}

/* beside the switch the credit has less room than on a full-screen painted screen: its byline may wrap instead of running under the button */
.awq-plaque .wc-plaque-by {
    white-space: normal;
}

.qotd-parchment.awq-card:not(.is-painted) .awq-plaque {
    display: none;
}

/* with the plaque away only the switch is left: the foot closes up around it */
.qotd-parchment.awq-card:not(.is-painted) > .awq-foot {
    margin-top: 0.4rem;
}

.awq-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.awq-switch {
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.awq-switch:focus-visible {
    outline: 2px solid var(--wc-gold);
    outline-offset: 2px;
}

/* ---------- a phone: the painting drifts behind every glass piece and blurring it again and again is heavy,
   so the glass gets a little more body instead (as in the Hall of Wisdom) ---------- */
@media (max-width: 639px), (pointer: coarse) {
    .qotd-parchment.is-painted .qotd-author,
    .qotd-parchment.is-painted .qotd-description,
    .qotd-parchment.is-painted .qotd-curator-notes,
    .qotd-parchment.is-painted .qotd-btn {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .qotd-parchment.is-painted .qotd-author {
        background: rgba(6, 8, 5, 0.74);
    }

    .qotd-parchment.is-painted .qotd-description,
    .qotd-parchment.is-painted .qotd-curator-notes {
        background: rgba(6, 8, 5, 0.76) !important;
    }

    .qotd-parchment.is-painted .qotd-btn {
        background: rgba(8, 10, 7, 0.8) !important;
    }
}

/* ---------- smaller screens: the card gives back the page's side padding, so the painting has room ---------- */
@media (max-width: 768px) {
    .qotd-parchment.is-painted {
        padding: 1.8rem 1.4rem 1rem;
    }
}

@media (max-width: 560px) {
    .qotd-parchment.is-painted {
        margin-left: -2rem;
        margin-right: -2rem;
        padding: 1.6rem 1.15rem 0.9rem;
    }

    /* the plaque takes what the switch leaves (instead of a centred column with room kept on both sides), so a long credit wraps in fewer lines */
    .awq-foot {
        padding: 0;
        gap: 0.5rem;
    }

    .awq-plaque {
        flex: 1 1 0;
        min-width: 0;
    }

    .awq-toggle {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        flex: none;
    }

    .qotd-parchment.awq-card:not(.is-painted) > .awq-foot {
        justify-content: flex-end;
    }
}

/* ---------- on paper the painting stays home ---------- */
@media print {
    .qotd-parchment.awq-card > .awq-canvas,
    .qotd-parchment.awq-card > .awq-foot {
        display: none !important;
    }

    .qotd-parchment.is-painted {
        background: #fff !important;
        border-color: #000 !important;
        box-shadow: none !important;
    }

    .qotd-parchment.is-painted .qotd-text,
    .qotd-parchment.is-painted .qotd-author,
    .qotd-parchment.is-painted .qotd-author cite {
        color: #000 !important;
        text-shadow: none !important;
    }
}