/* =====================================================================
 * Downloads — apps hub (coming soon).
 * Single immersive hub: hero (CSS jewel aura + brand mark) + two
 * capability tiers (Create / SSHOW Player) + extra anchors.
 * All color flows from design tokens; the ONLY hex literals are the
 * candy hero-mark stops inside downloads.ejs (DESIGN.md §2.4 exception).
 * Korean keep-all throughout; motion mirrors about.css (slow, deliberate)
 * and fully respects prefers-reduced-motion.
 * ===================================================================== */

/* Collapse the centered content wrapper so the hub bleeds full-width,
   matching the About long-form archetype. */
#wrapper-contents:has(#downloads-page) {
    padding: 0;
    margin: 0;
    display: block;
    float: none;
    align-items: initial;
    justify-content: initial;
    background-color: var(--global-body-background);
    overflow-x: clip;
}

#downloads-page {
    --dl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dl-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --dl-pad-x: clamp(24px, 5vw, 80px);
    --dl-content-max: 1100px;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(48px, 8vh, 96px);
    width: 100%;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: clamp(64px, 12vh, 128px) var(--dl-pad-x) clamp(72px, 12vh, 140px);
    box-sizing: border-box;
    color: var(--global-text-color);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    text-align: center;
    overflow-x: clip;
    word-break: keep-all;
    overflow-wrap: anywhere;
    isolation: isolate;
}

/* ---------- Jewel aura — DESIGN.md §2.4 canonical CSS recipe ---------- */
.downloads-aura {
    position: absolute;
    inset: 0 0 auto 0;
    height: 78vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(var(--brand-iris-rgb), 0.16), transparent 70%),
        radial-gradient(34% 42% at 78% 22%, rgba(var(--brand-mulberry-rgb), 0.13), transparent 72%),
        radial-gradient(40% 46% at 62% 72%, rgba(var(--brand-lichen-rgb), 0.13), transparent 70%),
        radial-gradient(36% 40% at 18% 78%, rgba(var(--brand-brass-rgb), 0.11), transparent 72%);
    filter: blur(76px) saturate(112%);
    opacity: 0.72;
    animation: downloads-aura-drift 26s ease-in-out infinite alternate;
}

@keyframes downloads-aura-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(2%, 1%, 0) scale(1.07) rotate(2deg); }
    100% { transform: translate3d(3%, -1%, 0) scale(1.04) rotate(-2deg); }
}

/* ---------- Hero ---------- */
.downloads-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vh, 30px);
    max-width: 780px;
}

.downloads-mark {
    width: clamp(64px, 8vw, 104px);
    aspect-ratio: 603 / 958;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    animation: downloads-fade-in-mark 1.4s var(--dl-ease-spring) 0.1s forwards;
}
.downloads-mark svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* brand-tinted drop-shadow per DESIGN.md §6.2 — never plain black */
    filter: drop-shadow(0 12px 40px rgba(var(--brand-iris-rgb), 0.22));
}
.downloads-mark-base { transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes downloads-fade-in-mark { to { opacity: 1; transform: translateY(0) scale(1); } }

.downloads-title {
    margin: 0;
    font-size: clamp(34px, 5.4vw, 60px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.downloads-tagline {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 400;
    color: var(--global-text-muted);
    line-height: 1.6;
}

/* ---------- Eyebrow (shared 13px system) ---------- */
.downloads-eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

/* ---------- Tier ---------- */
.downloads-tier {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--dl-content-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 32px);
}
.downloads-tier-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.downloads-tier-caption {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--global-text-muted);
    line-height: 1.6;
}

/* ---------- Grid ---------- */
.downloads-grid {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
    width: 100%;
}
.downloads-grid-4 { grid-template-columns: repeat(4, 1fr); }
.downloads-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
}
@media (max-width: 900px) { .downloads-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
    .downloads-grid-4,
    .downloads-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.downloads-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 1.7vw, 26px);
    min-height: 150px;
    text-align: left;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: var(--global-border-radius);
    /* Cursor-tracked bloom direction (default top-left so the bloom reads
       even before the pointer enters). downloads.js writes these per-frame. */
    --hover-x: -1;
    --hover-y: -1;
    transform: translateY(0);
    transition:
        transform 0.5s var(--dl-ease-spring),
        box-shadow 0.5s var(--dl-ease),
        border-color 0.5s var(--dl-ease);
}
.downloads-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    /* §6.3 ambient jewel bloom — 4-quadrant, light source opposite the cursor
       (downloads.js writes --hover-x/-y). Intensity matches the About page
       cards (.about-pillar:hover) for a calm, on-brand bloom — no 3D tilt. */
    box-shadow:
        calc( 22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-iris-rgb), 0.22),
        calc(-22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-mulberry-rgb), 0.20),
        calc(-22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-brass-rgb), 0.18),
        calc( 22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-lichen-rgb), 0.22),
        0 28px 56px -24px rgba(var(--global-text-color-rgb), 0.10);
}
/* Body fills the card so the action row can sit at the bottom edge,
   keeping CTAs/badges aligned across cards of differing content. */
