/* Portal homepage ambience — glow, strokes, drifting light */

.portal-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

body.is-play .portal-fx,
body.is-library .portal-fx,
body.is-settings .portal-fx,
body.is-focus .portal-fx {
    display: none !important;
}

/* Soft mesh glow field */
.portal-fx__mesh {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 42% 36% at 18% 22%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
        radial-gradient(ellipse 38% 32% at 82% 18%, color-mix(in srgb, var(--accent) 16%, #c47a5a 40%), transparent 68%),
        radial-gradient(ellipse 48% 40% at 62% 78%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%),
        radial-gradient(ellipse 30% 28% at 12% 72%, color-mix(in srgb, var(--accent-dark) 14%, transparent), transparent 70%);
    filter: blur(8px);
    opacity: 0.85;
    animation: portalMeshDrift 22s ease-in-out infinite alternate;
}

html[data-scheme="dark"] .portal-fx__mesh {
    opacity: 1;
    filter: blur(12px);
    background:
        radial-gradient(ellipse 44% 38% at 16% 20%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
        radial-gradient(ellipse 40% 34% at 84% 16%, color-mix(in srgb, var(--accent) 22%, #e08a62 35%), transparent 68%),
        radial-gradient(ellipse 50% 42% at 58% 80%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%),
        radial-gradient(ellipse 32% 30% at 10% 70%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}

@keyframes portalMeshDrift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
}

/* Fine stroke grid */
.portal-fx__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 72%);
    opacity: 0.35;
    animation: portalGridShift 28s linear infinite;
}

html[data-scheme="dark"] .portal-fx__grid {
    opacity: 0.45;
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px);
}

@keyframes portalGridShift {
    from { background-position: 0 0; }
    to { background-position: 64px 64px; }
}

/* Drifting orbs */
.portal-fx__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

html[data-scheme="light"] .portal-fx__orb {
    mix-blend-mode: normal;
    opacity: 0.42;
    filter: blur(6px);
}

.portal-fx__orb--a {
    left: 8%;
    top: 12%;
    width: min(42vw, 420px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 70%, #fff), color-mix(in srgb, var(--accent) 25%, transparent) 45%, transparent 70%);
    animation: portalOrbA 16s ease-in-out infinite;
}

.portal-fx__orb--b {
    right: 4%;
    top: 28%;
    width: min(34vw, 340px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 45% 35%, color-mix(in srgb, var(--accent) 45%, #f0b090), color-mix(in srgb, var(--accent) 15%, transparent) 48%, transparent 72%);
    animation: portalOrbB 21s ease-in-out infinite;
}

.portal-fx__orb--c {
    left: 38%;
    bottom: 8%;
    width: min(48vw, 480px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%);
    animation: portalOrbC 19s ease-in-out infinite;
}

.portal-fx__orb--d {
    left: 62%;
    top: 6%;
    width: min(22vw, 220px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 80%, #fff), transparent 65%);
    opacity: 0.55;
    animation: portalOrbD 12s ease-in-out infinite;
}

@keyframes portalOrbA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate3d(6%, 8%, 0) scale(1.12); opacity: 1; }
}

@keyframes portalOrbB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate3d(-8%, 5%, 0) scale(1.08); opacity: 0.9; }
}

@keyframes portalOrbC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
    50% { transform: translate3d(-4%, -6%, 0) scale(1.15); opacity: 0.75; }
}

@keyframes portalOrbD {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0.35; }
    50% { transform: translate3d(-10%, 14%, 0) scale(1.2); opacity: 0.7; }
}

/* Stroke rings */
.portal-fx__ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent) 28%, transparent);
    box-shadow:
        0 0 24px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
    opacity: 0.55;
    animation: portalRingPulse 10s ease-in-out infinite;
}

.portal-fx__ring--a {
    left: -8%;
    top: 42%;
    width: min(36vw, 360px);
    aspect-ratio: 1;
    animation-duration: 14s;
}

