/* ──────────────────────────────────────────────────────────────
   midjourney.actor — custom theme polish
   Loaded after Tailwind. Everything here either covers what
   utilities can't express well, or sets motion / accessibility defaults.
   ────────────────────────────────────────────────────────────── */

:root {
    --ink:      #0A0A0F;
    --graphite: #15151D;
    --steel:    #1F2030;
    --silver:   #C9CCD1;
    --ember:    #FF6B1A;
    --flare:    #FF8A3D;
    --dim:      #6B6E7A;
}

html, body { background-color: var(--ink); }
body {
    color: var(--silver);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Custom scrollbar */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: #0A0A0F; }
::-webkit-scrollbar-thumb   { background: #2A2A35; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3A3A45; }

/* ────────── Header scroll state ────────── */
#site-header.is-scrolled {
    background: rgba(10, 10, 15, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ────────── Glass surface ────────── */
.glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.glass-strong {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* ────────── Gradient text ────────── */
.text-ember-grad {
    background: linear-gradient(135deg, #FF6B1A 0%, #FFC089 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.text-silver-grad {
    background: linear-gradient(180deg, #FFFFFF 0%, #9A9DA6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* ────────── Background fixtures ────────── */
.grid-bg {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.aurora {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
}
.noise-overlay {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ────────── Scroll reveal ────────── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ────────── Marquee ────────── */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    animation: marquee 40s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ────────── Button shine ────────── */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
    pointer-events: none;
}
.btn-shine:hover::after { transform: translateX(110%); }

/* ────────── Display polish ────────── */
.font-display { letter-spacing: -0.02em; }

/* Hairline divider */
.hairline {
    height: 1px;
    background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
}

/* Card hover lift */
.lift {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.4s ease;
}
.lift:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,0.65);
}

/* ────────── Reduced motion ────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-track { animation: none; }
}

/* Image defaults */
img { max-width: 100%; height: auto; }

/* Form focus rings consistency */
:where(input, textarea, select):focus-visible {
    outline: 2px solid rgba(255,107,26,0.5);
    outline-offset: 2px;
}

/* Subtle prose container for editorial pages */
.prose-cinema {
    color: rgba(201, 204, 209, 0.92);
    font-size: 17px;
    line-height: 1.75;
}
.prose-cinema h2 { color: #fff; font-family: "Instrument Serif", serif; font-size: 1.75rem; letter-spacing: -0.01em; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose-cinema h3 { color: #fff; font-weight: 500; font-size: 1.2rem; margin-top: 2rem; margin-bottom: 0.6rem; }
.prose-cinema p  { margin-bottom: 1.1rem; }
.prose-cinema a  { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,107,26,0.55); text-underline-offset: 4px; }
.prose-cinema ul, .prose-cinema ol { padding-left: 1.25rem; margin-bottom: 1.1rem; }
.prose-cinema li { margin-bottom: 0.4rem; }
.prose-cinema blockquote {
    border-left: 2px solid rgba(255,107,26,0.45);
    padding-left: 1rem; color: #fff; font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 1.15rem; margin: 1.5rem 0;
}
.prose-cinema code {
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.4rem; border-radius: 6px; font-size: 0.9em;
}