:root {
    --hp26-glass-bg: rgba(255, 255, 255, 0.7);
    --hp26-glass-border: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
    :root {
        --hp26-glass-bg: rgba(20, 20, 25, 0.5);
        --hp26-glass-border: rgba(255, 255, 255, 0.08);
    }
}
[data-theme="dark"] {
    --hp26-glass-bg: rgba(20, 20, 25, 0.5);
    --hp26-glass-border: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] {
    --hp26-glass-bg: rgba(255, 255, 255, 0.7);
    --hp26-glass-border: rgba(0, 0, 0, 0.1);
}
/*
 * HP-2026: 2026-2027 Design System — Progressive Enhancements
 * Additive only — no existing styles removed or altered.
 * Techniques: 3D card tilt, glassmorphism, grain overlay, ambient glow,
 * bento glass stats, perspective timeline, magnetic CTA buttons.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── Root tokens ───────────────────────────────────────────── */
.homepage {
    --hp26-red:          var(--color-primary, var(--color-primary));
    --hp26-red-glow:     color-mix(in srgb, var(--color-primary) 40%, transparent);
    --hp26-glass-bg:     rgba(255, 255, 255, 0.04);
    --hp26-glass-border: rgba(255, 255, 255, 0.1);
    --hp26-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --hp26-smooth:       cubic-bezier(0.22, 1, 0.36, 1);
    --font-primary:      'Outfit', sans-serif !important;
    --font-secondary:    'Outfit', sans-serif !important;
    /* Override legacy pink variables from consolidated/pages/homepage.css */
    --hp-primary:        var(--color-primary, var(--color-primary));
    --primary-color:     var(--color-primary, var(--color-primary));
    --accent-primary:    var(--color-primary, var(--color-primary));
    --accent-color:      var(--color-primary, var(--color-primary));
}

/* ── 1. Epic Pouring Rain Overlay ────────────────────────────── */
.hp26-epic-rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* ── 1a. Interactive Embers Particles Canvas ───────────────── */
.hp26-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;           /* above grain (6), below content (10) */
    opacity: 0.85;
}

/* ── 2. Genre chips — deep glassmorphic badges ─────────────── */
.hero-genre-chips .hero-genre-chip {
    backdrop-filter:  saturate(1.8);
    -webkit-backdrop-filter:  saturate(1.8);
    background: color-mix(in srgb, var(--color-primary) 14.000000000000002%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.14) inset;
    transition: transform 0.3s var(--hp26-spring),
                box-shadow 0.3s ease,
                background 0.3s ease;
    letter-spacing: 0.1em;
    cursor: default;
}

.hero-genre-chips .hero-genre-chip:hover {
    transform: translateY(-4px) scale(1.1);
    background: color-mix(in srgb, var(--color-primary) 28.000000000000004%, transparent);
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--color-primary) 28.000000000000004%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

/* ── 3. Hero title — 3D depth glow ────────────────────────── */
/* hero-title-impact is the actual class; hero-split-text was never added by JS */
.hero-title.hero-title-impact {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* ── 4. Scroll-progress bar — animated shimmer ─────────────── */
.hp-scroll-progress {
    background: linear-gradient(90deg, #991b1b, var(--color-primary, var(--color-primary)), #ef4444, var(--color-primary, var(--color-primary)), #991b1b) !important;
    background-size: 300% 100% !important;
    animation: hp26-shimmer 3s linear infinite !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent) !important;
    height: 3px !important;
}

@keyframes hp26-shimmer {
    0%   { background-position: 300% 0; }
    100% { background-position: -300% 0; }
}

/* ── 5. Facts ticker — depth ───────────────────────────────── */
.hp-facts-ticker {
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    border-top:    1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── 6. Era filter pills — glass + spring ──────────────────── */
.hp-era-pill {
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    transition: transform 0.3s var(--hp26-spring),
                background 0.25s ease,
                box-shadow 0.25s ease !important;
}

.hp-era-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

.hp-era-pill.hp-era-pill--active {
    box-shadow:
        0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent),
        0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent) inset !important;
}

/* ── 7. Album cards — 3D tilt system ──────────────────────── */
.albums-grid-modern .album-card-modern {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.4s ease;
}

/* When JS adds .hp26-tilting: instant response, CSS-variable driven */
/* Uses --card-rx/ry/gx/gy set by the inline tilt script */
.albums-grid-modern .album-card-modern.hp26-tilting {
    transition: none;
    transform:
        perspective(800px)
        rotateX(var(--card-rx, 0deg))
        rotateY(var(--card-ry, 0deg))
        scale3d(1.05, 1.05, 1.05);
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 60px var(--album-glow, color-mix(in srgb, var(--color-primary) 18%, transparent));
    z-index: 3;
}

/* Sub-elements float forward when parent tilts */
.album-card-modern.hp26-tilting .album-info-overlay {
    transform: translateZ(22px);
    transition: none;
}

.album-card-modern.hp26-tilting .album-card-quick-play {
    transform: translateZ(35px) scale(1.08);
    transition: none;
}

.album-card-modern.hp26-tilting .album-card-year-badge,
.album-card-modern.hp26-tilting .hp-new-badge {
    transform: translateZ(26px);
    transition: none;
}

/* Holographic glare driven by --gx/--gy CSS vars set by JS */
.album-card-modern .album-card-glare {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: overlay;
    background: radial-gradient(
        circle at var(--card-gx, 50%) var(--card-gy, 50%),
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        transparent 72%
    );
}

.album-card-modern.hp26-tilting .album-card-glare {
    opacity: 1;
    transition: none;
    background: radial-gradient(
        circle at var(--card-gx, 50%) var(--card-gy, 50%),
        rgba(255, 255, 255, 0.28) 0%,
        rgba(200, 160, 255, 0.06) 40%,
        transparent 72%
    );
}

/* Ambient color glow: JS sets --album-glow from data-color attribute */
.album-card-modern[data-color] {
    --album-glow: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ── 8. Stats cards — bento glassmorphic 3D ────────────────── */
.home-live-stats {
    position: relative;
}

/* Subtle red horizon line above section */
.home-live-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 90vw);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent);
    pointer-events: none;
}

.live-stat-card {
    position: relative;
    overflow: hidden;
    backdrop-filter:  saturate(1.6);
    -webkit-backdrop-filter:  saturate(1.6);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--hp26-spring), box-shadow 0.5s ease;
}

/* Glass highlight edge on top */
.live-stat-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.18), transparent);
    pointer-events: none;
    border-radius: 1px;
}

/* Radial ambient light at bottom-right */
.live-stat-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.live-stat-card:hover {
    transform: translateY(-12px) perspective(500px) rotateX(7deg);
    box-shadow:
        0 48px 80px rgba(0, 0, 0, 0.5),
        0 0 40px color-mix(in srgb, var(--color-primary) 12%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

/* Gradient number — white → red */
.live-stat-card .live-stat-number {
    background: linear-gradient(150deg, #ffffff 0%, #ff6060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--color-primary) 35%, transparent));
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
}

/* Icon container: glass pill */
.live-stat-card .live-stat-icon {
    display: inline-flex;
    padding: 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-primary) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 14.000000000000002%, transparent);
    margin-bottom: 14px;
}

/* Pop-in animation triggered by JS class */
.live-stat-card.hp26-count-in .live-stat-number {
    animation: hp26-num-pop 0.55s var(--hp26-spring) both;
}

@keyframes hp26-num-pop {
    0%   { opacity: 0; transform: scale(0.7) translateY(12px); filter: blur(4px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 9. Timeline events — 3D perspective ───────────────────── */
.hp-tl-event {
    transition: transform 0.4s var(--hp26-smooth),
                box-shadow 0.4s ease !important;
    border-radius: 10px;
    transform-origin: left center;
}

.hp-tl-event:hover {
    transform: perspective(700px) rotateY(-5deg) translateX(8px) !important;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* ── 10. News / archive cards — depth lift ─────────────────── */
.news-item-modern,
.archive-card,
.news-card-modern {
    transition: transform 0.4s var(--hp26-spring),
                box-shadow 0.4s ease !important;
    border-radius: 14px;
}

.news-item-modern:hover,
.archive-card:hover,
.news-card-modern:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42) !important;
}

/* ── 11. Guestbook teaser — frosted card ───────────────────── */
.guestbook-teaser-inner {
    backdrop-filter:  saturate(1.5);
    -webkit-backdrop-filter:  saturate(1.5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 24px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.guestbook-teaser-entry {
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: transform 0.35s var(--hp26-spring),
                background 0.3s ease !important;
}

.guestbook-teaser-entry:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ── 12. Quote rotator — glass depth ───────────────────────── */
.quote-rotator-card {
    backdrop-filter:  saturate(1.5);
    -webkit-backdrop-filter:  saturate(1.5);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
    transition: transform 0.6s var(--hp26-smooth),
                box-shadow 0.5s ease !important;
}

.quote-rotator-card:hover {
    transform: perspective(900px) rotateX(3deg) translateY(-5px) !important;
    box-shadow:
        0 52px 80px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
}

/* ── 13. Memorial section — portrait depth ─────────────────── */
.memorial-photo-frame {
    transition: transform 0.7s var(--hp26-smooth) !important;
    transform-style: preserve-3d;
}

.memorial-section:hover .memorial-photo-frame {
    transform: perspective(700px) rotateY(6deg) rotateX(-3deg) !important;
}

/* ── 14. On-This-Day — glass card ──────────────────────────── */
.on-this-day-card,
.on-this-day-inner {
    backdrop-filter:  saturate(1.5) !important;
    -webkit-backdrop-filter:  saturate(1.5) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
    transition: transform 0.4s var(--hp26-spring) !important;
}

.on-this-day-card:hover,
.on-this-day-inner:hover {
    transform: translateY(-5px) !important;
}

/* ── 15. Track spotlight — vinyl depth ─────────────────────── */
.track-spotlight-cover,
.track-spotlight-cover-wrap,
.vinyl-spin-wrapper {
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.65)) !important;
    transition: transform 0.5s var(--hp26-spring),
                filter 0.5s ease !important;
}

.track-spotlight-section:hover .track-spotlight-cover,
.track-spotlight-section:hover .track-spotlight-cover-wrap,
.track-spotlight-section:hover .vinyl-spin-wrapper {
    transform: perspective(600px) rotateY(-8deg) scale(1.03) !important;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8)) !important;
}

/* ── 16. Section headings — red underline accent ───────────── */
.block-title {
    position: relative;
    display: inline-block;
}

.block-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, var(--color-primary)), color-mix(in srgb, var(--color-primary) 0%, transparent));
    border-radius: 2px;
}

/* ── 16a. Section numbered prefixes — bento redesign cleanup ── */
/* Albums/news moved to bento (no numbers). Gallery and timeline
   inherits "01"/"03" from homepage.css — clear those stale labels. */
.homepage .featured-content .block-header .block-title::before {
    content: '' !important;
}
.homepage .timeline-section .block-header .block-title::before {
    content: '' !important;
}

/* ── 17. Hero CTA buttons — magnetic base ──────────────────── */
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    transition: transform 0.25s ease, box-shadow 0.3s ease !important;
    will-change: transform;
}

.hero-actions .btn-primary:hover {
    box-shadow: 0 10px 36px color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}

/* ── 18. Hero floaters — depth + parallax base ─────────────── */
.hp-hero-floater {
    border-radius: 10px !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ── 19. Scroll indicator — enhanced bounce ────────────────── */
.hero-scroll-indicator .scroll-chevron {
    animation: hp26-chevron-pulse 2.2s ease-in-out infinite !important;
}

@keyframes hp26-chevron-pulse {
    0%, 100% { transform: translateY(0);  opacity: 0.6; }
    50%       { transform: translateY(7px); opacity: 1; }
}

/* ── 20. HP Equalizer bars — 3D glow ───────────────────────── */
.hp-eq-bars[data-playing="true"] .hp-eq-bar {
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-primary) 70%, transparent);
    border-radius: 2px;
}

/* ── 21. Ticker separator diamonds — accent ────────────────── */
/* Class in template is hp-ticker-sep (not hp-facts-ticker__sep) */
.hp-ticker-sep {
    color: color-mix(in srgb, var(--color-primary) 60%, transparent) !important;
}

/* ── 22. Plays chip — glass badge ──────────────────────────── */
.hp-plays-chip {
    backdrop-filter:  !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ── 23. Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hp26-grain::before         { animation: none; }
    .hp-scroll-progress         { animation: none !important; }
    .albums-grid-modern .album-card-modern,
    .live-stat-card,
    .hp-tl-event                { transition: none !important; }
    .live-stat-card.hp26-count-in .live-stat-number { animation: none; }
    .hero-scroll-indicator .scroll-chevron { animation: none !important; }
    .hero-brand::before,
    .hero-actions .btn-primary::after,
    .memorial-photo-glow,
    .memorial-icon              { animation: none !important; }
    .hp26-tl-enter,
    .news-list-modern.hp26-revealed .news-item-modern,
    .archive-cards-grid.hp26-revealed .archive-card,
    .guestbook-teaser-entries.hp26-revealed .guestbook-teaser-entry { animation: none !important; }
    .gallery-photo-item         { transition: none !important; }
    .on-this-day-section.hp26-otd-in .on-this-day-card { animation: none !important; }
    .quote-rotator-section.hp26-revealed .quote-rotator-card { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v2 — Extended 2026-2027 enhancements
   ═══════════════════════════════════════════════════════════════ */

/* ── 24. Hero CTA primary — glowing pulse ring ─────────────────── */
.hero-actions .btn-primary {
    position: relative;
}
.hero-actions .btn-primary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent);
    animation: hp26-ring-pulse 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes hp26-ring-pulse {
    0%   { opacity: 0.9; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.4); }
    100% { opacity: 0;   transform: scale(1.4); }
}

