/* ==========================================================================
   GOONS · Homepage
   Homepage-only blocks, built on the /play design system (play.css owns the
   tokens, the containers, the cards and the buttons - this file only adds
   what the homepage needs on top: hero actions, the instrument lab chrome,
   the pricing table and the SEO prose.)
   ========================================================================== */

/* ---------- Hero ----------------------------------------------------------
   The homepage hero sits on the studio backdrop (assets/img/home-hero-bg.*).
   The photo is chrome, not content: it is masked away from the headline and
   faded to the page background before the seam, so the copy keeps its
   contrast and the section below starts on clean ground. */
.play-page .play-hero {
    position: relative;
    /* Own stacking context: the -1/-2 layers below stay inside the hero and
       paint above the page-wide aurora without escaping it. */
    isolation: isolate;
    padding-bottom: 104px;
}

.play-page .play-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('/assets/img/home-hero-bg.jpg');
    background-image: image-set(
        url('/assets/img/home-hero-bg.webp') type('image/webp'),
        url('/assets/img/home-hero-bg.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    opacity: 0.62;
    /* Hollow out the centre (where the headline lands) and both edges. */
    -webkit-mask-image: radial-gradient(115% 96% at 50% 34%, transparent 0%, rgba(0, 0, 0, 0.5) 44%, #000 72%);
    mask-image: radial-gradient(115% 96% at 50% 34%, transparent 0%, rgba(0, 0, 0, 0.5) 44%, #000 72%);
}

.play-page .play-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* Readability scrim behind the headline block */
        radial-gradient(56% 50% at 50% 40%, rgba(5, 5, 10, 0.88) 0%, rgba(5, 5, 10, 0.55) 52%, transparent 80%),
        /* Under the transparent nav, then out to the page ground at the seam */
        linear-gradient(180deg, rgba(5, 5, 10, 0.88) 0%, rgba(5, 5, 10, 0.2) 20%, rgba(5, 5, 10, 0) 44%, rgba(5, 5, 10, 0.78) 76%, var(--play-bg) 90%, var(--play-bg) 100%);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

/* Trust line - reads as its own row of guarantees, not as button subtext:
   clear of the primary button's glow, mono micro-type like .play-stat span. */
.play-page .play-hero .home-hero-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 26px;
    max-width: none;
    margin: 34px auto 0;
    font-family: var(--play-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--play-faint);
}

.home-hero-note-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.home-hero-note-item::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(107, 255, 158, 0.42);
    background: rgba(107, 255, 158, 0.12)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%236bff9e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
}

/* Seam between the hero and the instrument lab: a hairline that lights up in
   the middle, with a node sitting on it. */
.home-hero-rule {
    position: relative;
    width: min(var(--play-container), 100% - 56px);
    height: 1px;
    margin: 88px auto 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.38) 22%,
        rgba(255, 43, 214, 0.7) 50%,
        rgba(0, 229, 255, 0.38) 78%,
        transparent 100%
    );
}

.home-hero-rule::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--play-bg);
    border: 1px solid rgba(255, 43, 214, 0.65);
    box-shadow: 0 0 14px rgba(255, 43, 214, 0.45);
}

/* ---------- Instrument lab ------------------------------------------------
   The lab keeps its own widget styles (instrument-lab.css) but gives up its
   standalone section chrome: background, scanlines and margins come from the
   play section it now lives in. */
.play-page .instrument-lab {
    padding: 0;
    margin: 0;
    background: none;
    overflow: visible;
}

.play-page .instrument-lab::before,
.play-page .instrument-lab::after {
    display: none;
}

.play-page .instrument-lab-container {
    max-width: var(--play-container);
    padding: 0;
}

.play-page .instrument-lab .section-header {
    margin-bottom: 38px;
}

/* Lab tabs - same language as .play-chip */
.play-page .filter-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    padding: 9px;
    border-radius: 999px;
    border: 1px solid var(--play-border);
    background: var(--play-surface);
}

.play-page .filter-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--play-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
}

.play-page .filter-tab:hover {
    color: var(--play-text);
    border-color: var(--play-border-strong);
}

.play-page .filter-tab.active {
    background: linear-gradient(102deg, rgba(255, 43, 214, 0.18), rgba(0, 229, 255, 0.18));
    border-color: rgba(0, 229, 255, 0.45);
    color: #fff;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.18);
}

