/* ==========================================================================
   WARP Ghost Theme — screen.css
   ========================================================================== */

:root {
    --brand-blue: #2F6BFF;
    --brand-black: #000000;
    --brand-gray: #F4F4F4;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

::selection {
    background: var(--brand-blue);
    color: white;
}

/* --------------------------------------------------------------------------
   Plasma Background Animations
   -------------------------------------------------------------------------- */
@keyframes plasma-move-1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(100px, -50px) scale(1.4) rotate(20deg); }
    66%  { transform: translate(-50px, 80px) scale(0.8) rotate(-10deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes plasma-move-2 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-120px, 60px) scale(1.3) rotate(-20deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.animate-plasma-1 { animation: plasma-move-1 12s ease-in-out infinite; }
.animate-plasma-2 { animation: plasma-move-2 9s ease-in-out infinite; }

@keyframes hero-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   Service Block Color Palettes (data-palette index)
   -------------------------------------------------------------------------- */
.service-block[data-palette="0"] .plasma-blob-back-1  { background-color: #4338ca; }
.service-block[data-palette="0"] .plasma-blob-back-2  { background-color: #6366f1; }
.service-block[data-palette="0"] .plasma-blob-back-3  { background-color: #a855f7; }
.service-block[data-palette="0"] .plasma-blob-front-1 { background-color: #E0C3FC; }
.service-block[data-palette="0"] .plasma-blob-front-2 { background-color: #8EC5FC; }
.service-block[data-palette="0"] .plasma-blob-front-3 { background-color: #C2E9FB; }

.service-block[data-palette="1"] .plasma-blob-back-1  { background-color: #0f766e; }
.service-block[data-palette="1"] .plasma-blob-back-2  { background-color: #115e59; }
.service-block[data-palette="1"] .plasma-blob-back-3  { background-color: #047857; }
.service-block[data-palette="1"] .plasma-blob-front-1 { background-color: #84fab0; }
.service-block[data-palette="1"] .plasma-blob-front-2 { background-color: #8fd3f4; }
.service-block[data-palette="1"] .plasma-blob-front-3 { background-color: #a1c4fd; }

.service-block[data-palette="2"] .plasma-blob-back-1  { background-color: #c2410c; }
.service-block[data-palette="2"] .plasma-blob-back-2  { background-color: #9a3412; }
.service-block[data-palette="2"] .plasma-blob-back-3  { background-color: #ea580c; }
.service-block[data-palette="2"] .plasma-blob-front-1 { background-color: #fddb92; }
.service-block[data-palette="2"] .plasma-blob-front-2 { background-color: #fff1eb; }
.service-block[data-palette="2"] .plasma-blob-front-3 { background-color: #f6d365; }

.service-block[data-palette="3"] .plasma-blob-back-1  { background-color: #1e40af; }
.service-block[data-palette="3"] .plasma-blob-back-2  { background-color: #0e7490; }
.service-block[data-palette="3"] .plasma-blob-back-3  { background-color: #0369a1; }
.service-block[data-palette="3"] .plasma-blob-front-1 { background-color: #93c5fd; }
.service-block[data-palette="3"] .plasma-blob-front-2 { background-color: #67e8f9; }
.service-block[data-palette="3"] .plasma-blob-front-3 { background-color: #bae6fd; }

.service-block[data-palette="4"] .plasma-blob-back-1  { background-color: #9f1239; }
.service-block[data-palette="4"] .plasma-blob-back-2  { background-color: #be123c; }
.service-block[data-palette="4"] .plasma-blob-back-3  { background-color: #e11d48; }
.service-block[data-palette="4"] .plasma-blob-front-1 { background-color: #fda4af; }
.service-block[data-palette="4"] .plasma-blob-front-2 { background-color: #fecdd3; }
.service-block[data-palette="4"] .plasma-blob-front-3 { background-color: #ffe4e6; }

/* Service cards hover */
.service-block {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}

.service-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   NAVIGATION — Ghost's {{navigation}} helper outputs <ul><li><a>
   -------------------------------------------------------------------------- */
#main-nav {
    transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

/* Reset the <ul> from {{navigation}} */
#nav-primary ul,
#nav-secondary ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Primary nav link style — dark by default */
#nav-primary li a {
    font-size: 15px;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    display: block;
    color: #374151;
    text-shadow: none;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease, opacity 0.2s ease;
    white-space: nowrap;
}

#nav-primary li a:hover {
    opacity: 0.8;
}

/* Secondary nav = CTA button style — dark by default */
#nav-secondary ul {
    margin-left: 0.5rem;
}

#nav-secondary li a {
    font-size: 15px;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    display: block;
    background: black;
    color: white;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

#nav-secondary li a:hover {
    transform: scale(1.05);
}

#main-nav #mobile-menu-toggle {
    color: #374151;
    transition: color 0.3s ease;
}

/* Homepage only: white nav text on dark hero (before scroll) */
.home-template #main-nav:not(.scrolled):not(.mega-open) #nav-primary li a {
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.home-template #main-nav:not(.scrolled):not(.mega-open) #nav-secondary li a {
    background: white;
    color: black;
}

.home-template #main-nav:not(.scrolled):not(.mega-open) #mobile-menu-toggle {
    color: white;
}

/* --- Scrolled state: dark text, white bg --- */
#main-nav.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Mega menu open state --- */
#main-nav.mega-open {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --- Dimming / active for mega menu hover --- */
#nav-primary li.dimmed a {
    opacity: 0.35;
}

#nav-primary li.active a {
    font-weight: 700;
    opacity: 1 !important;
}

/* --- Mobile menu nav styling --- */
#mobile-nav-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-nav-items li a {
    display: block;
    font-size: 1.875rem;
    font-weight: 700;
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
    color: black;
    text-decoration: none;
    transition: color 0.2s ease;
}

#mobile-nav-items li a:hover {
    color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   MEGA MENU
   -------------------------------------------------------------------------- */
.mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.2s ease-out,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 500px;
    pointer-events: auto;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s;
}

.mega-panel { display: none; }
.mega-panel.is-active { display: block; }

/* All mega menu items — staggered animation on every open */
.mega-item {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered reveal — applied via JS class .mega-animate */
.mega-item.mega-animate {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Faster out-transition when losing .mega-animate */
.mega-panel.is-active .mega-item:not(.mega-animate) {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.15s ease-out,
                transform 0.15s ease-out;
}

/* Text list panels — auto-flow into columns of 3 rows */
.mega-list-columns {
    column-count: auto;
    column-width: 14rem;
    column-gap: 2rem;
    column-fill: auto;
    max-height: calc(3 * 2.75rem);
}

/* Image cards — no border radius, sharp edges */
.mega-card {
    overflow: hidden;
    border-radius: 0;
}

.mega-card:hover {
    transform: translateX(0) scale(1.02);
}

/* --------------------------------------------------------------------------
   Cosmic 3D Galaxy Button
   Based on jh3y's Cosmic 3D Galaxy Button (MIT)
   -------------------------------------------------------------------------- */
.galaxy-button {
    --gb-transition: 0.25s;
    --gb-spark: 1.8s;
    --gb-hue: 340;
    position: relative;
}

.galaxy-btn {
    --cut: 0.1em;
    --active: 0;
    --bg:
        radial-gradient(
            120% 120% at 126% 126%,
            hsl(var(--gb-hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
            transparent 50%
        ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
        radial-gradient(
            120% 120% at 120% 120%,
            hsl(var(--gb-hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
            transparent 70%
        ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
        hsl(var(--gb-hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
    background: var(--bg);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: inherit;
    border: 0;
    cursor: pointer;
    padding: 0.9em 1.6em;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    white-space: nowrap;
    border-radius: 2rem;
    position: relative;
    box-shadow:
        0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(var(--gb-hue) 97% 61% / 0.5),
        0 0.05em 0 0 hsl(var(--gb-hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
        0 -0.05em 0 0 hsl(var(--gb-hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
    transition: box-shadow var(--gb-transition), scale var(--gb-transition), background var(--gb-transition);
    scale: calc(1 + (var(--active) * 0.1));
    transform-style: preserve-3d;
    perspective: 100vmin;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.galaxy-btn:active {
    scale: 1;
}

.galaxy-btn:is(:hover, :focus-visible) {
    --active: 1;
}

.galaxy-btn__star {
    height: calc(var(--size) * 1px);
    aspect-ratio: 1;
    background: white;
    border-radius: 50%;
    position: absolute;
    opacity: var(--alpha);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));
    animation: gb-orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
}

@keyframes gb-orbit {
    to {
        transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
    }
}

.galaxy-btn__galaxy {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    overflow: hidden;
    opacity: var(--active);
    transition: opacity var(--gb-transition);
}

.galaxy-btn__ring {
    height: 200%;
    width: 200%;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
    transform-style: preserve-3d;
}

.galaxy-btn__galaxy-container {
    position: absolute;
    inset: 0;
    opacity: var(--active);
    transition: opacity var(--gb-transition);
    mask: radial-gradient(white, transparent);
    -webkit-mask: radial-gradient(white, transparent);
}

.galaxy-btn__star--static {
    animation: none;
    top: 50%;
    left: 50%;
    transform: translate(0, 0);
    max-height: 4px;
    filter: brightness(4);
    opacity: 0.9;
    animation:
        gb-move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
        gb-move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
}

.galaxy-btn:hover .galaxy-btn__star--static {
    animation-play-state: paused;
}

@keyframes gb-move-x {
    0%   { translate: -100px 0; }
    100% { translate: 100px 0; }
}

@keyframes gb-move-y {
    0%   { transform: translate(0, -50px); }
    100% { transform: translate(0, 50px); }
}

.galaxy-btn__spark {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    rotate: 0deg;
    overflow: hidden;
    mask: linear-gradient(white, transparent 50%);
    -webkit-mask: linear-gradient(white, transparent 50%);
    animation: gb-flip calc(var(--gb-spark) * 2) infinite steps(2, end);
}

@keyframes gb-flip {
    to { rotate: 360deg; }
}

.galaxy-btn__spark:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    top: 0%;
    left: 50%;
    z-index: -1;
    translate: -50% -15%;
    rotate: 0;
    transform: rotate(-90deg);
    opacity: calc((var(--active)) + 0.4);
    background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
    transition: opacity var(--gb-transition);
    animation: gb-rotate var(--gb-spark) linear infinite both;
}

.galaxy-btn__spark:after {
    content: "";
    position: absolute;
    inset: var(--cut);
    border-radius: 2rem;
}

.galaxy-btn__backdrop {
    position: absolute;
    inset: var(--cut);
    background: var(--bg);
    border-radius: 2rem;
    transition: background var(--gb-transition);
}

@keyframes gb-rotate {
    to { transform: rotate(90deg); }
}

.galaxy-btn__text {
    translate: 2% -6%;
    letter-spacing: 0.01ch;
    color: hsl(0 0% calc(60% + (var(--active) * 26%)));
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Work Cards
   -------------------------------------------------------------------------- */
.work-card {
    transition: box-shadow 0.4s ease;
}

.group:hover .work-card {
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Scroll Reveal
   -------------------------------------------------------------------------- */
.reveal {
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Ghost Content — Post/Page body
   -------------------------------------------------------------------------- */
.gh-content { font-size: 1.125rem; line-height: 1.8; color: #333; }
.gh-content > * + * { margin-top: 1.75rem; }
.gh-content h2 { font-size: 2rem; font-weight: 700; margin-top: 3rem; line-height: 1.2; }
.gh-content h3 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; line-height: 1.3; }
.gh-content h4 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; }
.gh-content p { line-height: 1.8; }
.gh-content a { color: var(--brand-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.2s; }
.gh-content a:hover { color: #1a4fd6; }
.gh-content blockquote { border-left: 4px solid var(--brand-blue); padding-left: 1.5rem; font-style: italic; color: #555; margin-left: 0; }
.gh-content ul, .gh-content ol { padding-left: 1.5rem; }
.gh-content li + li { margin-top: 0.5rem; }
.gh-content img { border-radius: 0.5rem; max-width: 100%; height: auto; }
.gh-content figure { margin: 2.5rem 0; }
.gh-content figcaption { text-align: center; font-size: 0.875rem; color: #888; margin-top: 0.75rem; }
.gh-content pre { background: #1a1a1a; color: #e0e0e0; padding: 1.25rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.6; }
.gh-content code { background: #f0f0f0; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
.gh-content pre code { background: transparent; padding: 0; border-radius: 0; }
.gh-content hr { border: 0; height: 1px; background: rgba(0, 0, 0, 0.1); margin: 3rem 0; }
.gh-content .kg-card { margin: 2.5rem 0; }
.gh-content .kg-width-wide { margin-left: -5vw; margin-right: -5vw; max-width: none; }
.gh-content .kg-width-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: none; }
.gh-content .kg-image-card img, .gh-content .kg-gallery-card img { width: 100%; height: auto; }

/* Dark variant for about section */
.gh-content--dark { color: #d1d5db; }
.gh-content--dark a { color: #60a5fa; }
.gh-content--dark a:hover { color: #93bbfd; }
.gh-content--dark blockquote { border-left-color: #60a5fa; color: #9ca3af; }
.gh-content--dark code { background: rgba(255, 255, 255, 0.1); color: #e5e7eb; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 0; }
.pagination a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); font-weight: 600; font-size: 0.875rem; transition: all 0.2s; }
.pagination a:hover { background: var(--brand-black); color: white; border-color: var(--brand-black); }

/* --------------------------------------------------------------------------
   Error Page
   -------------------------------------------------------------------------- */
.error-page { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-code { font-size: clamp(6rem, 15vw, 12rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--brand-blue), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-underline { text-decoration: none !important; }

/* Members / Subscribe */
form[data-members-form].success .subscribe-success { display: block; }
form[data-members-form].error .subscribe-error { display: block; }
form[data-members-form].success input, form[data-members-form].success button { display: none; }

/* --------------------------------------------------------------------------
   Footer Content (from Ghost page)
   -------------------------------------------------------------------------- */
.footer-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5563;
}

.footer-content > * + * {
    margin-top: 1.25rem;
}

.footer-content h2,
.footer-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.footer-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
}

.footer-content p {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.7;
}

.footer-content a {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 500;
}

.footer-content a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Apply Form
   -------------------------------------------------------------------------- */
.apply-form input:not([type="hidden"]):not([type="file"]):not([type="submit"]),
.apply-form textarea {
    background: #fafafa;
}

.apply-form input:not([type="hidden"]):not([type="file"]):not([type="submit"]):focus,
.apply-form textarea:focus {
    background: #fff;
}

.apply-dropzone.dragover {
    border-color: var(--brand-blue);
    background: rgba(47, 107, 255, 0.03);
}

/* Print */
@media print {
    #main-nav, #mobile-menu, footer { display: none; }
    .reveal { opacity: 1 !important; transform: none !important; }
}