/* ============================================
   longitude.day — Y2K Futurism Meridian Design
   Typography compliance notes: Space Grotesk" (Google Fonts, Inter" (Google Fonts, IBM Plex Mono" (Google Fonts.
   Coordinate readouts place text inside a 1px-bordered micro-card with semi-transparent background.
   International Date Line (Transition Section) inversion section and the ".day" portion of the wordmark | International Date Line Inversion:**
   Intersection Observer: when `isIntersecting` becomes true with a threshold of 0.15. Intersection Observer. Use `@media (prefers-reduced-motion: reduce).
   IntersectionObserver or scroll position to animate `clip-path` on two flanking panels — `clip-path: inset(0 50% 0 0).
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --bg-primary: #0c0f1a;
    --bg-secondary: #151a2e;
    --bg-gradient-end: #1a2040;
    --accent-cyan: #5ce0d2;
    --accent-teal: #3ba8b8;
    --accent-blue: #2e6cc4;
    --accent-amber: #e8b84d;
    --surface-light: #e4edf5;
    --surface-glow: #b8a9e8;
    --text-light: #d8e6f0;
    --text-dark: #1a1f2e;
    --chrome-mid: #5a7a9a;
    --chrome-light: #8aa4c0;
    --scroll-y: 0px;
    --hero-split: 0;

    --palette-primary: #5ce0d2;
    --palette-bg: #0c0f1a;
}

html.date-line-crossed {
    --palette-primary: #e8b84d;
    --palette-bg: #1a170c;
}

/* --- Reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: var(--text-light);
    background:
        radial-gradient(circle at 50% 0%, rgba(92, 224, 210, 0.09), transparent 34%),
        linear-gradient(135deg, var(--palette-bg) 0%, #151a2e 40%, #1a2040 100%);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.72;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    transition: background 0.3s ease, color 0.3s ease;
}

/* --- Parallax Layers --- */
.parallax-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    overflow: hidden;
}

#parallax-layer-1 {
    z-index: 1;
}

#parallax-layer-2 {
    z-index: 2;
}

#parallax-layer-3 {
    z-index: 3;
}

/* Conic time zone gradient */
.conic-gradient {
    position: absolute;
    width: 150vmax;
    height: 150vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(92, 224, 210, 0.08) 0deg 15deg,
        rgba(59, 168, 184, 0.06) 15deg 30deg,
        rgba(46, 108, 196, 0.08) 30deg 45deg,
        rgba(184, 169, 232, 0.05) 45deg 60deg,
        rgba(92, 224, 210, 0.07) 60deg 75deg,
        rgba(59, 168, 184, 0.05) 75deg 90deg,
        rgba(46, 108, 196, 0.07) 90deg 105deg,
        rgba(184, 169, 232, 0.06) 105deg 120deg,
        rgba(92, 224, 210, 0.08) 120deg 135deg,
        rgba(59, 168, 184, 0.06) 135deg 150deg,
        rgba(46, 108, 196, 0.08) 150deg 165deg,
        rgba(184, 169, 232, 0.05) 165deg 180deg,
        rgba(92, 224, 210, 0.07) 180deg 195deg,
        rgba(59, 168, 184, 0.05) 195deg 210deg,
        rgba(46, 108, 196, 0.07) 210deg 225deg,
        rgba(184, 169, 232, 0.06) 225deg 240deg,
        rgba(92, 224, 210, 0.08) 240deg 255deg,
        rgba(59, 168, 184, 0.06) 255deg 270deg,
        rgba(46, 108, 196, 0.08) 270deg 285deg,
        rgba(184, 169, 232, 0.05) 285deg 300deg,
        rgba(92, 224, 210, 0.07) 300deg 315deg,
        rgba(59, 168, 184, 0.05) 315deg 330deg,
        rgba(46, 108, 196, 0.07) 330deg 345deg,
        rgba(184, 169, 232, 0.06) 345deg 360deg
    );
    border-radius: 50%;
    animation: rotateConic 120s linear infinite;
    opacity: 0.7;
}

@keyframes rotateConic {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Meridian grid */
.meridian-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(100% / 24 - 1px),
        rgba(92, 224, 210, 0.06) calc(100% / 24 - 1px),
        rgba(92, 224, 210, 0.06) calc(100% / 24)
    );
}

.meridian-grid::before,
.meridian-grid::after {
    content: '';
    position: absolute;
    inset: 8% 0;
    background-image: radial-gradient(circle, rgba(184, 169, 232, 0.32) 1px, transparent 1.8px);
    background-size: 56px 56px;
    opacity: 0.18;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.meridian-grid::after {
    transform: translateY(28px);
    opacity: 0.09;
}

/* Compass rose */
.compass-rose {
    position: absolute;
    width: 60vw;
    height: 60vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.15;
}

.compass-arm {
    stroke: var(--accent-teal);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    transition: stroke-dashoffset 0.1s linear;
}

.compass-circle {
    stroke: var(--accent-teal);
    stroke-width: 0.8;
    fill: none;
    opacity: 0.5;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 0.1s linear;
}

.compass-ticks line {
    stroke: var(--accent-teal);
    stroke-width: 1;
    opacity: 0.4;
}

/* --- HUD Readouts --- */
.hud-readout {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(12, 15, 26, 0.7);
    border: 1px solid rgba(92, 224, 210, 0.2);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.65rem, 0.8vw, 0.85rem);
    pointer-events: none;
}

