/* AJ Vitanza — tactile bone / blue-grey world */

/* Shared chips include both selectable buttons and unavailable spans. */
.merch-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    min-height: 48px;
    padding: 0;
    line-height: 1;
    text-align: center;
}
.merch-size.is-unavailable { opacity: .65; background: rgba(255,255,255,.035); }
.merch-size:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.elsewhere .shade-title {
    font-size: clamp(2.1rem, 6.7vw, 5.1rem);
    line-height: 1.05;
    overflow-wrap: normal;
    max-width: 100%;
}
.shade-film { position: relative; aspect-ratio: 16 / 9; min-height: 200px; margin-top: 32px; background: #101923; }
.shade-film iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shade-caption { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
.shade-caption a { text-decoration: underline; text-underline-offset: 3px; }
.elsewhere .elsewhere-grid { margin-top: 30px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.elsewhere .elsewhere-release { display: block; min-width: 0; }
@media (max-width: 760px) {
    .elsewhere .elsewhere-grid { grid-template-columns: minmax(0, 1fr); }
    .nav-links a:nth-child(2) { display: inline; }
}

:root {
    --bone: #e7e1d5;
    --mist: #b9c5cc;
    --slate: #273746;
    --ink-blue: #101923;
    --washed-blue: #7597ad;
}

.grain {
    opacity: .16;
    mix-blend-mode: multiply;
    background-size: 112px;
    animation: aj-grain .3s steps(2, end) infinite;
}

.grain::after { opacity: .42; }

/* Neutral interim surface while the Higgsfield motion asset is unavailable. */
.hero-field {
    inset: -7%;
    background-color: var(--bone);
    background-image:
        linear-gradient(90deg, rgba(231, 225, 213, .88) 0%, rgba(231, 225, 213, .56) 37%, rgba(16, 25, 35, .03) 66%),
        linear-gradient(125deg, #e7e1d5 12%, #b9c5cc 52%, #7597ad 100%);
    background-size: cover, 116% 116%;
    background-position: center, 48% 49%;
    filter: saturate(.76) contrast(.98);
    animation: art-drift 22s ease-in-out infinite alternate;
}

.hero-field::before,
.hero-field::after {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    filter: none;
}

.hero-field::before {
    inset: 0;
    width: auto;
    height: auto;
    right: 0;
    top: 0;
    background: linear-gradient(105deg, rgba(17, 27, 38, .12), transparent 37%, rgba(121, 151, 170, .16) 72%, transparent);
    animation: wash-drift 16s ease-in-out infinite alternate;
}

.hero-field::after {
    inset: 0;
    width: auto;
    height: auto;
    left: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(16, 25, 35, .14) .65px, transparent .8px);
    background-size: 4px 4px;
    opacity: .42;
}

.hero-portrait {
    inset: 0 0 0 43%;
    opacity: .72;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 100%);
}

.hero-portrait::before {
    background: linear-gradient(135deg, rgba(115, 145, 165, .38), transparent 48%, rgba(231, 225, 213, .15));
    mix-blend-mode: color;
    opacity: 1;
}

.hero-portrait::after {
    background: linear-gradient(90deg, var(--bone) 0%, rgba(231, 225, 213, .78) 9%, rgba(231, 225, 213, .05) 60%, rgba(16, 25, 35, .1));
}

.hero-img {
    filter: grayscale(.28) sepia(.08) contrast(1.05) brightness(.88);
}

.hero-title,
.hero-kicker,
.hero-sub,
.hero-listen { color: var(--ink-blue); }

.hero-kicker span { color: var(--washed-blue); }
.hero-bottom { border-color: rgba(16, 25, 35, .25); }
.hero-listen { border-color: rgba(16, 25, 35, .36); }
.hero-listen:hover { color: var(--slate); border-color: var(--slate); }
.hero-swoosh { opacity: .38; filter: none; }
.hero-swoosh img { filter: brightness(0) saturate(100%); }

.nav:not(.scrolled) .nav-logo-img { filter: brightness(0) saturate(100%); }
.nav:not(.scrolled) .nav-links a { color: rgba(16, 25, 35, .72); }
.nav:not(.scrolled) .nav-links a:hover { color: var(--ink-blue); }
.nav:not(.scrolled) .nav-shop { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--bone); }

.btn--primary { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--bone); }
.btn--primary:hover { background: var(--slate); border-color: var(--slate); }

