/*
 * NORYX DESIGN SYSTEM — HOME COMPONENT v1.0
 * Date: 2026-10-07
 *
 * Scope: HOME only.
 * Header/Footer remain independent shell subsystems and are intentionally
 * untouched by this component.
 *
 * Contract:
 * - Preserve the approved Icecrown HOME composition.
 * - Consume Foundation tokens; do not redefine Foundation.
 * - HERO remains full-width above the two-column content grid.
 * - News/Gallery + Status/Discord preserve their approved hierarchy.
 * - Sidebar sticky behavior remains CSS-only.
 * - No visual binder, no geometry JS, no cascade override strategy.
 */

/* ============================================================
   PAGE / ATMOSPHERE
   ============================================================ */
body.home {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    color: var(--nx-text-content);
    font-family: var(--nx-font-body);
    background-color: #020813;
    background-image: url('../../../img/backgrounds/bg-home-noryx.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.home::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(3.8px 3.8px at 10% 20%, rgba(120,245,255,.98), transparent 58%),
        radial-gradient(2.964px 2.964px at 30% 70%, rgba(90,235,255,.95), transparent 58%),
        radial-gradient(3.8px 3.8px at 55% 40%, rgba(120,245,255,.98), transparent 58%),
        radial-gradient(2.736px 2.736px at 75% 80%, rgba(90,235,255,.95), transparent 58%),
        radial-gradient(3.8px 3.8px at 90% 25%, rgba(120,245,255,.98), transparent 58%),
        radial-gradient(2.85px 2.85px at 45% 90%, rgba(90,235,255,.95), transparent 58%),
        radial-gradient(3.8px 3.8px at 65% 10%, rgba(120,245,255,.98), transparent 58%);
    background-size: 900px 700px;
    animation: noryx-home-particles 45s linear infinite;
    opacity: .88;
    pointer-events: none;
    z-index: 2;
}

@keyframes noryx-home-particles {
    from { background-position: 0 0; }
    to { background-position: 900px -700px; }
}

body.home::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.40) 100%);
    pointer-events: none;
    z-index: 0;
}

body.home main {
    position: relative;
    z-index: 2;
}

/* ============================================================
   HOME PANEL
   Independent HOME composition consuming Foundation tokens.
   ============================================================ */
/* ============================================================
   HOME MATRIX
   Structural rendering is owned by Foundation .nx-matrix.
   .noryx-home-panel remains only as a HOME-specific hook.
   ============================================================ */
body.home .noryx-home-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--nx-text-primary);
    font-family: var(--nx-font-display);
    font-weight: 700;
    text-shadow: var(--nx-title-shadow);
}

body.home .noryx-home-section-title > svg {
    color: var(--nx-accent);
}

body.home .noryx-home-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--nx-accent-rgb), .5), transparent);
}

/* ============================================================
   HERO
   ============================================================ */
body.home .noryx-home-layout {
    row-gap: 0;
}

body.home .noryx-home-hero {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    margin-bottom: 0;
}

body.home .noryx-hero-focus {
    position: relative;
    isolation: isolate;
    max-width: 860px;
    margin-inline: auto;
}

body.home .noryx-hero-title {
    line-height: .95;
}

body.home .noryx-hero-title-semantic {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body.home .noryx-hero-title-art {
    display: block;
    width: min(100%, 626px);
    height: auto;
    margin-inline: auto;
}

body.home .noryx-hero-actions {
    margin-top: 16px;
}

body.home .noryx-home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 2rem;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

body.home .noryx-home-cta:hover {
    transform: translateY(-2px) scale(1.02);
}

body.home .noryx-home-cta--primary {
    background: var(--nx-primary-background);
    color: var(--nx-cta-primary-text);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    animation: noryx-home-account-pulse 2.8s ease-in-out infinite;
}

body.home .noryx-home-cta--primary svg {
    color: var(--nx-cta-primary-text);
}

@keyframes noryx-home-account-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -8px 14px rgba(0,0,0,.25),
            0 0 6px rgba(var(--nx-border-outer-rgb), .35);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -8px 14px rgba(0,0,0,.25),
            0 0 18px rgba(var(--nx-border-outer-rgb), .70);
    }
}

