/* Cyclone skin for Lagom 2 (Futuristic style).
   Matches cycloneservers.net: blue-black canvas, faint grid, logo-periwinkle accent,
   indigo-blue buttons and low-contrast glass panels. Lagom loads this file automatically
   after its own theme CSS when the Futuristic style is active. */

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

:root {
    /* Brand */
    --brand-primary:                    #4a5ff0;
    --brand-primary-lighter:            #5b74ff;
    --brand-primary-lighter-2:          rgba(142, 162, 255, 0.32);
    --brand-primary-lighter-3:          rgba(142, 162, 255, 0.16);
    --brand-primary-lighter-4:          rgba(142, 162, 255, 0.1);
    --brand-primary-darker:             #3b4fd6;
    --brand-primary-gradient-start:     #3b4fd6;
    --brand-primary-gradient-end:       #5b74ff;
    --brand-secondary:                  #2a3150;
    --brand-secondary-lighter:          #8ea2ff;
    --brand-secondary-darker:           #1b2038;
    --brand-secondary-gradient-start:   #12152a;
    --brand-secondary-gradient-end:     #1f2650;
    --brand-info:                       #8ea2ff;
    --brand-info-lighter:               #c3ccff;
    --brand-info-darker:                #5b74ff;
    --brand-info-gradient-start:        #4a5ff0;
    --brand-info-gradient-end:          #8ea2ff;

    /* Grays: neutral white-on-black instead of Lagom's navy tint */
    --gray-base:                        rgba(237, 237, 237, 0.86);
    --gray-lighter:                     rgba(237, 237, 237, 0.62);
    --gray-lighter-2:                   rgba(237, 237, 237, 0.42);
    --gray-lighter-3:                   rgba(255, 255, 255, 0.14);
    --gray-lighter-4:                   rgba(255, 255, 255, 0.09);
    --gray-faded:                       rgba(255, 255, 255, 0.05);
    --gray-darker:                      #ededed;
    --gray-icons:                       rgba(237, 237, 237, 0.55);
    --gray-icons-hover:                 rgba(237, 237, 237, 0.8);
    --gray-gradient-start:              rgba(255, 255, 255, 0.02);
    --gray-gradient-end:                rgba(142, 162, 255, 0.08);

    --svg-illustration-color-0:         #3b4fd6;
    --svg-illustration-color-1:         #4a5ff0;
    --svg-illustration-color-2:         #5b74ff;
    --svg-illustration-color-3:         #8ea2ff;
    --svg-illustration-color-4:         #a8b7ff;
    --svg-illustration-color-5:         #c3ccff;
    --svg-illustration-color-6:         #dde2ff;
    --svg-illustration-line-color:      rgba(142, 162, 255, 0.24);

    /* Canvas and panels */
    --body-bg:                          #0b0d14;
    --futuristic-bg:                    none;
    --sticky-menu-bg:                   rgba(11, 13, 20, 0.8);
    --ui-block-bg:                      rgba(255, 255, 255, 0.025);
    --ui-block-overlay-bg:              rgba(17, 19, 28, 0.97);
    --ui-block-overlay-bg-2:            rgba(17, 19, 28, 0.98);
    --ui-block-border:                  1px solid rgba(255, 255, 255, 0.07);
    --ui-block-border-color:            rgba(255, 255, 255, 0.07);
    --ui-block-divider-color:           rgba(255, 255, 255, 0.06);
    --ui-block-shadow:                  none;
    --ui-block-shadow-lg:               0 24px 60px -20px rgba(0, 0, 0, 0.8);
    --ui-block-shadow-xlg:              0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 60px -24px rgba(98, 112, 255, 0.35);
    --ui-block-border-radius:           14px;
    --ui-block-border-radius-lg:        18px;
    --ui-block-link-hover-bg:           rgba(110, 128, 255, 0.07);
    --ui-block-link-active-bg:          rgba(110, 128, 255, 0.1);
    --ui-nav-link-active-bg:            rgba(110, 128, 255, 0.1);

    /* Type */
    --font-family-base:                 'Geist';
    --text-heading-color:               #ededed;
    --text-body-color:                  rgba(237, 237, 237, 0.82);
    --text-lighter-color:               #9a9dab;
    --text-primary-color:               #8ea2ff;

    /* Shape */
    --border-radius-sm:                 6px;
    --border-radius-base:               10px;
    --border-radius-lg:                 12px;
    --border-radius-xlg:                16px;

    /* Buttons */
    --btn-box-shadow:                   none;
    --btn-primary-bg:                   #4a5ff0;
    --btn-primary-border:               #4a5ff0;
    --btn-primary-color:                #fff;
    --btn-primary-hover-bg:             #3b4fd6;
    --btn-primary-hover-border:         #3b4fd6;
    --btn-primary-faded-bg:             rgba(142, 162, 255, 0.1);
    --btn-primary-faded-border:         rgba(142, 162, 255, 0.22);
    --btn-primary-faded-color:          #c3ccff;
    --btn-primary-faded-hover-bg:       rgba(142, 162, 255, 0.18);
    --btn-primary-faded-hover-border:   rgba(142, 162, 255, 0.34);
    --btn-primary-faded-hover-color:    #fff;
    --btn-primary-faded-active-bg:      rgba(142, 162, 255, 0.22);
    --btn-primary-faded-active-border:  rgba(142, 162, 255, 0.4);
    --btn-default-bg:                   rgba(255, 255, 255, 0.04);
    --btn-default-border:               rgba(255, 255, 255, 0.08);
    --btn-default-color:                #ededed;
    --btn-default-hover-bg:             rgba(255, 255, 255, 0.08);

    /* Forms */
    --input-bg:                         rgba(255, 255, 255, 0.03);
    --input-border-color:               rgba(255, 255, 255, 0.09);
    --input-focus-border-color:         rgba(142, 162, 255, 0.6);

    /* Sidebar / banner blocks: dark glass instead of solid blue gradients */
    --primary-block-bg:                 linear-gradient(180deg, rgba(110, 128, 255, 0.16), rgba(110, 128, 255, 0.04)), #10131d;
    --primary-block-bg-h:               linear-gradient(90deg, rgba(110, 128, 255, 0.16), rgba(110, 128, 255, 0.04)), #10131d;
    --primary-block-border:             1px solid rgba(142, 162, 255, 0.2);
    --secondary-block-bg:               linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), #0f1119;
    --secondary-block-bg-h:             linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), #0f1119;
    --primary-block-input-bg:           rgba(255, 255, 255, 0.05);
    --primary-block-input-border:       rgba(255, 255, 255, 0.12);
    --primary-block-input-color:        #ededed;
    --primary-block-input-icon-color:   #8ea2ff;
    --main-header-banner-bg:            transparent;
}

