/*
 * This file is part of Tarot One Card.
 *
 * SPDX-FileCopyrightText: Copyright © JoomLazarus
 * SPDX-License-Identifier: GPL-2.0-or-later
 *
 * Draw-one-card experience: a neutral ink, paper and gold palette for the visitor interface.
 * Every selector stays under .tarotonecard; no global selectors. The module inherits the template's fonts
 * and text colour; site owners can retheme it through the custom properties below.
 */

.tarotonecard {
    --tarotonecard-ink: #1e2140;
    --tarotonecard-ink-deep: #12142a;
    --tarotonecard-paper: #f2e8d5;
    --tarotonecard-gold: #c9a24a;
    --tarotonecard-lantern: #ffc56b;
    --tarotonecard-accent: #8a6a1f;
    --tarotonecard-muted: color-mix(in srgb, currentColor 68%, transparent);
    --tarotonecard-rule: color-mix(in srgb, currentColor 18%, transparent);
    --tarotonecard-button-bg: var(--tarotonecard-ink);
    --tarotonecard-button-fg: var(--tarotonecard-paper);
    --tarotonecard-card-width: 16rem;
    --tarotonecard-radius: 0.9rem;
    --tarotonecard-gap: clamp(1.25rem, 4cqi, 2.5rem);
    --tarotonecard-flip: 720ms;
    --tarotonecard-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    display: block;
    container-type: inline-size;
    color: inherit;
}

/* The module root is the size container; its layout child adapts to it. */
.tarotonecard-layout {
    display: grid;
    gap: var(--tarotonecard-gap);
    justify-items: center;
}

@media (prefers-color-scheme: dark) {
    .tarotonecard {
        --tarotonecard-accent: var(--tarotonecard-gold);
        --tarotonecard-button-bg: var(--tarotonecard-paper);
        --tarotonecard-button-fg: var(--tarotonecard-ink-deep);
    }
}

/* ---- Card stage ------------------------------------------------------------------------------- */

.tarotonecard-stage {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    inline-size: 100%;
}

.tarotonecard-card {
    position: relative;
    inline-size: min(100%, var(--tarotonecard-card-width));
    aspect-ratio: 97 / 160;
    perspective: 1400px;
}

/* A quiet lantern glow behind the card; it brightens while a card is drawn and revealed. */
.tarotonecard-card::before {
    content: "";
    position: absolute;
    inset: 12% -14%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tarotonecard-lantern) 55%, transparent), transparent);
    opacity: 0.18;
    filter: blur(18px);
    transition: opacity var(--tarotonecard-flip) var(--tarotonecard-ease);
}

.tarotonecard-card-inner {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    transform-style: preserve-3d;
    transition: transform var(--tarotonecard-flip) var(--tarotonecard-ease), translate 400ms var(--tarotonecard-ease);
}

.tarotonecard-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--tarotonecard-radius);
    backface-visibility: hidden;
    box-shadow: 0 1px 2px rgb(18 20 42 / 0.18), 0 18px 36px -18px rgb(18 20 42 / 0.55);
}

.tarotonecard-face img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tarotonecard-face-front {
    transform: rotateY(180deg);
    background: var(--tarotonecard-paper);
    color: var(--tarotonecard-ink);
}

.tarotonecard-back-plain {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: var(--tarotonecard-ink);
    box-shadow: inset 0 0 0 0.55rem var(--tarotonecard-ink), inset 0 0 0 0.62rem var(--tarotonecard-gold);
}

/* Reversed: only the picture turns; the "Reversed" label always says so in text as well. */
.tarotonecard[data-tarotonecard-orientation="reversed"] .tarotonecard-front-image {
    rotate: 180deg;
}

/* Numeral and name on a shared (generic) face, or on a card without artwork. */
.tarotonecard-face-label {
    position: absolute;
    inset: 35% 12%;
    display: grid;
    place-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    text-align: center;
    color: var(--tarotonecard-ink);
}

.tarotonecard-face-numeral {
    font-size: 1.35rem;
    letter-spacing: 0.12em;
}

.tarotonecard-face-name {
    font-variant: small-caps;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
}

.tarotonecard-artwork-notice {
    max-inline-size: var(--tarotonecard-card-width);
    margin: 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--tarotonecard-muted);
}

/* ---- States ---------------------------------------------------------------------------------- */

/* Drawing: the card lifts slightly and the lantern glow pulses while the reading is fetched. */
.tarotonecard[data-tarotonecard-state="drawing"] .tarotonecard-card-inner {
    translate: 0 -0.5rem;
}