.world-ticker { background: var(--ink-blue); color: var(--bone); border-color: rgba(231, 225, 213, .18); }
.world-ticker-track i { background: var(--bone); box-shadow: none; }

.merch-bg {
    background-color: #1a2732;
    background-image:
        linear-gradient(110deg, rgba(16, 25, 35, .84), rgba(27, 43, 54, .64)),
        linear-gradient(135deg, #b9c5cc, #7597ad);
    background-size: cover, 125% 125%;
    background-position: center, 52% 60%;
    filter: saturate(.55) contrast(1.05);
    animation: merch-art-drift 28s ease-in-out infinite alternate;
}

.merch-bg::before,
.merch-bg::after { display: none; }

.elsewhere {
    background:
        linear-gradient(110deg, rgba(18, 29, 40, .96), rgba(35, 53, 66, .86)),
        linear-gradient(135deg, #b9c5cc, #7597ad);
    background-size: cover, 130% 130%;
    background-position: center, 52% 38%;
}

.connect { background: var(--bone); color: var(--ink-blue); }
.connect::after { display: none; }
.connect-heading { color: var(--ink-blue); }
.connect-sub { color: rgba(16, 25, 35, .68); }
.connect .label { color: var(--slate); }

.release-cover,
.shade-video-card { border: 1px solid rgba(231, 225, 213, .22); box-shadow: 0 22px 60px rgba(0, 0, 0, .22); }

@keyframes aj-grain {
    0% { background-position: 0 0; }
    25% { background-position: 17% -11%; }
    50% { background-position: -13% 14%; }
    75% { background-position: 12% 8%; }
    100% { background-position: -15% -8%; }
}

@keyframes art-drift {
    0% { background-position: center, 48% 49%; transform: scale(1); }
    100% { background-position: center, 54% 45%; transform: scale(1.035); }
}

@keyframes wash-drift {
    0% { opacity: .42; transform: translateX(-4%); }
    100% { opacity: .86; transform: translateX(4%); }
}

@keyframes merch-art-drift {
    0% { background-position: center, 52% 60%; }
    100% { background-position: center, 44% 48%; }
}

@media (max-width: 760px) {
    .grain { opacity: .11; }
    /* Keep the complete wordmark inside narrow iPhone screens. */
    .hero-title { font-size: clamp(2rem, 10.5vw, 5rem); line-height: .95; }
    .nav { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .nav-logo, .nav-shop, .nav-links a { min-height: 44px; min-width: 44px; }
    .nav-links a { display: inline-flex; align-items: center; justify-content: center; }
    .nav-links a:nth-child(2) { display: inline-flex; }
    .hero-listen, .elsewhere-more, .shade-caption a { min-height: 44px; display: inline-flex; align-items: center; }
    .section-inner { width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right))); }
    .grain { animation: none; }
    .merch-bg { animation: none; }
    .hero-portrait { inset: 0; opacity: .48; }
    .hero-portrait::after { background: linear-gradient(180deg, rgba(231, 225, 213, .14), rgba(231, 225, 213, .3) 45%, var(--bone) 100%); }
    .hero-title { color: var(--ink-blue); }
    .nav:not(.scrolled) { background: rgba(231, 225, 213, .45); }
}

@media (prefers-reduced-motion: reduce) {
    .grain,
    .hero-field,
    .hero-field::before,
    .merch-bg { animation: none !important; }
}