/* Tarot catalog — shared layout and card-detail styles */

.tarot-catalog,
.tarot-card-detail {
    color: white;
}

/* Section banner rendered under the global logo on every /tarot* page. */
.tarot-section-banner {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    background-color: #fff;
    color: #1c1c1c;
    padding: 8px 0;
    margin: 0 -70px 40px;
}

@media only screen and (max-width: 992px) {
    .tarot-section-banner {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.tarot-header {
    text-align: center;
    margin-bottom: 40px;
}

.tarot-header h1 {
    margin-bottom: 20px;
}

.tarot-intro {
    color: #C8C8C8;
}

.tarot-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin-bottom: 30px;
}

.tarot-categories a {
    color: #C8C8C8;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.tarot-categories a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.tarot-readings-promo-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.tarot-readings-promo {
    display: block;
    padding: 20px 24px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    color: #1c1c1c;
    text-decoration: none;
    transition: border-color 200ms ease;
}

.tarot-readings-promo:hover {
    border-color: #A7CBD7;
    color: #1c1c1c;
}

.tarot-readings-promo-text {
    flex: 1 1 auto;
}

.tarot-readings-promo-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #A7CBD7;
    margin-bottom: 4px;
}

.tarot-readings-promo-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.tarot-readings-promo-title-arrow {
    margin-left: 8px;
    color: #1c1c1c;
}

.tarot-readings-promo-summary {
    color: #555;
    font-size: 14px;
}

.tarot-search {
    margin-bottom: 30px;
}

.tarot-search input {
    width: 100%;
    padding: 12px 16px;
    background-color: #1c1c1c;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
}

.tarot-search input:focus {
    outline: none;
    border-color: #A7CBD7;
}

.tarot-search input::placeholder {
    color: #8a8a8a;
}

.tarot-search-empty {
    color: #C8C8C8;
    text-align: center;
    margin-top: 30px;
}

.tarot-card-tile.is-hidden,
.tarot-section.is-hidden,
.tarot-categories a.is-hidden {
    display: none;
}

.tarot-section {
    margin-top: 50px;
    scroll-margin-top: 20px;
}

.tarot-section h2 {
    margin-bottom: 20px;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 8px;
}

.tarot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.tarot-card-tile {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-decoration: none;
    color: white;
}

.tarot-card-tile:hover {
    color: white;
}

.tarot-card-art {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-lift: 0px;
    --tilt-scale: 1;
    position: relative;
    aspect-ratio: 9 / 16;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
    transform:
        perspective(1200px)
        translateY(var(--tilt-lift))
        scale(var(--tilt-scale))
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y));
    transition: transform 200ms ease;
    will-change: transform;
}

.tarot-card-flipper {
    --flip: 0deg;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--flip));
    transition: transform 600ms cubic-bezier(0.4, 0.1, 0.2, 1);
    will-change: transform;
}

.tarot-card-art.is-flipped .tarot-card-flipper {
    --flip: 180deg;
}

.tarot-card-face,
.tarot-card-back {
    position: absolute;
    inset: 0;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: content-box;
    border: 8px solid #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: box-shadow 250ms ease;
}

.tarot-card-back {
    transform: rotateY(180deg);
}

.tarot-card-tile:hover .tarot-card-face,
.tarot-card-tile:hover .tarot-card-back {
    box-shadow: 18px 14px 30px rgba(0, 0, 0, 0.55);
}

.tarot-card-image {
    flex: 0 0 260px;
}

.tarot-card-info {
    flex: 1 1 auto;
    padding: 0 0 0 20px;
}

.tarot-card-name {
    color: #A7CBD7;
    margin-bottom: 6px;
}

.tarot-card-summary {
    color: #C8C8C8;
}

/* Card detail page */

.tarot-breadcrumb {
    font-size: 14px;
    color: #8a8a8a;
    margin-bottom: 25px;
}

.tarot-breadcrumb a {
    color: #bdbdbd;
}

.tarot-breadcrumb span {
    color: white;
}

.tarot-card-hero {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
}

.tarot-card-hero-image {
    width: 100%;
}

.tarot-card-hero-info h1 {
    margin: 12px 0 16px;
}

.tarot-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tarot-badge {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    color: #bdbdbd;
}

.tarot-card-lead {
    color: #d6d6d6;
    margin-bottom: 18px;
}

.tarot-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.tarot-keywords li {
    font-size: 13px;
    padding: 4px 10px;
    background-color: #262626;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #C8C8C8;
}