/* ── 25. Hero aurora — rotating conic gradient behind title ─────── */
.hero-brand {
    position: relative;
    isolation: isolate;
}
.hero-brand::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 200deg at 50% 60%,
        color-mix(in srgb, var(--color-primary) 9%, transparent) 0deg,
        rgba(100, 20,  200, 0.05) 110deg,
        rgba(20,  60,  200, 0.04) 200deg,
        color-mix(in srgb, var(--color-primary) 9%, transparent) 360deg
    );
    filter: blur(55px);
    border-radius: 50%;
    animation: hp26-aurora 16s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
    opacity: 0.85;
}
@keyframes hp26-aurora {
    0%   { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 0.65; }
    25%  { transform: translate(-50%,-50%) scale(1.25) rotate(14deg);  opacity: 0.90; }
    60%  { transform: translate(-50%,-50%) scale(0.88) rotate(-10deg); opacity: 0.70; }
    100% { transform: translate(-50%,-50%) scale(1.12) rotate(26deg);  opacity: 1.00; }
}

/* ── 26. Gallery items — 3D scroll perspective ─────────────────── */
.gallery-scroll-modern {
    perspective: 1000px;
    perspective-origin: 50% 60%;
}

.gallery-photo-item {
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        opacity    0.4s ease !important;
    transform-style: preserve-3d;
    transform-origin: center center;
    border-radius: 10px;
    overflow: hidden;
}

.gallery-photo-item:hover {
    transform: rotateY(-8deg) translateY(-10px) scale(1.05) !important;
    box-shadow:
        14px 14px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 30px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    z-index: 2;
    position: relative;
}

/* ── 27. Memorial — candle flicker on photo glow ───────────────── */
.memorial-photo-glow {
    animation: hp26-candle 4.5s ease-in-out infinite !important;
}
@keyframes hp26-candle {
    0%,  100% { opacity: 0.55; filter: blur(18px); transform: scale(1); }
    20%       { opacity: 0.85; filter: blur(24px); transform: scale(1.06); }
    45%       { opacity: 0.40; filter: blur(14px); transform: scale(0.97); }
    70%       { opacity: 0.78; filter: blur(22px); transform: scale(1.04); }
}

/* Memorial icon — warm glow pulse */
.memorial-icon {
    filter: drop-shadow(0 0 8px rgba(255, 160, 60, 0.5));
    animation: hp26-candle-icon 3.5s ease-in-out infinite !important;
}
@keyframes hp26-candle-icon {
    0%, 100% { filter: drop-shadow(0 0 8px  rgba(255, 160, 60, 0.50)); }
    35%      { filter: drop-shadow(0 0 16px rgba(255, 160, 60, 0.80)); }
    65%      { filter: drop-shadow(0 0 5px  rgba(255, 160, 60, 0.35)); }
}

/* ── 28. Timeline events — staggered slide-in animation ─────────── */
.hp26-tl-enter {
    animation: hp26-tl-slide-l 0.5s var(--hp26-smooth) both;
}
@keyframes hp26-tl-slide-l {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hp26-tl-enter.hp26-tl-right {
    animation-name: hp26-tl-slide-r;
}
@keyframes hp26-tl-slide-r {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── 29. News list — staggered reveal ──────────────────────────── */
.news-list-modern.hp26-revealed .news-item-modern {
    animation: hp26-list-in 0.48s var(--hp26-smooth) both;
}
.news-list-modern.hp26-revealed .news-item-modern:nth-child(1) { animation-delay: 0.00s; }
.news-list-modern.hp26-revealed .news-item-modern:nth-child(2) { animation-delay: 0.07s; }
.news-list-modern.hp26-revealed .news-item-modern:nth-child(3) { animation-delay: 0.14s; }
.news-list-modern.hp26-revealed .news-item-modern:nth-child(4) { animation-delay: 0.21s; }
.news-list-modern.hp26-revealed .news-item-modern:nth-child(5) { animation-delay: 0.28s; }
@keyframes hp26-list-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 30. Archive cards — staggered reveal ───────────────────────── */
.archive-cards-grid.hp26-revealed .archive-card {
    animation: hp26-list-in 0.5s var(--hp26-smooth) both;
}
.archive-cards-grid.hp26-revealed .archive-card:nth-child(1) { animation-delay: 0.00s; }
.archive-cards-grid.hp26-revealed .archive-card:nth-child(2) { animation-delay: 0.09s; }
.archive-cards-grid.hp26-revealed .archive-card:nth-child(3) { animation-delay: 0.18s; }

/* ── 31. Guestbook entries — slide-in stagger ───────────────────── */
.guestbook-teaser-entries.hp26-revealed .guestbook-teaser-entry {
    animation: hp26-gb-in 0.55s var(--hp26-spring) both;
}
.guestbook-teaser-entries.hp26-revealed .guestbook-teaser-entry:nth-child(1) { animation-delay: 0.00s; }
.guestbook-teaser-entries.hp26-revealed .guestbook-teaser-entry:nth-child(2) { animation-delay: 0.10s; }
.guestbook-teaser-entries.hp26-revealed .guestbook-teaser-entry:nth-child(3) { animation-delay: 0.20s; }
@keyframes hp26-gb-in {
    from { opacity: 0; transform: translateX(28px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* ── 32. On-This-Day — entrance animation ───────────────────────── */
.on-this-day-section.hp26-otd-in .on-this-day-card {
    animation: hp26-otd-reveal 0.65s var(--hp26-smooth) both;
}
@keyframes hp26-otd-reveal {
    from { opacity: 0; transform: scale(0.97) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.on-this-day-section.hp26-otd-in .on-this-day-event:nth-child(1) { animation: hp26-list-in 0.5s 0.15s var(--hp26-smooth) both; }
.on-this-day-section.hp26-otd-in .on-this-day-event:nth-child(2) { animation: hp26-list-in 0.5s 0.25s var(--hp26-smooth) both; }
.on-this-day-section.hp26-otd-in .on-this-day-event:nth-child(3) { animation: hp26-list-in 0.5s 0.35s var(--hp26-smooth) both; }

/* ── 33. Section separators — red glow top-border ──────────────── */
.guestbook-teaser-section,
.quote-rotator-section,
.memorial-section,
.timeline-section {
    position: relative;
}
.guestbook-teaser-section::before,
.quote-rotator-section::before,
.memorial-section::before,
.timeline-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(600px, 80vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── 34. Quote card — 3D entrance ──────────────────────────────── */
.quote-rotator-section.hp26-revealed .quote-rotator-card {
    animation: hp26-quote-in 0.7s var(--hp26-smooth) both;
}
@keyframes hp26-quote-in {
    from { opacity: 0; transform: perspective(900px) rotateX(8deg) translateY(24px); }
    to   { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0); }
}

/* ── 35. Gallery perspective classes (JS-toggled) ───────────────── */
.gallery-photo-item.hp26-far-left   { opacity: 0.60 !important; transform: perspective(700px) rotateY(14deg)  scale(0.91) !important; }
.gallery-photo-item.hp26-near-left  { opacity: 0.82 !important; transform: perspective(700px) rotateY(6deg)   scale(0.97) !important; }
.gallery-photo-item.hp26-near-right { opacity: 0.82 !important; transform: perspective(700px) rotateY(-6deg)  scale(0.97) !important; }
.gallery-photo-item.hp26-far-right  { opacity: 0.60 !important; transform: perspective(700px) rotateY(-14deg) scale(0.91) !important; }

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v3 — Depth, motion & hover enhancements
   ═══════════════════════════════════════════════════════════════ */

/* ── 36. Gallery — title overlay on hover ───────────────────────── */
.gallery-photo-item[data-title] {
    position: relative;
    overflow: hidden;
}
.gallery-photo-item[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, transparent 100%);
    color: rgba(255,255,255,0.95);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.03em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s var(--hp26-smooth);
    border-radius: 0 0 10px 10px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gallery-photo-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ── 37. Timeline — traveling red glow on spine ─────────────────── */
/* Keep position:absolute from modern-fixes.css so the line spans the full
   wrapper height. The ::after glow is positioned relative to this element
   and overflows by default (no overflow rule needed). */
.hp-tl-line {
    position: absolute !important;
}
.hp-tl-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 90px;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--color-primary) 90%, transparent) 45%,
        color-mix(in srgb, var(--color-primary) 60%, transparent) 55%,
        transparent 100%);
    filter: blur(2px);
    border-radius: 3px;
    animation: hp26-tl-travel 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes hp26-tl-travel {
    0%   { top: -90px; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ── 38. Hero title — gradient shimmer sweep ────────────────────── */
.hero-title.hero-title-impact {
    background: linear-gradient(
        105deg,
        #ffffff    0%,
        #ffffff   35%,
        #ffaaaa   50%,
        #ffffff   65%,
        #ffffff  100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hp26-hero-shimmer 7s linear infinite;
}
@keyframes hp26-hero-shimmer {
    0%   { background-position:  200% center; }
    100% { background-position: -200% center; }
}

/* ── 39. Quote card — 3D fold on crossfade ──────────────────────── */
.quote-rotator-card {
    transition:
        transform 0.42s var(--hp26-spring),
        opacity   0.42s ease-out,
        box-shadow 0.5s ease !important;
}
.quote-rotator-card.quote-rotator-fading {
    transform: perspective(900px) rotateX(12deg) scale(0.93) !important;
    opacity: 0.06 !important;
    transition:
        transform 0.26s ease-in,
        opacity   0.26s ease-in !important;
}

/* ── 40. CTA buttons — deeper 3D hover shadow + morph ───────────── */
.hero-actions .btn-primary:hover {
    box-shadow:
        0 18px 52px color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent),
        0  4px 18px color-mix(in srgb, var(--color-primary) 35%, transparent),
        0  0   0 1px rgba(255,255,255,0.08) inset !important;
    border-radius: 14px !important;
}
.hero-actions .btn-secondary:hover {
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.4),
        0  0   0 1px rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
}

/* ── 41. NEW badge ───────────────────────────────────────────────── */
.hp-new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: var(--accent-red, var(--color-primary, var(--color-primary)));
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    pointer-events: none;
}
.hp-new-badge--album {
    animation: hp26-badge-pulse 2.4s ease-in-out infinite !important;
}
@keyframes hp26-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent); }
    55%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

/* ── 42. Ambient mesh — quote & memorial ────────────────────────── */
.quote-rotator-section {
    isolation: isolate;
}
.quote-rotator-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 65%, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 55% 60% at 85% 35%, rgba(80,20,200,0.03)  0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.memorial-section {
    isolation: isolate;
}
.memorial-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 60% at 25% 55%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 75% 45%, rgba(220,100,38,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ── 43. News items — red left accent + tint ────────────────────── */
.news-item-modern {
    border-left: 3px solid transparent;
    padding-left: 10px !important;
    transition:
        transform      0.4s var(--hp26-spring),
        box-shadow     0.4s ease,
        border-color   0.22s ease,
        background     0.22s ease !important;
}
.news-item-modern:hover {
    border-left-color: color-mix(in srgb, var(--color-primary) 75%, transparent) !important;
    background: color-mix(in srgb, var(--color-primary) 4%, transparent) !important;
}

/* ── 44. News excerpt — inline slide reveal ─────────────────────── */
.hp26-news-excerpt {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.55;
    font-style: italic;
    padding: 0 10px 0 13px;
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    margin: -4px 0 4px;
    transition:
        max-height 0.38s var(--hp26-smooth),
        opacity    0.30s ease,
        padding    0.30s ease;
    pointer-events: none;
}
.hp26-news-excerpt.hp26-vis {
    max-height: 72px;
    opacity: 1;
    padding: 5px 10px 8px 13px;
}

/* ── 45. On-This-Day events — micro 3D lift ─────────────────────── */
.on-this-day-event {
    transition:
        transform  0.32s var(--hp26-spring),
        background 0.22s ease !important;
    border-radius: 8px;
}
.on-this-day-event:hover {
    transform: perspective(500px) translateZ(10px) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ── 46. Stats — number glow on count-in ────────────────────────── */
.live-stat-card.hp26-count-in .live-stat-number {
    filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--color-primary) 45%, transparent));
}

/* ── 47. Era pills — active glass sheen ─────────────────────────── */
.hp-era-pill.hp-era-pill--active {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 12%, transparent) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    position: relative;
    overflow: hidden;
}
.hp-era-pill.hp-era-pill--active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.14) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: hp26-pill-sheen 3s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes hp26-pill-sheen {
    0%   { background-position:  200% center; }
    100% { background-position: -200% center; }
}

