/* Home page: hero carousel, crime tape, best-seller carousel, crew panels, who's after who. */
:root { --slide: 7s; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 680px; max-height: 1100px; overflow: hidden; overflow: clip; isolation: isolate; background: var(--night); --mx: 0; --my: 0; }
.slides { position: absolute; inset: 0; z-index: 0; transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(1.03); transition: transform .4s ease-out; }
.slide { position: absolute; inset: 0 0 38% 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform-origin: 60% 40%; }
.slide.active img { animation: push 9s ease-out both; }
@keyframes push { from { transform: scale(1.14); } to { transform: scale(1); } }
.giant { position: absolute; z-index: 3; left: 0; right: 0; bottom: 30%; pointer-events: none; overflow: hidden; transform: translate3d(calc(var(--mx) * 22px), 0, 0); transition: transform .4s ease-out; }
.giant span { display: inline-block; white-space: nowrap; font: 400 clamp(120px, 30vw, 420px)/.8 var(--display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 55%, transparent); opacity: .32; animation: drift 40s linear infinite; }
@keyframes drift { to { transform: translateX(-50%); } }
.shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
    linear-gradient(180deg, rgb(11 12 16 / .55) 0%, transparent 18%, transparent 34%, rgb(11 12 16 / .85) 58%, var(--night) 72%),
    radial-gradient(120% 70% at 50% 10%, transparent 40%, rgb(11 12 16 / .6) 100%); }