/* Cyclone swirl glowing at the top of every page, same as the main site.
   The page colour sits on <html> so the swirl can live behind the content. */
html {
    background-color: #0b0d14;
}

body.lagom-futuristic,
body.lagom-futuristic.page-type-full {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: transparent;
    background-image: radial-gradient(900px 520px at 50% -160px, rgba(98, 112, 255, 0.2), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top center;
}

body.lagom-futuristic::before {
    content: '';
    position: absolute;
    top: -230px;
    left: 50%;
    z-index: -1;
    width: min(1100px, 100%);
    height: 760px;
    pointer-events: none;
    transform: translateX(-50%) rotate(-14deg) scaleY(0.42);
    background: conic-gradient(
        from var(--swirl),
        rgba(142, 162, 255, 0.6) 0deg,
        transparent 75deg,
        rgba(185, 140, 255, 0.4) 120deg,
        transparent 195deg,
        rgba(98, 112, 255, 0.55) 240deg,
        transparent 315deg,
        rgba(142, 162, 255, 0.6) 360deg
    );
    -webkit-mask-image: radial-gradient(closest-side, transparent 18%, #000 30%, transparent 42%, #000 56%, #000 62%, transparent 80%);
    mask-image: radial-gradient(closest-side, transparent 18%, #000 30%, transparent 42%, #000 56%, #000 62%, transparent 80%);
    filter: blur(26px);
    opacity: 0.75;
    animation: cyclone-swirl 90s linear infinite;
}

.lagom-futuristic .promo-slider.promo-slider-primary:before,
.lagom-futuristic .site-banner.banner-primary:before,
.lagom-futuristic .site-banner.banner-secondary:before,
.lagom-futuristic .site-section.section-primary:before,
.lagom-futuristic .site-section.section-secondary:before {
    background-image: radial-gradient(70% 120% at 50% 130%, rgba(98, 112, 255, 0.3), transparent 60%);
}

body.lagom-futuristic {
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.lagom-futuristic h1,
.lagom-futuristic h2,
.lagom-futuristic .main-header-title {
    letter-spacing: -0.02em;
}

/* Sticky top bar: frosted glass once it detaches */
.lagom-futuristic .app-nav-header,
.lagom-futuristic .app-nav-menu {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

.lagom-futuristic .app-nav-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Panels and boxes */
/* Sidebar panels stay borderless (Lagom lays their text out flush left) */
.lagom-futuristic .panel:not(.panel-sidebar),
.lagom-futuristic .tile,
.lagom-futuristic .table-container {
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.lagom-futuristic .panel-sidebar .list-group-item.active {
    border-radius: 8px;
}

.lagom-futuristic a.tile:hover {
    border-color: rgba(142, 162, 255, 0.3);
}

/* Primary buttons: soft glow like the main site */
.lagom-futuristic .btn-primary:not(.btn-outline) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px -12px rgba(74, 95, 240, 0.9);
}

.lagom-futuristic .form-control:focus,
.lagom-futuristic .form-control.focus {
    box-shadow: 0 0 0 3px rgba(142, 162, 255, 0.16);
}

/* Status labels: tinted pills */
.lagom-futuristic .label,
.lagom-futuristic .status {
    border-radius: 999px;
}

.lagom-futuristic ::selection {
    background: rgba(142, 162, 255, 0.35);
    color: #fff;
}

/* Cyclone swirl: animates the conic gradient's start angle */
@property --swirl {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes cyclone-swirl {
    to {
        --swirl: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lagom-futuristic::before {
        animation: none;
    }
}