/* 3D Playing Cards page (EN + ES). Black stage with red/cyan anaglyph accents.
   Full-bleed bands (dividers, gels, spotlights) span the viewport; content is capped. */

:root {
    --ana-red: #ff3b3b;
    --ana-cyan: #1fd1f0;
    --tape-red: rgba(255, 77, 77, 0.8);
    --tape-cyan: rgba(34, 211, 238, 0.8);
    --hairline: rgba(255, 255, 255, 0.10);
    --content: 1025px;
    --band-x: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { overflow-x: clip; }
::selection { background: #fff; color: #000; }
a { color: inherit; }

/* ---------- Sticky header ---------- */
.ship-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 101px;
    padding: 0 clamp(24px, 5vw, 80px);
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
}
.ship-nav .back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    margin: -4px;
    text-decoration: none;
    transition: opacity .2s ease;
}
.ship-nav .back-button:hover { opacity: 0.72; }
.ship-nav .back-button canvas { display: block; }
.ship-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ship-lang a, .ship-lang span { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; }
.ship-lang a:hover { color: #fff; }
.ship-lang .active { color: #fff; font-weight: 600; }
.ship-lang .sep { color: rgba(255, 255, 255, 0.28); }
.ship-lang a { display: inline-flex; align-items: center; padding: 14px 7px; margin: -14px -7px; }
.ship-lang a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* ---------- Hero ---------- */
.c3-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 76px 24px 49px;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}
.dot-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 1040px);
    cursor: pointer;
}
.dot-title-wrap:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.72); outline-offset: 8px; }
.dot-title-wrap canvas { display: block; image-rendering: pixelated; max-width: 100%; height: auto; }
.c3-hero .lead {
    margin: 32px auto 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.011em;
    color: rgba(255, 255, 255, 0.70);
}

/* ---------- Anaglyph divider (full viewport width) ---------- */
.c3-divider {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 1px 0;
    background: #000;
    position: relative;
    z-index: 3;
}
.c3-divider span { display: block; height: 1.5px; }
.c3-divider .r {
    background: linear-gradient(90deg, rgba(255, 59, 59, 0) 0%, var(--ana-red) 42%, rgba(255, 59, 59, 0) 85%);
    box-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
}
.c3-divider .c {
    background: linear-gradient(90deg, rgba(31, 209, 240, 0) 15%, var(--ana-cyan) 58%, rgba(31, 209, 240, 0) 100%);
    box-shadow: 0 0 8px rgba(31, 209, 240, 0.8);
}

/* ---------- Shared band + type ---------- */
.c3-band {
    position: relative;
    overflow: hidden;
    background: #000;
    padding-inline: var(--band-x);
}
.c3-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
}
.c3-title {
    margin: 0;
    font-size: clamp(32px, 3.9vw, 46px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.11;
    text-align: center;
    text-wrap: balance;
}
.c3-gel {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: screen;
}
.c3-gel.r { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 59, 59, 0.35) 0%, rgba(255, 59, 59, 0) 100%); }
.c3-gel.c { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(31, 209, 240, 0.35) 0%, rgba(31, 209, 240, 0) 100%); }

/* ---------- Trailer ---------- */
.c3-trailer { padding: 32px 24px 48px; }
.video-frame {
    position: relative;
    width: min(100%, 960px);
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #000;
    overflow: hidden;
}
.video-frame::before { content: ""; display: block; padding-bottom: 56.25%; }
.video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    cursor: pointer;
}
@supports (height: 100dvh) {
    @media (min-width: 769px) {
        .video-frame { width: min(100%, 960px, calc(177.78dvh - 412px)); }
    }
}

