/* ── Release landing page ────────────────────────────────────────────────── */
/* Pixel-precise design tuned for iPhone SE (375×667).
   On larger screens the 315×667 card stays the same and is centered.
   Geist weights used: 450 = "regular", 700 = "bold". */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

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

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: "Geist", sans-serif;
    font-weight: 450;
    color: #4d453d;
    background: #b3aba0 url("../backgrounds/clouds.webp") center center / cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ── 30px frame around the card (matches main-site frame styling) ─────── */
/* Outer wrapper: 30px band of #7c7164 around the card. The card itself
   gets a 2px #595147 border, mirroring #frame-inner on the main site. */
.release-frame {
    display: contents; /* invisible pass-through wrapper */
}

/* ── The card ───────────────────────────────────────────────── */
/* 315×667, centered. Fixed size — designed for iPhone SE. On bigger screens
   it stays the same; on smaller screens it scales down width-wise only. */
.release-card {
    position: relative;
    width: 315px;
    /* Height + cover size are driven by --card-height and --cover-size,
       set by JS so the layout shrinks the artwork before scaling everything. */
    height: var(--card-height, 667px);
    background: #dfdcd8;
    border: 2px solid #595147;
    border-radius: 5px;
    padding: 30px 32.5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Cover art (250×250 by default; resized via --cover-size on small screens) ─ */
.release-cover {
    position: relative;
    width: var(--cover-size, 250px);
    height: var(--cover-size, 250px);
    border-radius: 5px;
    overflow: hidden;
    align-self: center;
    flex-shrink: 0;
}
.release-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

/* ── Floating "OUT 15/05!" badge (85×25) ────────────────────────────────── */
/* Bounces inside an explicit 315×330 region anchored at the top of the
   card. Inside that region the badge's outer walls are clamped to:
     X: 0 → 226   (region width 311 inside the 2px border  − 85 badge)
     Y: 0 → 301   (region height 326 inside the 2px border − 25 badge, at default cover size)
   The Y max shrinks proportionally with --cover-size via JS-injected
   keyframes (#badge-keyframes <style> tag). Each keyframe lands on one of
   those four walls so the badge visibly "bounces" — never overshoots,
   never stops mid-air. The CSS keyframes below are the initial/fallback
   values (cover at full 250px). JS overwrites them immediately on load. */
.release-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 85px;
    height: 25px;
    background: #4d453d;
    color: #dfdcd8;
    font-family: "Geist", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 5;
    pointer-events: none;
    will-change: transform;
    animation: badge-drift 36s linear infinite;
}
.release-badge[hidden] { display: none; }

/* Path (in order, each point sits on a wall of the 226×301 box):
     A (0,   0)   top-left corner
     B (226, 100) right wall
     C (140, 301) bottom wall
     D (0,   240) left wall
     E (130, 0)   top wall
     F (226, 280) right wall
     G (60,  301) bottom wall
     ↩ back to A
   Segment lengths → percentages: 14.9 / 28.0 / 37.2 / 53.6 / 71.5 / 81.5 / 100. */
@keyframes badge-drift {
    0%     { transform: translate(  0px,   0px); }
    14.9%  { transform: translate(226px, 100px); }
    28.0%  { transform: translate(140px, 301px); }
    37.2%  { transform: translate(  0px, 240px); }
    53.6%  { transform: translate(130px,   0px); }
    71.5%  { transform: translate(226px, 280px); }
    81.5%  { transform: translate( 60px, 301px); }
    100%   { transform: translate(  0px,   0px); }
}

@media (prefers-reduced-motion: reduce) {
    .release-badge {
        animation: none;
        transform: translate(220px, -8px);
    }
}

/* ── Title + artist ──────────────────────────────────────────────────────── */
.release-title {
    margin-top: 5px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #4d453d;
    text-align: center;
}
.release-artist {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.1;
    color: #4d453d;
    text-align: center;
}

/* ── Countdown ───────────────────────────────────────────────────────────── */
.release-countdown {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 250px;
    align-self: center;
    text-align: center;
}
.release-countdown[hidden] { display: none; }
.cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.cd-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #4d453d;
}
.cd-label {
    font-size: 8px;
    font-weight: 450;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4d453d;
    line-height: 1;
}

/* "Out now" hero replaces countdown post-release */
.release-out-now {
    margin-top: 12px;
    width: 250px;
    align-self: center;
    background: #4d453d;
    color: #dfdcd8;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
}
.release-out-now[hidden] { display: none; }

/* ── Notify form ─────────────────────────────────────────────────────────── */
.notify-label {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #4d453d;
    text-align: center;
    line-height: 1.1;
}
.notify-label[hidden] { display: none; }

