/* Tango Discogs — landing page ("Coming soon")
   Figma: Tango Discogs app / Coming soon (node 2891:15829), breakpoints 390 / 768 / 1280.
   Mobile-first. Two breakpoints: 768 (tablet) and 1024 (desktop, layout changes shape).
   Fonts are the same Wotfard webfonts the app ships in public/assets/fonts/Wotfard/. */

@font-face {
    font-family: 'Wotfard';
    src: url('fonts/wotfard-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wotfard';
    src: url('fonts/wotfard-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wotfard';
    src: url('fonts/wotfard-semibold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --purple: #c161bd;
    --ink: #2d222c;
    --text: #272127;
    --muted: #92949c;
    --icon-bg: #f18d8d;

    /* Per-breakpoint sizing knobs. The logo and app icon derive every other
       dimension from these, so a breakpoint only sets the two widths. */
    --logo-w: 180px;
    --mockups-w: 270px;
    --icon-size: 48px;
    /* The banner's ring artwork is sized off the banner's own height (300 / 200
       / 125 in the design), not its width — see .banner__ring. */
    --ring-unit: 125px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: 'Wotfard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    /* The logo circle bleeds off the top edge by design; nothing may bleed sideways. */
    overflow-x: hidden;
    /* On a viewport taller than the page, the leftover space below the footer
       would otherwise show the body's white. The footer grows into it instead,
       so the page ends in the dark rather than in a white band. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hero,
.banner {
    flex-shrink: 0;
}

img {
    max-width: 100%;
}

/* ---------------------------------------------------------------- hero --- */

.hero {
    background: #fff;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 24px 48px;
}

/* The wordmark, its inner strokes and the drop shadow composed as one export.
   Figma renders the export 7.5px wider on each side and 9.5px taller than the
   280 x 200 frame (the shadow's bleed), and it is opaque white rather than
   transparent — which is fine here and only here, because the logo always sits
   on the white hero. Ratios of --logo-w, so one rule serves all breakpoints. */
.logo {
    position: relative;
    flex-shrink: 0;
    width: var(--logo-w);
    height: calc(var(--logo-w) * 0.714286);  /* 200 / 280 */
}

.logo img {
    position: absolute;
    top: 0;
    left: calc(var(--logo-w) * -0.026786);   /* -7.5 / 280 */
    width: calc(var(--logo-w) * 1.053571);   /*  295 / 280 */
    height: calc(var(--logo-w) * 0.748214);  /* 209.5 / 280 */
    max-width: none;
}

/* The two overlapping phones, one 324 x 383 image at 3x. NOT Figma's frame
   export: that bakes an opaque white background in, which shows as a white
   block where the phones spill onto the purple banner on desktop. This is the
   two transparent source renders recomposited to match the frame (mean
   difference 3.2/255 against Figma's own render), then cropped to the phones
   themselves so --mockups-w is the width the design specifies rather than the
   width of a box with invisible padding. Same proportions at every breakpoint,
   so only the width changes. */
.mockups {
    flex-shrink: 0;
    width: var(--mockups-w);
}

.mockups img {
    display: block;
    width: 100%;
    height: auto;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
}

.brand__eyebrow {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.brand__title {
    margin: 0;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    color: var(--text);
}

.brand__lede {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--text);
}

/* -------------------------------------------------------------- banner --- */

.banner {
    position: relative;
    overflow: hidden;
    background: var(--purple);
    padding: 48px 24px;
}

/* Three concentric circles centred on the banner, their centres far above it,
   so only the bottom of each arc sweeps through the band. Built in CSS rather
   than shipped as the exported bitmap: the banner is full-bleed at every width,
   and a bitmap would stretch. Geometry is straight from Figma, expressed in
   --ring-unit (the banner's design height) — the artwork scales with the
   banner's height, which is what makes the arcs keep their curvature. */
.banner__rings {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.banner__ring {
    position: absolute;
    left: 50%;
    border-radius: 50%;
}

.banner__ring--1 {
    width: calc(var(--ring-unit) * 6.256667);
    height: calc(var(--ring-unit) * 6.256667);
    margin-left: calc(var(--ring-unit) * -3.128333);
    top: calc(var(--ring-unit) * -4.776667);
    background: #a1559e;
}

.banner__ring--2 {
    width: calc(var(--ring-unit) * 5.76);
    height: calc(var(--ring-unit) * 5.763333);
    margin-left: calc(var(--ring-unit) * -2.88);
    top: calc(var(--ring-unit) * -4.52);
    background: #7c477a;
}

.banner__ring--3 {
    width: calc(var(--ring-unit) * 5.246667);
    height: calc(var(--ring-unit) * 5.25);
    margin-left: calc(var(--ring-unit) * -2.623333);
    top: calc(var(--ring-unit) * -4.243333);
    background: #643e62;
}

.banner__text {
    position: relative;
    margin: 0;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
}

/* -------------------------------------------------------------- footer --- */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--ink);
    padding: 48px 24px;
    /* Grow, never shrink: the footer's own content keeps its designed spacing
       at the top and the extra height is just more dark. */
    flex: 1 0 auto;
}

.app-icon {
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: calc(var(--icon-size) * 0.2167);
    background: var(--icon-bg);
    overflow: hidden;
}

.app-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.credit {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: var(--muted);
}

.credit__heart {
    /* Keep the emoji in colour even inside the muted grey line. */
    color: initial;
}

/* ------------------------------------------------------ tablet (>=768) --- */

@media (min-width: 768px) {
    :root {
        --logo-w: 200px;
        --mockups-w: 324px;
        --icon-size: 54px;
        --ring-unit: 200px;
    }

    .hero__inner {
        gap: 48px;
        padding: 0 48px 64px;
    }

    .brand {
        gap: 16px;
    }

    .brand__eyebrow {
        font-size: 14px;
        letter-spacing: 1.4px;
    }

    .brand__title {
        font-size: 36px;
        line-height: 44px;
    }

    .brand__lede {
        font-size: 16px;
        line-height: 24px;
        max-width: 540px;
    }

    .banner {
        padding: 80px 48px;
    }

    .banner__text {
        font-size: 32px;
        line-height: 40px;
    }

    .footer {
        gap: 32px;
        padding: 64px 48px;
    }

    .credit {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ----------------------------------------------------- desktop (>=1152) ---
   The layout changes shape rather than scaling: a centred 960 container, the
   headline block on the left, the logo centred at the top of the hero, and the
   phone mockups absolutely placed so they spill out of the hero and overlap the
   purple banner. The hero keeps overflow visible so that spill is not clipped.

   1152 rather than 1024: side by side, the 408px headline and the 360px
   mockups need the full 960 container plus its 64px gutters to keep the 64px
   gap the design has between them. Below that the tablet stack reads better
   than a cramped two-column. */

@media (min-width: 1152px) {
    :root {
        --logo-w: 280px;
        --mockups-w: 360px;
        --icon-size: 60px;
        --ring-unit: 300px;
    }

    .hero__inner {
        position: relative;
        display: block;
        width: min(960px, 100% - 96px);
        min-height: 599px;
        margin: 0 auto;
        padding: 0;
    }

    .logo {
        position: absolute;
        top: 0;
        left: calc(50% - 20px);
        transform: translateX(-50%);
    }

    /* Anchored so the phones straddle the hero/banner seam exactly as designed:
       they start at y=194 and their bottoms cross ~13px onto the purple. */
    .mockups {
        position: absolute;
        top: 194px;
        right: 64px;
    }

    .brand {
        position: absolute;
        top: 213px;
        left: 64px;
        width: 408px;
        align-items: flex-start;
        text-align: left;
        gap: 24px;
    }

    /* The eyebrow and headline stay 12px apart; the lede sits 24px below both. */
    .brand__eyebrow {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: -12px;
    }

    .brand__title {
        font-size: 48px;
        line-height: 52px;
    }

    .brand__lede {
        font-size: 16px;
        line-height: 24px;
        max-width: none;
    }

    .banner {
        padding: 128px 64px;
    }

    .banner__text {
        font-size: 36px;
        line-height: 44px;
    }

    .footer {
        gap: 48px;
        padding: 64px 48px;
    }

    .credit {
        font-size: 16px;
        line-height: 24px;
    }
}