/* ==========================================================================
   interplanetary.biz — Pop-Art Space Commerce Directory
   Palette: #F8F8F8, #4060A0, #40A060, #A040A0, #D4A040, #D04040, #1A1A1A, #E0E0D8
   Fonts: Commissioner (display + body), Permanent Marker (labels)
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    line-height: 1.75;
    font-size: clamp(14px, 1vw, 16px);
    color: #1A1A1A;
    background: #F8F8F8;
    overflow-x: hidden;
}

/* ----- Typography ----- */
h1, h2, h3 {
    font-family: 'Commissioner', sans-serif;
}

.section-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3.5vw, 44px);
    letter-spacing: 0.02em;
    -webkit-text-stroke: 1.5px #1A1A1A;
    text-stroke: 1.5px #1A1A1A;
    color: #F8F8F8;
    paint-order: stroke fill;
    text-align: center;
    margin-bottom: 48px;
}

/* ==========================================================================
   SECTION 1: Hero / Opening Viewport
   ========================================================================== */
#hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #F8F8F8;
}

.aurora-bg {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        rgba(64, 96, 160, 0.3),
        rgba(64, 160, 96, 0.3),
        rgba(160, 64, 160, 0.3),
        rgba(212, 160, 64, 0.3),
        rgba(64, 96, 160, 0.3)
    );
    animation: auroraRotate 30s linear infinite;
    z-index: 0;
}

@keyframes auroraRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Alien botanical plants */
.alien-plant {
    position: absolute;
    width: 60px;
    height: 160px;
    z-index: 1;
    opacity: 0.7;
}

.plant-left {
    left: 4%;
    bottom: 10%;
}

.plant-right {
    right: 4%;
    bottom: 15%;
}

/* Rocket */
#rocket-container {
    position: relative;
    z-index: 2;
    width: clamp(140px, 20vw, 220px);
    margin-bottom: 24px;
}

#rocket-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Rocket animation states */
#rocket-body {
    transform-origin: center center;
    opacity: 0;
    transform: scale(0.5);
}

#rocket-fin-left {
    opacity: 0;
    transform: translateX(-20px);
}

#rocket-fin-right {
    opacity: 0;
    transform: translateX(20px);
}

#rocket-flame {
    transform-origin: center top;
    opacity: 0;
    transform: scaleY(0);
}

#speed-lines line {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

/* Animated states */
#rocket-body.animate {
    animation: rocketBodyIn 400ms ease-out forwards;
}

#rocket-fin-left.animate {
    animation: finLeftIn 300ms ease-out forwards;
}

#rocket-fin-right.animate {
    animation: finRightIn 300ms ease-out forwards;
}

#rocket-flame.animate {
    animation: flameIn 300ms ease-out forwards;
}

#speed-lines.animate line {
    animation: speedLinesDraw 400ms ease-out forwards;
}

@keyframes rocketBodyIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes finLeftIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes flameIn {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes speedLinesDraw {
    from { stroke-dashoffset: 30; }
    to { stroke-dashoffset: 0; }
}

/* Logotype */
#logotype {
    position: relative;
    z-index: 2;
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4.5vw, 56px);
    letter-spacing: 0.02em;
    color: #F8F8F8;
    -webkit-text-stroke: 2px #1A1A1A;
    text-stroke: 2px #1A1A1A;
    paint-order: stroke fill;
    opacity: 0;
    transform: translateY(-20px);
}

#logotype.animate {
    animation: logotypeBounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

#logotype .biz {
    color: #D4A040;
    -webkit-text-stroke: 2px #1A1A1A;
}

#tagline {
    position: relative;
    z-index: 2;
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(14px, 2vw, 22px);
    color: #1A1A1A;
    margin-top: 8px;
    opacity: 0;
}

#tagline.animate {
    animation: fadeIn 500ms ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   SECTION 2: Card Grid — Business Listings
   ========================================================================== */
#directory {
    position: relative;
    padding: 80px 5% 80px;
    background: #F8F8F8;
}

#directory .section-title {
    color: #1A1A1A;
    -webkit-text-stroke: 0;
    text-stroke: 0;
}

#card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.biz-card {
    background: #F8F8F8;
    border: 3px solid #1A1A1A;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 5px 5px 0 #1A1A1A;
    transform: scale(1.1);
    opacity: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.biz-card.animate {
    animation: cardStamp 100ms ease-in forwards;
}

@keyframes cardStamp {
    from {
        transform: scale(1.1);
        opacity: 0;
        box-shadow: 0 0 0 #1A1A1A;
    }
    to {
        transform: scale(1);
        opacity: 1;
        box-shadow: 5px 5px 0 #1A1A1A;
    }
}

.biz-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 8px 8px 0 #1A1A1A;
}

.card-header {
    padding: 12px 16px;
    position: relative;
}