.downloads-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
}
.downloads-card-top { display: flex; flex-direction: column; gap: 4px; }
.downloads-card-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.downloads-card-sub { font-size: 12.5px; color: var(--global-text-muted); }

/* Action row — a card may carry a direct button and/or a store badge; both
   stack at the bottom, left-aligned, with comfortable rhythm between them. */
.downloads-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Direct-download CTA — our own solid brand pill (DESIGN.md primary button).
   Used for notarized installers served from the CDN. */
.downloads-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--global-button-text-color);
    background: var(--global-button-background-color);
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.3s var(--dl-ease), transform 0.3s var(--dl-ease-spring);
}
.downloads-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.downloads-cta:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}
.downloads-cta-meta {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.7;
}

/* Store link — the OFFICIAL store badge, unaltered. The wrapper supplies the
   brand-required clear space (>= 1/4 of the 46px badge height) as padding, and
   a soft surface that lifts on hover; the badge art is never recolored. */
.downloads-store {
    display: inline-flex;
    padding: 12px;
    margin: -12px;
    border-radius: 12px;
    transition: background 0.3s var(--dl-ease), transform 0.3s var(--dl-ease-spring);
}
.downloads-store:hover { background: var(--state-hover-bg); transform: translateY(-1px); }
.downloads-store:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}
.downloads-badge-img { height: 46px; width: auto; display: block; }

/* Coming-soon pill — neutral state tokens only (no brand color, honoring
   "one iridescent moment per surface"). */
.downloads-badge-soon {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--global-text-muted);
    background: var(--state-active-bg);
    border-radius: 999px;
}

/* "Your device" — hidden until downloads.js flags the matching card */
.downloads-card-here {
    position: absolute;
    top: 14px;
    right: 14px;
    display: none;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--global-button-text-color);
    background: var(--global-text-color);
    border-radius: 999px;
}
.downloads-card.is-detected { border-color: rgba(var(--global-text-color-rgb), 0.4); }
.downloads-card.is-detected .downloads-card-here { display: inline-flex; }

/* ---------- Extras ---------- */
.downloads-extras {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(14px, 3vw, 32px);
}
.downloads-extra {
    font-size: 14px;
    font-weight: 500;
    color: var(--global-text-color);
    text-decoration: none;
    opacity: 0.78;
    transition: opacity 0.3s var(--dl-ease);
}
.downloads-extra:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Reveal mechanic ---------- */
#downloads-page [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s var(--dl-ease),
        transform 0.9s var(--dl-ease-spring);
    will-change: opacity, transform;
}
#downloads-page [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .downloads-aura { animation: none; }
    .downloads-mark { animation: none; opacity: 1; transform: none; }
    #downloads-page [data-reveal] { opacity: 1; transform: none; transition: none; }
    .downloads-card { transition: none; transform: none; will-change: auto; }
}