/* ---------- Gallery with red/cyan gels anchored to the grid edges ---------- */
.c3-gallery {
    /* Gel centers sit on the gallery edges, so they hug the grid at any width. */
    --gel-cx: max(8.5%, calc(50% - 492px));
    --gel-r: 350px;
    padding: 96px 32px 97px;
    border-bottom: 1px solid var(--hairline);
}
.c3-gallery .c3-gel { top: -7%; height: 114%; width: calc(2 * var(--gel-cx) + 2 * var(--gel-r)); }
.c3-gallery .c3-gel.r { left: calc(-1 * var(--gel-r)); }
.c3-gallery .c3-gel.c { right: calc(-1 * var(--gel-r)); }
.c3-grid {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--hairline);
}
.c3-grid .cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}
.c3-grid .cell img,
.c3-card .photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: filter .35s ease, transform .6s ease;
}
.c3-grid .cell:hover img { filter: none; transform: scale(1.03); }

/* ---------- Stage I: build ---------- */
.c3-build { padding-top: 110px; padding-bottom: 120px; text-align: center; }
.c3-build .c3-title { margin-top: 36px; }
.c3-lede {
    margin: 18px auto 0;
    max-width: 540px;
    font-size: 17px;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.65);
}
.c3-marks {
    list-style: none;
    margin: 84px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
}
.c3-marks li { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.c3-tape {
    width: 20px;
    height: 20px;
    background:
        linear-gradient(var(--tape-red), var(--tape-red)) 7px 0 / 2px 16px no-repeat,
        linear-gradient(var(--tape-red), var(--tape-red)) 0 8px / 16px 2px no-repeat,
        linear-gradient(var(--tape-cyan), var(--tape-cyan)) 9px 2px / 2px 16px no-repeat,
        linear-gradient(var(--tape-cyan), var(--tape-cyan)) 2px 10px / 16px 2px no-repeat;
}
.c3-marks h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
.c3-marks p {
    margin: 0;
    font-size: 14.5px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Stage II: design ---------- */
.c3-design { padding-top: 100px; padding-bottom: 110px; text-align: center; }
.c3-design .c3-lede { margin-top: 20px; max-width: none; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.70); }
.c3-features { list-style: none; margin: 20px 0 0; padding: 24px 0 0; }
.c3-features li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 20px;
    border-top: 1px solid var(--hairline);
}
/* Red/cyan wash follows the hovered row; the first row stays lit while the list is idle. */
.c3-features li::before,
.c3-features li::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.c3-features li::before { background: radial-gradient(ellipse 55% 200% at 30% 50%, #380d0d 0%, #1a0606 40%, #000 100%); }
.c3-features li::after { background: radial-gradient(ellipse 55% 200% at 70% 50%, #072e35 0%, #031518 40%, #000 100%); mix-blend-mode: screen; }
.c3-features h3,
.c3-features p { position: relative; z-index: 1; margin: 0; transition: color .35s ease; }
.c3-features h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.3px; color: rgba(255, 255, 255, 0.70); }
.c3-features p { font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.45); }
.c3-features li.is-lit::before,
.c3-features li.is-lit::after,
.c3-features li:hover::before,
.c3-features li:hover::after { opacity: 1; }
.c3-features li.is-lit h3,
.c3-features li:hover h3 { color: #fff; }
.c3-features li.is-lit p,
.c3-features li:hover p { color: rgba(255, 255, 255, 0.70); }
@media (hover: hover) {
    .c3-features:hover li.is-lit:not(:hover)::before,
    .c3-features:hover li.is-lit:not(:hover)::after { opacity: 0; }
    .c3-features:hover li.is-lit:not(:hover) h3 { color: rgba(255, 255, 255, 0.70); }
    .c3-features:hover li.is-lit:not(:hover) p { color: rgba(255, 255, 255, 0.45); }
}

/* ---------- Stage III: magic lineup ---------- */
.c3-magic { padding-top: 100px; padding-bottom: 120px; }
.c3-lineup {
    list-style: none;
    margin: 64px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.c3-lineup > li:nth-child(2) { padding-top: 56px; }
.c3-lineup > li:nth-child(3) { padding-top: 20px; }
.c3-lineup > li:nth-child(4) { padding-top: 76px; }
.c3-card {
    position: relative;
    /* Spotlight from the top-left corner, drawn as a background so the frame can overflow. */
    background:
        radial-gradient(212px 280px at 50% 20px, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%),
        #060606;
    outline: 1px solid rgba(255, 255, 255, 0.07);
    outline-offset: -0.5px;
    text-align: center;
    transition: outline-color .3s ease;
}
/* Anaglyph frame on hover: red shifted up-left, cyan down-right, glowing like the dividers. */
.c3-card::before,
.c3-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    border: 1.5px solid;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.c3-card::before { border-color: var(--ana-red); box-shadow: 0 0 8px rgba(255, 59, 59, 0.8); }
.c3-card::after { border-color: var(--ana-cyan); box-shadow: 0 0 8px rgba(31, 209, 240, 0.8); }
.c3-card:hover { outline-color: transparent; }
.c3-card:hover::before { opacity: 1; transform: translate(-3px, -2px); }
.c3-card:hover::after { opacity: 1; transform: translate(3px, 2px); }
.c3-card .photo { position: relative; z-index: 1; height: 300px; overflow: hidden; }
.c3-card .photo img { opacity: 0.92; }
.c3-card .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #060606 0%, rgba(6, 6, 6, 0) 40%, rgba(6, 6, 6, 0) 60%, #060606 100%);
}
.c3-card:hover .photo img { filter: none; opacity: 1; }
.c3-card .text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 22px 28px;
}
.c3-card h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.3px; }
.c3-card p { margin: 0; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.55); }