.portal-fx__ring--b {
    right: -6%;
    top: -4%;
    width: min(28vw, 280px);
    aspect-ratio: 1;
    border-width: 1px;
    opacity: 0.4;
    animation-duration: 11s;
    animation-delay: -3s;
}

.portal-fx__ring--c {
    left: 55%;
    bottom: -10%;
    width: min(42vw, 420px);
    aspect-ratio: 1;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    opacity: 0.35;
    animation: portalRingSpin 48s linear infinite;
}

@keyframes portalRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.06); opacity: 0.65; }
}

@keyframes portalRingSpin {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1); }
}

/* Diagonal light beams */
.portal-fx__beam {
    position: absolute;
    top: -30%;
    width: 2px;
    height: 160%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 55%, transparent) 35%,
        color-mix(in srgb, var(--accent) 20%, transparent) 55%,
        transparent 85%
    );
    filter: blur(1.5px);
    opacity: 0.35;
    transform-origin: top center;
    animation: portalBeamPulse 7s ease-in-out infinite;
}

.portal-fx__beam--a {
    left: 18%;
    transform: rotate(18deg);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

.portal-fx__beam--b {
    left: 72%;
    width: 1.5px;
    transform: rotate(-14deg);
    animation-delay: -2.5s;
    opacity: 0.28;
}

.portal-fx__beam--c {
    left: 46%;
    width: 1px;
    transform: rotate(8deg);
    animation-delay: -4s;
    opacity: 0.22;
    filter: blur(2px);
}

@keyframes portalBeamPulse {
    0%, 100% { opacity: 0.15; filter: blur(2px); }
    50% { opacity: 0.45; filter: blur(1px); }
}

/* Floating spark dots */
.portal-fx__sparks {
    position: absolute;
    inset: 0;
}

.portal-fx__spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 80%, #fff);
    box-shadow:
        0 0 8px color-mix(in srgb, var(--accent) 70%, transparent),
        0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: portalSpark 6s ease-in-out infinite;
}

.portal-fx__spark:nth-child(1) { left: 12%; top: 24%; animation-delay: 0s; }
.portal-fx__spark:nth-child(2) { left: 28%; top: 58%; width: 3px; height: 3px; animation-delay: -1.2s; animation-duration: 7.5s; }
.portal-fx__spark:nth-child(3) { left: 48%; top: 18%; animation-delay: -2.4s; }
.portal-fx__spark:nth-child(4) { left: 66%; top: 42%; width: 5px; height: 5px; animation-delay: -0.8s; animation-duration: 8s; }
.portal-fx__spark:nth-child(5) { left: 82%; top: 22%; animation-delay: -3.1s; }
.portal-fx__spark:nth-child(6) { left: 74%; top: 68%; width: 3px; height: 3px; animation-delay: -4.2s; animation-duration: 6.8s; }
.portal-fx__spark:nth-child(7) { left: 38%; top: 78%; animation-delay: -1.8s; }
.portal-fx__spark:nth-child(8) { left: 90%; top: 48%; width: 3px; height: 3px; animation-delay: -5s; }

@keyframes portalSpark {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0.2; }
    40% { transform: translate3d(8px, -14px, 0) scale(1.15); opacity: 0.95; }
    70% { transform: translate3d(-6px, -8px, 0) scale(0.9); opacity: 0.45; }
}