/* ── 48. Guestbook — deeper glass on hover ──────────────────────── */
.guestbook-teaser-entry:hover {
    backdrop-filter:  saturate(2) !important;
    -webkit-backdrop-filter:  saturate(2) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ── 49. Block-title underline — expand on section hover ─────────── */
.block-title::after {
    transition: width 0.45s var(--hp26-spring);
}
.content-block:hover .block-title::after,
.section-header-modern:hover .block-title::after {
    width: 80px;
}

/* ── 50. Hero content — scroll-parallax (JS sets inline style) ───── */
.hero-section .hero-content {
    will-change: transform, opacity;
}

/* ── 51. Reduced motion — v3 additions ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hp-tl-line::after                 { animation: none !important; }
    .hero-title.hero-title-impact       { animation: none !important;
                                         background: #fff;
                                         -webkit-text-fill-color: var(--text-primary); }
    .quote-rotator-card,
    .quote-rotator-card.quote-rotator-fading {
        transition: opacity 0.28s ease !important;
        transform: none !important;
    }
    .hp-new-badge--album               { animation: none !important; }
    .hp-era-pill.hp-era-pill--active::after,
    .hp-tl-pill--active::after            { animation: none !important; }
    .gallery-photo-item[data-title]::after  { transition: none !important; }
    .hp26-news-excerpt                 { transition: none !important; }
    .on-this-day-event                 { transition: none !important; }
    .hero-section .hero-content        { transform: none !important;
                                         opacity:   1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v4 — 2026-2027 3D Modernization & Cinematic Depth
   ═══════════════════════════════════════════════════════════════ */

/* ── 52. "Liquid Glass" Hover Panels (Stats & Guestbook) ──────── */
.home-live-stats .live-stat-card,
.guestbook-teaser-inner,
.guestbook-teaser-entry {
    backdrop-filter:  saturate(2);
    -webkit-backdrop-filter:  saturate(2);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Iridescent animated border glow */
.home-live-stats .live-stat-card::before,
.guestbook-teaser-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        color-mix(in srgb, var(--color-primary) 10%, transparent) 40%,
        rgba(100, 20, 200, 0.1) 60%,
        rgba(255, 255, 255, 0.3) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.home-live-stats .live-stat-card:hover::before,
.guestbook-teaser-inner:hover::before {
    opacity: 1;
}

/* ── 53. Magnetic 3D Depth & Underglow (Top Tracks & On This Day) */
.hp-top-tracks-list {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hp-top-track-row {
    transition: transform 0.4s var(--hp26-spring), box-shadow 0.4s ease, background 0.3s ease !important;
    transform-origin: center center;
    position: relative;
    z-index: 1;
    border-radius: 12px;
}

.hp-top-track-row:hover {
    transform: perspective(1000px) translateZ(30px) rotateX(var(--mag-rx, 0deg)) rotateY(var(--mag-ry, 0deg)) !important;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 10px 20px var(--album-glow, color-mix(in srgb, var(--color-primary) 20%, transparent)),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    z-index: 10;
}

.on-this-day-card, .on-this-day-event {
    transform-style: preserve-3d;
}

/* ── 54. Holographic 3D Typography (Quote & Headers) ──────────── */
.quote-rotator-section blockquote p {
    text-shadow: 
        0 1px 0 #ccc, 
        0 2px 0 #c9c9c9, 
        0 3px 0 #bbb, 
        0 4px 0 #b9b9b9, 
        0 5px 0 #aaa, 
        0 6px 1px rgba(0,0,0,.1), 
        0 0 5px rgba(0,0,0,.1), 
        0 1px 3px rgba(0,0,0,.3), 
        0 3px 5px rgba(0,0,0,.2), 
        0 5px 10px rgba(0,0,0,.25), 
        0 10px 10px rgba(0,0,0,.2), 
        0 20px 20px rgba(0,0,0,.15);
    background: linear-gradient(to bottom, #ffffff 0%, #d4d4d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.quote-rotator-section:hover blockquote p {
    transform: translateZ(15px);
    text-shadow: 
        0 2px 0 #ccc, 
        0 4px 0 #c9c9c9, 
        0 6px 0 #bbb, 
        0 8px 0 #b9b9b9, 
        0 10px 0 #aaa, 
        0 12px 2px rgba(0,0,0,.1), 
        0 0 10px rgba(0,0,0,.1), 
        0 2px 6px rgba(0,0,0,.3), 
        0 6px 10px rgba(0,0,0,.2), 
        0 10px 20px rgba(0,0,0,.25);
}

.section-header-modern .block-title,
.block-title.section-title {
    background: linear-gradient(135deg, #ffffff 0%, #ffaaaa 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hp26-holo-text 5s linear infinite;
}

@keyframes hp26-holo-text {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ── 55. Scroll-Driven Cinematic Z-Depth Parallax ─────────────── */
/* Handled mainly in JS, but we need base classes */
.cinema-section {
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    transition: transform 0.1s linear, filter 0.1s linear;
}

.cinema-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    will-change: transform, filter;
    pointer-events: none;
    transition: transform 0.1s linear, filter 0.1s linear;
}

/* ── 56. Breathing Edge Glows (Memorial & Spotlight) ──────────── */
.memorial-section::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: transparent;
    box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 15%, transparent), inset 0 0 40px color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-radius: 30px;
    z-index: -1;
    animation: hp26-breathe 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes hp26-breathe {
    0% { box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 5%, transparent), inset 0 0 40px color-mix(in srgb, var(--color-primary) 5%, transparent); }
    100% { box-shadow: 0 0 60px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 0 60px color-mix(in srgb, var(--color-primary) 20%, transparent); }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v5 — 2026-2027 Cutting Edge Enhancements
   ═══════════════════════════════════════════════════════════════ */

/* ── 57. Aurora Ambient Glow Dividers ─────────────────────────── */
.hp26-aurora-divider {
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    margin-top: -60px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    background:
        radial-gradient(ellipse at 20% 50%, var(--color-primary, var(--color-primary)) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, #8b5cf6 0%, transparent 60%),
        radial-gradient(ellipse at 50% 80%, #3b82f6 0%, transparent 60%);
    filter: blur(20px);
    animation: hp26-aurora-drift 25s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, transparent 100%);
}
@keyframes hp26-aurora-drift {
    0%   { transform: scale(1) translateX(0); }
    50%  { transform: scale(1.1) translateX(5%); }
    100% { transform: scale(0.9) translateX(-5%); }
}

/* ── 58. Rotating Conic Gradient Borders (@property) ──────────── */
@property --hp26-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.album-card-modern {
    background-clip: padding-box;
    border: 2px solid transparent !important;
}
@supports (background: paint(something)) or (border-image: conic-gradient(from 0deg, red, red)) {
    .album-card-modern:hover {
        border-image: conic-gradient(
            from var(--hp26-border-angle),
            var(--color-primary, var(--color-primary)), #8b5cf6, #3b82f6, var(--color-primary, var(--color-primary))
        ) 1 !important;
        animation: hp26-border-spin 3s linear infinite !important;
    }
}
@keyframes hp26-border-spin {
    to { --hp26-border-angle: 360deg; }
}

/* ── 59. Bento Grid Layout for Featured Albums ────────────────── */
.albums-grid-modern {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
.album-card-newest {
    grid-column: span 2;
    grid-row: span 2;
}
.album-card-newest .album-info-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    padding: 30px 20px 20px;
}
.hp26-listen-now-cta {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--text-sm);
    color: var(--accent-red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.album-card-newest:hover .hp26-listen-now-cta {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 600px) {
    .album-card-newest {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ── 60. CSS Scroll-Driven Section Reveals ────────────────────── */
@supports (animation-timeline: view()) {
    .scroll-reveal[data-reveal] {
        animation: hp26-css-reveal linear both !important;
        animation-timeline: view() !important;
        animation-range: entry 0% entry 45% !important;
    }
    .scroll-reveal.revealed {
        /* Override JS classes if CSS animation is supported */
        opacity: 1 !important;
        transform: none !important;
    }
}
@keyframes hp26-css-reveal {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 61. Kinetic Magnetic Typography ──────────────────────────── */
.hp26-kinetic-char {
    display: inline-block;
    transition: transform 0.3s var(--hp26-spring), color 0.3s ease;
    will-change: transform;
}

/* ── 62. Scroll-Snap Proximity ────────────────────────────────── */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    html:has(.homepage) {
        scroll-snap-type: y proximity;
    }
    .homepage > section,
    .homepage > .hp26-scroll-journey {
        scroll-snap-align: start;
        scroll-margin-top: 60px;
    }
}

/* ── 63. Typewriter Cursor ────────────────────────────────────── */
.hp26-cursor {
    display: inline;
    animation: hp26-blink 0.6s step-end infinite;
    color: var(--accent-red);
    font-weight: 300;
}
@keyframes hp26-blink {
    50% { opacity: 0; }
}

/* ── 64. Floating Section Nav Bar ─────────────────────────────── */
.hp26-float-nav {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 850;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter:  saturate(1.5);
    -webkit-backdrop-filter:  saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s var(--hp26-spring), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.hp26-float-nav.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.hp26-float-nav__item {
    position: relative;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.3s ease;
    z-index: 1;
}
.hp26-float-nav__item:hover {
    color: var(--text-primary);
}
.hp26-float-nav__item.active {
    color: var(--text-primary);
    font-weight: 600;
}
.hp26-float-nav__indicator {
    position: absolute;
    top: 8px;
    bottom: 8px;
    background: var(--color-primary, var(--color-primary));
    border-radius: 20px;
    transition: left 0.35s var(--hp26-spring), width 0.35s var(--hp26-spring);
    z-index: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
@media (max-width: 768px) {
    .hp26-float-nav { display: none !important; }
    .hp26-audio-canvas-wrap { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v8 — Wave 4 (Scroll Snap, Custom Cursor, Underglow)
   ═══════════════════════════════════════════════════════════════ */

/* ── 75. [Removed] Cinematic Scroll Snapping — was conflicting with section 62.
   Section 62 already handles scroll-snap with correct start-alignment and
   reduced-motion guard. The center + always-stop here was trapping users
   during fast scroll on large-viewport desktops. Removed. ─── */

/* ── 76. Custom Morphing Cursor ───────────────────────────────── */
@media (pointer: fine) {
    body.hp26-custom-cursor,
    body.hp26-custom-cursor a,
    body.hp26-custom-cursor button,
    body.hp26-custom-cursor .hp-era-pill {
        cursor: none !important;
    }
    
    .hp26-cursor-dot, .hp26-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 10000;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s var(--hp26-spring), height 0.3s var(--hp26-spring), background 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease;
        will-change: transform;
    }
    .hp26-cursor-dot {
        width: 6px;
        height: 6px;
        background: #fff;
    }
    .hp26-cursor-ring {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(255,255,255,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: transparent;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        /* Ring tracking is done via JS matrix3d for 144hz smoothness */
    }
    
    /* Cursor States */
    body.hp26-custom-cursor .hp26-cursor-ring.cursor-hover {
        width: 52px;
        height: 52px;
        background: rgba(255,255,255,0.1);
        border-color: transparent;
    }
    body.hp26-custom-cursor .hp26-cursor-ring.cursor-play {
        width: 64px;
        height: 64px;
        background: var(--color-primary, var(--color-primary));
        color: var(--text-primary);
        border-color: var(--accent-red);
        mix-blend-mode: normal;
    }
    body.hp26-custom-cursor .hp26-cursor-ring.cursor-play::after {
        content: 'PLAY';
    }
    body.hp26-custom-cursor .hp26-cursor-dot.cursor-play {
        opacity: 0;
    }
}

/* ── 77. Ambient Dynamic Underglow ────────────────────────────── */
.hp26-ambient-underglow {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 70vh;
    background: var(--hp26-glow-color, color-mix(in srgb, var(--color-primary) 0%, transparent));
    filter: blur(180px);
    pointer-events: none;
    z-index: 0; /* Below content */
    opacity: 0.15;
    transition: background 1.5s ease;
    border-radius: 50%;
}

/* ── 65. Shimmer Skeleton Loading ─────────────────────────────── */
.hp26-skel {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: hp26-skel-wave 1.8s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes hp26-skel-wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.hp26-skel-row {
    height: 48px;
    margin-bottom: 8px;
    border-radius: 8px;
}
.hp26-skel-photo {
    width: 220px;
    height: 140px;
    border-radius: 10px;
    flex-shrink: 0;
}
.hp26-skel-spotlight {
    width: 100%;
    height: 280px;
    border-radius: 12px;
}

/* ── 66. Memorial Candle Smoke Wisps ──────────────────────────── */
.hp26-candle-wrap {
    position: relative;
    display: inline-block;
}
.hp26-smoke-wisp {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 12px;
    height: 40px;
    margin-left: -6px;
    background: radial-gradient(ellipse, rgba(180,180,180,0.15) 0%, transparent 70%);
    animation: hp26-smoke 4s ease-out infinite;
    filter: blur(3px);
    pointer-events: none;
    z-index: 10;
}
.hp26-smoke-wisp:nth-child(2) { animation-delay: 1.2s; animation-duration: 4.5s; }
.hp26-smoke-wisp:nth-child(3) { animation-delay: 2.5s; animation-duration: 5s; }

@keyframes hp26-smoke {
    0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
    20%  { opacity: 0.4; transform: translateY(-10px) translateX(2px) scale(0.8); }
    50%  { opacity: 0.15; transform: translateY(-30px) translateX(-5px) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) translateX(8px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
    .hp26-aurora-divider { animation: none !important; opacity: 0.05; }
    .album-card-modern:hover { border-image: none !important; animation: none !important; border-color: var(--color-primary, var(--color-primary)) !important; }
    .hp26-kinetic-char { transition: none !important; transform: none !important; }
    .hp26-cursor { animation: none !important; }
    .hp26-skel { animation: none !important; }
    .hp26-smoke-wisp { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v6 — Wave 2 (Dynamic Island, 3D, Liquid, Flashlight)
   ═══════════════════════════════════════════════════════════════ */

/* ── 67. Dynamic Island ───────────────────────────────────────── */
.hp26-dynamic-island {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    border-radius: 40px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 12px;
    z-index: 900;
    transition: all 0.5s var(--hp26-spring);
    cursor: pointer;
    overflow: hidden;
    height: 48px;
    width: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.hp26-dynamic-island:hover, .hp26-dynamic-island.expanded {
    width: 280px;
    height: 64px;
    border-radius: 32px;
}
.hp26-di-icon {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 16px;
    flex-shrink: 0;
    margin: 0 auto;
}
.hp26-dynamic-island:hover .hp26-di-icon, .hp26-dynamic-island.expanded .hp26-di-icon {
    margin: 0;
}
.hp26-di-bar {
    width: 3px;
    background: var(--color-primary, var(--color-primary));
    border-radius: 2px;
    animation: hp26-di-eq 1s ease-in-out infinite;
}
.hp26-di-bar:nth-child(2) { animation-delay: 0.2s; }
.hp26-di-bar:nth-child(3) { animation-delay: 0.4s; }
@keyframes hp26-di-eq {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}
.hp26-di-content {
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
}
.hp26-dynamic-island:hover .hp26-di-content, .hp26-dynamic-island.expanded .hp26-di-content {
    opacity: 1;
    transition-delay: 0.15s;
}
.hp26-di-title { font-size: var(--text-sm); color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; }
.hp26-di-text { font-size: 0.95rem; color: var(--text-primary); font-weight: 500; }

/* ── 68. Flashlight Cursor Overlay ────────────────────────────── */
.hp26-flashlight-wrapper {
    position: relative;
}
.hp26-flashlight-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 400px at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(255,255,255,0.08), transparent 80%);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: inherit;
}
.hp26-flashlight-wrapper:hover .hp26-flashlight-overlay {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v9 — Visual Consistency Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── 78. Gallery section — remove jarring solid #1a1a1f background */
/* homepage.css sets .featured-content { background: #1a1a1f } which
   creates a visual box around the gallery that breaks the glass aesthetic */
.homepage .featured-content {
    background: transparent !important;
}

/* ── 79. Bento stats numbers — gradient matching standalone stats ── */
/* Standalone stats use .live-stat-card .live-stat-number (gradient).
   Bento card lacks .live-stat-card wrapper, so gradient never applied;
   inline color:var(--color-primary, var(--color-primary)) showed solid red instead. */
.hp26-bento-stats .live-stat-number {
    background: linear-gradient(150deg, #ffffff 0%, #ff6060 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent));
}

/* ── 80. Timeline pills — glass active state (matches era pills) ── */
/* modern-fixes.css uses solid red for .hp-tl-pill--active; era pills
   use glass gradient — unify both to the same visual language. */
.hp-tl-pill--active {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 12%, transparent) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.hp-tl-pill--active:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 32%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 100%
    ) !important;
}

/* ── 81. Showcase super-title — fix inverted font-size hierarchy ── */
/* .section-header-modern .block-title inside bento cards has max 3.5rem.
   The outer showcase section title (.block-title.section-title) only
   reaches 2.5rem — it was smaller than its own subsection headers. */
.block-title.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    margin-bottom: 1.5rem;
}

/* ── 82. Guestbook CTA — replace pink (#ff3366) with site red ───── */
/* modern-fixes.css hardcodes #ff3366 (pink) for .btn-guestbook — off-brand
   vs the rest of the site's var(--color-primary, var(--color-primary)) red accent. */
.btn-guestbook {
    background: var(--color-primary, var(--color-primary)) !important;
}
.btn-guestbook:hover {
    background: var(--color-primary-hover, #b91c1c) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

/* ── 83. News tab buttons — glassmorphism + smooth transitions ───── */
/* .hp-news-tab has no external CSS; JS controls background/color inline.
   We add backdrop-filter and transition that don't conflict with JS state. */
.hp-news-tab {
    backdrop-filter:  !important;
    -webkit-backdrop-filter:  !important;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.hp-news-tab:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}
.hp-news-tab.hp-news-tab--active {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent) inset !important;
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v10 — Polish, Color Consistency & Layout Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── 84. Bento video card — remove duplicate dark overlay ───────── */
/* The template already has an inline <div> dark gradient overlay.
   The ::before pseudo-element (from section 58) adds a SECOND dark
   gradient on top, making the image background over-darkened. */
.hp26-bento-video::before {
    content: none !important;
}

/* ── 85. Gallery lightbox link — red not pink ───────────────────── */
/* Inline <style> block sets .hp-gallery-lb__link{color:#ff6b9d}. */
.hp-gallery-lb__link {
    color: var(--color-primary, var(--color-primary)) !important;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}
.hp-gallery-lb__link:hover {
    color: #ef4444 !important;
}

/* ── 86. OTD event album-name links — red not pink ──────────────── */
/* The EJS linkAlbumNames() function injects style="color:#ff6b9d".
   !important overrides any inline style attribute. */
.on-this-day-event-title a,
.on-this-day-event-description a {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
    text-underline-offset: 2px;
}
.on-this-day-event-title a:hover,
.on-this-day-event-description a:hover {
    color: #ef4444 !important;
}

/* ── 87. Guestbook entries — restore red left accent + radius ───── */
/* hp-2026.css v4 section 52 sets border: 1px white !important which
   kills the intended red left accent from the CLS inline <style> block.
   Inline <style> also overrides border-radius to 4px — fix to 10px. */
.guestbook-teaser-entry {
    border-top:    1px solid rgba(255, 255, 255, 0.07) !important;
    border-right:  1px solid rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-left:   3px solid color-mix(in srgb, var(--color-primary) 50%, transparent)   !important;
    border-radius: 10px !important;
}
.guestbook-teaser-entry:hover {
    border-left-color: color-mix(in srgb, var(--color-primary) 80%, transparent) !important;
}

/* ── 88. Bento showcase section — breathing room ───────────────── */
.hp26-bento-section {
    padding-top:    3rem;
    padding-bottom: 2rem;
}

/* ── 89. OTD footer links — dark theme accent ───────────────────── */
/* Only a light-theme override exists in modern-fixes.css for this class.
   Dark mode (default) had no base color — uses inherited text or browser
   default, which can be browser-default blue or plain inherited gray. */
.homepage .otd-footer-link {
    color: color-mix(in srgb, var(--color-primary) 75%, transparent);
    font-size: var(--text-sm);
    transition: color 0.2s ease;
}
.homepage .otd-footer-link:hover {
    color: var(--accent-red-light);
}

/* ── 90. Memorial primary link hover — pink → red ───────────────── */
/* modern-fixes.css uses rgba(255,85,136) pink for .memorial-link hover.
   The base background is already red via .memorial-link-primary !important,
   but hover reverts to pink at higher specificity (0,4,0). */
.homepage .memorial-modern .memorial-link:hover {
    background: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}

/* ── 91. Timeline pill active — add sheen sweep matching era pills ─ */
/* Era pills have hp26-pill-sheen on ::after; unify timeline pills. */
.hp-tl-pill--active {
    position: relative !important;
    overflow: hidden !important;
}
.hp-tl-pill--active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: hp26-pill-sheen 3.5s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* ── 92. Section header inside bento — consistent bottom border ─── */
/* .section-header-modern has border-bottom from homepage.css but
   .hp26-bento-albums / .hp26-bento-news reset the card border to none,
   leaving the inner section header visually floating. Add a subtle line. */
.hp26-bento-albums .section-header-modern,
.hp26-bento-news .section-header-modern {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* ── 93. Bento showcase h2 — left-align + constrain overflow ────── */
/* With font-size up to 4rem the title needs visual anchoring.
   display:inline-block from section 16 clips it to text width;
   ensure it doesn't overflow the container on narrow viewports. */
.block-title.section-title {
    display: block !important;
    word-break: break-word;
}

/* ── 69. View Transitions for Albums ──────────────────────────── */
.album-card-modern {
    view-transition-name: var(--vt-name, none);
}
::view-transition-group(*) {
    animation-duration: 0.4s;
    animation-timing-function: var(--hp26-spring);
}

/* ── 70. 3D Parallax Stats Cards ──────────────────────────────── */
.stats-section .container {
    perspective: 1200px;
}
.live-stat-card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    transform-style: preserve-3d;
    position: relative;
    will-change: transform;
}
.live-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    mix-blend-mode: overlay;
    z-index: 10;
}
.live-stat-card:hover::after {
    opacity: 1;
}
.live-stat-card > * {
    transform: translateZ(30px);
    transition: transform 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v7 — Wave 3 (Scroll Depth, Anchor Tooltips, Marquee, Canvas)
   ═══════════════════════════════════════════════════════════════ */

/* ── 71. [Removed] Scroll-Linked Iridescent Refraction — the hp26-hue-shift
   animation was rotating album art and stat cards from red to yellow-green
   (hue-rotate 0→60deg) as they scrolled into view — off-brand. The keyframes
   and the scroll-linked animation-timeline/animation-range are removed.
   A no-op keyframe redefinition in v14 (below) was the prior fix; now
   the animation is eliminated entirely. ─── */

/* ── 72. Anchor Positioning Tooltips ──────────────────────────── */
.hp-era-pill {
    position: relative; /* Fallback anchoring */
}
.hp-era-pill::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--text-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    z-index: 100;
}
.hp-era-pill:hover::after, .hp-era-pill:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(12px);
}
@supports (anchor-name: --hp26-test) {
    /* Next-gen anchor positioning */
    .hp-era-pill { anchor-name: --hp26-era; }
    .hp-era-pill::after {
        position-anchor: --hp26-era;
        position-area: bottom;
        top: auto; left: auto; transform: none;
        margin-top: 8px;
    }
    .hp-era-pill:hover::after {
        transform: translateY(4px);
    }
}

/* ── 73. Infinite Marquee Scroller ────────────────────────────── */
.hp26-marquee-container {
    width: 100%;
    overflow: hidden;
    background: #0a0a0a;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 16px 0;
    position: relative;
    z-index: 10;
}
.hp26-marquee-content {
    display: flex;
    width: max-content;
    animation: hp26-marquee 40s linear infinite;
    gap: 40px;
}
.hp26-marquee-container:hover .hp26-marquee-content {
    animation-play-state: paused;
}
@keyframes hp26-marquee {
    to { transform: translateX(calc(-50% - 20px)); }
}
.hp26-marquee-item {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a1a1aa;
    white-space: nowrap;
}
/* separator is an HTML span (.hp26-marquee-sep) — no ::after needed */
.hp26-marquee-sep {
    color: var(--accent-red);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* ── 74. Canvas Overlays (Particles & Audio) ──────────────────── */
#hp26-particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}
.hp26-audio-canvas-wrap {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 140px;
    height: 40px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
}



/* ── 17. Track spotlight — lyric quote & shuffle button ──────── */
.track-spotlight-quote {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.85rem;
    border-left: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.track-spotlight-shuffle-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}
.track-spotlight-shuffle-btn:hover {
    opacity: 1;
    transform: rotate(18deg);
}

[data-theme="light"] .track-spotlight-quote {
    color: rgba(0, 0, 0, 0.45);
    border-left-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v9 — Wave 5 (Velocity Skew, Audio, Cyberpunk Glitch)
   ═══════════════════════════════════════════════════════════════ */

/* ── 78. Ambient Soundscape Toggle ────────────────────────────── */
.hp26-ambient-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.85);
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: all 0.3s var(--hp26-spring);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    color: #a1a1aa;
}
.hp26-ambient-toggle:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.hp26-ambient-toggle.is-playing {
    border-color: var(--accent-red);
    color: var(--accent-red);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 40%, transparent);
    animation: hp26-pulse-glow 2s infinite alternate;
}
@keyframes hp26-pulse-glow {
    to { box-shadow: 0 0 25px color-mix(in srgb, var(--color-primary) 80%, transparent); }
}

/* ── 79. Cyberpunk Typography Glitch ──────────────────────────── */
.hp26-glitch-hover {
    position: relative;
    display: inline-block;
}
.hp26-glitch-hover::before, .hp26-glitch-hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.hp26-glitch-hover::before {
    left: 2px;
    text-shadow: -1px 0 var(--color-primary, var(--color-primary));
    clip-path: inset(0 0 0 0);
    animation: hp26-glitch-anim-1 0.2s infinite linear alternate-reverse;
}
.hp26-glitch-hover::after {
    left: -2px;
    text-shadow: -1px 0 #00ffff;
    clip-path: inset(0 0 0 0);
    animation: hp26-glitch-anim-2 0.3s infinite linear alternate-reverse;
}
.hp26-glitch-hover:hover::before, .hp26-glitch-hover:hover::after {
    opacity: 1;
}
@keyframes hp26-glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); }
    20% { clip-path: inset(60% 0 10% 0); }
    40% { clip-path: inset(40% 0 50% 0); }
    60% { clip-path: inset(80% 0 5% 0); }
    80% { clip-path: inset(10% 0 70% 0); }
    100% { clip-path: inset(30% 0 20% 0); }
}
@keyframes hp26-glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); }
    20% { clip-path: inset(30% 0 20% 0); }
    40% { clip-path: inset(70% 0 10% 0); }
    60% { clip-path: inset(20% 0 50% 0); }
    80% { clip-path: inset(90% 0 5% 0); }
    100% { clip-path: inset(40% 0 30% 0); }
}

/* ── 80. Scroll Velocity Momentum Container ───────────────────── */
.hp26-velocity-container {
    will-change: transform;
    transform-origin: center center;
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v10 — Wave 6 (Tactile Physics & Hidden Interfaces)
   ═══════════════════════════════════════════════════════════════ */

/* ── 81. Okrock OS Terminal Overlay ───────────────────────────── */
.hp26-terminal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    z-index: 100000;
    display: none;
    flex-direction: column;
    padding: 2rem;
    font-family: 'Courier New', Courier, monospace;
    color: #0f0;
    text-shadow: 0 0 5px #0f0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hp26-terminal-overlay.is-active {
    display: flex;
    opacity: 1;
}
.hp26-terminal-output {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    pointer-events: none;
}
.hp26-terminal-line { margin-bottom: 0.5rem; }
.hp26-terminal-input-wrap {
    display: flex;
    align-items: center;
}
.hp26-terminal-input-wrap::before {
    content: 'admin@okrock:~$ ';
    margin-right: 0.5rem;
}
.hp26-terminal-input {
    background: transparent;
    border: none;
    color: #0f0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    flex-grow: 1;
    outline: none;
    text-shadow: 0 0 5px #0f0;
}
/* CRT Scanline effect */
.hp26-terminal-overlay::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* ── 82. Magnetic Button Transitions ──────────────────────────── */
.hp26-magnetic {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ── 83. 3D Card Perspective ──────────────────────────────────── */
.albums-grid-modern {
    perspective: 1000px;
}
.album-card-modern {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.1s linear, box-shadow 0.3s ease;
}
/* When actively hovering, drop the hover transition and let JS handle transform */
.album-card-modern.is-3d-hovered {
    transition: box-shadow 0.3s ease !important; 
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v11 — Wave 7 (Gamification & Scroll Tracing)
   ═══════════════════════════════════════════════════════════════ */

/* ── 84. Scroll-Driven SVG Thread ─────────────────────────────── */
.hp26-scroll-thread {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.hp26-scroll-thread path {
    stroke: color-mix(in srgb, var(--color-primary) 40%, transparent);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: hp26-draw-thread linear;
    animation-timeline: scroll();
    will-change: stroke-dashoffset;
}
@keyframes hp26-draw-thread {
    to { stroke-dashoffset: 0; }
}

/* ── 85. Contextual Spotlight ─────────────────────────────────── */
.hp26-global-spotlight {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    pointer-events: none; z-index: 9999;
    background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.08), transparent 80%);
    mix-blend-mode: overlay;
}

/* ── 86. Cyberpunk Theme Override ─────────────────────────────── */
body.theme-cyberpunk {
    --hp26-glow-color: rgba(0, 255, 255, 0.15) !important;
    background-color: #050510 !important;
}
body.theme-cyberpunk .hp26-cursor-dot { background: #ff00ff !important; }
body.theme-cyberpunk .hp26-cursor-ring { border-color: rgba(0,255,255,0.8) !important; }
body.theme-cyberpunk .section-header-modern .block-title {
    text-shadow: 2px 2px 0px #ff00ff, -2px -2px 0px #00ffff !important;
    color: var(--text-primary) !important;
}
body.theme-cyberpunk .hp-era-pill.hp-era-pill--active {
    background: #00ffff !important;
    color: #000 !important;
    box-shadow: 0 0 15px #00ffff !important;
}
body.theme-cyberpunk .hp26-scroll-thread path { stroke: #00ffff !important; }

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v12 — Wave 8 (Extreme Physics & Data-Driven UI)
   ═══════════════════════════════════════════════════════════════ */

/* ── 87. Infinite Mirror Depth ────────────────────────────────── */
.hp26-mirror-text-wrap {
    perspective: 800px;
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
}
.hp26-mirror-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.5s var(--hp26-spring), opacity 0.5s ease;
    will-change: transform;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.hp26-mirror-text-wrap:hover .hp26-mirror-layer {
    opacity: 1;
}
.hp26-mirror-text-wrap:hover .hp26-mirror-layer:nth-child(1) { transform: translateZ(-30px) scale(0.95); opacity: 0.8; }
.hp26-mirror-text-wrap:hover .hp26-mirror-layer:nth-child(2) { transform: translateZ(-60px) scale(0.9); opacity: 0.6; }
.hp26-mirror-text-wrap:hover .hp26-mirror-layer:nth-child(3) { transform: translateZ(-90px) scale(0.85); opacity: 0.4; }
.hp26-mirror-text-wrap:hover .hp26-mirror-layer:nth-child(4) { transform: translateZ(-120px) scale(0.8); opacity: 0.2; }

/* ── 88. Fluid Mouse Ripples ──────────────────────────────────── */
.hp26-fluid-ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 55;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%);
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%) scale(0);
    animation: hp26-ripple-anim 0.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    will-change: transform, opacity;
}
@keyframes hp26-ripple-anim {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ── 89. Biometric Pulse Orb ──────────────────────────────────── */
.hp26-biometric-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-primary, var(--color-primary));
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
    box-shadow: 0 0 10px var(--color-primary, var(--color-primary));
    animation: hp26-heartbeat 1s infinite;
}
@keyframes hp26-heartbeat {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px var(--color-primary, var(--color-primary)); }
    15% { transform: scale(1.4); opacity: 0.8; box-shadow: 0 0 20px var(--color-primary, var(--color-primary)); }
    30% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px var(--color-primary, var(--color-primary)); }
    45% { transform: scale(1.2); opacity: 0.9; box-shadow: 0 0 15px var(--color-primary, var(--color-primary)); }
    60% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px var(--color-primary, var(--color-primary)); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v13 — Wave 9 (Chrono-Context & Cinematic Unfolding)
   ═══════════════════════════════════════════════════════════════ */

/* ── 90. Time-of-Day Themes ───────────────────────────────────── */
body.theme-night {
    --hp26-glow-color: rgba(139, 92, 246, 0.4); /* Deep purple */
}
body.theme-day {
    --hp26-glow-color: rgba(6, 182, 212, 0.4); /* Cyan/Amber */
}

/* ── 91. Ghost Cursor Trail ───────────────────────────────────── */
.hp26-cursor-ghost {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hp26-glow-color, var(--color-primary, var(--color-primary)));
    pointer-events: none;
    z-index: 55;
    will-change: transform, opacity;
    opacity: 0.8;
}

/* ── 92. 3D Origami Reveal ────────────────────────────────────── */
.hp26-origami-fold {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg) translateY(50px);
    transform-origin: top center;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}
.hp26-origami-fold.is-unfolded {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateY(0);
}


/* --- 66. 3D Tilt for Album Cards --- */
.album-card-modern {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.album-card-modern .album-cover-wrapper {
    transform: translateZ(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.album-card-modern:hover .album-cover-wrapper {
    transform: translateZ(40px) scale(1.05);
}
.album-card-modern .album-info-overlay {
    transform: translateZ(30px);
}
.album-card-modern:hover {
    transform: scale(1.02) rotateX(2deg) rotateY(2deg);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent);
}


/* --- 67. Animated Mesh Gradient Background --- */
.hp26-mesh-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(at 0% 0%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(0, 0, 0, 0) 0px, transparent 50%),
                radial-gradient(at 100% 100%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0px, transparent 50%);
    filter: blur(100px);
    z-index: -1;
    opacity: 0.6;
    animation: hp26-mesh-breath 15s ease-in-out infinite alternate;
}
@keyframes hp26-mesh-breath {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* =====================================================================
   HP-2026-2027 UI/UX OVERHAUL
   Cutting edge glassmorphism, bento grid hover micro-interactions
===================================================================== */
.hp26-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 24px;
    margin-bottom: 60px;
    width: 100%;
}

@media (max-width: 1024px) {
    .hp26-bento-grid { grid-template-columns: repeat(8, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .hp26-bento-grid { display: flex; flex-direction: column; gap: 20px; }
}

.hp26-bento-card {
    background: var(--hp26-glass-bg, rgba(20, 20, 25, 0.5));
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255,255,255,0.02);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
    position: relative;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.hp26-bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    pointer-events: none;
    border-radius: inherit;
}

.hp26-bento-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--color-primary) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    z-index: 10;
}

/* Bento stats card: override the .stats-section CLS reservation that forces min-height: 300px */
.hp26-bento-stats.stats-section {
    min-height: auto !important;
    background: var(--hp26-glass-bg, rgba(20, 20, 25, 0.5)) !important;
    padding: 24px !important;
}

/* Albums and news cards contain inner grids — allow overflow for hover effects */
.hp26-bento-albums,
.hp26-bento-news {
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 1rem 0 0;
}
.hp26-bento-albums:hover,
.hp26-bento-news:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Specific Card Placements — explicit positions eliminate auto-placement gaps */
.hp26-bento-spotlight {
    grid-column: 1 / span 8;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    /* Album cover set as background-image by JS — ensure it covers correctly */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Dark overlay to keep text readable over album cover backgrounds */
.hp26-bento-spotlight::before {
    background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 100%) !important;
    z-index: 0;
}
.hp26-bento-spotlight > * {
    position: relative;
    z-index: 1;
}
/* Vinyl spin activates on spotlight bento card hover (same as .track-spotlight-card) */
.hp26-bento-spotlight:hover .track-spotlight-vinyl {
    animation-play-state: running;
}
.hp26-bento-stats     { grid-column: 9 / span 4; grid-row: 1 / 2;      justify-content: center; align-items: center; }
.hp26-bento-video     { grid-column: 9 / span 4; grid-row: 2 / 3;      padding: 0; }
.hp26-bento-albums    { grid-column: 1 / -1;     grid-row: 3 / span 2; }
.hp26-bento-news      { grid-column: 1 / -1;     grid-row: 5 / span 2; }

@media (max-width: 1024px) {
    /* 8-column grid at tablet */
    .hp26-bento-spotlight { grid-column: 1 / -1;     grid-row: 1 / span 2; }
    .hp26-bento-stats     { grid-column: 1 / span 4; grid-row: 3 / 4; }
    .hp26-bento-video     { grid-column: 5 / span 4; grid-row: 3 / 4; }
    .hp26-bento-albums    { grid-column: 1 / -1;     grid-row: 4 / span 2; }
    .hp26-bento-news      { grid-column: 1 / -1;     grid-row: 6 / span 2; }
}

@media (max-width: 768px) {
    .hp26-bento-spotlight { flex-direction: column; text-align: center; grid-column: unset; grid-row: unset; }
    .hp26-bento-stats     { grid-column: unset; grid-row: unset; }
    .hp26-bento-video     { grid-column: unset; grid-row: unset; }
    .hp26-bento-albums    { grid-column: unset; grid-row: unset; }
    .hp26-bento-news      { grid-column: unset; grid-row: unset; }
}

.glass-panel {
    background: rgba(15, 15, 15, 0.4);
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.hp26-scroll-journey {
    height: 150vh;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-primary) 5%, transparent) 50%, transparent);
}

.hp26-sj-vinyl { width: 200px; height: 200px; }
.hp26-sj-text { font-size: clamp(1.5rem, 4vw, 3rem); text-shadow: 0 4px 15px color-mix(in srgb, var(--color-primary) 60%, transparent), 0 0 10px rgba(0,0,0,0.8); }

/* Fix missing images in gallery / bento cards */
.hp26-bento-video {
    position: relative;
}
.hp26-bento-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}

