/* v2 overrides: scratch collection, pill nav, page transitions, sub-pages, custom cursor */

/* ---------- Custom cursor (desktop only, pure CSS so it never lags; no ring) ---------- */
@media (hover: hover) and (pointer: fine) {
    html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3l16 8.5-6.6 2.1L11.6 20z' fill='%231A1A1A' stroke='%23D4AF37' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto; }
    a, button, select, .quiz-option, .chip, .pick, [data-view], [data-qv] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3l16 8.5-6.6 2.1L11.6 20z' fill='%23D4AF37' stroke='%231A1A1A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer; }
    input[type="text"] { cursor: text; }
    #scratch-canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='9' fill='%23ffffff' fill-opacity='.35' stroke='%231A1A1A' stroke-width='1.5'/%3E%3C/svg%3E") 18 18, crosshair; }
}

/* ---------- Nav: pill with a sliding indicator ---------- */
.nav { position: relative; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--accent); }
.nav-link { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 13px; transition: color .3s; }
.nav-link::after { display: none; }
.nav-link:hover { color: var(--dark); }
.nav-link.is-active { color: #fff; }
.nav-ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--dark); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); transition: transform .5s var(--ease), width .5s var(--ease); }
.l-short { display: none; }

/* Phones: the nav becomes a floating bar at the bottom, easy to reach with a thumb */
@media (max-width: 899px) {
    .nav { display: flex; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55; gap: 0; padding: 4px; background: rgba(255,255,255,.96); box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); max-width: calc(100vw - 20px); }
    .nav-ind { top: 4px; bottom: 4px; }
    .nav-link { padding: 10px 12px; font-size: 12px; }
    .l-full { display: none; }
    .l-short { display: inline; }
    .footer { padding-bottom: 110px; }
    /* The nav lives inside the header, so the header must never slide away on phones */
    #site-header.hide { transform: none; }
}

/* ---------- Page transition wipe ---------- */
#wipe { position: fixed; inset: 0; z-index: 80; display: none; pointer-events: none; }
#wipe.on { display: block; pointer-events: auto; }
.wipe-strips { position: absolute; inset: 0; display: flex; }
.wipe-strip { position: relative; flex: 1; background: var(--dark); transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.wipe-strip:nth-child(even) { background: #232221; }
.wipe-strip::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.wipe-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.wipe-count { font-size: 11px; letter-spacing: .3em; color: var(--gold); opacity: 0; font-variant-numeric: tabular-nums; }
#wipe-label { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 8vw, 6rem); line-height: 1; color: #fff; white-space: nowrap; }
#wipe-label .wc { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
#wipe-label .wc > i { display: inline-block; font-style: normal; transform: translateY(110%); }
.wipe-line { width: min(260px, 50vw); height: 1px; background: var(--gold); transform: scaleX(0); }

/* ---------- Sub-pages (Assessment, How, Science) ---------- */
.section.sub { padding-top: clamp(120px, 14vw, 170px); min-height: 100svh; }
#page-science .science.sub { min-height: 100svh; display: flex; align-items: center; }
#page-how .sub { display: flex; align-items: center; }
#page-how .sub > .container { width: min(1240px, 100% - 48px); }

/* ---------- Collection: scratch cards (no pinned scroll) ---------- */
.showcase { height: auto; padding: clamp(70px, 10vw, 130px) 0; background: linear-gradient(180deg, rgba(249,248,246,0), rgba(227,229,223,.55) 15%, rgba(227,229,223,.55) 85%, rgba(249,248,246,0)); }
.showcase-sticky { position: static; height: auto; overflow: visible; display: block; }
.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .showcase-grid { grid-template-columns: 5fr 7fr; gap: 56px; } }
.showcase-copy .h2 { max-width: 12ch; }
.showcase-copy .muted { margin-bottom: 22px; }

.pick-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pick { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent); background: #fff; font-size: 13px; font-weight: 500; color: var(--dark); transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.pick:hover { border-color: var(--dark); transform: translateY(-2px); }
.pick.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.pick-info { min-height: 130px; margin-bottom: 22px; }
.pick-price { font-family: var(--serif); font-size: 2.4rem; color: var(--dark); line-height: 1; margin-bottom: 8px; }
.pick-info p { color: var(--muted); font-size: .92rem; max-width: 26rem; margin-bottom: 12px; }
.pick-buy { font-size: 13px; font-weight: 500; color: var(--dark); border-bottom: 1px solid var(--dark); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.pick-buy:hover { color: var(--gold); border-color: var(--gold); }

.scratch { position: relative; height: min(66vh, 560px); min-height: 360px; border-radius: 32px; overflow: hidden; background: #F1EEE6; border: 1px solid var(--accent); box-shadow: 0 50px 90px -50px rgba(26,26,26,.35); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scratch-art { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 34px 70px; transition: transform .8s var(--ease); }
.scratch-art.s { background: rgba(227,229,223,.7); }
.scratch-art svg { width: min(100%, 360px); height: 100%; max-height: 100%; }
.scratch.is-revealed .scratch-art svg { animation: pop .8s var(--ease) both; }
@keyframes pop { from { transform: scale(.9) translateY(10px); } to { transform: none; } }
#scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity .7s var(--ease); }
.scratch-skip { position: absolute; z-index: 3; top: 16px; right: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid rgba(26,26,26,.15); font-size: 12px; font-weight: 500; transition: background .2s; }
.scratch-skip:hover { background: #fff; }
.scratch-skip[hidden] { display: none; }
.scratch .stage-caption { z-index: 2; left: 22px; bottom: 18px; right: 22px; }
.scratch:not(.is-revealed) .stage-caption span { color: rgba(51,37,26,.9); }
.scratch:not(.is-revealed) .stage-caption small { color: rgba(51,37,26,.7); }
@media (max-width: 899px) {
    .showcase-copy .h2 { font-size: 2rem; max-width: none; }
    .scratch { height: 52svh; min-height: 320px; order: -1; border-radius: 24px; }
    .pick { padding: 9px 14px; font-size: 12px; }
    .pick-info { min-height: 0; }
    .showcase-copy .btn { width: 100%; }
}