body.home .noryx-home-cta--secondary {
    background: rgba(var(--nx-surface-rgb), .70);
    border-color: var(--nx-accent);
    color: var(--nx-text-primary);
    box-shadow:
        inset 0 -8px 14px rgba(var(--nx-interaction-rgb), .40),
        0 0 8px rgba(var(--nx-border-outer-rgb), .25);
    filter: drop-shadow(0 0 8px rgba(59,130,246,.25));
}

body.home .noryx-home-cta--secondary svg {
    color: var(--nx-accent);
}

body.home .noryx-home-cta--secondary:hover {
    box-shadow:
        inset 0 -8px 14px rgba(var(--nx-interaction-rgb), .40),
        0 0 16px rgba(var(--nx-border-outer-rgb), .50);
    filter: drop-shadow(0 0 16px rgba(59,130,246,.50));
}

/* ============================================================
   NEWS
   ============================================================ */
body.home .noryx-home-news-box > div:first-child > a {
    color: var(--nx-accent);
}

body.home .noryx-home-news-box > div:first-child > a:hover {
    color: var(--nx-text-primary);
}

body.home .news-card {
    display: block;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(26,29,36,.90), rgba(10,12,16,.90));
    border: 1px solid var(--nx-border-inner);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, filter .3s ease;
}

body.home .news-card:hover {
    transform: translateY(-6px);
    border-color: var(--nx-accent);
    filter:
        drop-shadow(0 10px 20px rgba(0,0,0,.60))
        drop-shadow(0 0 10px rgba(var(--nx-accent-rgb), .15));
}

body.home .news-card .news-date {
    color: var(--nx-accent);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ============================================================
   GALLERY
   ============================================================ */
/*
 * Gallery album caption = support typography.
 * Explicit hook: content never decides the visual role.
 * Section title "GALERIA" remains display/Cinzel.
 */
body.home .noryx-home-gallery-caption {
    font-family: var(--nx-font-body);
}
body.home .slider-frame {
    padding: 0;
    background: rgba(0,0,0,.45);
    border: 1px solid var(--nx-border-inner);
    transition: transform .3s ease, border-color .3s ease, filter .3s ease;
}

body.home .slider-frame:hover {
    transform: translateY(-6px);
    border-color: var(--nx-accent);
    filter:
        drop-shadow(0 10px 20px rgba(0,0,0,.60))
        drop-shadow(0 0 10px rgba(var(--nx-accent-rgb), .15));
}

body.home .slider-container {
    position: relative;
    overflow: hidden;
}

body.home .slider-track {
    display: flex;
    transition: transform .5s ease-in-out;
}

body.home .slide {
    min-width: 100%;
}

body.home .slide img {
    filter: saturate(1.05) contrast(1.05);
}

body.home .slider-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--nx-accent);
    font-size: 18px;
    background: var(--nx-surface-base);
    border: 1px solid var(--nx-border-inner);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transform: translateY(-50%);
    transition: color .2s ease, border-color .2s ease, filter .2s ease;
}

body.home .slider-nav:hover {
    color: var(--nx-text-primary);
    border-color: var(--nx-accent);
    filter: drop-shadow(0 0 10px rgba(var(--nx-accent-rgb), .35));
}

body.home .slider-nav.prev { left: 10px; }
body.home .slider-nav.next { right: 10px; }