/* Horizon glow sweep */
.portal-fx__horizon {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 20%, transparent) 20%,
        color-mix(in srgb, var(--accent) 85%, #fff) 50%,
        color-mix(in srgb, var(--accent) 20%, transparent) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 20px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 48px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: portalHorizon 5.5s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes portalHorizon {
    0%, 100% { opacity: 0.4; transform: scaleX(0.85); filter: blur(0.5px); }
    50% { opacity: 1; transform: scaleX(1.05); filter: blur(0); }
}

/* ========== Homepage UI glow / stroke polish ========== */

body:not(.is-focus):not(.is-play):not(.is-library):not(.is-settings) .top {
    position: relative;
    border-bottom-color: transparent;
}

body:not(.is-focus):not(.is-play):not(.is-library):not(.is-settings) .top::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 15%, transparent) 12%,
        color-mix(in srgb, var(--accent) 75%, transparent) 42%,
        color-mix(in srgb, var(--accent) 90%, #fff) 50%,
        color-mix(in srgb, var(--accent) 75%, transparent) 58%,
        color-mix(in srgb, var(--accent) 15%, transparent) 88%,
        transparent 100%
    );
    background-size: 220% 100%;
    content: "";
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
    animation: portalBorderFlow 7s linear infinite;
    pointer-events: none;
}

@keyframes portalBorderFlow {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

/* Brand period glow */
body:not(.is-focus) .brand-stop {
    text-shadow:
        0 0 12px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 28px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: portalStopGlow 3.6s ease-in-out infinite;
}

@keyframes portalStopGlow {
    0%, 100% {
        text-shadow:
            0 0 10px color-mix(in srgb, var(--accent) 40%, transparent),
            0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    50% {
        text-shadow:
            0 0 16px color-mix(in srgb, var(--accent) 70%, transparent),
            0 0 36px color-mix(in srgb, var(--accent) 40%, transparent),
            0 0 56px color-mix(in srgb, var(--accent) 18%, transparent);
    }
}

body:not(.is-focus) .brand {
    text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 12%, transparent);
}

html[data-scheme="dark"] body:not(.is-focus) .brand {
    text-shadow: 0 0 52px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Search glow frame */
body:not(.is-focus) .home-search-wrap .search {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
        0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);
}

body:not(.is-focus) .home-search-wrap .search:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
        0 0 24px color-mix(in srgb, var(--accent) 14%, transparent);
}

body:not(.is-focus) .home-search-wrap .search:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow:
        inset 0 -2px var(--accent),
        0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
        0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Section kicker accent stroke */
body:not(.is-focus) .section-kicker {
    position: relative;
    display: inline-block;
    padding-left: 14px;
    color: color-mix(in srgb, var(--accent-dark) 55%, var(--mute));
}

body:not(.is-focus) .section-kicker::before {
    position: absolute;
    left: 0;
    top: 0.05em;
    bottom: 0.05em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 40%, transparent),
        var(--accent),
        color-mix(in srgb, var(--accent) 40%, transparent)
    );
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
    content: "";
    animation: portalKickerPulse 2.8s ease-in-out infinite;
}

@keyframes portalKickerPulse {
    0%, 100% { opacity: 0.65; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }
    50% { opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* Toolbar / tags */
body:not(.is-focus) .home-section .toolbar {
    position: relative;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 6%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--paper) 60%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent),
        0 8px 28px color-mix(in srgb, var(--accent) 6%, transparent);
    overflow: hidden;
}

body:not(.is-focus) .home-section .toolbar::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        transparent 20%,
        color-mix(in srgb, var(--accent) 55%, transparent) 48%,
        transparent 72%
    );
    background-size: 220% 100%;
    content: "";
    pointer-events: none;
    opacity: 0.55;
    animation: portalBorderFlow 8s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

body:not(.is-focus) .tag.is-on {
    color: var(--accent-dark);
    background: color-mix(in srgb, var(--accent-soft) 75%, var(--paper));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
        0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-scheme="dark"] body:not(.is-focus) .tag.is-on {
    color: color-mix(in srgb, var(--accent) 70%, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
        0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Buttons */
body:not(.is-focus) .top-actions .btn:not(.btn-fill):hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--ink));
    box-shadow:
        0 6px 16px rgba(23, 26, 32, 0.08),
        0 0 20px color-mix(in srgb, var(--accent) 16%, transparent);
}

body:not(.is-focus) .btn-fill {
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent),
        0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

