@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap");

/* =========================================
   CSS VARIABLES
   ========================================= */
:root {
    --background: hsl(40, 20%, 98%);
    --foreground: hsl(220, 15%, 8%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(220, 15%, 8%);
    --primary: hsl(220, 15%, 8%);
    --primary-foreground: hsl(40, 20%, 98%);
    --accent: hsl(230, 100%, 56%);
    --accent-foreground: hsl(0, 0%, 100%);
    --accent-soft: hsl(230, 100%, 96%);
    --signal: hsl(75, 95%, 55%);
    --signal-foreground: hsl(220, 15%, 8%);
    --secondary: hsl(40, 15%, 94%);
    --secondary-foreground: hsl(220, 15%, 8%);
    --muted: hsl(40, 12%, 92%);
    --muted-foreground: hsl(220, 8%, 42%);
    --border: hsl(220, 13%, 88%);
    --input: hsl(220, 13%, 88%);
    --ring: hsl(230, 100%, 56%);
    --radius: 0.75rem;
    --surface: hsl(40, 18%, 96%);
    --surface-dark: hsl(220, 18%, 10%);
    --surface-dark-foreground: hsl(40, 20%, 98%);
    --shadow-soft: 0 1px 2px hsl(220 15% 8% / 0.04), 0 8px 24px hsl(220 15% 8% / 0.06);
    --shadow-lift: 0 2px 4px hsl(220 15% 8% / 0.05), 0 20px 50px -10px hsl(220 15% 8% / 0.12);
    --shadow-glow: 0 10px 40px -10px hsl(230 100% 56% / 0.35);
    --font-display: "Times New Roman", "Instrument Serif", serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

/* =========================================
   BASE RESET
   ========================================= */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   LAYOUT
   ========================================= */
.container-editorial {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.full-width-section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

@media (min-width: 768px) {
    .container-editorial {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* =========================================
   TYPOGRAPHY CLASSES
   ========================================= */

/* H1 - Main Hero Display */
.display-1 {
    font-family: "Times New Roman", "Instrument Serif", serif !important;
    font-size: 5rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    font-weight: 400 !important;
    color: rgb(17, 19, 23) !important;
}

@media (max-width: 1024px) {
    .display-1 {
        font-size: 4rem !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 768px) {
    .display-1 {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
}

/* H2 */
.display-2 {
    font-family: "Times New Roman", "Instrument Serif", serif !important;
    font-size: 3rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    font-weight: 400 !important;
}

@media (min-width: 768px) {
    .display-2 { font-size: 4.5rem !important; }
}

@media (min-width: 1024px) {
    .display-2 { font-size: 6rem !important; }
}

/* H3 */
.display-3 {
    font-family: "Times New Roman", "Instrument Serif", serif !important;
    font-size: 3rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    font-weight: 400 !important;
}

@media (min-width: 768px) {
    .display-3 { font-size: 3rem !important; }
}

@media (min-width: 1024px) {
    .display-3 { font-size: 3.75rem !important; }
}

/* Italic serif span */
.italic-serif {
    font-family: "Times New Roman", "Instrument Serif", serif !important;
    font-style: italic !important;
}

/* Eyebrow labels */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted-foreground);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    height: 1px;
    width: 2rem;
    background-color: hsl(220 15% 8% / 0.4);
}

.eyebrow-none::before {
    display: none !important;
}

/* =========================================
   DECORATIVE / BG
   ========================================= */
.bg-glow {
    background: radial-gradient(60% 60% at 50% 0%, hsl(230 100% 56% / 0.10), transparent 70%);
}

.hero-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, hsla(230, 100%, 56%, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
}

.noise {
    position: relative;
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes float-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.85); }
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.animate-float-up {
    animation: float-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-pulse-dot {
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.animate-marquee {
    animation: marquee 10s linear infinite !important;
    display: flex;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .animate-marquee {
        animation: marquee 15s linear infinite !important;
    }
}

/* =========================================
   SHADOWS (used as Tailwind custom values)
   ========================================= */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-lift { box-shadow: var(--shadow-lift); }
.shadow-glow { box-shadow: var(--shadow-glow); }