/* ============================================
   lunch.day - Glitch-Corrupted Comfort Food
   Aurora Gradient / Diagonal Sections
   ============================================ */

/* -- CSS Custom Properties -- */
:root {
    --aurora-green: #00E89D;
    --aurora-magenta: #D946EF;
    --aurora-teal: #2DD4BF;
    --warm-amber: #FEF3C7;
    --deep-charcoal: #1C1917;
    --soft-ivory: #FFFBEB;
    --warm-coral: #FB923C;
    --muted-sage: #A7C4A0;
    --aurora-angle: 0deg;
    --diagonal-angle: 7deg;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    color: var(--deep-charcoal);
    background: var(--deep-charcoal);
    overflow-x: hidden;
}

/* -- Scanline Overlay -- */
#scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* -- Glitch Block Displacement -- */
#glitch-block {
    position: fixed;
    width: 60px;
    height: 20px;
    background: inherit;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    will-change: transform, opacity;
}

/* -- Floating Navigation Tray -- */
#nav-tray {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

#nav-tray-icon {
    width: 56px;
    height: 56px;
    background: var(--deep-charcoal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

#nav-tray-icon:hover {
    transform: scale(1.1);
}

#nav-tray-icon.glitching {
    animation: tray-glitch 200ms steps(2);
}

@keyframes tray-glitch {
    0% { filter: none; transform: translateX(0); }
    25% { filter: hue-rotate(90deg); transform: translateX(3px); }
    50% { filter: hue-rotate(180deg); transform: translateX(-2px); }
    75% { filter: hue-rotate(270deg); transform: translateX(1px); }
    100% { filter: none; transform: translateX(0); }
}

#nav-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#nav-menu.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

#nav-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--deep-charcoal);
    color: var(--warm-amber);
    border-radius: 50%;
    text-decoration: none;
    font-family: 'Azeret Mono', monospace;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
    position: relative;
}

#nav-menu a:hover {
    background: var(--aurora-green);
    color: var(--deep-charcoal);
    transform: scale(1.15);
}

#nav-menu a:hover::before {
    content: attr(data-label);
    position: absolute;
    right: 48px;
    white-space: nowrap;
    background: var(--deep-charcoal);
    color: var(--warm-amber);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.75rem;
}

/* -- Diagonal Band Base -- */
.diagonal-band {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.band-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px;
    padding-left: calc(24px + 4vw);
}

/* -- Band Variants -- */
.band-aurora {
    min-height: 100vh;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.band-warm {
    min-height: 120vh;
    background: var(--warm-amber);
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
    margin-top: -8vh;
}

.band-dark {
    min-height: 120vh;
    background: var(--deep-charcoal);
    color: var(--soft-ivory);
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
    margin-top: -8vh;
}

.band-ivory {
    min-height: 100vh;
    background: var(--soft-ivory);
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
    margin-top: -8vh;
}

#scene-community {
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
    margin-top: -8vh;
}

#scene-coda {
    min-height: 80vh;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    margin-top: -8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- Aurora Background -- */
.aurora-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from var(--aurora-angle),
        #00E89D,
        #2DD4BF,
        #D946EF,
        #FB923C,
        #00E89D
    );
    animation: aurora-spin 50s linear infinite;
    z-index: 0;
}

@keyframes aurora-spin {
    from { --aurora-angle: 0deg; }
    to { --aurora-angle: 360deg; }
}

@property --aurora-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* -- Aurora Ribbons -- */
.aurora-ribbons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.aurora-ribbon {
    width: 100%;
    height: 100%;
}

/* -- Scene 1: Hero -- */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
    max-width: none;
}

.isometric-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw + 0.5rem, 5.5rem);
    letter-spacing: 0.02em;
    color: var(--soft-ivory);
    transform: perspective(600px) rotateX(-15deg) rotateY(15deg);
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.2),
        6px 6px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;
}

.letter {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.letter.assembled {
    opacity: 1;
    transform: translateX(0) translateY(0);
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.2),
        6px 6px 0 rgba(0, 0, 0, 0.1);
}

.letter.glitch-fragment {
    text-shadow:
        -2px 0 var(--aurora-green),
        2px 0 var(--aurora-magenta),
        0 2px var(--aurora-teal);
}

/* -- Scene 2: Story -- */
.story-content {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-heading {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw + 0.3rem, 3rem);
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
    transform: rotate(-7deg);
    transform-origin: left center;
}