.card-header.blue { background: #4060A0; }
.card-header.green { background: #40A060; }
.card-header.magenta { background: #A040A0; }
.card-header.gold { background: #D4A040; }
.card-header.red { background: #D04040; }

.card-category {
    font-family: 'Permanent Marker', cursive;
    font-size: 14px;
    color: #F8F8F8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-body {
    padding: 20px 16px;
}

.card-biz-name {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1A1A1A;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.card-location {
    font-family: 'Permanent Marker', cursive;
    font-size: 13px;
    color: #4060A0;
    margin-bottom: 10px;
}

.card-desc {
    font-size: 14px;
    color: #1A1A1A;
    line-height: 1.6;
}

/* Ben-Day dot pattern on alternating cards */
.biz-card:nth-child(odd) .card-body {
    background: radial-gradient(circle, #E0E0D8 1px, transparent 1px);
    background-size: 6px 6px;
}

/* ==========================================================================
   SECTION 3: Featured Business Spotlight
   ========================================================================== */
#spotlight {
    position: relative;
    padding: 80px 5%;
    overflow: hidden;
    background: #1A1A1A;
}

.ben-day-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(224, 224, 216, 0.1) 1.5px, transparent 1.5px);
    background-size: 8px 8px;
    z-index: 0;
}

.spotlight-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* Speech bubble */
.speech-bubble {
    background: #F8F8F8;
    border: 3px solid #1A1A1A;
    border-radius: 20px;
    padding: 24px 32px;
    position: relative;
    box-shadow: 4px 4px 0 #1A1A1A;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 18px solid #F8F8F8;
    filter: drop-shadow(2px 2px 0 #1A1A1A);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 39px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #1A1A1A;
}

.featured-bubble {
    max-width: 600px;
    margin-bottom: 40px;
}

.spotlight-title {
    font-family: 'Permanent Marker', cursive;
    font-size: 16px;
    color: #A040A0;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.spotlight-biz-name {
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 3vw, 36px);
    color: #1A1A1A;
    -webkit-text-stroke: 1px #1A1A1A;
    letter-spacing: 0.02em;
}

.spotlight-tagline {
    font-family: 'Permanent Marker', cursive;
    font-size: 15px;
    color: #D04040;
    margin-top: 8px;
}

.spotlight-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.spotlight-illustration svg {
    width: 100%;
    height: auto;
    background: #F8F8F8;
    border: 3px solid #1A1A1A;
    border-radius: 4px;
    box-shadow: 5px 5px 0 #4060A0;
}

.spotlight-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-bubble {
    border-radius: 16px;
    padding: 18px 22px;
}

.detail-bubble::after {
    left: auto;
    right: 40px;
}

.detail-bubble::before {
    left: auto;
    right: 39px;
}

.detail-bubble p {
    font-size: 15px;
    color: #1A1A1A;
    line-height: 1.6;
}

.detail-bubble strong {
    font-weight: 700;
    color: #D04040;
}

.diagonal-stripe-accent {
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(
        -45deg,
        #D4A040,
        #D4A040 8px,
        #1A1A1A 8px,
        #1A1A1A 10px,
        #D04040 10px,
        #D04040 18px,
        #1A1A1A 18px,
        #1A1A1A 20px
    );
    border-radius: 4px;
}

/* ==========================================================================
   SECTION 4: Trade Routes — Solar System Diagram
   ========================================================================== */
#trade-routes {
    position: relative;
    padding: 80px 5%;
    background: #F8F8F8;
    overflow: hidden;
}

#trade-routes .section-title {
    color: #1A1A1A;
    -webkit-text-stroke: 0;
    text-stroke: 0;
}

#solar-system-container {
    max-width: 900px;
    margin: 0 auto;
    background: #1A1A1A;
    border: 3px solid #1A1A1A;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 6px 6px 0 #4060A0;
    overflow: hidden;
}

#solar-system {
    width: 100%;
    height: auto;
    display: block;
}

/* Planets */
.planet {
    opacity: 0;
    transform-origin: center center;
}

.planet.animate {
    animation: planetPop 300ms ease-out forwards;
}

@keyframes planetPop {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

.planet-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 13px;
    fill: #F8F8F8;
}

.small-label {
    font-size: 10px;
}

/* Trade routes */
.trade-route {
    stroke-dasharray: 8, 4;
    stroke-dashoffset: 1000;
    opacity: 0;
}

.trade-route.animate {
    animation: routeDraw 600ms ease-out forwards;
}

@keyframes routeDraw {
    from {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Route pulse animation */
.trade-route.animate {
    animation: routeDraw 600ms ease-out forwards, routePulse 3s ease-in-out 600ms infinite;
}

@keyframes routePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Flow dots */
.flow-dot {
    fill: #F8F8F8;
    r: 3;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#main-footer {
    position: relative;
    padding: 40px 5%;
    overflow: hidden;
}

.footer-aurora {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 180deg,
        rgba(64, 96, 160, 0.5),
        rgba(64, 160, 96, 0.5),
        rgba(160, 64, 160, 0.5),
        rgba(212, 160, 64, 0.5),
        rgba(64, 96, 160, 0.5)
    );
    animation: auroraRotate 30s linear infinite;
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.pop-btn {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #1A1A1A;
    background: #F8F8F8;
    border: 3px solid #1A1A1A;
    border-radius: 4px;
    padding: 10px 22px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #1A1A1A;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0.02em;
}

.pop-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1A1A1A;
}

.pop-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #1A1A1A;
}

.footer-copy {
    font-family: 'Permanent Marker', cursive;
    font-size: 13px;
    color: #1A1A1A;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .alien-plant {
        display: none;
    }

    #card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .spotlight-panel {
        grid-template-columns: 1fr;
    }

    #solar-system-container {
        padding: 10px;
    }

    .footer-nav {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    #logotype {
        font-size: 28px;
    }

    .biz-card {
        box-shadow: 3px 3px 0 #1A1A1A;
    }
}