#hud-top-left { top: 16px; left: 16px; }
#hud-top-right { top: 16px; right: 16px; }
#hud-bottom-left { bottom: 16px; left: 16px; }
#hud-bottom-right { bottom: 16px; right: 16px; }

.hud-label {
    color: var(--accent-teal);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hud-value {
    color: var(--accent-cyan);
    font-feature-settings: 'tnum';
    text-shadow: 0 0 8px rgba(92, 224, 210, 0.4);
    transition: color 0.3s;
}

html.date-line-crossed .hud-value {
    color: var(--accent-amber);
    text-shadow: 0 0 8px rgba(232, 184, 77, 0.4);
}

/* --- Main Content --- */
#content {
    position: relative;
    z-index: 10;
}

.section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 2rem;
}

/* --- Hero Section --- */
#hero {
    overflow: hidden;
}

.split-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(216, 230, 240, 0.05), transparent 18%),
        linear-gradient(135deg, rgba(92, 224, 210, 0.07), rgba(46, 108, 196, 0.04));
    border: 1px solid rgba(138, 164, 192, 0.08);
    backdrop-filter: blur(2px);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
    opacity: 0.72;
}

.split-panel-left {
    left: 0;
    clip-path: inset(0 calc(var(--hero-split) * 52%) 0 0);
    transform: translateX(calc(var(--hero-split) * -34px));
}

.split-panel-right {
    right: 0;
    clip-path: inset(0 0 0 calc(var(--hero-split) * 52%));
    transform: translateX(calc(var(--hero-split) * 34px));
}

.meridian-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        var(--accent-cyan) 0%,
        var(--accent-teal) 30%,
        var(--accent-amber) 70%,
        var(--accent-cyan) 100%
    );
    opacity: 0.8;
    animation: pulseMeridian 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes pulseMeridian {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 10px rgba(92, 224, 210, 0.3); }
    50% { opacity: 1; box-shadow: 0 0 25px rgba(92, 224, 210, 0.6); }
}

.hero-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 3;
    position: relative;
}

.wordmark-left, .wordmark-right {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(4rem, 10vw, 12rem);
    letter-spacing: -0.02em;
    font-feature-settings: 'ss01';
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    text-shadow: 0 0 28px rgba(92, 224, 210, 0.18);
}

.wordmark-left {
    color: var(--accent-cyan);
    text-align: right;
}

.wordmark-right {
    color: var(--accent-amber);
    text-align: left;
}

.hero-split .wordmark-left {
    transform: translateX(calc(var(--hero-split) * -48px));
}

.hero-split .wordmark-right {
    transform: translateX(calc(var(--hero-split) * 48px));
}

.hero-coord {
    position: absolute;
    top: 24px;
    left: 24px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.75rem, 0.9vw, 0.95rem);
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(92, 224, 210, 0.4);
    font-feature-settings: 'tnum';
    z-index: 5;
}

.hero-scroll-hint {
    position: absolute;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 5;
    animation: fadeInUp 1.5s 1s both;
}

.scroll-hint-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent-teal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.scroll-hint-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--accent-teal);
    border-bottom: 2px solid var(--accent-teal);
    transform: rotate(45deg);
    opacity: 0.5;
    animation: bounceArrow 2s ease-in-out infinite;
}

@keyframes bounceArrow {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(8px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Meridian Gates --- */
.meridian-gate {
    position: relative;
    overflow: hidden;
}

.gate-rail {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(59, 168, 184, 0.3) 20%,
        rgba(92, 224, 210, 0.5) 50%,
        rgba(59, 168, 184, 0.3) 80%,
        transparent 100%
    );
}

.gate-rail-left { left: 5%; }
.gate-rail-right { right: 5%; }

.gate-rail::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -5px;
    width: 13px;
    height: 60%;
    border-radius: 999px;
    background: linear-gradient(180deg, #d8e6f0 0%, #8aa4c0 20%, #d8e6f0 40%, #5a7a9a 60%, #d8e6f0 80%, #8aa4c0 100%);
    opacity: 0.16;
}

.gate-arc {
    position: absolute;
    top: 50%;
    width: min(28vw, 360px);
    height: min(48vw, 520px);
    transform: translateY(-50%);
    opacity: 0.24;
    z-index: 1;
}

.gate-arc-left { left: 6%; }
.gate-arc-right { right: 6%; }

.gate-arc path {
    fill: none;
    stroke: #3ba8b8;
    stroke-width: 1.2;
    stroke-dasharray: 9 13;
}

.date-line-arc path {
    stroke: #e8b84d;
}

/* --- Glassmorphic Cards --- */
.glass-card {
    position: relative;
    max-width: 700px;
    width: 90%;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(92, 224, 210, 0.08) 0%, rgba(46, 108, 196, 0.06) 100%);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(92, 224, 210, 0.15);
    border-radius: 16px;
    box-shadow: 0 -4px 30px rgba(92, 224, 210, 0.08);
    contain: layout style paint;

    /* Morph animation initial state */
    opacity: 0;
    transform: scaleY(0.02);
    transform-origin: center;
    transition:
        opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--card-index, 0) * 80ms);
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(216, 230, 240, 0.08), transparent 18%),
        radial-gradient(circle at 10% 0%, rgba(184, 169, 232, 0.18), transparent 28%);
    opacity: 0.68;
}

