/* Product page — the two dark cards at the top of the "OG Product Page" design. The ticket's card
 * (components/product/v5/ticket.php) is the silk cloud, drifting slowly under a passing sheen, with a top-corner glow,
 * a darker bottom for the handle and a vignette; the cloud carries on faintly behind the rest of the ticket. The
 * checkout banner (checkout.php) is a dark studio: a CSS light cone and two thin light rings at its end, the picked
 * method's 3D art (graphite) floating over them, and the buyer preview (product-checkout-hero.js). Both stay dark in
 * white mode. Phones show neither: the ticket is hidden and the banner is a plain head there. */

.pd-silk, .pd-co__bottom, .pd-co__stage { display: none; }

@media (min-width: 768px) {
    .pd-silkcard { position: relative; isolation: isolate; overflow: hidden; border-radius: 17px; background: #050506; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); }

    /* ---- Ticket card: the silk wave ---- */
    .pd-ticket__card { min-height: 212px; }
    .pd-silk { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; }
    .pd-silk img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 62% 38%; }
    .pd-silk--drift img { animation: pdSilkDrift 28s ease-in-out infinite alternate; }
    /* light from the top corner, a darker bottom so the handle reads, and a soft vignette */
    .pd-silk::after {
        content: ''; position: absolute; inset: 0;
        background:
            radial-gradient(65% 70% at 88% 0%, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0) 70%),
            linear-gradient(190deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.62) 100%),
            radial-gradient(140% 110% at 50% 45%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.5) 100%);
    }
    /* a sheen that sweeps across the silk every few seconds */
    .pd-ticket__sheen { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .pd-ticket__sheen::before {
        content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 34%; transform: rotate(16deg);
        background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.13) 50%, rgb(255 255 255 / 0) 100%);
        animation: pdSheen 8s ease-in-out 1.2s infinite;
    }
    /* hairline catch-light on the top edge */
    .pd-ticket__card::before {
        content: ''; position: absolute; top: 0; left: 14%; right: 14%; z-index: 1; height: 1px;
        background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.6), rgb(255 255 255 / 0));
    }
    .pd-ticket__card .pd-ticket__top { position: relative; z-index: 1; }

    /* ---- The handle: clean and heavy (the user's pick of three) ---- */
    /* bright white letters with a faint top-to-bottom falloff, a soft glow and a dark lift off the cloud; the @ is a small
       raised grey mark; the whole name rises in, sharpening from a blur, on load */
    .pd-ticket__name {
        font-weight: 800; letter-spacing: -0.055em; /* site font (Satoshi): its l, I and 1 stay distinct, which a handle needs */
        filter: drop-shadow(0 10px 26px rgb(0 0 0 / 0.75)); animation: pdRise .9s cubic-bezier(0.22, 1, 0.36, 1) .2s both;
    }
    .pd-ticket__chars {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #d4d4da 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
        text-shadow: 0 0 34px rgb(255 255 255 / 0.18);
    }
    .pd-ticket__sym {
        margin-inline-end: 0.07em; font-size: 0.48em; font-weight: 500; letter-spacing: 0; vertical-align: 0.72em; color: rgb(255 255 255 / 0.5);
    }
    /* "✓ Verified listing · Secure transfer" */
    .pd-ticket__meta {
        display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / 0.8);
        text-shadow: 0 1px 10px rgb(0 0 0 / 0.85); animation: pdFadeUp .7s ease .7s both;
    }
    .pd-ticket__meta i { font-size: 13px; color: #fff; filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.35)); }

    .pd-ticket__in { position: relative; isolation: isolate; overflow: hidden; border-radius: 23px; }
    /* Arabic: the handle sits at the reading start (right), so the darker bottom corner of the shading moves with it */
    html[dir="rtl"] .pd-ticket__card .pd-silk::after { transform: scaleX(-1); }

    /* ---- Checkout banner: studio ---- */
    .pd-co__hero {
        display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 236px; padding: 22px 24px;
        background: radial-gradient(120% 140% at 0% 100%, #141416 0%, #060607 55%, #020203 100%);
    }
    html[dir="rtl"] .pd-co__hero { background: radial-gradient(120% 140% at 100% 100%, #141416 0%, #060607 55%, #020203 100%); }
    .pd-co__hero .pd-co__head { position: relative; z-index: 2; align-items: flex-start; }
    .pd-co__hero .pd-co__titles { gap: 7px; }
    .pd-co__hero .pd-co__title { color: #fff; font-size: 27px; }
    .pd-co__hero .pd-co__sub { color: rgb(255 255 255 / 0.6); font-size: 12px; font-weight: 500; }
    .pd-co__hero .pd-co__badge {
        gap: 7px; height: 28px; border-color: rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.03); color: rgb(255 255 255 / 0.85); font-size: 12px; font-weight: 600;
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .pd-co__hero .pd-co__badge i { font-size: 10px; color: rgb(255 255 255 / 0.7); }
    .pd-co__bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 16px; }
    .pd-co__buyer { display: flex; flex-direction: column; gap: 9px; min-width: 0; max-width: calc(100% - 300px); }
    .pd-co__buyer-name {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
        transition: color .25s ease;
    }
    .pd-co__buyer-name.is-empty { color: rgb(255 255 255 / 0.38); }
    .pd-co__buyer-handle {
        display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap;
        font-family: var(--pd-mono); font-size: 11.5px; color: rgb(255 255 255 / 0.65);
    }
    .pd-co__buyer-handle i { flex-shrink: 0; font-size: 12px; color: rgb(255 255 255 / 0.8); }
    .pd-co__buyer-handle bdi { overflow: hidden; text-overflow: ellipsis; }

    /* Stage: the marble cylinder under a spotlight (checkout-stage.webp, the design's pedestal photo) fades into the
       studio toward the text; the art floats on the marble. The user asked for the cylinder back on 2026-10-29. */
    .pd-co__stage {
        position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 0; display: block; width: min(62%, 380px); pointer-events: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    }
    html[dir="rtl"] .pd-co__stage { -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 34%); mask-image: linear-gradient(270deg, transparent 0%, #000 34%); }
    .pd-co__stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: 0.95; filter: contrast(1.06); }
    /* film grain over the photo so its smooth gradients do not band */
    .pd-co__stage::before {
        content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
    }
    .pd-co__art { z-index: 2; }
    .pd-co__art { position: absolute; left: 50%; bottom: 19%; display: block; width: 124px; height: 124px; margin-left: -62px; }
    .pd-co__art::after {
        content: ''; position: absolute; left: 50%; bottom: -6px; width: 112px; height: 16px; transform: translateX(-50%); border-radius: 50%;
        background: radial-gradient(ellipse, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0) 70%);
    }
    .pd-co__art img {
        position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
        filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.7)); animation: pdArtFloat 6s ease-in-out infinite;
    }
    .pd-co__art.is-swap img { animation: pdArtIn .55s cubic-bezier(0.34, 1.56, 0.64, 1), pdArtFloat 6s ease-in-out .55s infinite; }

    /* All the checkout's 3D art in graphite: the white ChatGPT icons darkened so they sit in the black design, with
       only their silver edges catching the light (the user found the white ones too bright on black) */
    /* the banner's coin a little whiter than the rest, with a thin white rim of light around its edges */
    .pd .pd-co__art img {
        filter: brightness(0.8) contrast(1.3) drop-shadow(0 0 1px rgb(255 255 255 / 0.65)) drop-shadow(0 0 7px rgb(255 255 255 / 0.2)) drop-shadow(0 14px 18px rgb(0 0 0 / 0.7));
    }
    .pd .pd-method__art { filter: brightness(0.62) contrast(1.4) drop-shadow(0 8px 10px rgb(0 0 0 / 0.5)); }
    .pd :is(.pd-note__art, .pd-divider__art) { filter: brightness(0.62) contrast(1.4) drop-shadow(0 3px 4px rgb(0 0 0 / 0.4)); }
    html[dir="rtl"] .pd-co__buyer-name { letter-spacing: 0; }
}

@keyframes pdArtFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes pdArtIn { 0% { opacity: 0; transform: scale(0.6) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes pdSilkDrift { 0% { transform: scale(1.08) translate(0, 0); } 100% { transform: scale(1.18) translate(-3%, 2%); } }
@keyframes pdSheen { 0% { left: -60%; } 40%, 100% { left: 130%; } }
@keyframes pdRise { from { opacity: 0; transform: translateY(10px); filter: blur(6px) drop-shadow(0 10px 26px rgb(0 0 0 / 0.75)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 10px 26px rgb(0 0 0 / 0.75)); } }
@keyframes pdFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pd-co__art img, .pd-co__art.is-swap img, .pd-silk--drift img, .pd-ticket__sheen::before, .pd-ticket__name, .pd-ticket__meta { animation: none; }
    .pd-ticket__sheen { display: none; }
}