/* End HP-2026-2027 UI/UX Overhaul */


/* --- 68. Scroll-Driven Bento Animations --- */
@keyframes hp26-bento-reveal {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.95) rotateX(5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@supports (animation-timeline: view()) {
    .hp26-bento-card {
        animation: hp26-bento-reveal linear forwards;
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
    }
}

/* Fallback for browsers without animation-timeline support (Intersection Observer will add .is-revealed class) */
@supports not (animation-timeline: view()) {
    .hp26-bento-card {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hp26-bento-card.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v11 — Final Color Audit: Pink Elimination Pass 2
   ═══════════════════════════════════════════════════════════════ */

/* ── 94. Section title holo-gradient — pink midpoint → warm red ── */
/* Section 54 of this file sets background gradient with #ffaaaa (pink)
   mid-stop on all .section-header-modern .block-title and
   .block-title.section-title elements. Replace with on-brand red. */
.section-header-modern .block-title,
.block-title.section-title {
    background: linear-gradient(135deg, #ffffff 0%, #ff6060 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hp26-holo-text 5s linear infinite;
}

/* ── 95. Timeline album-name links — red not pink ───────────────── */
/* The client-side linkAlbums() function in the timeline <script> block
   injects style="color:#ff6b9d" on album links inside .hp-tl-title.
   !important overrides the inline style attribute. */
.hp-tl-title a {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
    text-underline-offset: 2px;
}
.hp-tl-title a:hover {
    color: #ef4444 !important;
}

/* ── 96. Memorial primary link — explicit white text ────────────── */
/* .homepage .memorial-modern .memorial-link sets color:oklch(0.9 0.1 350)
   — a very-light pinkish-white. The primary link has no color override,
   so it inherits this tinted value. Force pure white for the CTA. */
.homepage .memorial-modern .memorial-link-primary {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ── 97. Hero title shimmer — pink highlight band → warm red ─────── */
/* Section 38 sets .hero-title-impact shimmer with #ffaaaa (pink) at 50%.
   Override with on-brand warm red for the highlight sweep. */
.hero-title.hero-title-impact {
    background: linear-gradient(
        105deg,
        #ffffff    0%,
        #ffffff   35%,
        #ff6060   50%,
        #ffffff   65%,
        #ffffff  100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hp26-hero-shimmer 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .section-header-modern .block-title,
    .block-title.section-title { animation: none !important; }
    .hero-title.hero-title-impact { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HP-2026 v12 — Deep Pink Sweep: Memorial + Guestbook Icon
   ═══════════════════════════════════════════════════════════════ */

/* ── 98. Guestbook icon — pink (#ff3366) → brand red ────────────── */
/* modern-fixes.css hardcodes #ff3366/rgba(255,51,102) for the icon
   circle background, border, and the SVG fill/stroke/color. */
.guestbook-teaser-icon {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
.guestbook-teaser-icon svg,
.guestbook-teaser-icon img {
    fill:   var(--color-primary, var(--color-primary)) !important;
    color:  var(--color-primary, var(--color-primary)) !important;
    stroke: var(--color-primary, var(--color-primary)) !important;
}

/* ── 99. Memorial dates — oklch pink → brand red ────────────────── */
/* modern-fixes.css 2391: .memorial-dates { color: oklch(0.78 0.18 350) }
   oklch H=350 is pinkish-red; brand red is H≈27. Replace with red. */
.homepage .memorial-modern .memorial-dates {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
}

/* ── 100. Memorial divider — oklch pink gradient → brand red ─────── */
/* modern-fixes.css 2408: gradient starts at oklch(0.65 0.18 350) */
.homepage .memorial-modern .memorial-divider {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-primary) 70%, transparent),
        transparent
    ) !important;
}

/* ── 101. Memorial quote left border — oklch pink → brand red ─────── */
/* modern-fixes.css 2418: border-left: 3px solid oklch(0.55 0.15 350) */
.homepage .memorial-modern .memorial-quote-text {
    border-left-color: color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent) !important;
}

/* ── 102. Memorial date-counter value — oklch pink → brand red ────── */
/* modern-fixes.css 2433: .date-counter .counter-value { color: oklch(0.85 0.14 350) }
   The "N days since" counter shows in pinkish color on the memorial. */
.homepage .memorial-modern .date-counter .counter-value {
    color: var(--color-primary, var(--color-primary)) !important;
}

/* ============================================================
   HP-2026 v13 — Comprehensive Pink Sweep: Buttons, Cards, Nav
   modern-fixes.css remaining #ff3366 / #ff6b9d instances
   ============================================================ */

/* 103. Hero CTA primary button — #ff3366 → brand red */
/* modern-fixes.css:346-357 .hero-actions .btn-primary */
.hero-actions .btn-primary {
    background: var(--color-primary, var(--color-primary)) !important;
    border-color: var(--color-primary, var(--color-primary)) !important;
}
.hero-actions .btn-primary:hover {
    background: var(--color-primary-hover, #b91c1c) !important;
    border-color: var(--color-primary-hover, #b91c1c) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

/* 104. Article card left accent border — #ff3366 → brand red */
/* modern-fixes.css:485 .article-card { border-left: 3px solid #ff3366 } */
.article-card {
    border-left-color: var(--color-primary, var(--color-primary)) !important;
}

/* 105. News category badge — pink bg/text → red */
/* modern-fixes.css:1320-1321 .news-category */
.news-category {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    color: #f87171 !important;
}

/* 106. News title link hover — #ff6b9d → #ef4444 */
/* modern-fixes.css:1345 .news-title a:hover */
.news-title a:hover {
    color: #ef4444 !important;
}

/* 107. Article category badge — pink bg/text → red */
/* modern-fixes.css:1438-1439 .article-category */
.article-category {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    color: #f87171 !important;
}

/* 108. Article title link hover — #ff6b9d → #ef4444 */
/* modern-fixes.css:1462 .article-title a:hover */
.article-title a:hover {
    color: #ef4444 !important;
}

/* 109. Read-more links — #ff6b9d / #ff3366 → red */
/* modern-fixes.css:1501-1509 .read-more */
.read-more {
    color: #f87171 !important;
}
.read-more:hover {
    color: #ef4444 !important;
}

/* 110. Timeline section top divider — rgba(255,51,102) → rgba(220,38,38) */
/* modern-fixes.css:2552-2565 .homepage .timeline-section::before */
.homepage .timeline-section::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 30%,
        color-mix(in srgb, var(--color-primary) 35%, transparent) 50%,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 70%,
        transparent) !important;
}

/* 111. Memorial section top rule — pink accent line → warm red */
/* modern-fixes.css:2568-2581 .homepage .memorial-section::after */
.homepage .memorial-section.memorial-modern::after {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 30%,
        color-mix(in srgb, var(--color-primary) 35%, transparent) 50%,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 70%,
        transparent) !important;
}

/* 112. Album card hover top-accent line — pink midstop → red */
/* modern-fixes.css:2832 gradient(var(--color-primary, var(--color-primary)), #ff6b9d, var(--color-primary, var(--color-primary))) — remove pink midstop */
.homepage .album-card-modern::before {
    background: linear-gradient(90deg, var(--color-primary, var(--color-primary)), #ef4444, var(--color-primary, var(--color-primary))) !important;
}

/* 113. Mobile nav link hover — pink bg/text → red */
/* modern-fixes.css:577-581 .nav-links-minimal a:hover, .nav-link:hover */
.nav-links-minimal a:hover,
.nav-link:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    color: #f87171 !important;
}

/* ============================================================
   HP-2026 v14 — Layout Safety, Interaction & Color Fixes
   ============================================================ */

/* 114. [Removed] Hue-shift no-op keyframes — hp26-hue-shift animation and all
        its keyframes were fully removed in v26 (section 71 cleanup). */

/* 115. Float nav + ambient sound toggle — both fixed at bottom:24px which
        overlaps the 85px music player bar at viewport bottom.
        Move above the player: 85px bar + 12px clearance = 97px → 100px. */
.hp26-float-nav {
    bottom: 100px !important;
}
.hp26-ambient-toggle {
    bottom: 100px !important;
}

/* 116. Dynamic Island — fixed at top:24px overlaps the ~60px site header.
        Push below the header so it doesn't mask navigation links. */
.hp26-dynamic-island {
    top: 70px !important;
}

/* 117. Homepage — needs position:relative so hp26-aurora-dividers
        (position:absolute children) position relative to <main>, not viewport. */
.homepage {
    position: relative;
}

/* 118. Archive card — needs position:relative for .hp-new-badge (absolute child) */
.archive-card {
    position: relative;
}

/* 119. Active news tab — add red border so selected state is clearly branded */
/* Inline style="border:1px solid rgba(255,255,255,.15)" needs !important override */
.hp-news-tab.hp-news-tab--active {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

/* 120. Marquee strip — solid #0a0a0a creates a harsh black band; replace with
        semi-transparent glass to blend with the dark page background. */
.hp26-marquee-container {
    background: rgba(5, 5, 8, 0.75) !important;
    backdrop-filter:  !important;
    -webkit-backdrop-filter:  !important;
}

/* 121. Section top-separators — unify all four section ::before pseudo-elements.
        Section 33 sets them with specificity 0,1,0; adding .homepage prefix
        raises to 0,2,0 so these definitively win over any prior rules. */
.homepage .guestbook-teaser-section::before,
.homepage .quote-rotator-section::before,
.homepage .memorial-section::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 30%,
        color-mix(in srgb, var(--color-primary) 38%, transparent) 50%,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 70%,
        transparent) !important;
}

/* 122. Archive card link hover — align with brand red hover convention */
.archive-card:hover .archive-card-link {
    color: #ef4444 !important;
}

/* 123. Bento stats card text labels — handled by .hp26-stat-label class (v24) */

/* ============================================================
   HP-2026 v15 — Memorial Pink, Bento Hover, OTD, Consistency
   ============================================================ */

/* 124. Memorial link base state — modern-fixes.css:2452-2463 injects pink:
        color:oklch(0.9 0.1 350), bg:rgba(255,85,136,.12), border:rgba(255,85,136,.25)
        Override all three with brand-red equivalents. */
.homepage .memorial-modern .memorial-link {
    color: var(--text-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

/* 125. Spotlight bento card — disable translateY lift on hover.
        The card spans grid rows 1-2; a translateY(-8px) upward shift clips into
        the header area and overlaps the stats/video cards in adjacent columns.
        Keep the visual response via border glow instead. */
.hp26-bento-spotlight:hover {
    transform: none !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent),
                0 8px 40px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

/* 126. On-This-Day event type badge — align with brand palette.
        hp-2026.js injects .on-this-day-event-type with no specific color rules;
        it inherits whatever the browser defaults to. */
.on-this-day-event-type {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    color: #f87171 !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

/* 127. On-This-Day "exact day" marker — ensure the pulse ring is brand red */
.on-this-day-exact .on-this-day-dot,
.on-this-day-dot--exact {
    background: var(--color-primary, var(--color-primary)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

/* 128. Hero stat counters — ensure gradient text doesn't bleed into non-stat text */
.hp26-hero-stat .hp26-hero-stat__value {
    -webkit-text-fill-color: initial;
    background: none;
}

/* 129. Scrollytelling captions — ensure readable contrast over dark backgrounds */
.hp26-scroll-caption {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

/* 130. Album coverflow cards — JS sets --cf-ry/--cf-s/--cf-tz but no CSS reads them.
        Ensure the perspective container is set so any future use works correctly. */
.hp26-albums-coverflow {
    perspective: 1200px;
    perspective-origin: center center;
}

/* 131. Gallery preview hover caption — ensure text is readable */
.gallery-preview-item:hover .gallery-caption,
.gallery-item:hover .gallery-item-caption {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
    color: var(--text-primary) !important;
}

/* 132. Guestbook teaser entry hover — pink glow from inline styles → red */
.guestbook-entry:hover,
.guestbook-quote-node:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

/* 133. Quote rotator active dot — replace any pink with brand red */
.quote-dot.active,
.hp26-quote-dot--active {
    background: var(--color-primary, var(--color-primary)) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}

/* 134. Stats section counter numbers — unify with bento stats style */
.live-stat-card .stat-number,
.live-stat-card .hp26-stat-value {
    background: linear-gradient(135deg, #fff 0%, #f87171 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 135. Float-nav active indicator dot — brand red, not default browser color */
.hp26-float-nav-item.active::after,
.hp26-float-nav-item--active::after {
    background: var(--color-primary, var(--color-primary)) !important;
}

/* 136. Section headings — ensure consistent left accent color is brand red */
.hp26-section-heading::before,
.hp26-section-title::before {
    background: var(--color-primary, var(--color-primary)) !important;
}

/* 137. Video bento card play button — unify hover state color */
.hp26-bento-video:hover .hp26-video-play-btn {
    background: color-mix(in srgb, var(--color-primary) 90%, transparent) !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* ============================================================
   HP-2026 v16 — Pseudo-element conflict fixes, visual polish
   ============================================================ */

/* 138. Memorial section ::after — revert fix 111's gradient background.
        ::after on memorial is used by section 56 for the breathing glow
        (box-shadow animation). Fix 111 incorrectly added a gradient
        background to this same element, creating a colored halo frame
        that extends 20px beyond the section (due to inset:-20px).
        Clear the background — glow is driven by box-shadow, not bg. */
.homepage .memorial-section.memorial-modern::after {
    background: transparent !important;
}

/* 139. Memorial section ::after — constrain inset to prevent bleeding.
        Section 56 sets inset:-20px so the glow bleeds into adjacent
        sections. Constrain to inset:0 and use a larger blur for the glow. */
.homepage .memorial-section::after {
    inset: 0 !important;
    border-radius: 0 !important;
}

/* 140. Bento video card — re-null ::before dark overlay.
        Section v9 fix 84 removed it with content:none !important, but the
        UI/UX overhaul block (section 53, line 2553) re-added it at lower
        cascade position. That section wins (later in file) and re-creates
        the double-overlay. Null it again here (last rule wins). */
.hp26-bento-video::before {
    content: none !important;
    display: none !important;
}

/* 141. Album card CSS hover — guard against conflict with JS 3D tilt.
        Section 66 adds transform:scale(1.02) rotateX(2deg) rotateY(2deg)
        on .album-card-modern:hover. When the JS tilt system is active
        (.hp26-tilting class), the CSS hover and JS-driven transform fight,
        causing jitter. Suppress the CSS hover when JS tilt is engaged. */
.album-card-modern.hp26-tilting:hover {
    transform: none !important;
}
/* Also suppress section-66 hover on the album-card-modern for non-tilting
   state, since section 7/83 already handle the full 3D tilt via JS. */
.album-card-modern:hover:not(.hp26-tilting) {
    transform: scale(1.03) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

/* 142. Quote blockquote text-shadow — replace 12-layer 3D extrusion.
        Section 54 applies a massive shadow stack that creates a dated
        PowerPoint "3D text" look inconsistent with the clean glass aesthetic.
        Replace with a single elegant atmospheric shadow. */
.quote-rotator-section blockquote p {
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.5),
        0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.quote-rotator-section:hover blockquote p {
    text-shadow:
        0 4px 30px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 143. Section 56 breathing glow — add overflow:hidden to memorial section
        so any remaining pseudo-element extension is clipped at the boundary. */
.homepage .memorial-section {
    overflow: hidden;
}

/* 144. Bento video card content z-index — ensure content is always above
        the background image and any surviving overlay layers. */
.hp26-bento-video > div:last-child {
    position: relative;
    z-index: 2;
}

/* 145. Archive card thumb placeholder — consistent background fill */
.archive-card-thumb-placeholder {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: rgba(255, 255, 255, 0.2);
}

/* 146. OTD years-ago badge — consistent glass styling */
.otd-years-ago-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: #f87171;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

/* 147. View-all links — add spring hover transition for consistency */
.homepage .view-all {
    transition: color 0.25s ease, letter-spacing 0.25s ease !important;
}
.homepage .view-all:hover {
    letter-spacing: 0.02em !important;
}

/* 148. Block header — consistent vertical alignment when mixing title + badge + view-all */
.block-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* 149. Albums count badge — visual consistency with news tab pills */
.albums-count-badge {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: #f87171;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.04em;
}

/* 150. Reduced motion — v16 additions */
@media (prefers-reduced-motion: reduce) {
    .homepage .memorial-section::after { animation: none !important; }
    .memorial-section::after { animation: none !important; }
    .quote-rotator-section blockquote p { transition: none !important; }
    .homepage .view-all { transition: none !important; }
}


/* OVERFLOW FIX */


/* ── 2026-2027 UNIFIED NEO-GLASSMORPHISM OVERHAUL ─────────────── */
.hp-news-card, .hp-tl-content, .stat-card, .hp-guestbook-flyout, .hp-quote-card, .related-card {
    background: var(--hp26-glass-bg, rgba(255, 255, 255, 0.04)) !important;
    backdrop-filter:  saturate(1.2) !important;
    -webkit-backdrop-filter:  saturate(1.2) !important;
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.4s var(--hp26-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.4s ease !important;
    overflow: hidden !important;
}
.hp-news-card:hover, .hp-tl-content:hover, .stat-card:hover, .related-card:hover {
    transform: translateY(-6px) translateZ(10px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}
/* Fix overlapping z-indexes from old additive code */
.site-header { z-index: 1000 !important; }
.hero-section { z-index: 1 !important; }
.hp-facts-ticker { z-index: 10 !important; }
.albums-grid-modern { z-index: 10 !important; }
.home-live-stats { z-index: 10 !important; }
.hp-timeline-immersive { z-index: 10 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   HP-2026 v17 — Section separators, bento hover, pink elimination
   ───────────────────────────────────────────────────────────────────────── */

/* 151. Section separator ::before — replace pink rgba(255,51,102) with brand red */
.homepage .on-this-day-section::before,
.homepage .featured-content::before,
.homepage .stats-section::before,
.homepage .timeline-section::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 30%,
        color-mix(in srgb, var(--color-primary) 35%, transparent) 50%,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 70%,
        transparent) !important;
}

/* 152. Memorial section ::after top separator — replace pink midpoint with brand red */
.homepage .memorial-section.memorial-modern::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 200, 120, 0.2) 30%,
        color-mix(in srgb, var(--color-primary) 25%, transparent) 50%,
        rgba(255, 200, 120, 0.2) 70%,
        transparent) !important;
    inset: 0 !important;
}

/* 153. Bento stats + video hover — suppress lift, keep only border glow */
.hp26-bento-stats:hover,
.hp26-bento-video:hover {
    transform: none !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent),
                0 8px 32px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
    z-index: auto !important;
}

/* 154. Preemptive: news-item-modern ::before gradient — replace pink endpoint */
.homepage .news-item-modern::before {
    background: linear-gradient(180deg, var(--color-primary, var(--color-primary)), color-mix(in srgb, var(--color-primary) 40%, transparent)) !important;
}

/* 155. Reduced motion — v17 additions */
@media (prefers-reduced-motion: reduce) {
    .hp26-bento-card { transition: none !important; }
    .hp26-bento-stats, .hp26-bento-video { transition: none !important; }
}

/* ── 2026-2027 TRUE NEO-GLASSMORPHISM OVERHAUL ─────────────── */
.archive-card,
.hp-tl-item,
.guestbook-teaser-inner,
.guestbook-teaser-entry {
    background: var(--hp26-glass-bg, rgba(255, 255, 255, 0.04)) !important;
    backdrop-filter:  saturate(1.2) !important;
    -webkit-backdrop-filter:  saturate(1.2) !important;
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.4s var(--hp26-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.4s ease !important;
    overflow: hidden !important;
}

.archive-card:hover,
.hp-tl-item:hover,
.guestbook-teaser-entry:hover {
    transform: translateY(-6px) translateZ(10px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
    z-index: 10 !important;
}

.memorial-section,
.quote-rotator-section {
    border-top: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.05)) !important;
    border-bottom: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.05)) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   HP-2026 v18 — Vinyl glitch, 3D clipping, dead selectors, consistency
   ───────────────────────────────────────────────────────────────────────── */

/* 156. Homepage — positioned context for aurora dividers */
.homepage {
    position: relative;
}

/* 157. Scroll journey vinyl — center the ::before hole (no top/left in inline style) */
.hp26-sj-vinyl::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 158. Scroll journey groove rings — center all absolutely positioned child divs */
.hp26-sj-vinyl > div {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 159. Scroll journey vinyl — compositor layer prevents animation stutter */
.hp26-sj-vinyl {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 160. Scroll journey height — more room for the vinyl to travel (200vh beats 100vh inline) */
.hp26-scroll-journey {
    height: 200vh !important;
}

/* 161. Memorial section — remove overflow:hidden that flattens 3D photo-frame perspective tilt */
.homepage .memorial-section {
    overflow: visible !important;
}

/* 162. Track spotlight bento hover — fix dead .track-spotlight-section selector;
         the bento card uses .hp26-bento-spotlight, not .track-spotlight-section */
.hp26-bento-spotlight:hover .track-spotlight-cover-wrap,
.hp26-bento-spotlight:hover .track-spotlight-cover {
    transform: perspective(600px) rotateY(-8deg) scale(1.03) !important;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8)) !important;
}

/* 163. Quote blockquote hover — replace non-functional translateZ (parent lacks preserve-3d) */
.quote-rotator-section:hover blockquote p {
    transform: scale(1.02) !important;
    transition: transform 0.35s var(--hp26-spring) !important;
}
.quote-rotator-card {
    transform-style: preserve-3d;
}

/* 164. Guestbook entry — restore red left accent border, killed by glassmorphism overhaul */
.homepage .guestbook-teaser-entry {
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 14px 14px 0 !important;
}
.homepage .guestbook-teaser-entry:hover {
    border-left-color: color-mix(in srgb, var(--color-primary) 75%, transparent) !important;
}

/* 165. Gallery lightbox link — fix inline #ff6b9d pink */
.hp-gallery-lb__link {
    color: #f87171 !important;
    text-decoration: underline;
}

/* 166. Memorial & quote sections — remove heavy backdrop-filter from large sections;
         individual cards inside already handle their own glass treatment */
.memorial-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.quote-rotator-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 167. Bento card hover z-index — delay z-index reset to after transition ends */
.hp26-bento-card {
    isolation: isolate;
}

/* 168. Reduced motion — v18 additions */
@media (prefers-reduced-motion: reduce) {
    .hp26-sj-vinyl { animation: none !important; will-change: auto !important; }
    .hp26-bento-spotlight:hover .track-spotlight-cover-wrap { transform: none !important; }
    .quote-rotator-section:hover blockquote p { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   HP-2026 v19 — Pink link overrides, news-tab brand red, UI polish
   ───────────────────────────────────────────────────────────────────────── */

/* 169. Override all #ff6b9d inline-style links injected by linkAlbumNames()
        and any noscript/legacy code. CSS !important beats non-!important inline. */
.homepage a[style*="ff6b9d"] {
    color: #f87171 !important;
}

/* 170. News tabs — brand-red tinted active state, replacing plain glass-white */
.homepage .hp-news-tab {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.homepage .hp-news-tab.hp-news-tab--active,
.homepage .hp-news-tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}
.homepage .hp-news-tab:hover:not([aria-selected="true"]) {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* 171. View-all links — red accent, not default inherited color */
.homepage .view-all {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
    transition: color 0.2s ease !important;
}
.homepage .view-all:hover {
    color: #f87171 !important;
}

/* 172. Marquee separator — brand red diamond */
.hp26-marquee-sep {
    color: var(--hp26-red, var(--color-primary, var(--color-primary))) !important;
    opacity: 0.7;
}

/* 173. Guestbook noscript link — a[style*="ff6b9d"] already covers this;
        belt-and-suspenders: also target by parent context */
.homepage .guestbook-teaser-entries noscript a {
    color: #f87171 !important;
}

/* 174. Gallery photo item hover — consistent lift + red border glow */
.homepage .gallery-photo-item {
    transition: transform 0.3s var(--hp26-spring),
                box-shadow 0.3s ease !important;
    border-radius: 10px;
    overflow: hidden;
}
.homepage .gallery-photo-item:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent),
                0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

/* 175. Block-title consistency — remove any pink accent on section headings */
.homepage .block-title {
    color: #fff !important;
}

/* 176. Track spotlight album link — was inheriting pink; use soft white */
.homepage .track-spotlight-album-link {
    color: rgba(255, 255, 255, 0.7) !important;
}
.homepage .track-spotlight-album-link:hover {
    color: #f87171 !important;
}

/* 177. Reduced motion — v19 additions */
@media (prefers-reduced-motion: reduce) {
    .homepage .hp-news-tab { transition: none !important; }
    .homepage .gallery-photo-item { transition: none !important; }
}

/* ============================================================
   v20 — Active nav pink, memorial glow, timeline view-all,
          view-all-btn, and remaining consolidated pink overrides
   ============================================================ */

/* 178. Nav active link — homepage.css:2836 sets color:#ff3366 !important */
.nav-link.active,
.homepage .nav-link.active {
    color: var(--color-primary, var(--color-primary)) !important;
}
.nav-link.active::after,
.homepage .nav-link.active::after {
    background: var(--color-primary, var(--color-primary)) !important;
}

/* 179. view-all-btn — homepage.css:2864 is fully pink */
.view-all-btn {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
    color: #f87171 !important;
}
.view-all-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border-color: var(--color-primary, var(--color-primary)) !important;
    color: #fff !important;
}

/* 180. Memorial section pink radial ambient glow → deep red */
.memorial-section.memorial-modern::before,
.homepage .memorial-section.memorial-modern::before {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 4%, transparent) 40%,
        transparent 70%
    ) !important;
}

/* 181. Memorial years/dates pink text */
.memorial-modern .memorial-years,
.homepage .memorial-modern .memorial-years,
.memorial-modern .memorial-dates,
.homepage .memorial-modern .memorial-dates {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
    text-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* 182. Timeline view-all — homepage.css:4363 specificity (0,3,0) beat v19 fix 171;
        match its specificity + !important to win */
.homepage .timeline-section .view-all {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
}
.homepage .timeline-section .view-all:hover {
    color: #f87171 !important;
}

/* 183. Reduced motion — v20 additions */
@media (prefers-reduced-motion: reduce) {
    .view-all-btn { transition: none !important; }
}

/* ============================================================
   v21 — UX audit: tab JS conflict, shimmer palette, bento hover,
          timeline dots, gallery prefix, expand-btn, badge clipping
   ============================================================ */

/* 184. Holo-text shimmer — replace #ffaaaa (pinkish) midpoint with
        a warmer red tone that stays on-brand instead of veering pink */
.section-header-modern .block-title,
.block-title.section-title {
    background: linear-gradient(135deg, #ffffff 0%, #fca5a5 50%, #ffffff 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: hp26-holo-text 5s linear infinite !important;
}

/* 185. Bento albums / news — add a faint section-level glow on hover
        so the transparent cards give visual feedback instead of being dead zones */
.hp26-bento-albums:hover,
.hp26-bento-news:hover {
    background: color-mix(in srgb, var(--color-primary) 1.5%, transparent) !important;
    border-radius: 20px !important;
}

/* 186. Bento albums ↔ news visual separator — a thin red hairline between
        the two full-width transparent cards */
.hp26-bento-albums {
    padding-bottom: 1.5rem !important;
}
.hp26-bento-news {
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    padding-top: 1.5rem !important;
}

/* 187. Timeline loading indicator dots — style the 3 pulsing dots so they
        look intentional rather than unstyled HTML elements */
.hp-tl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 0;
    opacity: 0.6;
}
.hp-tl-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 70%, transparent);
    animation: hp26-tl-dot 1.2s ease-in-out infinite;
}
.hp-tl-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.hp-tl-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes hp26-tl-dot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* 188. Gallery section — block-title prefix cleanup.
        Homepage.css assigns numbered labels via ::before to .featured-content
        .block-title; the gallery is in .hp26-content (not .featured-content),
        so it inherits a bare ::before with no content. Ensure it's empty. */
.hp26-content .block-header .block-title::before {
    content: '' !important;
}

/* 189. Timeline expand / collapse button — glass pill styling to match
        era pills and timeline filter pills */
.hp-tl-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: ;
    -webkit-backdrop-filter: ;
    transition: background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s var(--hp26-spring) !important;
}
.hp-tl-expand-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    transform: translateY(-2px) !important;
}
.hp-tl-expand-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 55.00000000000001%, transparent) !important;
}
.hp-tl-expand-icon {
    transition: transform 0.3s ease !important;
}
.hp-tl-expand-btn[aria-expanded="true"] .hp-tl-expand-icon {
    transform: rotate(180deg) !important;
}

/* 190. Archive card new-badge position — the glassmorphism overhaul sets
        overflow:hidden !important which clips absolute-position badges.
        Restore overflow:visible on archive-card while keeping internal
        scroll contained via a clip instead. */
.archive-card {
    overflow: visible !important;
    clip-path: none !important;
}
/* Re-clip only the thumbnail image area, not the whole card */
.archive-card .archive-card-thumb {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

/* 191. News tabs — also clear initial inline styles via :not selector trick.
        After hp-2026.css loads, CSS !important fully controls active/inactive
        appearance regardless of inline styles from HTML or pre-existing JS. */
.homepage .hp-news-tab:not(.hp-news-tab--active):not([aria-selected="true"]) {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 400 !important;
}

/* 192. Section header — limit holo-shimmer to outer titles only.
        The shimmer on inner bento card section headings is too busy;
        keep it only for the top-level showcase super-title. */
.hp26-bento-albums .section-header-modern .block-title,
.hp26-bento-news .section-header-modern .block-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    animation: none !important;
    color: #fff !important;
}

/* 193. Bento spotlight — ensure cover-wrap doesn't shrink on mobile */
@media (max-width: 768px) {
    .hp26-bento-spotlight {
        min-height: 320px !important;
    }
    .track-spotlight-cover-wrap {
        min-width: 120px;
        max-width: 140px;
    }
}

/* 194. Gallery section — consistent container padding (matches other sections) */
.hp26-content > .container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* 195. Era pill filter — disabled/empty state feedback */
.hp-era-pill[aria-pressed="true"][data-era]:not([data-era="all"]) ~ #featured-albums:empty::after,
#featured-albums:empty::after {
    content: attr(data-empty-msg);
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    padding: 3rem 0;
}

/* 196. Timeline filter pills — add gap */
.hp-tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

/* 197. Guestbook btn-guestbook — ensure icon and text align */
.btn-guestbook {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 198. Reduced motion — v21 additions */
@media (prefers-reduced-motion: reduce) {
    .hp-tl-loading-dot { animation: none !important; opacity: 0.6; }
    .hp-tl-expand-btn { transition: none !important; }
    .hp-tl-expand-icon { transition: none !important; }
    .hp26-bento-albums, .hp26-bento-news { transition: none !important; }
}

/* ============================================================
   HP-2026 v22 — JS/SSR parity fixes, badge positioning,
   archive-card body consistency (2026-05-29)
   ============================================================ */

/* 199. Archive-card NEW badge — .hp-new-badge sets position:absolute which
        floats the badge as an overlay at top:10px/right:10px. The --card
        variant is intended to be IN FLOW inside archive-card-body (flex col)
        so it creates natural vertical spacing before the date. */
.hp-new-badge--card {
    position: static !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-start !important;
    margin-bottom: 4px !important;
}

/* 200. Archive-card body — ensure flex-direction:column is not overridden */
.archive-card .archive-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

/* 201. Archive-card link — always visible at bottom of body */
.archive-card .archive-card-link {
    margin-top: auto !important;
    padding-top: 0.5rem !important;
    display: inline-block !important;
    font-size: 0.82rem !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* 202. Archive-card excerpt — clamp to 3 lines, prevent overflow */
.archive-card .archive-card-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.5 !important;
}

/* 203. Archive-card title — one clean clamp */
.archive-card .archive-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 204. Album-card quick-play SVG fill — use currentColor, inherits white */
.album-card-quick-play svg {
    fill: currentColor !important;
    color: #fff !important;
}

/* 205. Archive-card thumb height — use 16/9 aspect, min-height for placeholders */
.archive-card .archive-card-thumb {
    aspect-ratio: 16 / 9 !important;
    min-height: 100px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* 206. hp-art-tip tooltip — ensure brand-red accent border */
.hp-art-tip {
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent) !important;
}

/* 207. Reduced motion — v22 additions */
@media (prefers-reduced-motion: reduce) {
    .archive-card { transition: none !important; }
    .archive-card .archive-card-thumb img { transition: none !important; }
}

/* ============================================================
   HP-2026 v23 — Comprehensive UI/UX consistency pass (2026-05-29)
   Layout parity, tab styling, section spacing, mobile fixes
   ============================================================ */

/* 208. Block-header multi-item layout — title gets flex:1 to push other
        items right; gap replaces ad-hoc margins so spacing is consistent */
.homepage .block-header {
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.homepage .block-header .block-title {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    max-width: 100% !important;
}

/* 209. hp-news-nav — consistent flex layout, no inline margin */
.hp-news-nav {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* 210. News tabs — definitive style block (replaces all earlier partial rules).
        With inline styles removed from HTML, these are the only tab rules needed. */
.hp-news-tab {
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease !important;
    backdrop-filter:  !important;
    -webkit-backdrop-filter:  !important;
}
.hp-news-tab:hover:not(.hp-news-tab--active):not([aria-selected="true"]) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.homepage .hp-news-tab.hp-news-tab--active,
.homepage .hp-news-tab[aria-selected="true"],
.hp-news-tab.hp-news-tab--active,
.hp-news-tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 20%, transparent),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent) inset !important;
}

/* 211. Archive-cards-grid — 2-col tablet breakpoint (was jarring 3→1 jump) */
@media (max-width: 900px) and (min-width: 601px) {
    .archive-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 212. Gallery horizontal scroll — smooth fade-out at edges, hide scrollbar */
.gallery-scroll-modern {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;
}
.gallery-scroll-modern::-webkit-scrollbar { display: none !important; }

/* 213. Bento section title — consistent top margin with sections above it */
.hp26-bento-section > .container > .block-title.section-title {
    margin-top: 0.5rem !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    white-space: normal !important;
}

/* 214. Section spacing — unify vertical padding across all content sections */
.hp26-content,
.guestbook-teaser-section,
.quote-rotator-section,
.timeline-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.hp26-bento-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* 215. On-this-day card — remove harsh border radius jump */
.on-this-day-card {
    border-radius: 16px !important;
}

/* 216. Timeline wrapper min-height during loading */
.hp-tl-wrapper {
    min-height: 200px !important;
}
.hp-tl-loading {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3rem 0 !important;
    min-height: 120px !important;
}

/* 217. hp-tl-pill filter buttons — consistent with era pills */
.hp-tl-pill {
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    letter-spacing: 0.02em !important;
}
.hp-tl-pill:hover:not(.hp-tl-pill--active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.hp-tl-pill.hp-tl-pill--active,
.hp-tl-pill[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* 218. Albums count badge — consistent with view-all link visual weight */
.albums-count-badge {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 2px 9px !important;
    font-weight: 400 !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.03em !important;
    align-self: center !important;
}

/* 219. Quote rotator card — harmonize border-radius with other glass cards */
.quote-rotator-card {
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.08)) !important;
    backdrop-filter:  !important;
    -webkit-backdrop-filter:  !important;
}

/* 220. Guestbook teaser entry left border — use brand red consistently */
.guestbook-teaser-entry {
    border-left-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
}

/* 221. OTD footer links — brand red, consistent with view-all pattern */
.otd-footer-link {
    color: color-mix(in srgb, var(--color-primary) 85%, transparent) !important;
    transition: color 0.2s ease !important;
}
.otd-footer-link:hover {
    color: #f87171 !important;
}

/* 222. Memorial section — ensure photo visible above min-height */
.memorial-photo-frame {
    flex-shrink: 0 !important;
}

/* 223. Block-header on mobile — fix news tab nav stacking */
@media (max-width: 600px) {
    .homepage .block-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .hp-news-nav {
        margin-left: 0 !important;
        order: 3 !important;
    }
    .homepage .block-header .view-all {
        order: 2 !important;
        align-self: flex-end !important;
        margin-top: -28px !important;
    }
}

/* 224. HP top-tracks section — ensure truly invisible when height:0 */
#hp-top-tracks-section[style*="height:0"] {
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important;
}

/* 225. Scroll journey section — ensure clean transition to bento section */
.hp26-scroll-journey {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 226. Reduced motion — v23 additions */
@media (prefers-reduced-motion: reduce) {
    .hp-news-tab { transition: none !important; }
    .hp-tl-pill { transition: none !important; }
    .gallery-scroll-modern { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v24 — Bento card cleanup: replace inline styles with CSS classes
   ═══════════════════════════════════════════════════════════════════════ */

/* 227. Bento stats card — layout via CSS (remove inline style dependency) */
.hp26-bento-stats {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
/* Stat number — gradient applied upstream; ensure size/weight without
   inline color that blocks gradient on legacy renderers */
.hp26-bento-stats .live-stat-number {
    font-size: 3rem !important;
    font-weight: 900 !important;
    margin-bottom: 0.3rem !important;
    line-height: 1 !important;
}
.hp26-stat-label {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.2;
}
.hp26-stat-sep {
    width: 48px;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1px;
    margin: 18px 0;
    flex-shrink: 0;
}

/* 228. Bento video card — layout from CSS, no inline styles in markup */
.hp26-bento-video {
    background-image: url('/images/mainpage/Podolsk1987_s.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}
.hp26-bento-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
    border-radius: inherit;
}
.hp26-bento-video-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
}
.hp26-video-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary, var(--color-primary));
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.hp26-video-title {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hp26-bento-video-content .btn-primary {
    width: fit-content !important;
    align-self: flex-start;
}

/* 229. Track spotlight actions — CSS margin (remove inline attr) */
.track-spotlight-actions {
    margin-top: 15px;
}

/* 230. News bento block-header — stable 3-item alignment */
.hp26-bento-news .block-header {
    align-items: center !important;
}
.hp26-bento-news .block-header .hp-news-nav {
    flex-shrink: 0;
    order: 2;
}
.hp26-bento-news .block-header .view-all {
    order: 3;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .hp26-bento-news .block-header .hp-news-nav {
        order: 10 !important;
        flex-basis: 100% !important;
        margin-top: 2px !important;
        margin-left: 0 !important;
    }
}

/* 231. Gallery skeleton — class replaces inline display:flex */
.hp26-gallery-skeleton {
    display: flex !important;
    gap: 12px !important;
    overflow: hidden !important;
}

/* 232. Archive tab panel — ensure smooth show/hide via JS toggle */
#archive-tab-panel {
    transition: none; /* Instant hide/show, no flicker */
}

/* 233. Reduced motion — v24 additions */
@media (prefers-reduced-motion: reduce) {
    .hp26-bento-video-overlay { transition: none !important; }
    .hp26-video-badge { animation: none !important; }
}

/* ── Added for 2026-2027 Aurora / Mesh Gradients ── */
@supports (animation-timeline: view()) {
  @property --section-tint { syntax: "<color>"; inherits: true; initial-value: color-mix(in srgb, var(--color-primary) 0%, transparent); }
  @keyframes section-glow {
    from { --section-tint: color-mix(in srgb, var(--color-primary) 0%, transparent); }
    to   { --section-tint: color-mix(in srgb, var(--color-primary) 6%, transparent); }
  }
  .homepage section {
    background: radial-gradient(ellipse at 50% 0%, var(--section-tint) 0%, transparent 70%);
    animation: section-glow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v25 — Inline style elimination, semantic fixes, UX polish
   ═══════════════════════════════════════════════════════════════════════ */

/* 234. Album name links in OTD/timeline — class replaces inline style */
.hp-album-link {
    color: #f87171 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.hp-album-link:hover {
    color: #ef4444 !important;
}

/* 235. Vinyl groove rings — CSS radial-gradients replace 5 inline-styled divs */
.hp26-sj-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 68px,  rgba(255,255,255,0.06) 69px,  transparent 70px),
        radial-gradient(circle at center, transparent 88px,  rgba(255,255,255,0.04) 89px,  transparent 90px),
        radial-gradient(circle at center, transparent 108px, rgba(255,255,255,0.06) 109px, transparent 110px),
        radial-gradient(circle at center, transparent 123px, rgba(255,255,255,0.04) 124px, transparent 125px),
        radial-gradient(circle at center, transparent 138px, rgba(255,255,255,0.05) 139px, transparent 140px);
    z-index: 1;
}

/* 236. Top tracks list — skeleton items are <li> now (semantic fix) */
.hp-top-tracks-list .hp26-skel-row {
    list-style: none;
    height: 44px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    animation: hp26-skel-wave 1.4s ease-in-out infinite;
}

/* 237. Guestbook teaser header — title + sub on separate lines on narrow */
.guestbook-teaser-header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px 12px !important;
}
.guestbook-teaser-title {
    flex-basis: 100% !important;
    order: 2 !important;
}
.guestbook-teaser-sub {
    order: 3 !important;
    flex-basis: 100% !important;
    margin: 0 !important;
}
.guestbook-teaser-icon {
    order: 1 !important;
    flex-shrink: 0 !important;
}

/* 238. Bento stats card — add albums + years data display */
.hp26-bento-stats .hp26-stat-group {
    display: contents; /* allow children to be flex items */
}

/* 239. Hero section position — critical CSS already sets these; no inline needed */
/* (inline style removed in EJS — this comment documents the intent) */

/* 240. Guestbook noscript fallback — style without inline */
.guestbook-noscript-note {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}
.guestbook-noscript-note a {
    color: #f87171;
    text-decoration: underline;
}

/* 241. Bento stats — add 2 more stats (albums + active years) */
.hp26-bento-stats {
    padding: 1.5rem !important;
    gap: 0 !important;
}
.hp26-stat-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 1px;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hp26-stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}
.hp26-stat-col-sep {
    background: rgba(255, 255, 255, 0.12);
    width: 1px;
    align-self: stretch;
}
.hp26-stat-col .hp26-stat-mini-num {
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(150deg, #ffffff 0%, #ff6060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}
.hp26-stat-col .hp26-stat-mini-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
}

/* 242. Reduced motion — v25 additions */
@media (prefers-reduced-motion: reduce) {
    .hp-album-link { transition: none !important; }
    .hp26-skel-row { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v26 — Scroll-snap fix, bento hover polish, animation cleanup (2026-05-29)
   ═══════════════════════════════════════════════════════════════════════ */

/* 243. Large bento cards — suppress the 6px translateY lift from the
        modern-fixes.css neo-glassmorphism group. Full-width cards lifting
        causes layout displacement and grid jitter; use border glow only.
        Small cards (stats, video) get a more modest 3px lift. */
.hp26-bento-spotlight:hover,
.hp26-bento-albums:hover,
.hp26-bento-news:hover {
    transform: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}
.hp26-bento-stats:hover,
.hp26-bento-video:hover {
    transform: translateY(-3px) !important;
}

/* 244. Block-header ellipsis removal — block titles should wrap, not truncate.
        The text-overflow:ellipsis from section 208 was cutting off long titles
        on narrow containers. With white-space:normal the overflow rule is moot. */
.homepage .block-header .block-title {
    text-overflow: clip !important;
}

/* 245. Scroll-snap section 62 — ensure reduced-motion users get no snap at all.
        Section 62 has the correct start-align; guard for reduced-motion here
        so the snap doesn't add scroll friction for accessibility users. */
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    html:has(.homepage) { scroll-snap-type: none !important; }
}

/* 246. Reduced motion — v26 additions */
@media (prefers-reduced-motion: reduce) {
    .hp26-bento-card:hover { transform: none !important; }
    .hp26-bento-stats:hover, .hp26-bento-video:hover { transform: none !important; }
}

/* 247. Section-glow exclusion — the scroll-driven section-glow animation sets
        `background` via a CSS animation, which on Chrome 115+ overrides
        higher-specificity author normal declarations (including inline-level).
        The memorial section's dark gradient and the hero section's video bg
        both become transparent when section-glow applies. Disable animation
        for sections with critical own backgrounds. */
@supports (animation-timeline: view()) {
    .homepage .memorial-section,
    .homepage .hero-section,
    .homepage .quote-rotator-section {
        animation: none !important;
        background-image: none;
    }
}

/* 248. Quote dot navigation — cursor:pointer for discoverability.
        The dots are rendered as <button> elements (semantic) but
        the pages.css definition omits cursor styling. */
.quote-dot {
    cursor: pointer !important;
}

/* 249. Archive tab panel — visibility is JS-controlled via inline style="display:none"
        and archivePanel.style.display=''. Do NOT set display:none here via ID selector
        (ID specificity > class specificity, which would break the JS toggle).
        modern-fixes.css's .archive-cards-grid { display: grid } governs when inline
        display is cleared. Only guarantee correct grid columns for the archive panel. */
#archive-tab-panel.archive-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 250. Memorial section — restore background gradient after section-glow exclusion.
        Explicit re-declaration so the section never inherits a transparent bg
        from any cascade source. */
.memorial-section.memorial-modern {
    background: linear-gradient(
        180deg,
        rgba(26, 26, 36, 1) 0%,
        rgba(10, 10, 18, 1) 50%,
        rgba(20, 8, 8, 0.98) 100%
    ) !important;
}

/* 251. Hero section — keep transparent so the video background shows through
        (section-glow animation is now disabled on hero via rule 247). */
.homepage .hero-section {
    background: transparent !important;
}

/* 252. Reduced motion — v27 additions */
@media (prefers-reduced-motion: reduce) {
    .quote-dot { transition: none !important; }
}

/* 253. Albums + News bento cards — restore overflow:visible so album card
        hover effects (tilt, lift) aren't clipped at the card boundary.
        These two cards are transparent layout containers (no bg/border/shadow)
        so overflow:hidden serves no visual purpose here.
        The glassmorphism group in modern-fixes.css sets overflow:hidden !important
        on all .hp26-bento-card — override it for these layout-only cards. */
.hp26-bento-albums,
.hp26-bento-news {
    overflow: visible !important;
}

/* 254. Albums grid — make all grid-column / grid-row dead-code explicit.
        The grid is display:flex (horizontal scroll), so grid-* properties are
        ignored. The .album-card-newest span-2 rule is kept for future grid
        layout but currently has no visual effect. */

/* 255. hp26-bento-albums/news — reset glassmorphism card appearance since
        they're transparent layout wrappers (they have no bg/border/shadow). */
.hp26-bento-albums,
.hp26-bento-news {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 256. Reduced motion — v27 additional */
@media (prefers-reduced-motion: reduce) {
    .hp26-bento-albums, .hp26-bento-news { transition: none !important; }
}

/* 257. Hide nav brand on homepage until scrolled (prevents duplicate display with hero title) */
body:not(.scrolled) .site-header .site-brand {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}
body.scrolled .site-header .site-brand {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease !important;
}


/* UNIFIED GLASSMORPHISM FOR LEGACY SECTIONS */
.hp26-unified-glass { 
    background: var(--hp26-glass-bg, rgba(20, 20, 25, 0.5)) !important; 
    backdrop-filter:  !important; 
    -webkit-backdrop-filter:  !important; 
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.08)) !important; 
    border-radius: 24px !important; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255,255,255,0.02) !important; 
    position: relative; 
    overflow: hidden; 
    padding: 32px !important; 
    margin: 0 auto; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease !important;
}
.hp26-unified-glass::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%); 
    pointer-events: none; 
    border-radius: inherit; 
    z-index: 0; 
}
.hp26-unified-glass > * { 
    position: relative; 
    z-index: 1; 
}
.hp26-unified-glass:hover { 
    transform: translateY(-4px) !important; 
    box-shadow: 0 20px 40px color-mix(in srgb, var(--color-primary) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent) !important; 
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important; 
}

/* ========================================
   CSS Scroll-Driven Animations (2027 standard)
   ======================================== */
@supports (animation-timeline: scroll()) {
    .hp-scroll-progress {
        width: 100% !important; /* Base width */
        transform-origin: left;
        transform: scaleX(0);
        animation: scroll-progress-anim linear;
        animation-timeline: scroll();
    }
    @keyframes scroll-progress-anim {
        0% { transform: scaleX(0); }
        100% { transform: scaleX(1); }
    }

    .hp26-sj-vinyl {
        animation: vinyl-spin-anim linear;
        animation-timeline: view();
        animation-range: entry 0% cover 100%;
    }
    @keyframes vinyl-spin-anim {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(720deg); } /* 2 full spins while in view */
    }
}

/* ========================================
   GPU Optimizations (content-visibility)
   ======================================== */
.timeline-section,
.hp26-bento-section,
.gallery-section,
.memorial-section,
.guestbook-teaser-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Removed content-visibility from hero-section to allow background video to play */
.hero-section {
    /* contain-intrinsic-size removed as well */
}