/* Homepage discovery component. Deliberately independent of legacy .hero-* rules. */
.discovery-shell {
    --discovery-accent: 193, 168, 154;
    --discovery-gutter: clamp(24px, 5.5vw, 106px);
    --discovery-muted: #a2a1ac;
    color: #fff;
    background: #09090f;
    position: relative;
    z-index: 2;
}
.discovery-shell *, .discovery-shell *::before, .discovery-shell *::after { box-sizing: border-box; }
.discovery-shell [hidden] { display: none !important; }
.discovery-shell button, .discovery-shell a { -webkit-tap-highlight-color: transparent; }
.discovery-shell button { font: inherit; cursor: pointer; }
.discovery-shell a { color: inherit; text-decoration: none; }
.discovery-shell :is(button, a, [tabindex]):focus-visible { outline: 2px solid rgb(var(--discovery-accent)); outline-offset: 5px; }
.discovery-shell svg { width: 18px; height: 18px; flex-shrink: 0; }
.discovery-shell h1, .discovery-shell h2, .discovery-shell h3, .discovery-shell p { margin: 0; }
.discovery {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-height: max(780px, 100svh);
    padding: 106px var(--discovery-gutter) 30px;
    background: #09090f;
}
.discovery-art, .discovery-shade { position: absolute; inset: 0; pointer-events: none; }
.discovery-art { z-index: -2; filter: blur(var(--discovery-blur, 0px)); overflow: hidden; }
.discovery-layers {
    position: absolute;
    inset: -12px;
    transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0);
    transition: transform 700ms cubic-bezier(.2,.65,.2,1);
}
.discovery-layer { position: absolute; inset: 0; overflow: hidden; background: #14141e; }
.discovery-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 35%; }
.discovery-shade {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(9,9,15,.94), rgba(9,9,15,.67) 33%, rgba(9,9,15,.08) 75%),
        linear-gradient(0deg, #09090f 1%, rgba(9,9,15,.9) 20%, rgba(9,9,15,.24) 56%, transparent 78%),
        linear-gradient(180deg, rgba(9,9,15,.64), transparent 28%);
}
.discovery-topline, .discovery-shelf-head, .discovery-genres-head, .discovery-results-head {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.discovery-topline { min-height: 20px; justify-content: flex-end; }
.discovery-wordmark { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.discovery-wordmark i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--discovery-accent)); transition: background .7s; }
.discovery-topnote { font-size: 10px; color: #ceccd2; letter-spacing: .02em; }
.discovery-stage { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 310px; padding: 12px 0 20px; }
.discovery-copy { width: min(660px, 65%); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; outline: none; }
.discovery-eyebrow { font-size: 9px; font-weight: 650; letter-spacing: .22em; color: rgb(var(--discovery-accent)); transition: color .7s; }
.discovery-copy h1 {
    font-size: clamp(36px, 4.6vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.05em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-shadow: 0 4px 28px #0002;
}
.discovery-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: #c4c2ca; font-size: 11px; font-weight: 500; }
.discovery-copy h1.has-title-logo {
    position: relative;
    display: block;
    width: min(480px, 100%);
    height: 144px;
    overflow: visible;
    line-height: 0;
}
.discovery-title-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.discovery-score { display: inline-flex; align-items: center; gap: 6px; color: #e8d7b2; font-weight: 650; }
.discovery-score svg, .discovery-card-badge svg { fill: currentColor; width: 13px; height: 13px; }
.discovery-genre-label::before { content: '·'; margin-right: 14px; color: #8d8a96; }
.discovery-copy .discovery-description { max-width: 490px; font-size: 13px; font-weight: 400; line-height: 1.8; color: #c0bec8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.discovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 5px; }
.discovery-watch, .discovery-save {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 12px 22px; border-radius: 7px;
    font-size: 12px !important; font-weight: 650 !important;
    transition: transform .25s, background .25s, border-color .25s;
}
.discovery-actions .discovery-watch { color: #12121a; background: #f5f3ef; border: 1px solid #f5f3ef; }
.discovery-watch svg { width: 16px; height: 16px; fill: currentColor; }
.discovery-save { background: rgba(20,20,30,.42); border: 1px solid #ffffff30; color: #f5f3ef; }
.discovery-save > span:first-child { font-size: 20px; font-weight: 400; line-height: 16px; width: 18px; }
.discovery-save[aria-pressed="true"] { border-color: rgba(var(--discovery-accent), .7); }
.discovery-save:hover { background: #ffffff15; border-color: #ffffff60; }
.discovery-watch:hover { background: #fff; transform: translateY(-2px); }
.discovery-copy .discovery-feedback { min-height: 0; color: #d4c8bd; font-size: 11px; line-height: 1.5; }
.discovery-feedback:empty { display: none; }
.discovery-position { display: flex; align-items: center; gap: 15px; align-self: flex-end; padding-bottom: 22px; font-variant-numeric: tabular-nums; }
.discovery-position > span:first-child { font-size: 22px; font-weight: 300; }
.discovery-position > span:last-child { font-size: 11px; color: #c4bfc8; }
.discovery-position i { display: block; width: 64px; height: 1px; background: #ffffff40; }
.discovery-shelf { min-width: 0; }
.discovery-shelf-head { margin-bottom: 20px; }
.discovery-overline { display: block; color: #8c8996; font-size: 9px; letter-spacing: .2em; font-weight: 600; margin-bottom: 8px; }
.discovery-shelf-head h2 { font-size: 17px; font-weight: 550; letter-spacing: -.025em; }
.discovery-controls { display: flex; align-items: center; gap: 8px; }
.discovery-selection-hint { font-size: 10px; color: #9996a3; margin-right: 12px; }
.discovery-controls button {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid #ffffff26; border-radius: 50%; color: #fff; background: transparent;
    transition: background .2s, opacity .2s;
}
.discovery-controls svg { fill: none; stroke: currentColor; stroke-width: 1.6; width: 16px; height: 16px; }
.discovery-controls button:disabled { opacity: .25; cursor: default; }
.discovery-controls button:not(:disabled):hover { background: #ffffff15; }
.discovery-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(124px, 10.8vw, 174px); gap: 18px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; padding: 8px 6px 10px; margin: -8px -6px -10px;
    touch-action: pan-x pan-y; position: relative;
}
.discovery-track::-webkit-scrollbar { display: none; }
.discovery-card {
    display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0;
    border: 0; background: none; color: #fff; text-align: left; scroll-snap-align: start;
    border-radius: 8px; perspective: 700px;
    animation: discovery-card-in .6s both; animation-delay: calc(var(--card-order, 0) * 45ms);
}
.discovery-card-art {
    position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: 7px; background: #14141e; border: 1px solid #ffffff12;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s;
}
.discovery-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #09090fd9, transparent 50%); pointer-events: none; }
.discovery-card-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .5s, filter .5s; filter: brightness(.82) saturate(.8); }
.discovery-card-badge { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; background: #09090fb8; font-size: 10px; font-weight: 600; z-index: 1; }
.discovery-card-badge svg { width: 10px; height: 10px; color: #e8d7b2; }
.discovery-card-active { position: absolute; inset: auto 9px 10px; display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 500; z-index: 1; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
.discovery-card-active svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.discovery-card[aria-selected="true"] .discovery-card-art { border-color: rgba(var(--discovery-accent), .9); box-shadow: 0 0 0 2px rgba(var(--discovery-accent), .2), 0 4px 16px rgba(var(--discovery-accent), .08); }
.discovery-card[aria-selected="true"] img { filter: none; }
.discovery-card[aria-selected="true"] .discovery-card-active { opacity: 1; transform: none; }
.discovery-card-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 12px; font-size: 11px; font-weight: 650; line-height: 1.4; }
.discovery-card-detail { display: block; margin-top: 5px; font-size: 9px; font-weight: 400; color: #898593; }
.discovery-card-detail i { font-style: normal; margin: 0 4px; }
.discovery-empty { color: #aba8b4; font-size: 13px; padding: 30px 0; }
.discovery-genres { padding: 68px var(--discovery-gutter) 60px; background: #09090f; }
.discovery-genres-head { margin-bottom: 34px; }
.discovery-genres-head h2 { font-size: clamp(22px, 2.5vw, 32px); font-weight: 550; letter-spacing: -.035em; }
#discovery-reset { display: flex; align-items: center; gap: 22px; background: none; border: 0; padding: 10px 0 10px 10px; color: #a7a4af; font-size: 11px; }
#discovery-reset[aria-pressed="true"] { color: #fff; }
.discovery-genre-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); }
.discovery-genre { display: flex; flex-direction: column; align-items: center; min-width: 0; border: 0; padding: 0; color: #fff; background: none; text-align: center; }
.discovery-genre-art { position: relative; display: block; width: 100%; max-width: 156px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #14141e; box-shadow: 0 0 0 1px #ffffff0c; transition: box-shadow .4s, transform .4s; }
.discovery-genre-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.55) brightness(.7); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s; }
.discovery-genre-art > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; opacity: 0; background: #09090f30; transition: opacity .3s; }
.discovery-genre strong { margin-top: 19px; font-size: 13px; font-weight: 550; }
.discovery-genre small { font-size: 9px; color: #87838f; margin-top: 7px; line-height: 1.5; }
.discovery-genre[aria-pressed="true"] .discovery-genre-art { box-shadow: 0 0 0 3px #09090f, 0 0 0 4px rgba(var(--discovery-accent), .8); }
.discovery-genre[aria-pressed="true"] img { filter: none; }
.discovery-results { margin-top: 45px; padding-top: 25px; border-top: 1px solid #ffffff10; }
.discovery-results-head { margin-bottom: 22px; }
.discovery-results-head h3 { font-size: 17px; font-weight: 550; }
.discovery-results-head > a { font-size: 11px; color: #a7a4af; }
.discovery-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.discovery-result { display: flex; align-items: center; gap: 15px; padding: 12px; background: #14141e; border-radius: 9px; transition: background .25s; }
.discovery-result:hover { background: #1d1d29; }
.discovery-result img { width: 48px; height: 65px; object-fit: cover; border-radius: 4px; background: #09090f; }
.discovery-result > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.discovery-result strong { font-size: 11px; font-weight: 550; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.discovery-result small { font-size: 10px; color: #a2a1ac; }
.discovery-result > span:last-child { color: #86818e; }
.discovery-results-empty { font-size: 13px; color: #a2a1ac; padding: 20px 0; }
@keyframes discovery-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
    .discovery-card:hover .discovery-card-art { transform: translateY(-4px) scale(1.018) rotateY(var(--card-x, 0deg)) rotateX(var(--card-y, 0deg)); }
    .discovery-card:hover img { filter: none; transform: scale(1.035); }
    .discovery-genre:hover .discovery-genre-art { transform: translateY(-4px); }
    .discovery-genre:hover img { transform: scale(1.09) rotate(-3deg); filter: saturate(.9) brightness(.7); }
    .discovery-genre:hover .discovery-genre-art > span { opacity: 1; }
}
@media (min-width: 701px) and (max-height: 820px) {
    .discovery { min-height: max(690px, 100svh); padding-top: 92px; padding-bottom: 22px; gap: 16px; }
    .discovery-stage { min-height: 275px; padding: 4px 0 8px; }
    .discovery-copy { gap: 13px; }
    .discovery-copy h1 { font-size: clamp(34px, 4vw, 58px); -webkit-line-clamp: 2; }
    .discovery-copy h1.has-title-logo { height: 112px; width: min(420px, 100%); }
    .discovery-copy .discovery-description { -webkit-line-clamp: 2; font-size: 12px; }
    .discovery-track { grid-auto-columns: clamp(112px, 9.5vw, 145px); }
    .discovery-card-art { aspect-ratio: 4 / 5; }
    .discovery-shelf-head { margin-bottom: 15px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .discovery-copy { width: 80%; }
    .discovery-position { display: none; }
    .discovery-genre-grid { gap: 20px; }
    .discovery-genre small { display: none; }
    .discovery-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .discovery-shell { --discovery-gutter: 22px; }
    .discovery { min-height: max(740px, 100svh); padding-top: 88px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); gap: 22px; }
    .discovery-topnote, .discovery-position, .discovery-selection-hint { display: none; }
    .discovery-topline { min-height: 16px; }
    .discovery-wordmark { font-size: 9px; }
    .discovery-stage { min-height: 280px; padding: 0; align-items: center; }
    .discovery-copy { width: 100%; gap: 14px; }
    .discovery-copy h1 { font-size: clamp(32px, 8.5vw, 48px); line-height: 1.06; -webkit-line-clamp: 3; letter-spacing: -.04em; }
    .discovery-copy h1.has-title-logo { width: min(320px, 100%); height: 104px; }
    .discovery-eyebrow { font-size: 8px; }
    .discovery-meta { gap: 8px 12px; font-size: 10px; }
    .discovery-genre-label::before { margin-right: 10px; }
    .discovery-genre-label:nth-of-type(n+5) { display: none; }
    .discovery-copy .discovery-description { font-size: 12px; line-height: 1.7; -webkit-line-clamp: 2; }
    .discovery-actions { gap: 8px; width: 100%; }
    .discovery-watch, .discovery-save { min-height: 43px; padding: 11px 13px; font-size: 10px !important; gap: 6px; }
    .discovery-watch svg { width: 13px; height: 13px; }
    .discovery-save > span:first-child { font-size: 18px; width: 14px; }
    .discovery-layer img { object-position: 65% top; }
    .discovery-shade { background: linear-gradient(0deg, #09090f 4%, #09090fe8 25%, #09090f86 65%, #09090f45), linear-gradient(90deg, #09090f70, transparent); }
    .discovery-track { grid-auto-columns: 122px; gap: 14px; }
    .discovery-card-art { aspect-ratio: 3 / 4; }
    .discovery-card-title { font-size: 10px; margin-top: 10px; }
    .discovery-card-detail { font-size: 9px; }
    .discovery-overline { font-size: 8px; margin-bottom: 6px; }
    .discovery-shelf-head { gap: 12px; margin-bottom: 16px; }
    .discovery-shelf-head h2 { font-size: 14px; }
    .discovery-controls button { width: 30px; height: 30px; }
    .discovery-controls { gap: 6px; }
    .discovery-genres { padding-top: 24px; padding-bottom: 36px; }
    .discovery-genres-head { gap: 12px; align-items: flex-end; margin-bottom: 28px; }
    .discovery-genres-head h2 { font-size: 22px; max-width: 230px; }
    #discovery-reset { gap: 10px; font-size: 10px; white-space: nowrap; }
    .discovery-genre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
    .discovery-genre strong { font-size: 11px; margin-top: 13px; }
    .discovery-genre small { display: none; }
    .discovery-results-grid { grid-template-columns: minmax(0, 1fr); }
    .discovery-results-head h3 { font-size: 14px; }
    .discovery-results-head > a { font-size: 10px; }
}
@media (max-width: 360px) {
    .discovery-shell { --discovery-gutter: 18px; }
    .discovery { gap: 18px; }
    .discovery-stage { min-height: 260px; }
    .discovery-copy { gap: 12px; }
    .discovery-copy h1 { font-size: 30px; }
    .discovery-copy h1.has-title-logo { height: 90px; }
    .discovery-track { grid-auto-columns: 110px; }
    .discovery-actions { gap: 7px; }
    .discovery-watch, .discovery-save { padding: 10px; font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .discovery-shell *, .discovery-shell *::before, .discovery-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .discovery-art { filter: none; }
    .discovery-layers, .discovery-card:hover .discovery-card-art, .discovery-genre:hover .discovery-genre-art { transform: none; }
}