/* ---------- Stage IV: glasses, two gels centered on the band ---------- */
.c3-glasses {
    /* 700px gels 210px off center at the 1185px design width; they widen with the viewport. */
    --gel: clamp(420px, 59vw, 1400px);
    --gel-off: clamp(110px, 17.7vw, 420px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 375px;
    padding-top: 72px;
    padding-bottom: 72px;
    padding-inline: clamp(20px, 10vw, 120px);
    text-align: center;
}
.c3-glasses .c3-gel { width: var(--gel); height: 700px; top: calc(50% - 350px); }
.c3-glasses .c3-gel.r { left: calc(50% - var(--gel-off) - var(--gel) / 2); }
.c3-glasses .c3-gel.c { left: calc(50% + var(--gel-off) - var(--gel) / 2); }
.c3-glasses h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
    filter: drop-shadow(-3px 0 0 rgba(255, 59, 59, 0.7)) drop-shadow(3px 0 0 rgba(31, 209, 240, 0.7));
}
.c3-glasses p {
    position: relative;
    z-index: 2;
    margin: 28px auto 0;
    max-width: 640px;
    font-size: 19px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Curtain call: spotlight from above, retailers ---------- */
.c3-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 533px;
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
}
.c3-beam {
    position: absolute;
    left: 50%;
    top: -560px;
    width: max(1100px, 100% + 40px);
    height: 1200px;
    transform: translateX(-50%);
    pointer-events: none;
}
.c3-beam::before,
.c3-beam::after { content: ""; position: absolute; inset: 0; }
.c3-beam::before { background: radial-gradient(ellipse 45% 50% at 40% 50%, #200707 0%, #000 100%); }
.c3-beam::after { background: radial-gradient(ellipse 45% 50% at 60% 50%, #04191e 0%, #000 100%); mix-blend-mode: screen; }
.c3-final h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 720px;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.c3-final p {
    position: relative;
    z-index: 2;
    margin: 22px auto 0;
    max-width: 580px;
    font-size: 17px;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.65);
}
.c3-retailers {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 52px;
    border-radius: 40px;
    outline: 1px solid rgba(255, 255, 255, 0.18);
    outline-offset: -0.5px;
    overflow: hidden;
}
.c3-retailers a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 30px;
    font-size: 15.5px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
/* Hover: a red/cyan wash fills the segment; the label stays still. */
.c3-retailers a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 120% at 25% 50%, rgba(255, 59, 59, 0.28) 0%, rgba(255, 59, 59, 0) 100%),
        radial-gradient(ellipse 70% 120% at 75% 50%, rgba(31, 209, 240, 0.28) 0%, rgba(31, 209, 240, 0) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.c3-retailers a + a { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.c3-retailers a:hover::before,
.c3-retailers a:focus-visible::before { opacity: 1; }
.c3-retailers a:focus-visible { outline: 1px solid #fff; outline-offset: -3px; border-radius: 40px; }
.c3-retailers .arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-weight: 400;
}

/* ---------- Footer ---------- */
.c3-footer {
    padding: 30px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.40);
}
/* The credit is printed like the deck: red and cyan offsets that breathe, and split wider on hover. */
.c3-footer .credit {
    display: inline-block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: -0.75px 0 rgba(255, 59, 59, 0.85), 0.75px 0 rgba(31, 209, 240, 0.85);
    animation: c3-ana-breathe 4s ease-in-out infinite;
    transition: text-shadow .3s ease;
    cursor: default;
}
.c3-footer .credit:hover {
    animation: none;
    text-shadow: -2.5px 0 rgba(255, 59, 59, 0.9), 2.5px 0 rgba(31, 209, 240, 0.9);
}
@keyframes c3-ana-breathe {
    0%, 100% { text-shadow: -0.75px 0 rgba(255, 59, 59, 0.85), 0.75px 0 rgba(31, 209, 240, 0.85); }
    50% { text-shadow: -1.5px 0 rgba(255, 59, 59, 0.85), 1.5px 0 rgba(31, 209, 240, 0.85); }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
    :root { --band-x: 40px; }
    .c3-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .c3-lineup > li:nth-child(3) { padding-top: 0; }
    .c3-lineup > li:nth-child(2),
    .c3-lineup > li:nth-child(4) { padding-top: 48px; }
    .c3-lineup > li:nth-child(n+3) { margin-top: -28px; }
    .c3-lineup > li:nth-child(3) { margin-top: 0; }
}

@media (max-width: 768px) {
    :root { --band-x: 20px; }
    .ship-nav { min-height: 77px; padding: 0 20px; }
    .c3-hero { padding: 56px 20px 48px; }
    .c3-trailer { padding: 24px 20px 40px; }
    .c3-gallery { --gel-r: 200px; padding: 64px 20px; }
    .c3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c3-build { padding-top: 64px; padding-bottom: 72px; }
    .c3-build .c3-title { margin-top: 0; }
    .c3-marks { grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
    .c3-marks p { max-width: 320px; }
    .c3-design { padding-top: 64px; padding-bottom: 72px; }
    .c3-design .c3-lede { font-size: 16px; line-height: 26px; }
    .c3-magic { padding-top: 64px; padding-bottom: 72px; }
    .c3-lineup { margin-top: 44px; }
    .c3-glasses { min-height: 0; padding-top: 80px; padding-bottom: 80px; }
    .c3-glasses p { font-size: 17px; line-height: 28px; }
    .c3-final { min-height: 0; padding-top: 80px; padding-bottom: 80px; }
    .c3-final p { font-size: 16px; line-height: 26px; }
    .c3-beam { width: 160%; top: -480px; height: 1000px; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
    .ship-nav { min-height: 59px; padding: 0 14px; }
    .c3-hero { padding: 48px 16px 40px; }
    .c3-hero .lead { font-size: 15px; line-height: 24px; margin-top: 28px; }
    .c3-trailer { padding: 20px 16px 32px; }
    .c3-gallery { --gel-r: 150px; padding: 48px 16px; }
    .c3-grid { grid-template-columns: 1fr; }
    .c3-grid .cell { aspect-ratio: 4 / 3; }
    .c3-lede { font-size: 16px; line-height: 26px; }
    .c3-features li { padding: 20px 8px; }
    .c3-lineup { grid-template-columns: 1fr; gap: 16px; }
    .c3-lineup > li:nth-child(n) { padding-top: 0; margin-top: 0; }
    .c3-card .photo { height: 260px; }
    .c3-retailers { flex-direction: column; align-self: stretch; border-radius: 24px; }
    .c3-retailers a + a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
    .c3-retailers a:focus-visible { border-radius: 24px; }
}

@media (hover: none) {
    .c3-grid .cell img,
    .c3-card .photo img { filter: none; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .c3-footer .credit { animation: none; }
    .c3-grid .cell img,
    .c3-card .photo img { transition: none; }
    .c3-grid .cell:hover img { transform: none; }
}