.tarot-meanings {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.tarot-meaning h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

.tarot-topics,
.tarot-block,
.tarot-related {
    margin-bottom: 50px;
}

.tarot-topic {
    margin-bottom: 24px;
}

.tarot-topic h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #A7CBD7;
}

.tarot-topic-row {
    margin-bottom: 6px;
    color: #d6d6d6;
}

.tarot-topic-row strong {
    color: white;
    margin-right: 4px;
}

.tarot-prose p {
    margin-bottom: 14px;
    color: #d6d6d6;
}

.tarot-prose p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 740px) {
    .tarot-card-hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tarot-card-hero-image {
        max-width: 320px;
        margin: 0 auto;
    }

    .tarot-meanings {
        gap: 20px;
    }

    .tarot-grid {
        grid-template-columns: 1fr;
    }

    .tarot-card-image {
        flex: 0 0 160px;
    }
}

/* Reading page header */

.tarot-reading-header {
    text-align: center;
    margin-bottom: 24px;
}

.tarot-reading-header h1 {
    margin-bottom: 8px;
}

.tarot-reading-header .tarot-intro {
    color: #C8C8C8;
    margin: 0;
}

/* Reading stage — flat surface in site palette, fan of all 78 cards. */

.tarot-stage-wrapper {
    --stage-max: 1100px;
    --stage-pad: 16px;
    width: min(100vw - var(--stage-pad) * 2, var(--stage-max));
    margin: 20px auto 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.tarot-stage {
    --card-w: clamp(70px, 11vw, 110px);
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #1c1c1c;
    background-image: radial-gradient(ellipse at center, #232323 0%, #1c1c1c 55%, #141414 100%);
    border: 1px solid #2F2F2F;
    border-radius: 10px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.tarot-fan-card,
.tarot-fan-card-lifted {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.tarot-stage-fan,
.tarot-stage-pick {
    position: absolute;
    inset: 0;
}

.tarot-stage-pick {
    pointer-events: none;
}

/* When the spread draws multiple cards, slim down the lifted card so several
   fit side by side in the stage. The single-card case keeps the larger
   default. */
.tarot-stage[data-cards="3"] .tarot-fan-card-lifted {
    --lifted-w: calc(var(--card-w) * 1.5);
}

/* Register intro vars so CSS transitions interpolate them — without
   @property they are treated as strings and changes apply instantly. */
@property --intro-tx {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@property --intro-ty {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@property --intro-rotate {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --intro-scale {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.tarot-fan-card {
    --fan-angle: 0deg;
    --intro-tx: 0px;
    --intro-ty: 0px;
    --intro-rotate: 0deg;
    --intro-scale: 1;
    --intro-opacity: 1;
    position: absolute;
    width: var(--card-w);
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: var(--intro-opacity);
    transform:
        translate(-50%, -50%)
        translate(var(--intro-tx), var(--intro-ty))
        rotate(calc(var(--fan-angle) + var(--intro-rotate)))
        scale(var(--intro-scale));
    transform-origin: center;
    transition:
        transform 100ms ease-out,
        opacity 300ms ease,
        filter 300ms ease;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Intro animation: cards fly from the stage center, scale 0 + spin, into
   their fan positions. The .is-intro class slows the transition so the
   journey is visible; once removed, the normal 100ms hover-transition
   takes over. */
.tarot-fan-card.is-intro {
    transition:
        transform 700ms cubic-bezier(0.34, 1.1, 0.5, 1),
        opacity 400ms ease-out;
}

.tarot-fan-card:focus,
.tarot-fan-card:focus-visible {
    outline: none;
}

.tarot-fan-card .tarot-card-flipper {
    --flip: 180deg;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--flip));
    transition: transform 600ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

.tarot-fan-card .tarot-card-face,
.tarot-fan-card .tarot-card-back {
    position: absolute;
    inset: 0;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-origin: border-box;
    background-clip: content-box;
    border: 5px solid #fff;
    border-radius: 6px;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tarot-fan-card .tarot-card-back {
    transform: rotateY(180deg);
}

.tarot-fan-card:hover {
    --intro-ty: -28px;
    --intro-scale: 1.06;
}

.tarot-stage-fan.is-picking .tarot-fan-card {
    pointer-events: none;
}

.tarot-fan-card-lifted {
    --lifted-tx: 0px;
    --lifted-ty: 0px;
    --lifted-rotate: 0deg;
    --lifted-scale: 1;
    --lifted-center-x: -50%;
    --lifted-center-y: -50%;
    --slot-tx: 0px;
    --slot-ty: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--lifted-w, calc(var(--card-w) * 2));
    aspect-ratio: 9 / 16;
    transform:
        translate(var(--lifted-center-x), var(--lifted-center-y))
        translate(var(--slot-tx), var(--slot-ty))
        translate(var(--lifted-tx), var(--lifted-ty))
        rotate(var(--lifted-rotate))
        scale(var(--lifted-scale));
    transform-origin: center;
    z-index: 500;
    pointer-events: none;
    transition: transform 600ms cubic-bezier(0.34, 1.1, 0.5, 1);
    will-change: transform;
}

.tarot-fan-card-lifted .tarot-card-flipper {
    --flip: 180deg;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--flip));
    transition: transform 600ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

.tarot-fan-card-lifted .tarot-card-face,
.tarot-fan-card-lifted .tarot-card-back {
    position: absolute;
    inset: 0;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-origin: border-box;
    background-clip: content-box;
    border: 6px solid #fff;
    border-radius: 8px;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.tarot-fan-card-lifted .tarot-card-back {
    transform: rotateY(180deg);
}

.tarot-fan-card-lifted.is-flipped .tarot-card-flipper {
    --flip: 0deg;
}

.tarot-fan-card-lifted.is-reversed .tarot-card-face {
    transform: rotate(180deg);
}

.tarot-stage-actions {
    text-align: center;
    margin-top: 16px;
    min-height: 44px;
}

/* Mobile / narrow screens — horizontal scroll row of all 78 cards. */
@media only screen and (max-width: 1080px) {
    .tarot-stage {
        --card-w: clamp(90px, 14vw, 130px);
        aspect-ratio: 3 / 4;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .tarot-stage-wrapper {
        margin: 16px auto 24px;
    }

    /* On narrow screens the lifted card escapes the scrolling stage and pins
       to the viewport, dead-centered, so it stays visible no matter where
       the user has scrolled the row of backs. Sized clearly bigger than a
       fan tile so the picked card stands out against the row. Only applies
       to single-card spreads — for multi-card spreads we let the cards land
       inside the stage so they line up in their slots. */
    .tarot-stage[data-cards="1"] .tarot-fan-card-lifted {
        --lifted-w: min(45vw, calc(60vh * 9 / 16), 200px);
        --lifted-center-x: 0px;
        --lifted-center-y: 0px;
        position: fixed;
        margin: auto;
        width: var(--lifted-w);
        height: calc(var(--lifted-w) * 16 / 9);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .tarot-stage[data-cards="3"] .tarot-fan-card-lifted {
        --lifted-w: calc(var(--card-w) * 1.4);
    }

    .tarot-fan-card {
        scroll-snap-align: center;
    }
}

/* Reading buttons */

.tarot-reading-button {
    padding: 12px 20px;
    background-color: #A7CBD7;
    color: #1c1c1c;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.tarot-reading-button:hover {
    background-color: #c0dde6;
}

.tarot-reading-button-ghost {
    background-color: transparent;
    color: #C8C8C8;
    border: 1px solid #3a3a3a;
}

.tarot-reading-button-ghost:hover {
    background-color: #262626;
    color: #fff;
}

/* Interpretation under the stage */

.tarot-reading-result {
    margin: 30px 0;
}

.tarot-reading-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarot-reading-card {
    background-color: #1c1c1c;
    border: 1px solid #2F2F2F;
    border-radius: 10px;
    padding: 24px;
    min-width: 0;
}

.tarot-reading-card-position {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A7CBD7;
    margin-bottom: 10px;
}

.tarot-reading-card-header {
    margin-bottom: 14px;
}

.tarot-reading-card-header h3 {
    margin: 0 0 4px;
    font-size: 24px;
    color: #fff;
}

.tarot-reading-card-orientation {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A7CBD7;
}

.tarot-reading-card-summary {
    color: #d6d6d6;
    margin-bottom: 12px;
    font-style: italic;
}

.tarot-reading-card-body p {
    color: #d6d6d6;
    margin-bottom: 12px;
}

.tarot-reading-card-link {
    display: inline-block;
    margin-top: 8px;
    color: #A7CBD7;
    text-decoration: none;
    font-size: 14px;
}

.tarot-reading-card-link:hover {
    color: #fff;
}

.tarot-reading-error {
    color: #d6d6d6;
    text-align: center;
    padding: 20px;
    border: 1px dashed #3a3a3a;
    border-radius: 8px;
}