/* The lab's own CTAs use .launch-btn - align it with .play-btn--primary */
.play-page .launch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(102deg, var(--play-magenta), var(--play-cyan));
    color: #06060c;
    font-family: var(--play-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.play-page .launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 229, 255, 0.28);
}

/* ---------- Section head with a trailing link ----------------------------- */
.home-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 34px;
}

.home-head-row .play-section-head {
    margin-bottom: 0;
}

.home-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--play-cyan);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.home-inline-link .arrow {
    transition: transform 0.25s ease;
}

.home-inline-link:hover .arrow {
    transform: translateX(5px);
}

.home-filter-bar {
    margin-bottom: 28px;
}

/* ---------- Sample library preview --------------------------------------- */
.home-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 26px;
}

/* ---------- SEO prose ----------------------------------------------------- */
.home-prose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.home-prose-grid article {
    padding: 28px 26px;
    border-radius: var(--play-radius);
    border: 1px solid var(--play-border);
    background: var(--play-surface);
}

.home-prose-grid h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.home-prose-grid p {
    margin: 0;
    color: var(--play-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

/* `.has-banner` (play.css) carries the full-bleed banner treatment, but
   `.home-prose-grid article` outranks a bare class selector, so the padding
   reset has to be restated at this specificity to actually land. */
.home-prose-grid article.has-banner {
    padding-top: 0;
    overflow: hidden;
}

.home-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.home-keywords span,
.home-keywords a {
    padding: 6px 13px;
    border-radius: 8px;
    border: 1px solid var(--play-border);
    background: var(--play-surface);
    color: var(--play-faint);
    font-family: var(--play-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.home-keywords a {
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.home-keywords a:hover {
    border-color: var(--accent-line, rgba(0, 229, 255, 0.32));
    background: var(--accent-soft, rgba(0, 229, 255, 0.14));
    color: var(--play-text);
}

/* ---------- Reviews ------------------------------------------------------- */
/* Each card re-themes --accent from its inline play_theme_vars(), exactly like
   the app cards, so the quotes read as part of the same catalog. */
.home-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}

.home-quote {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 30px 28px;
    border-radius: var(--play-radius);
    border: 1px solid var(--play-border);
    background: var(--play-surface);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.home-quote:hover {
    transform: translateY(-3px);
    border-color: var(--accent-line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.home-quote-head {
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-quote-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    font-size: 24px;
    line-height: 1;
}

/* Portrait : meme gabarit que la pastille emoji, pour que les cartes avec et
   sans photo restent alignees. L'accent de la carte reste visible en liseré. */
.home-quote-avatar--photo {
    display: block;
    overflow: hidden;
    padding: 0;
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.45);
}

.home-quote-avatar--photo img {
    display: block;
    width: 100%;
    height: 100%;
    /* Les portraits fournis n'ont ni le meme cadrage ni le meme ratio. */
    object-fit: cover;
    object-position: center 22%;
}

.home-quote-head b {
    display: block;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.home-quote-head span {
    display: block;
    margin-top: 3px;
    color: var(--accent);
    font-family: var(--play-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Country flag sits inline next to the name, so it must opt out of the
   block/mono/uppercase treatment `.home-quote-head span` applies to the role. */
.home-quote-head b .home-quote-flag {
    display: inline;
    margin: 0 0 0 7px;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: baseline;
}

.home-quote blockquote {
    position: relative;
    margin: 0;
    padding-left: 18px;
    border-left: 2px solid var(--accent-line);
    color: var(--play-muted);
    font-size: 15px;
    line-height: 1.75;
}

.home-quote-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.home-quote-rating span {
    color: var(--accent);
    font-size: 15px;
    letter-spacing: 0.18em;
}

.home-quote-rating small {
    color: var(--play-faint);
    font-family: var(--play-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* ---------- About GOONS --------------------------------------------------- */
.home-about {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
}

.home-about-visual {
    position: relative;
}

/* La scene n'englobe que la platine : les pastilles s'ancrent dessus et ne
   peuvent plus retomber sur le bouton de lecture place en dessous. */
.home-about-stage {
    position: relative;
}

/* ---------- Le socle ------------------------------------------------------ */

.home-about-deck {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 22px;
    border-radius: var(--play-radius);
    border: 1px solid var(--play-border);
    /* Un socle, pas une carte : metal brosse, eclaire par le haut. */
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 42%),
        radial-gradient(120% 90% at 50% -10%, rgba(0, 229, 255, 0.07), transparent 60%),
        linear-gradient(180deg, #14141d 0%, #0a0a11 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -18px 40px rgba(0, 0, 0, 0.55),
        var(--play-shadow);
    /* Le disque se saisit : pas de scroll ni de selection sous le doigt. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.home-about-deck svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ---------- Le disque ----------------------------------------------------- */

.home-about-vinyl {
    transform-origin: 150px 150px;
    animation: home-spin 6s linear infinite;
}

.home-deck-label {
    font-family: var(--play-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    fill: rgba(5, 5, 10, 0.82);
}

.home-deck-label--sub {
    font-size: 6.5px;
    letter-spacing: 0.22em;
    fill: rgba(5, 5, 10, 0.62);
}

/* Le reflet ne tourne pas avec le disque — c'est ce qui trahit un vrai vinyle. */
.home-deck-sheen {
    pointer-events: none;
    mix-blend-mode: screen;
}

.home-deck-strobe {
    opacity: 0.55;
}

/* ---------- Le bras ------------------------------------------------------- */
/* Un bras de lecture ne gigote pas : il derive lentement vers le centre. Il
   reste donc immobile au repos, et ne bouge que quand la platine joue. */

.home-about-arm {
    transform-origin: 266px 58px;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

.home-deck-stylus {
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.9));
    opacity: 0.35;
    transition: opacity 0.25s ease;
}

.home-deck-led {
    opacity: 0.3;
    transition: opacity 0.25s ease;
}

/* Des que le JS prend la main sur la rotation, l'animation decorative doit
   s'effacer : sinon le transform inline et l'animation se battent. */
.home-about-deck.is-live .home-about-vinyl {
    animation: none;
}

.home-about-deck.is-live .home-about-arm {
    animation: home-arm-track 90s linear forwards;
}

.home-about-deck.is-live .home-deck-stylus,
.home-about-deck.is-live .home-deck-led {
    opacity: 1;
}

/* Sous le doigt, l'aiguille tressaute — mais le bras ne balaie pas le disque. */
.home-about-deck.is-scratching .home-about-arm {
    animation: home-arm-jitter 0.16s steps(2, end) infinite;
}

.home-about-deck.is-live {
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -18px 40px rgba(0, 0, 0, 0.55),
        0 0 46px -14px rgba(0, 229, 255, 0.6);
}

/* ---------- Commandes de la platine --------------------------------------- */

.home-about-deck-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Degage la pastille qui deborde de 14px sous le socle. */
    margin-top: 32px;
}

.home-about-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.10);
    color: var(--play-text, #f2f4ff);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.home-about-play:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: rgba(0, 229, 255, 0.75);
    transform: translateY(-1px);
}

.home-about-play:focus-visible {
    outline: 2px solid #00e5ff;
    outline-offset: 3px;
}

.home-about-play-icon {
    width: 0;
    height: 0;
    border-left: 10px solid #00e5ff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.home-about-deck-hint {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--play-muted, rgba(242, 244, 255, 0.55));
}

@keyframes home-spin {
    to { transform: rotate(360deg); }
}

/* La derive du bras vers le centre, a l'echelle d'une face de disque. */
@keyframes home-arm-track {
    from { transform: rotate(0deg); }
    to   { transform: rotate(14deg); }
}

@keyframes home-arm-jitter {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(0.7deg); }
}

@media (prefers-reduced-motion: reduce) {
    .home-about-vinyl,
    .home-about-deck.is-live .home-about-arm,
    .home-about-deck.is-scratching .home-about-arm {
        animation: none;
    }
}

.home-about-chip {
    position: absolute;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--play-border-strong);
    background: rgba(11, 11, 22, 0.92);
    color: var(--play-text);
    font-family: var(--play-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.home-about-chip--top    { top: -14px; right: 14px; color: var(--play-magenta); }
.home-about-chip--bottom { bottom: -14px; left: 14px; color: var(--play-cyan); }

.home-about-bio h3 {
    margin: 0 0 22px;
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.home-about-bio h3 span {
    display: block;
    margin-top: 9px;
    color: var(--play-cyan);
    font-family: var(--play-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-about-bio p {
    margin: 0 0 18px;
    color: var(--play-muted);
    font-size: 15.5px;
    line-height: 1.8;
}

.home-about-bio strong {
    color: var(--play-text);
    font-weight: 650;
}

.home-about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.home-about-highlights li {
    padding: 15px 17px;
    border-radius: var(--play-radius-sm);
    border: 1px solid var(--play-border);
    background: var(--play-surface);
}

.home-about-highlights b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}

.home-about-highlights span {
    display: block;
    margin-top: 5px;
    color: var(--play-faint);
    font-size: 12.5px;
    line-height: 1.5;
}

.home-accreditations {
    margin-top: 46px;
    padding: 34px 30px;
    border-radius: var(--play-radius);
    border: 1px solid var(--play-border);
    background: var(--play-surface);
    text-align: center;
}

.home-accreditations h3 {
    margin: 0 0 22px;
    color: var(--play-muted);
    font-family: var(--play-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-accreditations ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-accreditations li {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--play-border);
    background: var(--play-surface-2);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Newsletter ---------------------------------------------------- */
.home-newsletter {
    padding: 52px 34px;
    border-radius: var(--play-radius);
    border: 1px solid var(--play-border-strong);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(255, 43, 214, 0.14), transparent 62%),
        radial-gradient(70% 110% at 50% 110%, rgba(0, 229, 255, 0.12), transparent 62%),
        var(--play-surface);
    text-align: center;
}

.home-newsletter h2 {
    margin: 18px 0 12px;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 850;
    letter-spacing: -0.025em;
}

.home-newsletter > p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--play-muted);
    font-size: 15.5px;
    line-height: 1.7;
}

.home-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 30px auto 0;
}

.home-newsletter-form input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 15px 20px;
    border-radius: 999px;
    border: 1px solid var(--play-border-strong);
    background: rgba(5, 5, 10, 0.7);
    color: var(--play-text);
    font-family: var(--play-font);
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-newsletter-form input::placeholder { color: var(--play-faint); }

.home-newsletter-form input:focus {
    outline: none;
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.home-newsletter-form button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.home-newsletter-status {
    min-height: 20px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.home-newsletter-status.is-ok    { color: var(--play-lime); }
.home-newsletter-status.is-error { color: #ff7a9c; }

.home-newsletter-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.home-newsletter-perks li {
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--play-border);
    background: var(--play-surface-2);
    color: var(--play-muted);
    font-family: var(--play-mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
}

.home-newsletter-note {
    display: block;
    margin-top: 20px;
    color: var(--play-faint);
    font-size: 12.5px;
}

.home-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 720px) {
    .play-page .play-hero { padding-bottom: 72px; }
    .play-page .play-hero::before { background-position: center 24%; opacity: 0.5; }
    .home-hero-rule { margin-top: 56px; }
    .play-page .play-hero .home-hero-note { gap: 10px 18px; font-size: 10px; letter-spacing: 0.1em; }
    .home-hero-actions .play-btn { width: 100%; }
    .home-head-row { flex-direction: column; align-items: flex-start; }
    .play-page .filter-tabs { width: 100%; }
    .home-newsletter { padding: 40px 22px; }
    .home-newsletter-form .play-btn { width: 100%; }
}

@media (max-width: 980px) {
    .home-about { grid-template-columns: 1fr; gap: 38px; }
    .home-about-visual { max-width: 380px; margin: 0 auto; }
}

/* ---------- Splash loader ------------------------------------------------- */
/* Covers the page until everything is painted. The exit is CSS-driven so a
   broken script can never leave a visitor staring at the mark: the failsafe
   animation dismisses it at 4s, and home.js only makes that happen sooner. */

.play-loader {
    position: fixed;
    inset: 0;
    /* Above the cookie banner (9999) - nothing shows through the splash. */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 43, 214, 0.14), transparent 58%),
        radial-gradient(circle at 50% 64%, rgba(0, 229, 255, 0.13), transparent 62%),
        var(--play-bg);
    transition: opacity 0.45s ease, visibility 0.45s ease;
    animation: playLoaderFailsafe 0.45s ease 4s forwards;
}

.play-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.play-loader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    animation: playLoaderRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.play-loader-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 148px;
    height: 148px;
}

.play-loader-mark svg {
    width: 112px;
    height: 112px;
    display: block;
    filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35));
    animation: playLoaderBreathe 2.6s ease-in-out infinite;
}

/* The full waveform stays dim so the mark reads whole; a bright segment
   scans across it like a signal running through the box. */
.play-loader-wave { opacity: 0.26; }

.play-loader-scan {
    stroke-dasharray: 24 100;
    animation: playLoaderScan 1.9s linear infinite;
}

.play-loader-frame { animation: playLoaderFrame 2.6s ease-in-out infinite; }

/* Speaker-cone rings pushed out by the mark. */
.play-loader-pulse {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 31px;
    border: 1px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: playLoaderPulse 2.6s ease-out infinite;
}

.play-loader-pulse--late { animation-delay: 1.3s; }

.play-loader-wordmark {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.26em;
    color: var(--play-text);
}

.play-loader-wordmark em {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--play-faint);
    margin-left: 8px;
}

/* Level meter standing in for a progress bar. */
.play-loader-eq {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 24px;
}

.play-loader-eq i {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    transform-origin: bottom;
    background: linear-gradient(180deg, var(--play-cyan), var(--play-magenta));
    animation: playLoaderEq 0.95s ease-in-out infinite;
}

.play-loader-eq i:nth-child(1) { animation-delay: 0s;    animation-duration: 0.86s; }
.play-loader-eq i:nth-child(2) { animation-delay: 0.14s; animation-duration: 1.12s; }
.play-loader-eq i:nth-child(3) { animation-delay: 0.28s; animation-duration: 0.74s; }
.play-loader-eq i:nth-child(4) { animation-delay: 0.09s; animation-duration: 1.02s; }
.play-loader-eq i:nth-child(5) { animation-delay: 0.23s; animation-duration: 0.90s; }

.play-loader-status {
    margin: 0;
    font-family: var(--play-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--play-faint);
    animation: playLoaderFade 1.8s ease-in-out infinite;
}

@keyframes playLoaderFailsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes playLoaderRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes playLoaderScan {
    from { stroke-dashoffset: 124; }
    to   { stroke-dashoffset: 0; }
}

@keyframes playLoaderBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

@keyframes playLoaderFrame {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes playLoaderPulse {
    0%        { opacity: 0.55; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes playLoaderEq {
    0%, 100% { transform: scaleY(0.22); }
    50%      { transform: scaleY(1); }
}

@keyframes playLoaderFade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@media (max-width: 480px) {
    .play-loader-mark { width: 108px; height: 108px; }
    .play-loader-mark svg { width: 78px; height: 78px; }
    .play-loader-pulse { width: 78px; height: 78px; border-radius: 22px; }
    .play-loader-wordmark { font-size: 15px; }
}

/* The global reduced-motion rule in play.css collapses every animation to ~0s,
   which would fire the failsafe instantly - so state the still frame here. */
@media (prefers-reduced-motion: reduce) {
    .play-loader-pulse,
    .play-loader-scan { display: none; }
    .play-loader-wave { opacity: 1; }
    .play-loader-eq i { transform: scaleY(0.55); }
}

/* ============================================================
   HOMEPAGE APP CARDS - oversized animated logos
   Scoped to #appGrid so the shared .play-icon used by /play/,
   /guides/ and the landing pages keeps its compact 66px tile.
   Colours come from play_theme_vars() on the card itself.
   ============================================================ */

#appGrid .play-card-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 16px;
}

#appGrid .play-icon {
    width: 132px;
    height: 132px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 32% 26%, var(--accent-soft), transparent 70%),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 30px -8px var(--accent-glow);
}

#appGrid .play-icon svg {
    width: 112px;
    height: 112px;
    filter: drop-shadow(0 0 9px var(--accent-glow));
}

#appGrid .play-card:hover .play-icon {
    transform: scale(1.06) rotate(-2deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 46px var(--accent-glow);
}

#appGrid .play-card:hover .play-icon svg {
    filter: drop-shadow(0 0 16px var(--accent-glow));
}

/* The title block sits under the logo, so let it breathe full width */
#appGrid .play-card-top > div { width: 100%; }
#appGrid .play-card-meta { justify-content: center; }

@media (max-width: 900px) {
    #appGrid .play-icon { width: 118px; height: 118px; border-radius: 27px; }
    #appGrid .play-icon svg { width: 100px; height: 100px; }
}

@media (max-width: 480px) {
    #appGrid .play-icon { width: 104px; height: 104px; border-radius: 24px; }
    #appGrid .play-icon svg { width: 88px; height: 88px; }
}