.glass-card.card--visible {
    opacity: 1;
    transform: scaleY(1);
}

.card-from-left {
    margin-right: auto;
    margin-left: 10%;
}

.card-from-right {
    margin-left: auto;
    margin-right: 10%;
}

/* Iridescent top border */
.card-iridescent-border {
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, #5ce0d2, #3ba8b8, #2e6cc4, #b8a9e8);
    border-radius: 2px;
}

.card-iridescent-border--amber {
    background: linear-gradient(90deg, #e8b84d, #e8b84d, #5ce0d2, #e8b84d);
}

.gate-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 6rem);
    letter-spacing: -0.02em;
    font-feature-settings: 'ss01';
    color: var(--surface-light);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.card-body {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
}

.gate-title,
.card-body,
.card-data {
    position: relative;
    z-index: 2;
}

.card-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(92, 224, 210, 0.1);
}

.data-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent-teal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.data-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.75rem, 0.9vw, 0.95rem);
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(92, 224, 210, 0.4);
    font-feature-settings: 'tnum';
}

/* --- Date Line Section --- */
.date-line .gate-rail {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(232, 184, 77, 0.3) 20%,
        rgba(232, 184, 77, 0.5) 50%,
        rgba(232, 184, 77, 0.3) 80%,
        transparent 100%
    );
}

.date-line-card {
    border-color: rgba(232, 184, 77, 0.2);
    background: linear-gradient(135deg, rgba(232, 184, 77, 0.07), rgba(232, 184, 77, 0.03));
    box-shadow: 0 -4px 30px rgba(232, 184, 77, 0.08);
}

.date-line-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        linear-gradient(112deg, transparent 18%, rgba(232, 184, 77, 0.18) 18.4%, transparent 18.9%),
        linear-gradient(66deg, transparent 38%, rgba(232, 184, 77, 0.14) 38.3%, transparent 39%),
        linear-gradient(141deg, transparent 63%, rgba(232, 184, 77, 0.12) 63.5%, transparent 64.2%);
    pointer-events: none;
}

.date-line-title {
    color: var(--accent-amber);
}

.date-line-card .data-label {
    color: var(--accent-amber);
}

.date-line-card .data-value {
    color: var(--accent-amber);
    text-shadow: 0 0 8px rgba(232, 184, 77, 0.4);
}

.date-line-card .card-data {
    border-top-color: rgba(232, 184, 77, 0.1);
}

/* --- Coordinate Footer --- */
#coord-footer {
    min-height: 80vh;
    padding: 4rem 2rem;
}

.footer-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    color: var(--surface-light);
    margin-bottom: 3rem;
    text-align: center;
}

.coord-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    width: 90%;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.coord-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(21, 26, 46, 0.6);
    border: 1px solid rgba(92, 224, 210, 0.08);
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.5rem, 0.7vw, 0.7rem);
    color: var(--accent-teal);
    cursor: default;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    text-align: center;
    padding: 2px;
    overflow: hidden;
}

.coord-cell:hover {
    background: rgba(92, 224, 210, 0.1);
    border-color: rgba(92, 224, 210, 0.3);
    box-shadow: 0 0 12px rgba(92, 224, 210, 0.15);
    color: var(--accent-cyan);
}

.coord-cell .cell-coord {
    font-size: 0.55em;
    opacity: 0.6;
}

.coord-cell .cell-time {
    font-size: 0.7em;
    color: var(--accent-cyan);
    text-shadow: 0 0 6px rgba(92, 224, 210, 0.3);
}

.footer-meridian {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
}

.footer-domain {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--accent-cyan);
}

.footer-tagline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent-teal);
    opacity: 0.6;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Chrome Accents --- */
.chrome-accent {
    background: linear-gradient(
        180deg,
        #d8e6f0 0%,
        #8aa4c0 20%,
        #d8e6f0 40%,
        #5a7a9a 60%,
        #d8e6f0 80%,
        #8aa4c0 100%
    );
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .card-from-left,
    .card-from-right {
        margin-left: auto;
        margin-right: auto;
    }

    .glass-card {
        padding: 2rem 1.5rem;
    }

    .gate-rail-left { left: 2%; }
    .gate-rail-right { right: 2%; }

    .hud-readout {
        display: none;
    }

    .coord-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .hero-coord {
        display: none;
    }
}

@media (max-width: 480px) {
    .coord-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}