body:not(.is-focus) .btn-fill:hover {
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--accent) 36%, transparent),
        0 0 32px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Cards — glowing stroke frame + hover bloom */
body:not(.is-focus):not(.is-library) .home-section .card {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
    background:
        linear-gradient(var(--paper), var(--paper)) padding-box,
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 8%, transparent),
            transparent 40%,
            color-mix(in srgb, var(--accent) 14%, transparent)
        ) border-box;
}

body:not(.is-focus):not(.is-library) .home-section .card::before {
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--portal-card-angle, 0deg),
        transparent 0%,
        color-mix(in srgb, var(--accent) 15%, transparent) 18%,
        color-mix(in srgb, var(--accent) 75%, #fff) 28%,
        color-mix(in srgb, var(--accent) 15%, transparent) 38%,
        transparent 55%,
        transparent 100%
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: portalCardAngle 4s linear infinite;
    animation-play-state: paused;
}

@property --portal-card-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes portalCardAngle {
    to { --portal-card-angle: 360deg; }
}

body:not(.is-focus):not(.is-library) .home-section .card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
    box-shadow:
        0 18px 34px rgba(23, 26, 32, 0.1),
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
        0 0 32px color-mix(in srgb, var(--accent) 18%, transparent),
        0 0 64px color-mix(in srgb, var(--accent) 8%, transparent);
}

body:not(.is-focus):not(.is-library) .home-section .card:hover::before {
    opacity: 1;
    animation-play-state: running;
}

body:not(.is-focus):not(.is-library) .home-section .card > * {
    position: relative;
    z-index: 1;
}

body:not(.is-focus):not(.is-library) .home-section .card:hover .card-go {
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

body:not(.is-focus):not(.is-library) .home-section .card:hover .card-art {
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Empty state glow mark */
body:not(.is-focus) .empty-mark {
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Top accent bar — pulse */
body:not(.is-play):not(.is-focus)::before {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 28px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: portalTopBar 4.5s ease-in-out infinite;
}

@keyframes portalTopBar {
    0%, 100% {
        box-shadow:
            0 0 10px color-mix(in srgb, var(--accent) 40%, transparent),
            0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    50% {
        box-shadow:
            0 0 16px color-mix(in srgb, var(--accent) 70%, transparent),
            0 0 36px color-mix(in srgb, var(--accent) 35%, transparent);
    }
}

/* Focus toggle track glow when available on home */
body:not(.is-focus) .focus-toggle-track {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .portal-fx__mesh,
    .portal-fx__grid,
    .portal-fx__orb,
    .portal-fx__ring,
    .portal-fx__beam,
    .portal-fx__spark,
    .portal-fx__horizon,
    body:not(.is-focus):not(.is-play):not(.is-library):not(.is-settings) .top::after,
    body:not(.is-focus) .brand-stop,
    body:not(.is-focus) .section-kicker::before,
    body:not(.is-focus) .home-section .toolbar::before,
    body:not(.is-focus):not(.is-library) .home-section .card::before,
    body:not(.is-play):not(.is-focus)::before {
        animation: none !important;
    }

    .portal-fx__orb,
    .portal-fx__beam,
    .portal-fx__spark {
        opacity: 0.35;
    }

    .portal-fx__horizon {
        opacity: 0.55;
        transform: none;
    }

    body:not(.is-focus):not(.is-library) .home-section .card:hover::before {
        opacity: 0.7;
    }
}

/* Soften on small screens / save paint */
@media (max-width: 720px) {
    .portal-fx__ring--c,
    .portal-fx__beam--c,
    .portal-fx__spark:nth-child(n + 5) {
        display: none;
    }

    .portal-fx__orb--a,
    .portal-fx__orb--b,
    .portal-fx__orb--c {
        filter: blur(4px);
        opacity: 0.45;
    }

    .portal-fx__grid {
        opacity: 0.2;
    }
}