.story-text p {
    margin-bottom: 1.5rem;
    transform: rotate(-7deg);
    transform-origin: left center;
    opacity: 0;
    transform: translateX(-40px) rotate(-7deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-text p.revealed {
    opacity: 1;
    transform: translateX(0) rotate(-7deg);
}

.glow-text {
    color: var(--aurora-green);
    text-shadow: 0 0 20px rgba(0, 232, 157, 0.4);
    font-weight: 600;
}

/* -- Scene 3: Menu -- */
.menu-content {
    max-width: none;
    padding: 120px 24px;
}

.menu-content .section-heading {
    text-align: center;
    transform-origin: center center;
    color: var(--soft-ivory);
}

.icon-constellation {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 720px;
    margin: 3rem auto 0;
}

.iso-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    animation: float 6s ease-in-out infinite;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.iso-icon:nth-child(2) { animation-delay: -0.5s; }
.iso-icon:nth-child(3) { animation-delay: -1s; }
.iso-icon:nth-child(4) { animation-delay: -1.5s; }
.iso-icon:nth-child(5) { animation-delay: -2s; }
.iso-icon:nth-child(6) { animation-delay: -2.5s; }
.iso-icon:nth-child(7) { animation-delay: -3s; }
.iso-icon:nth-child(8) { animation-delay: -3.5s; }
.iso-icon:nth-child(9) { animation-delay: -4s; }
.iso-icon:nth-child(10) { animation-delay: -4.5s; }
.iso-icon:nth-child(11) { animation-delay: -5s; }
.iso-icon:nth-child(12) { animation-delay: -5.5s; }

.iso-icon svg {
    width: 100%;
    height: 100%;
}

.iso-icon:hover {
    transform: scale(1.15);
}

.iso-icon.micro-glitch {
    filter: hue-rotate(180deg) saturate(2);
    transform: translateX(3px);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* -- Scene 4: Time -- */
.time-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 140px;
    padding-bottom: 120px;
    max-width: none;
}

.time-content .section-heading {
    transform-origin: center center;
}

.clock-container {
    margin: 3rem 0;
    position: relative;
}

.clock-container svg {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.1));
}

.clock-container.glitch-flash #clock-glitch {
    fill: var(--aurora-green);
    opacity: 0.15;
    animation: clock-glitch-flash 300ms ease;
}

@keyframes clock-glitch-flash {
    0% { opacity: 0; }
    50% { opacity: 0.2; fill: var(--aurora-magenta); }
    100% { opacity: 0; }
}

.timezone-stamps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 40px;
    max-width: 700px;
    margin-top: 2rem;
}

.tz-stamp {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.tz-stamp.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tz-time {
    display: block;
    font-family: 'Azeret Mono', monospace;
    font-size: clamp(0.75rem, 0.9vw, 0.95rem);
    letter-spacing: 0.08em;
    color: var(--aurora-green);
    overflow: hidden;
    white-space: nowrap;
}

.tz-time .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.tz-time .char.typed {
    opacity: 1;
}

.tz-label {
    display: block;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8rem;
    color: var(--muted-sage);
    margin-top: 4px;
}

/* -- Scene 5: Community -- */
.community-content {
    max-width: none;
    padding: 120px 24px;
}

.community-content .section-heading {
    text-align: center;
    transform-origin: center center;
    color: var(--soft-ivory);
}

.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 3rem auto 0;
}

.mosaic-tile {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mosaic-tile.revealed {
    opacity: 1;
    transform: translateY(0);
}

.mosaic-tile svg {
    width: 100%;
    height: auto;
    display: block;
}

.tile-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 3px
    );
    pointer-events: none;
}

.mosaic-tile.channel-split {
    text-shadow:
        -2px 0 var(--aurora-green),
        2px 0 var(--aurora-magenta);
    filter: saturate(1.5);
}

.mosaic-tile.channel-split svg {
    animation: tile-channel-split 300ms steps(3);
}

@keyframes tile-channel-split {
    0% { filter: none; transform: translateX(0); }
    33% { filter: hue-rotate(120deg); transform: translateX(2px); }
    66% { filter: hue-rotate(240deg); transform: translateX(-2px); }
    100% { filter: none; transform: translateX(0); }
}

/* -- Scene 6: Coda -- */
.coda-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    max-width: none;
    padding: 0;
    text-align: center;
}

.coda-line {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw + 0.3rem, 3rem);
    letter-spacing: 0.02em;
    color: var(--soft-ivory);
    opacity: 0;
    transition: opacity 3s ease;
    max-width: 600px;
    padding: 0 24px;
    position: relative;
    z-index: 3;
}

.coda-line.visible {
    opacity: 1;
}

/* -- Scroll Reveal Base -- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.section-heading.scroll-reveal.revealed {
    transform: rotate(-7deg);
}

/* -- Channel Split on Headlines -- */
.section-heading.channel-split-text {
    text-shadow:
        -2px 0 var(--aurora-green),
        2px 0 var(--aurora-magenta),
        0 2px var(--aurora-teal);
    animation: headline-channel-split 200ms steps(2);
}

@keyframes headline-channel-split {
    0% { text-shadow: none; }
    50% {
        text-shadow:
            -3px 0 var(--aurora-green),
            3px 0 var(--aurora-magenta),
            0 3px var(--aurora-teal);
    }
    100% { text-shadow: none; }
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .icon-constellation {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .iso-icon {
        width: 90px;
        height: 90px;
    }

    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timezone-stamps {
        gap: 16px 24px;
    }

    .band-content {
        padding-left: 24px;
    }
}

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

    .iso-icon {
        width: 80px;
        height: 80px;
    }

    .mosaic-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .clock-container svg {
        width: 220px;
        height: 220px;
    }
}