body.home .dot {
    width: 9px;
    height: 9px;
    background: var(--nx-text-muted);
    box-shadow: 0 0 0 1px rgba(0,0,0,.60);
    cursor: pointer;
    transform: rotate(45deg);
    transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

body.home .dot:hover {
    background: #9CA3AF;
}

body.home .dot.active {
    background: var(--nx-accent);
    box-shadow:
        0 0 10px rgba(var(--nx-border-outer-rgb), .80),
        0 0 0 1px rgba(0,0,0,.60);
    transform: rotate(45deg) scale(1.25);
}

/* ============================================================
   STATUS / DISCORD
   ============================================================ */
/*
 * Realm operational information uses the support/body font.
 * Main section title remains display/Cinzel.
 */
body.home .noryx-home-status-widget,
body.home .noryx-home-status-widget :where(
    div,
    span,
    p,
    a,
    button,
    strong,
    small
) {
    font-family: var(--nx-font-body);
}
body.home .noryx-home-status-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

body.home .noryx-home-status-box > .ornate-divider {
    flex: none;
    margin: 0;
}

body.home .noryx-home-status-title {
    color: var(--nx-text-primary);
    font-family: var(--nx-font-display);
    font-weight: 900;
    letter-spacing: .02em;
}

body.home .noryx-home-status-widget,
body.home .discord-widget-container {
    border-color: var(--nx-border-inner);
}

body.home .status-online {
    color: #4ADE80;
    text-shadow: 0 0 8px rgba(74,222,128,.50);
}

body.home .status-offline {
    color: #F87171;
    text-shadow: 0 0 8px rgba(248,113,113,.50);
}

body.home .ornate-divider {
    position: relative;
    height: 12px;
    margin: 24px 0;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--nx-border-outer-rgb), .55), transparent);
}

body.home .ornate-divider::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    color: var(--nx-accent);
    font-size: 8px;
    text-shadow: 0 0 8px rgba(var(--nx-accent-rgb), .35);
    transform: translate(-50%,-50%);
}

body.home .discord-widget-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

body.home .discord-widget-container iframe {
    max-width: 100%;
    height: 340px;
}

/* ============================================================
   OPTIONAL HOME TABS / VIDEO
   Currently parked in markup; kept NORYX-ready if re-enabled.
   ============================================================ */
body.home .tab-btn {
    position: relative;
    padding: .7rem 1.6rem;
    color: var(--nx-text-muted);
    background: var(--nx-surface-control);
    border: 1px solid rgba(255,255,255,.08);
    font-family: var(--nx-font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

body.home .tab-btn:hover {
    color: var(--nx-text-primary);
    border-color: var(--nx-border-inner);
}

body.home .tab-btn.active {
    color: var(--nx-accent);
    background: var(--nx-accent-bg-active);
    border-color: var(--nx-border-outer);
    text-shadow: 0 0 10px rgba(var(--nx-accent-rgb), .30);
}

body.home .tab-panel {
    display: none;
    animation: noryx-home-fade-in .4s ease;
}

body.home .tab-panel.active {
    display: block;
}

@keyframes noryx-home-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

body.home .video-frame {
    padding: 6px;
    background: rgba(0,0,0,.50);
    border: 1px solid var(--nx-border-inner);
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.60));
}

body.home .video-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ============================================================
   LOCAL UTILITIES / RESPONSIVE
   ============================================================ */
body.home .force-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.home .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1024px) {
    body.home .sidebar-sticky {
        position: relative;
        top: 0;
    }
}

@media (max-width: 640px) {
    body.home .noryx-home-hero-title {
        line-height: 1;
    }

    body.home .noryx-hero-actions {
        margin-top: 14px;
    }

    body.home .sidebar-sticky .noryx-home-panel {
        padding: 1rem;
    }

    body.home .sidebar-sticky .noryx-home-status-title {
        font-size: 1.1rem;
    }

    body.home .discord-widget-container iframe {
        display: block;
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    body.home .discord-widget-container iframe {
        height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home::before,
    body.home .noryx-home-cta--primary,
    body.home .tab-panel {
        animation: none;
    }

    body.home .noryx-home-cta,
    body.home .news-card,
    body.home .slider-frame,
    body.home .slider-track,
    body.home .slider-nav,
    body.home .dot,
    body.home .tab-btn {
        transition-duration: .01ms;
    }
}