.tarotonecard[data-tarotonecard-state="drawing"] .tarotonecard-card::before {
    animation: tarotonecard-glow 1.6s ease-in-out infinite alternate;
}

.tarotonecard[data-tarotonecard-state="revealed"] .tarotonecard-card::before {
    opacity: 0.42;
}

/* Revealed: the card settles and turns to its front. */
.tarotonecard[data-tarotonecard-state="revealed"] .tarotonecard-card-inner {
    transform: rotateY(180deg);
}

@keyframes tarotonecard-glow {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 0.5;
    }
}

/* ---- Panel: intro, button, status, reading -------------------------------------------------- */

.tarotonecard-panel {
    display: grid;
    gap: 1rem;
    justify-items: center;
    inline-size: 100%;
    max-inline-size: 40rem;
    text-align: center;
}

.tarotonecard-intro {
    margin: 0;
    max-inline-size: 34ch;
    color: var(--tarotonecard-muted);
}

.tarotonecard-button {
    min-block-size: 2.75rem;
    min-inline-size: 11rem;
    padding: 0.65rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--tarotonecard-button-bg);
    color: var(--tarotonecard-button-fg);
    font: inherit;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: box-shadow 160ms ease, opacity 160ms ease;
}

.tarotonecard-button:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tarotonecard-lantern) 45%, transparent);
}

.tarotonecard-button:focus-visible {
    outline: 3px solid var(--tarotonecard-accent);
    outline-offset: 3px;
}

.tarotonecard-button:disabled {
    cursor: progress;
    opacity: 0.72;
    box-shadow: none;
}

.tarotonecard-status {
    min-block-size: 1.5em;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--tarotonecard-muted);
}

.tarotonecard-status:empty {
    min-block-size: 0;
}

.tarotonecard-error {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-inline-start: 3px solid currentColor;
    text-align: start;
}

.tarotonecard-result {
    inline-size: 100%;
    text-align: start;
}

.tarotonecard-result.tarotonecard-is-entering {
    animation: tarotonecard-enter 420ms var(--tarotonecard-ease) both;
}

@keyframes tarotonecard-enter {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
}

.tarotonecard-reading {
    display: grid;
    gap: 1.5rem;
}

.tarotonecard-reading-header {
    display: grid;
    gap: 0.35rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--tarotonecard-rule);
}

.tarotonecard-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tarotonecard-accent);
}

.tarotonecard-name {
    margin: 0;
    font-size: clamp(1.45rem, 1.1rem + 1.4cqi, 1.9rem);
    font-variant: small-caps;
    letter-spacing: 0.05em;
    line-height: 1.15;
}

.tarotonecard-name:focus {
    outline: none;
}

.tarotonecard-name:focus-visible {
    outline: 2px solid var(--tarotonecard-accent);
    outline-offset: 0.3rem;
    border-radius: 0.2rem;
}

.tarotonecard-orientation {
    justify-self: start;
    margin: 0;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--tarotonecard-rule);
    border-radius: 999px;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tarotonecard-summary {
    margin: 0.4rem 0 0;
    font-size: 1.125em;
    line-height: 1.5;
}

.tarotonecard-section {
    display: grid;
    gap: 0.75rem;
}

.tarotonecard-section-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tarotonecard-muted);
}

.tarotonecard-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarotonecard-keywords li {
    padding: 0.2rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--tarotonecard-gold) 55%, transparent);
    border-radius: 999px;
    font-size: 0.9375rem;
}

.tarotonecard-paragraphs {
    display: grid;
    gap: 0.9em;
    max-inline-size: 68ch;
    line-height: 1.7;
}

.tarotonecard-paragraphs p {
    margin: 0;
}

.tarotonecard-notice {
    margin: 0;
    font-style: italic;
}

/* ---- Wide containers: card beside the reading ----------------------------------------------- */

@container (min-width: 46rem) {
    .tarotonecard-layout {
        grid-template-columns: minmax(12rem, var(--tarotonecard-card-width)) minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;
    }

    .tarotonecard-stage {
        position: sticky;
        inset-block-start: 1.5rem;
    }

    .tarotonecard-panel {
        justify-items: start;
        text-align: start;
    }

    .tarotonecard-intro {
        max-inline-size: 42ch;
    }
}

/* ---- Accessibility preferences ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tarotonecard *,
    .tarotonecard *::before {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .tarotonecard-face,
    .tarotonecard-button,
    .tarotonecard-keywords li,
    .tarotonecard-orientation {
        border: 1px solid CanvasText;
    }

    .tarotonecard-card::before {
        display: none;
    }
}