/*
 * Twinkle Lights: home page layout. Loaded after base.css, together with lights.css.
 *
 * Layers: the body's night sky, then the snow canvas (fixed to the window, behind the text),
 * then the content, then the string of lights around the whole page (scrolls with it, never
 * catching clicks). The content keeps clear of the bulbs with extra padding, so no bulb ever
 * sits on text.
 */

/* =========================================================================
   Decoration layers
   ========================================================================= */

.snow {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.home { position: relative; }

.page-lights {
    --bulb-length: 22px;
    --bulb-spacing: 2.3;
    position: absolute; inset: 0; z-index: 2;
}
/* The halos of the edge bulbs must not widen the page. */
.home .page-lights { overflow: clip; }

.home .wrap {
    position: relative; z-index: 1;
    padding-inline: max(var(--page-pad), 52px);
    padding-top: 30px;
    padding-bottom: 36px;
}

@media (max-width: 40rem) {
    .page-lights { --bulb-length: 15px; }
    .home .wrap { padding-inline: 42px; padding-top: 22px; padding-bottom: 26px; }
    .screen-strand--frame { --bulb-length: 8px; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero { padding-block: clamp(1.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem); text-align: center; }
.hero h1 { margin-bottom: 0.2em; text-shadow: 0 0 28px rgb(255 211 107 / 0.35); }
.hero p { margin-inline: auto; }
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--gold); }

/* Apple's "Download on the Mac App Store" badge, unaltered: no frame, shadow or hover effect;
   the whole badge is the link. 48 px high, a quarter of that as clear space on every side. */
.cta { margin-top: 1.75rem; }
.store-badge { display: inline-block; padding: 12px; }
.store-badge img { display: block; width: auto; height: 3rem; }

/* =========================================================================
   Scenes: two little desks showing the two layouts
   ========================================================================= */

.scenes {
    display: grid; gap: 2rem;
    margin-block: 1rem 3.5rem;
}
@media (min-width: 46rem) {
    .scenes { grid-template-columns: 1fr 1.6fr; align-items: end; }
}

.scene { margin: 0; }
.scene figcaption { margin-top: 0.9rem; color: var(--frost); font-size: 0.95rem; text-align: center; }
.scene figcaption strong { color: var(--snow); }

.desk { --menubar: 9px; position: relative; }
.desk--two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.screen {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 3px solid #2A3142;
    border-radius: 6px;
    background:
        radial-gradient(ellipse 80% 55% at 70% 110%, rgb(120 90 170 / 0.55), transparent),
        linear-gradient(165deg, #2B4580, #18264A 60%, #231D45);
}

/* The menu bar, with a tiny lit bulb where the app's icon sits. */
.menubar {
    height: var(--menubar);
    background: rgb(255 255 255 / 0.2);
    border-radius: 3px 3px 0 0;
    position: relative;
}
.menubar::after {
    content: ""; position: absolute; right: 18%; top: 2px;
    width: 4px; height: 5px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: var(--bulb-yellow);
}

.screen-strand {
    --bulb-length: 11px;
    --bulb-spacing: 2.2;
    position: absolute; left: 0; right: 0; top: var(--menubar); height: 60%;
}
.screen-strand--frame {
    --bulb-spacing: 1.9;
    top: calc(var(--menubar) + 3px); bottom: 3px; left: 3px; right: 3px; height: auto;
}

/* =========================================================================
   Features
   ========================================================================= */

.features { margin-bottom: 3.5rem; }
.features h2 { text-align: center; margin-bottom: 1.5rem; }
.features ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.25rem;
}
@media (min-width: 46rem) {
    .features ul { grid-template-columns: 1fr 1fr; }
}
.features li {
    position: relative;
    background: rgb(19 34 61 / 0.82);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 0.5rem 3rem;
}
.features h3 { margin-bottom: 0.35em; }

/* A small lit bulb marks each item, one classic color each. */
.features li::before {
    content: ""; position: absolute; left: 1.15rem; top: 1.45rem;
    width: 0.8rem; height: 1.1rem;
    border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
    background: var(--dot);
    box-shadow: 0 0 12px 2px var(--dot);
}
.features li:nth-child(1) { --dot: var(--bulb-red); }
.features li:nth-child(2) { --dot: var(--bulb-green); }
.features li:nth-child(3) { --dot: var(--bulb-blue); }
.features li:nth-child(4) { --dot: var(--bulb-orange); }