.rain { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.grain { position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain .9s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }
.flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #dfe8ff; opacity: 0; mix-blend-mode: overlay; }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .05; } 26% { opacity: .35; } 100% { opacity: 0; } }

.hero-content { position: absolute; z-index: 5; inset: auto 0 96px 0; }
.hero-content .wrap { display: grid; gap: 14px; }
.tagline { margin: 0 0 4px; max-width: 34ch; font: 500 13px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #cfcabf; }
.tagline span { color: var(--amber); }
.copy .kicker { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.copy .kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.name { margin: 6px 0 0; font: 400 clamp(56px, 15.5vw, 160px)/.86 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.name .word { display: block; width: fit-content; white-space: nowrap; overflow: hidden; padding-bottom: .04em; }
.name .ch { display: inline-block; transform: translateY(108%); animation: rise .8s var(--ease) forwards; animation-delay: var(--d); }
@keyframes rise { to { transform: none; } }
.joke { margin: 6px 0 0; max-width: 30ch; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.3; color: #e7e2d8; }
.copy .fade { opacity: 0; transform: translateY(14px); animation: fadeup .7s var(--ease) forwards; animation-delay: var(--d, .35s); }
@keyframes fadeup { to { opacity: 1; transform: none; } }
.feature { margin-top: 10px; display: flex; align-items: center; gap: 12px; width: min(460px, 100%); padding: 10px; border-radius: 10px; background: rgb(19 21 27 / .72); border: 1px solid rgb(242 239 232 / .12); backdrop-filter: blur(10px); }
.feature img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; background: #e9e7e3; flex: none; }
.feature .f-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.feature .f-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature .f-meta { color: var(--muted); font-size: 13px; }
.feature .f-add { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 14px; cursor: pointer; }
.feature .f-add:hover { background: #ffc233; }
.feature a.f-add { display: inline-flex; align-items: center; text-decoration: none; }
.all-link { font-weight: 700; font-size: 14px; text-decoration: none; color: #cfcabf; width: fit-content; }
.all-link:hover { color: var(--ink); }

.controls { position: absolute; z-index: 6; inset: auto 0 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.controls .wrap { display: flex; align-items: stretch; gap: 8px; }
.tabs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tab { position: relative; display: grid; gap: 8px; padding: 12px 0 6px; background: none; border: 0; color: var(--muted); text-align: left; cursor: pointer; min-height: 48px; }
.tab .track { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgb(242 239 232 / .18); overflow: hidden; }
.tab .fill { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.tab.active { color: var(--ink); }
.tab.active .fill { animation: fill var(--slide) linear forwards; }
.hero.paused .tab.active .fill, .hero.hold .tab.active .fill { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.tab .num { font: 500 11px var(--mono); letter-spacing: .12em; }
.tab .tname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab:hover { color: var(--ink); }
.pause { flex: none; align-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(242 239 232 / .3); background: rgb(11 12 16 / .5); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.pause svg { width: 14px; height: 14px; }
@media (max-width: 899px) { .tagline { display: none; } }
@media (min-width: 900px) {
  .slide { inset: 0 0 0 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
  .slide img { object-position: center 30%; }
  .giant { bottom: auto; top: 22%; }
  .shade { background:
    linear-gradient(90deg, var(--night) 0%, rgb(11 12 16 / .7) 34%, transparent 62%),
    linear-gradient(180deg, rgb(11 12 16 / .55) 0%, transparent 18%, transparent 70%, var(--night) 100%); }
  .hero-content { inset: 0 0 0 0; display: grid; align-content: center; padding-top: 40px; }
  .name { font-size: clamp(76px, 8.6vw, 148px); }
  .tab .tname { font-size: 14px; }
}

/* ---------- Crime tape (synced to the hero character) ---------- */
@property --wob { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tape { position: relative; height: 220px; overflow: hidden; background: linear-gradient(180deg, var(--night), #0e1015 50%, var(--night)); }
.tape .band { position: absolute; left: -6%; right: -6%; top: 50%; height: 64px; display: flex; align-items: center; overflow: hidden; font: 400 27px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; animation: wob 7s ease-in-out infinite; }
.tape .a { z-index: 2; color: #121212; background: linear-gradient(180deg, #ffcd45 0%, #ffb000 42%, #eda200 100%); transform: translateY(-88%) rotate(calc(-4deg + var(--wob))); box-shadow: 0 16px 34px rgb(0 0 0 / .55), inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .2); }
.tape .b { color: var(--amber); background: linear-gradient(180deg, #1a1c22, #0e0f13); transform: translateY(-2%) rotate(calc(3deg - var(--wob))); box-shadow: 0 10px 24px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 176 0 / .45), inset 0 -1px 0 rgb(255 176 0 / .45); animation-delay: -3.5s; }
@keyframes wob { 50% { --wob: .7deg; } }
.tape .band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .22) 47%, transparent 58%); transform: translateX(-110%); animation: sheen 7s ease-in-out infinite; }
.tape .b::after { background: linear-gradient(100deg, transparent 35%, rgb(255 176 0 / .12) 47%, transparent 58%); animation-delay: -2s; }
@keyframes sheen { 55%, 100% { transform: translateX(110%); } }
.tape .roll { display: flex; width: 100%; }
.tape .run { display: inline-flex; align-items: center; white-space: nowrap; animation: run 34s linear infinite; }
.tape .b .run { animation-direction: reverse; animation-duration: 42s; }
.tape .item { display: inline-flex; align-items: center; }
.tape .sep { margin: 0 24px; font-size: 16px; }
.tape .a .sep { color: #121212; }
.tape .b .sep { color: var(--accent); transition: color .6s; }
.tape .a .nm { background: #121212; color: var(--amber); padding: 7px 12px 6px; border-radius: 2px; }
.tape .b .nm { color: #fff; }
@keyframes run { to { transform: translateX(-50%); } }
.tape .roll.out { animation: rollOut .3s var(--ease) forwards; }
.tape .roll.in { animation: rollIn .55s var(--ease) both; }
@keyframes rollOut { to { transform: translateY(-130%); opacity: 0; } }
@keyframes rollIn { from { transform: translateY(130%); opacity: 0; } }
.tape:hover .run { animation-play-state: paused; }
@media (max-width: 599px) { .tape { height: 170px; } .tape .band { height: 52px; font-size: 21px; } }

/* ---------- Best-seller carousel ---------- */
.carousel { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 26px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 560px) { .rail { grid-auto-columns: calc((100% - 16px) / 2.15); } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - 32px) / 3.25); } }
.arrow { position: absolute; top: calc(50% - 64px); z-index: 3; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgb(242 239 232 / .25); background: rgb(11 12 16 / .8); backdrop-filter: blur(8px); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: opacity .3s, background .2s, color .2s, transform .2s; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.arrow svg { width: 20px; height: 20px; }
.arrow.prev { left: 6px; }
.arrow.next { right: 6px; }
@media (min-width: 1340px) { .arrow.prev { left: -27px; } .arrow.next { right: -27px; } }
.arrow:hover { background: var(--amber); color: var(--amber-ink); transform: scale(1.06); }
.arrow:disabled { opacity: 0; pointer-events: none; }
.rail-progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail-progress span { display: block; height: 100%; width: 30%; background: var(--amber); transform-origin: left; transition: transform .2s, width .2s; }
.shop-all { display: inline-flex; align-items: center; gap: 10px; }
.shop-all .count { font: 500 11px var(--mono); background: rgb(26 18 0 / .25); padding: 3px 7px; border-radius: 999px; }

/* ---------- Crew: expanding panels ---------- */
.crew { display: grid; gap: 14px; }
.member { position: relative; min-height: 520px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: grid; align-content: end; background: var(--night-2); }
.member > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.member::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgb(11 12 16 / .75) 55%, rgb(11 12 16 / .97) 100%); }
.member .vert { display: none; }
.member .body { position: relative; z-index: 1; padding: 22px; }
.member .idx { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--accent); }
.member h3 { font: 400 clamp(36px, 6vw, 52px)/.95 var(--display); text-transform: uppercase; margin: 6px 0 6px; }
.member .mtitle { color: var(--accent); font-weight: 700; margin: 0 0 16px; max-width: 34ch; }
.member dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 18px; font-size: 15px; max-width: 46ch; }
.member dt { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.member dd { margin: 0; color: #e4dfd5; }
.member .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.member .links a { font-weight: 700; font-size: 14px; color: var(--accent); }
.member .links a.quiet { color: #cfcabf; }
.crew-foot { margin-top: 22px; display: flex; justify-content: flex-end; }
@media (max-width: 899px) {
  .member { display: block; min-height: 0; }
  .member > img { position: relative; aspect-ratio: 4 / 3; height: auto; }
  .member::after { inset: 0 0 auto 0; aspect-ratio: 4 / 3; background: linear-gradient(180deg, transparent 55%, var(--night-2) 100%); }
  .member .body { padding-top: 4px; }
}
@media (min-width: 900px) {
  .crew { display: flex; height: 640px; gap: 10px; }
  .member { flex: 1; min-height: 0; transition: flex .7s var(--ease), border-color .4s; cursor: pointer; }
  .member > img { filter: grayscale(.85) brightness(.6); }
  .member.active { flex: 4.2; cursor: default; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .member.active > img { filter: none; transform: scale(1.03); }
  .member .body { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease); width: max(520px, 100%); }
  .member.active .body { opacity: 1; transform: none; transition-delay: .25s; }
  .member .vert { display: block; position: absolute; z-index: 1; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transition: opacity .3s; }
  .member.active .vert { opacity: 0; }
}

/* ---------- Who's after who ---------- */
.beefs { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .beefs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .beefs { grid-template-columns: repeat(6, 1fr); }
  .beef { grid-column: span 2; }
  .beef:nth-child(n + 4) { grid-column: span 3; }
}
.beef { background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; }
.beef::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ca), var(--cb)); }
.pair { display: flex; align-items: center; gap: 10px; }
.av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--night); outline: 2px solid var(--c); }
.trio { display: flex; }
.trio .av { width: 46px; height: 46px; margin-left: -12px; }
.trio .av:first-child { margin-left: 0; }
.sym { font: 400 26px var(--display); color: var(--amber); min-width: 24px; text-align: center; }
.beef h3 { margin: 4px 0 0; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.beef .names { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.beef p { margin: 0; color: #d3cec4; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .giant span, .tape .run, .tape .band, .tape .band::after, .grain { animation: none !important; }
  .slides, .giant { transform: none !important; }
}

/* Hero video loops (Higgsfield). The still stays underneath as poster and fallback. */
.slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: 0; transition: opacity .8s ease; }
@media (min-width: 900px) { .slide-video { object-position: center 30%; } }
.slide.playing .slide-video { opacity: 1; }
.slide.active .slide-video { animation: push 9s ease-out both; }

/* Crew panel copy lines (owner-approved, random per visit) */
.member .mlines { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; max-width: 46ch; font-size: 15px; color: #e4dfd5; }
.member .mlines li { display: flex; gap: 10px; align-items: baseline; }
.member .mlines li::before { content: "º6"; color: var(--accent); font-size: 11px; flex: none; }