/* ============================================================================
   product.css — the deep-dive product page.
   ========================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.pd-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line);
}

.pd-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    width: min(90vw, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 153, 44, .2), transparent 65%);
    pointer-events: none;
}

.pd-hero__grid {
    position: relative;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 880px) {
    .pd-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
}

.pd-hero__title { font-size: var(--step-5); letter-spacing: -.035em; line-height: .98; }

.pd-hero__lead { margin-top: var(--sp-5); }

.pd-hero__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.pd-hero__amount {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--accent);
    line-height: 1;
}

.pd-hero__note {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.pd-hero__actions { margin-top: var(--sp-5); }

.pd-hero__figure { margin: 0; }

.pd-hero__figure img {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    filter: drop-shadow(0 26px 40px rgba(20, 19, 15, .2));
}


/* ── Manifesto ──────────────────────────────────────────────────────────── */

.pd-manifesto { text-align: center; }

.pd-manifesto__text {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.018em;
    color: var(--ink-soft);
    text-wrap: balance;
}


/* ── Feature splits ─────────────────────────────────────────────────────── */

.pd-split { border-top: 1px solid var(--line); }

.pd-split--alt { background: var(--surface); }

.pd-split__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .pd-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Source order stays text-then-visual for screen readers; only the
       painted order alternates. */
    .pd-split__grid--flip .pd-split__text { order: 2; }
    .pd-split__grid--flip .pd-split__visual { order: 1; }
}

.pd-split__text h2 { margin-bottom: var(--sp-4); }
.pd-split__text p { color: var(--ink-soft); max-width: 52ch; }
.pd-split__text p + p { margin-top: var(--sp-4); }
.pd-split__text .link { margin-top: var(--sp-5); }

.pd-list {
    margin-top: var(--sp-5);
    display: grid;
    gap: .7rem;
}

.pd-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.pd-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--dawn);
}

.pd-split__caption {
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
}

/* ── Lighting visual ── */

.dawn-strip {
    height: 4.5rem;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #2a0d08, #7c1f10 18%, #d8451c 42%, #e8992c 68%, #f0c14b 85%, #fff3d0);
    box-shadow: var(--shadow);
}

.hue-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.hue {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.hue--red    { background: #e02020; }
.hue--orange { background: #f26522; }
.hue--amber  { background: #f5a623; }
.hue--gold   { background: #f8d548; }
.hue--lime   { background: #a8d84a; }
.hue--green  { background: #3fb95a; }
.hue--teal   { background: #23b5a0; }
.hue--cyan   { background: #29b6d8; }
.hue--blue   { background: #2f6fe0; }
.hue--indigo { background: #5b45d8; }
.hue--violet { background: #9241d8; }
.hue--pink   { background: #e0479c; }

/* ── Audio visual ── */

.player {
    padding: var(--sp-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.player__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 8rem;
}

.player__wave span {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: var(--dawn);
    animation: pd-wave 1.6s var(--ease) infinite alternate;
}

/* A pseudo-random set of heights and offsets, so it reads as audio rather
   than as a repeating sawtooth. */
.player__wave span:nth-child(1)  { height: 24%; animation-delay: 0ms; }
.player__wave span:nth-child(2)  { height: 52%; animation-delay: 70ms; }
.player__wave span:nth-child(3)  { height: 78%; animation-delay: 140ms; }
.player__wave span:nth-child(4)  { height: 41%; animation-delay: 210ms; }
.player__wave span:nth-child(5)  { height: 93%; animation-delay: 280ms; }
.player__wave span:nth-child(6)  { height: 63%; animation-delay: 350ms; }
.player__wave span:nth-child(7)  { height: 30%; animation-delay: 420ms; }
.player__wave span:nth-child(8)  { height: 71%; animation-delay: 490ms; }
.player__wave span:nth-child(9)  { height: 47%; animation-delay: 560ms; }
.player__wave span:nth-child(10) { height: 88%; animation-delay: 630ms; }
.player__wave span:nth-child(11) { height: 36%; animation-delay: 700ms; }
.player__wave span:nth-child(12) { height: 67%; animation-delay: 770ms; }
.player__wave span:nth-child(13) { height: 100%; animation-delay: 840ms; }
.player__wave span:nth-child(14) { height: 44%; animation-delay: 910ms; }
.player__wave span:nth-child(15) { height: 74%; animation-delay: 980ms; }
.player__wave span:nth-child(16) { height: 28%; animation-delay: 1050ms; }
.player__wave span:nth-child(17) { height: 59%; animation-delay: 1120ms; }
.player__wave span:nth-child(18) { height: 85%; animation-delay: 1190ms; }
.player__wave span:nth-child(19) { height: 39%; animation-delay: 1260ms; }
.player__wave span:nth-child(20) { height: 66%; animation-delay: 1330ms; }

@keyframes pd-wave {
    from { transform: scaleY(.55); }
    to   { transform: scaleY(1); }
}

.player__wave span { transform-origin: bottom; }

.player__meta {
    display: grid;
    gap: .25rem;
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.player__track {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--ink);
}

.player__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ── Screen shots ── */

.pd-split__visual--shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}