.notify-form {
    margin-top: 10px;
    width: 250px;
    align-self: center;
    position: relative;
}
.notify-form[hidden] { display: none; }
.notify-row {
    display: flex;
    gap: 5px;
    width: 100%;
    position: relative;
}
.notify-input {
    width: 172.5px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #4d453d;
    border-radius: 5px;
    background: #dfdcd8;
    font-family: "Geist", sans-serif;
    font-style: italic;
    font-weight: 450;
    /* Match the "Notify me" submit button (13px). The card-level transform
       scales this down for visual fidelity, and a touch-device override
       below bumps it back to 16px to prevent iOS focus-zoom. */
    font-size: 13px;
    color: #4d453d;
    outline: none;
}
.notify-input::placeholder {
    color: #4d453d;
    opacity: 0.65;
    font-style: italic;
}
.notify-input:hover {
    background: #f0ede9;
}
.notify-input:focus {
    background: #f0ede9;
}
.notify-submit {
    width: 72.5px;
    height: 35px;
    background: #4d453d;
    color: #dfdcd8;
    border: 1px solid #4d453d;
    border-radius: 5px;
    font-family: "Geist", sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
    transform-origin: center;
}
.notify-submit:hover {
    background: #595147;
    transform: scale(1.04);
}
.notify-submit:disabled {
    opacity: 0.5;
    cursor: default;
}
/* Honeypot */
.notify-hp {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.notify-status {
    margin-top: 4px;
    font-size: 11px;
    color: #4d453d;
    text-align: center;
    min-height: 0;
    line-height: 1.2;
}
.notify-status:empty { display: none; }
.notify-status.error { color: #b04040; }
.notify-status.success { font-weight: 700; }

/* Success pop-up: absolutely overlays the countdown + notify-label area */
.notify-success-pop {
    position: absolute;
    left: 0;
    right: 0;
    background: #dfdcd8;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #4d453d;
    padding: 8px 32.5px;
    z-index: 7;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    line-height: 1.3;
}
.notify-success-pop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Custom validation tooltip */
.notify-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #dfdcd8;
    border: 1px solid #4d453d;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    color: #4d453d;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.notify-tooltip::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    bottom: 100%;
    left: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #4d453d;
}
.notify-tooltip::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    bottom: calc(100% - 1px);
    left: 13px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #dfdcd8;
}

/* ── Streaming service buttons ───────────────────────────────────────────── */
/* 250×35 row: 30×30 icon + name (regular #4d453d 13px) + 70×30 follow pill */
.service-list {
    margin-top: 5px;
    width: 250px;
    align-self: center;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.service-link {
    display: flex;
    align-items: center;
    width: 250px;
    height: 35px;
    border: 1px solid #4d453d;
    border-radius: 5px;
    background: #dfdcd8;
    color: #4d453d;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
    transition: background 0.12s ease, transform 0.12s ease;
    transform-origin: center;
}
.service-link:hover {
    background: #f0ede9;
    transform: scale(1.025);
}
.service-icon {
    width: 30px;
    height: 30px;
    margin-left: 2px;
    flex-shrink: 0;
    object-fit: contain;
}
.service-name {
    flex: 1;
    padding-left: 8px;
    font-family: "Geist", sans-serif;
    font-weight: 450;
    font-size: 13px;
    color: #4d453d;
    text-align: left;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.service-action {
    width: 70px;
    height: 30px;
    margin-right: 1.5px;
    background: #4d453d;
    color: #dfdcd8;
    border-radius: 5px;
    font-family: "Geist", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.08s ease;
}
.service-link:hover .service-action {
    background: #595147;
}

/* ── Responsive scaling ──────────────────────────────────────────────────── */
/* The card is built at a fixed 315×667 design size. JS computes a uniform
   scale factor (--scale) and we apply it via transform so every element
   keeps its exact relative size and position, no matter the viewport.
   transform-origin: top center → the card grows downward from a centered
   anchor at the top of its layout box.

   When the card's HEIGHT becomes the limiting axis, JS adds .fills-height
   so the top/bottom borders vanish (the card visually touches the top and
   bottom of the browser window). */
.release-card {
    --scale: 1;
    /* Anchor at viewport center; scale uniformly. Using position: fixed
       means the scale transform never affects document flow, so we don't
       need overflow: hidden on body and the card is always visually
       centered, no matter the scale factor. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    transform-origin: center center;
}
.release-card.fills-height {
    border-top: none;
    border-bottom: none;
    border-radius: 0;
}

/* Prevent iOS Safari from zooming the page when the email input gains focus.
   We keep font-size at 13px (matching all other elements so they scale
   proportionally) and instead suppress the auto-zoom via a viewport meta
   update in page.js (focus → maximum-scale=1, blur → restore). */

/* Inline span used in the notify-status success message to keep the title
   on a single line ("Something So Suite" never breaks across two lines). */
.nowrap { white-space: nowrap; }

/* ── Share-link icon button (top-right corner) ───────────────────── */
/* Two stacked icons (default + copied); we toggle which one is visible on
   click. The button itself is transparent — the icons supply the look. */
.release-share {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 35px;
    height: 35px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 6;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    transition: transform 0.12s ease, filter 0.12s ease;
    transform-origin: center;
}
.release-share .share-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.release-share .share-icon-copied { opacity: 0; }
.release-share.copied .share-icon-default { opacity: 0; }
.release-share.copied .share-icon-copied  { opacity: 1; }
.release-share:hover { transform: scale(1.08); }

@keyframes share-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}
.release-share.spinning {
    animation: share-spin 0.65s ease-in-out;
}

/* "Link copied" toast — styled like the OUT 15/05 badge, sits just below
   the share button and pops above all other layers. Anchored to the same
   right edge as the share button (right: 18px) so on narrow phones it
   stays fully inside the viewport instead of overflowing. */
.release-toast {
    position: fixed;
    top: 60px;
    right: 18px;
    /* Cap width so it can never overflow the viewport on tiny screens. */
    max-width: calc(100vw - 36px);
    transform: translateY(-4px);
    height: 25px;
    padding: 0 12px;
    background: #4d453d;
    color: #dfdcd8;
    font-family: "Geist", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
    white-space: nowrap;
}
.release-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Back-to-main-site link (bottom of the card, left-aligned, no box) ─── */
.release-back {
    margin-top: auto;
    align-self: flex-start;
    padding: 5px 0 0 0;
    font-family: "Geist", sans-serif;
    font-weight: 450;
    font-size: 11px;
    color: #4d453d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.release-back:hover { opacity: 0.7; }

/* (Smaller-than-iPhone-SE-width fallback removed: the JS scale transform
   now handles every viewport uniformly — the 315×667 design is preserved
   and only its visual size changes.) */