/*
 * Concert Hall hero overlay, for the PianoMode home page.
 * Extracted verbatim from concert-hall-3d.css (the landing overlay only): the
 * clickable section words (Listen, Learn, Play, Explore) plus the two hero CTAs
 * and their responsive rules and animations. It contains no global reset and no
 * 3D chrome, so the rest of the home page is left untouched. The brand variables
 * are scoped to .pm-home-hero so they cannot leak onto the rest of the page.
 */
.pm-home-hero {
    --pm-gold: #D7BF81;
    --pm-gold-light: #E6D4A8;
    --pm-gold-dark: #BEA86E;
    --pm-black: #000000;
    --pm-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --pm-font-body: 'Montserrat', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ============================================
   HEADER OVERLAY (Landing Hero) — Top-anchored design
   The 3D scene stays fully visible; content floats at top
   ============================================ */
.pm-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    background: linear-gradient(0deg,
        transparent 0%,
        rgba(10, 10, 10, 0.15) 30%,
        rgba(10, 10, 10, 0.55) 65%,
        rgba(10, 10, 10, 0.82) 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    /* Header is NON-STICKY and sits ABOVE this section in normal flow, so
       no top offset is needed; home-hero.css sets its own fluid padding. */
    padding: 2rem 2rem 3rem;
    box-sizing: border-box;
}

/* Tablets */
@media (max-width: 768px) {
    .pm-header-overlay {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

/* Small phones — header is ~100px */
@media (max-width: 480px) {
    .pm-header-overlay {
        padding-top: calc(110px + env(safe-area-inset-top, 0px));
        padding-bottom: 1.5rem;
    }
}

/* Short viewports (Nest Hub 600px, landscape tablets, square-ish) — compact layout */
@media (max-height: 700px) {
    .pm-header-overlay {
        padding-top: calc(100px + env(safe-area-inset-top, 0px));
        padding-bottom: 0.75rem;
        justify-content: center;
    }
    .pm-main-title {
        font-size: clamp(1.4rem, 4.5vw, 2.4rem);
        margin-bottom: 0.3rem;
    }
    .pm-main-title-grid {
        font-size: clamp(1.6rem, 5vw, 2.8rem);
        margin-bottom: 0.3rem;
    }
    .pm-title-sub {
        font-size: 0.55rem;
    }
    .pm-main-subtitle {
        font-size: 0.72rem;
        line-height: 1.4;
        margin-bottom: 0.4rem;
    }
    .pm-hero-cta {
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .pm-cta-secondary {
        margin-top: 0;
    }
}

/* Square-ish aspect ratios (e.g. 1024x1024, iPad square crops) */
@media (max-aspect-ratio: 5/4) and (min-height: 700px) {
    .pm-header-overlay {
        padding-top: calc(150px + env(safe-area-inset-top, 0px));
    }
    .pm-main-title {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }
}

/* Landscape mobile/tablets — enlarged hero, bigger titles */
@media (max-height: 500px) and (orientation: landscape) {
    .pm-header-overlay {
        padding-top: calc(50px + env(safe-area-inset-top, 0px));
        padding-bottom: 1.5rem;
        justify-content: center;
    }
    .pm-main-title {
        font-size: clamp(1.2rem, 4vw, 2rem);
        flex-wrap: nowrap;
        margin-bottom: 0.3rem;
        gap: 0.15em;
    }
    .pm-main-title-grid {
        font-size: clamp(1.4rem, 4.5vw, 2.4rem);
        gap: 0.08em;
        margin-bottom: 0.4rem;
    }
    .pm-title-sub {
        font-size: 0.5rem;
        max-width: 100px;
        line-height: 1.2;
    }
    .pm-title-dot {
        font-size: 0.6em;
    }
    .pm-main-subtitle {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
        line-height: 1.3;
        max-width: 90vw;
    }
    .pm-hero-cta {
        flex-direction: row;
        gap: 0.8rem;
        margin-top: 1.5rem;
    }
    .pm-cta-primary {
        padding: 0.55rem 1.4rem;
        font-size: 0.7rem;
    }
    .pm-cta-secondary {
        margin-top: 0;
        padding: 0.4rem 1.2rem;
    }
    .pm-cta-secondary .pm-cta-explore-text {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }
    .pm-cta-secondary .pm-cta-explore-chevrons {
        display: none;
    }
}

/* Very short landscape (< 400px height — e.g. iPhone SE landscape) */
@media (max-height: 400px) and (orientation: landscape) {
    .pm-header-overlay {
        padding-top: calc(40px + env(safe-area-inset-top, 0px));
        padding-bottom: 1rem;
        justify-content: center;
    }
    .pm-main-title {
        font-size: clamp(1rem, 3.5vw, 1.6rem);
        margin-bottom: 0.2rem;
    }
    .pm-main-title-grid {
        font-size: clamp(1.1rem, 3.5vw, 1.8rem);
        gap: 0.06em;
        margin-bottom: 0.2rem;
    }
    .pm-title-sub {
        font-size: 0.4rem;
        max-width: 80px;
    }
    .pm-title-dot {
        font-size: 0.5em;
    }
    .pm-main-subtitle {
        font-size: 0.55rem;
        margin-bottom: 0.2rem;
    }
    .pm-hero-cta {
        flex-direction: row;
        gap: 0.6rem;
        margin-top: 1rem;
    }
    .pm-cta-primary {
        padding: 0.45rem 1.2rem;
        font-size: 0.6rem;
    }
    .pm-cta-secondary {
        margin-top: 0;
        padding: 0.3rem 1rem;
    }
    .pm-cta-secondary .pm-cta-explore-text {
        font-size: 0.55rem;
        letter-spacing: 2px;
    }
}

/* Portrait short viewports (not landscape) */
@media (max-height: 500px) and (orientation: portrait) {
    .pm-header-overlay {
        padding-top: calc(65px + env(safe-area-inset-top, 0px));
        padding-bottom: 0.5rem;
        justify-content: flex-start;
    }
    .pm-main-title {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
        margin-bottom: 0.3rem;
    }
    .pm-main-subtitle {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
        line-height: 1.3;
    }
    .pm-hero-cta {
        gap: 0.4rem;
        margin-top: 0.6rem;
    }
}

/* Very short portrait (< 400px) */
@media (max-height: 400px) and (orientation: portrait) {
    .pm-header-overlay {
        padding-top: calc(50px + env(safe-area-inset-top, 0px));
        padding-bottom: 0.25rem;
    }
    .pm-main-title {
        font-size: clamp(1rem, 4vw, 1.5rem);
        margin-bottom: 0.2rem;
    }
    .pm-main-subtitle {
        display: none;
    }
    .pm-hero-cta {
        gap: 0.3rem;
        margin-top: 0.4rem;
    }
}

/* Mobile phones portrait (iPhone 17, Pixel, etc. — max-width 480px) */
@media (max-width: 480px) {
    .pm-cta-secondary {
        margin-top: 30px;
    }
    .pm-hero-cta {
        gap: 0.3rem;
        margin-top: 0.5rem;
    }
}

/* Small phones portrait (375x667, 390x844, etc.) — ensure everything fits */
@media (max-width: 480px) and (max-height: 750px) {
    .pm-header-overlay {
        padding-top: calc(130px + env(safe-area-inset-top, 0px));
        padding-bottom: 1rem;
        justify-content: center;
        gap: 0;
    }
    .pm-main-title-grid {
        font-size: clamp(1.6rem, 9vw, 2.8rem);
        gap: 0.05em;
        margin-bottom: 0.5rem;
    }
    .pm-title-sub {
        font-size: 0.48rem;
        max-width: 100px;
        line-height: 1.2;
    }
    .pm-title-dot {
        font-size: clamp(0.7rem, 2vw, 1rem);
    }
    .pm-hero-cta {
        gap: 0.3rem;
        margin-top: 0.5rem;
    }
    .pm-cta-secondary {
        margin-top: 20px;
    }
    .pm-cta-primary {
        padding: 0.5rem 1.4rem;
        font-size: 0.65rem;
    }
}
/* Very small phones (320x568, iPhone SE 1st gen) */
@media (max-width: 380px) and (max-height: 700px) {
    .pm-header-overlay {
        padding-top: calc(140px + env(safe-area-inset-top, 0px));
        justify-content: flex-start;
    }
    .pm-main-title-grid {
        font-size: clamp(1.3rem, 8vw, 2.2rem);
        margin-bottom: 0.3rem;
    }
    .pm-title-sub {
        display: none;
    }
    .pm-cta-secondary {
        margin-top: 15px;
    }
    .pm-cta-secondary .pm-cta-explore-text {
        font-size: 0.7rem;
        letter-spacing: 3px;
    }
}

/* No gold lines - clean design */
.pm-header-overlay::before {
    display: none;
}

.pm-header-overlay::after {
    display: none;
}

.pm-header-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Skip transition on initial page load only — instant visibility */
.pm-header-overlay.visible.pm-no-transition {
    transition: none;
}

.pm-header-overlay.exiting {
    animation: pm-title-exit 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes pm-title-exit {
    0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    60%  { opacity: 0.3; transform: translateY(-10px) scale(1.02); filter: blur(2px); }
    100% { opacity: 0; transform: translateY(-20px) scale(1.04); filter: blur(6px); visibility: hidden; }
}

/* ── Title Grid: each word + its sub-description ── */
.pm-main-title-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.08em;
    margin: 0 0 1.2rem;
    padding: 0 1rem;
    /* Match the original .pm-main-title font size — title words must be LARGE */
    font-family: var(--pm-font-display, 'Montserrat', sans-serif);
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: capitalize;
}
.pm-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.pm-title-sub {
    display: block;
    font-family: var(--pm-font-body, sans-serif);
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    max-width: 190px;
    margin-top: 0.2em;
    text-transform: none;
    /* Gold gradient animation — matches the old description style */
    background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, var(--pm-gold-light, #E8D9A8) 45%, var(--pm-gold, #D7BF81) 55%, rgba(255,255,255,0.55) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pm-sub-gold-shimmer 6s ease-in-out infinite;
}
@keyframes pm-sub-gold-shimmer {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* Keep the dot vertically centered with the title words */
.pm-main-title-grid > .pm-title-dot {
    align-self: center;
    margin-top: -0.3em; /* Offset for sub-descriptions below — visually align with title words */
}

/* Short viewport — hide sub-descriptions */
@media (max-height: 600px) {
    .pm-title-sub { display: none; }
}
/* Landscape mobile — compact */
@media (max-height: 500px) and (orientation: landscape) {
    .pm-title-sub { display: none; }
    .pm-main-title-grid { gap: 0.06em; margin-bottom: 0.4rem; }
}
/* Mobile portrait — stack 2x2 */
@media (max-width: 480px) {
    .pm-main-title-grid {
        gap: 0.3rem 0.15em;
    }
    .pm-title-sub {
        font-size: 0.58rem;
        max-width: 140px;
    }
    .pm-title-dot {
        display: none;
    }
}

.pm-main-title {
    font-family: var(--pm-font-display);
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.12em;
    text-transform: capitalize;
    position: relative;
}

/* Decorative line above title — disabled */
.pm-main-title::before {
    display: none;
}

.pm-title-word {
    display: inline-block;
    /* Visible immediately — no animation, no lag on any connection */
    opacity: 1;
    background: linear-gradient(180deg, #ffffff 0%, #E6D4A8 50%, #D7BF81 100%);
    background-size: 100% 200%;
    background-position: 0% 0%; /* Final white-gold position */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(215, 191, 129, 0.2));
    position: relative;
}

/* Gold serpent trail — light gold stroke with sweeping mask */
.pm-title-word {
    position: relative;
}
.pm-title-word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 240, 180, 0.75);
    paint-order: stroke fill;
    filter: drop-shadow(0 0 5px rgba(255, 235, 160, 0.35));
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%, transparent 38%,
        black 46%, black 54%,
        transparent 62%, transparent 100%);
    -webkit-mask-size: 350% 100%;
    mask-image: linear-gradient(90deg,
        transparent 0%, transparent 38%,
        black 46%, black 54%,
        transparent 62%, transparent 100%);
    mask-size: 350% 100%;
    animation: pm-serpent-trace 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: var(--trail-delay, 0s);
}

/* Sequential delays — each word lit one after another */
/* Works both in old flat layout and new .pm-title-block wrapper */
.pm-title-word:nth-child(1)  { --trail-delay: 0s; }
.pm-title-word:nth-child(3)  { --trail-delay: 1.2s; }
.pm-title-word:nth-child(5)  { --trail-delay: 2.4s; }
.pm-title-word:nth-child(7)  { --trail-delay: 3.6s; }
.pm-title-block:nth-child(1) .pm-title-word { --trail-delay: 0s; }
.pm-title-block:nth-child(3) .pm-title-word { --trail-delay: 1.2s; }
.pm-title-block:nth-child(5) .pm-title-word { --trail-delay: 2.4s; }
.pm-title-block:nth-child(7) .pm-title-word { --trail-delay: 3.6s; }

@keyframes pm-serpent-trace {
    0%   { -webkit-mask-position: 200% center; mask-position: 200% center; opacity: 0; }
    6%   { opacity: 0.9; }
    50%  { -webkit-mask-position: -100% center; mask-position: -100% center; opacity: 0.9; }
    56%  { opacity: 0; }
    100% { -webkit-mask-position: -100% center; mask-position: -100% center; opacity: 0; }
}

.pm-title-dot {
    display: inline-block;
    color: var(--pm-gold, #D7BF81);
    -webkit-text-fill-color: var(--pm-gold, #D7BF81);
    font-family: var(--pm-font-display);
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    margin: 0 0.05em;
    vertical-align: middle;
    position: relative;
    opacity: 1;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(215, 191, 129, 0.4));
}

.pm-main-subtitle {
    max-width: 640px;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.08em;
    margin: 0 auto 1.5rem;
    text-align: center;
    padding: 0 1.5rem;
    opacity: 1;
    position: relative;
    /* Gold serpent on letters: wider bright band, slower sweep */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.75) 30%,
        rgba(240, 225, 170, 0.9) 38%,
        rgba(240, 216, 112, 1) 44%,
        rgba(215, 191, 129, 1) 50%,
        rgba(240, 216, 112, 1) 56%,
        rgba(240, 225, 170, 0.9) 62%,
        rgba(255, 255, 255, 0.75) 70%,
        rgba(255, 255, 255, 0.75) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pm-desc-letter-shimmer 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pm-desc-letter-shimmer {
    0%   { background-position: 100% 0; }
    60%  { background-position: -100% 0; }
    100% { background-position: -100% 0; }
}

.pm-dot {
    color: var(--pm-gold);
    font-size: 1.2em;
}

/* ============================================
   HERO CTA BUTTONS
   ============================================ */
.pm-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 3.5rem;
    pointer-events: auto;
    opacity: 1;
}

/* Always stacked — column layout on all screens */
@media (min-width: 640px) {
    .pm-hero-cta {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
}

.pm-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    font-family: var(--pm-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.pm-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.pm-cta-btn:hover::before {
    left: 100%;
}

/* ============================================
   CONCERT HALL CTA — gold pill, premium cinematic design
   ============================================ */
.pm-cta-primary {
    background: linear-gradient(
        135deg,
        rgba(248, 222, 126, 0.72) 0%,
        rgba(215, 178, 72, 0.68) 45%,
        rgba(188, 148, 42, 0.72) 100%
    );
    color: #FFF5D8;
    font-weight: 700;
    letter-spacing: 3.5px;
    font-size: 0.80rem;
    text-transform: uppercase;
    border: 1.5px solid rgba(248, 222, 126, 0.82);
    border-radius: 50px; /* pill — bord arrondie contemporain */
    padding: 1.1rem 2.8rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 0 0 1px rgba(248, 222, 126, 0.12),
        0 0 55px rgba(215, 178, 72, 0.30),
        0 0 110px rgba(215, 178, 72, 0.12),
        0 6px 28px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 248, 200, 0.50),
        inset 0 -1px 0 rgba(100, 70, 0, 0.25);
    gap: 0.6rem;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pm-cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 245, 180, 0.22) 45%,
        rgba(255, 255, 220, 0.38) 50%,
        rgba(255, 245, 180, 0.22) 55%,
        transparent 80%
    );
    transform: translateX(-130%) skewX(-12deg);
    transition: transform 0.7s ease;
    border-radius: inherit;
}

.pm-cta-primary:hover::before {
    transform: translateX(150%) skewX(-12deg);
}

.pm-cta-primary:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 235, 145, 0.88) 0%,
        rgba(228, 192, 88, 0.85) 45%,
        rgba(200, 160, 55, 0.88) 100%
    );
    border-color: rgba(255, 240, 160, 0.98);
    color: #FFFAE8;
    box-shadow:
        0 0 0 1px rgba(255, 240, 160, 0.18),
        0 0 80px rgba(215, 178, 72, 0.48),
        0 0 160px rgba(215, 178, 72, 0.18),
        0 8px 32px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 252, 210, 0.65),
        inset 0 -1px 0 rgba(100, 70, 0, 0.20);
    transform: translateY(-3px);
    letter-spacing: 4.5px;
}

.pm-cta-primary:active {
    transform: translateY(-1px);
    box-shadow:
        0 0 40px rgba(215, 178, 72, 0.30),
        0 3px 16px rgba(0, 0, 0, 0.50);
}

/* Button loading state — keeps text, adds spinner after arrow */
.pm-cta-primary.pm-cta-loading {
    pointer-events: none;
    position: relative;
    opacity: 0.85;
}
.pm-cta-primary.pm-cta-loading svg.pm-cta-arrow {
    display: none;
}
.pm-cta-primary.pm-cta-loading .pm-cta-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(10, 10, 10, 0.2);
    border-top-color: var(--pm-black, #0a0a0a);
    border-radius: 50%;
    animation: pm-loading-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Arrow icon inside the button */
.pm-cta-primary svg {
    flex-shrink: 0;
    opacity: 0.88;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.pm-cta-primary:hover svg {
    opacity: 1;
}

.pm-cta-primary:hover svg:last-child {
    transform: translateX(5px);
}

/* ============================================
   EXPLORE PIANOMODE CTA — chevron scroll cue, glass pill
   2026-04 REV 2 — Even more visible on laptop, rotating liserai
   emphasized. Background now reads like the pressed/hover state at
   rest, the gold border is thicker, and the conic-gradient trail
   below is boosted in saturation + arc-length.
   ============================================ */
.pm-cta-secondary {
    background:
        linear-gradient(135deg,
            rgba(22, 20, 14, 0.92) 0%,
            rgba(12, 11, 8, 0.95) 50%,
            rgba(22, 20, 14, 0.92) 100%);
    border: 1.5px solid rgba(230, 212, 168, 0.48);
    border-radius: 50px;
    padding: 0.75rem 1.85rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow:
        0 0 0 1px rgba(230, 212, 168, 0.10),
        0 0 36px rgba(215, 178, 72, 0.22),
        0 8px 30px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 248, 200, 0.10);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    /* Pulled in from 140px → 0 because the CTA row already controls
       spacing via gap; the huge margin pushed the second button off
       the bottom of the hero on mobile. */
    margin-top: 0;
    position: relative;
    overflow: visible !important;
}

/* Disable the white sweep effect inherited from .pm-cta-btn */
.pm-cta-secondary::before {
    display: none !important;
}

/* The text label — correct PianoMode gold for consistency */
.pm-cta-secondary .pm-cta-explore-text {
    color: #D7BF81;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.35s ease, text-shadow 0.35s ease;
    display: block;
    text-shadow: 0 0 25px rgba(215, 191, 129, 0.5), 0 0 50px rgba(215, 191, 129, 0.2);
}

/* The double chevron */
.pm-cta-secondary .pm-cta-explore-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: pm-chevron-bounce 2.6s ease-in-out infinite;
}

.pm-cta-secondary .pm-cta-explore-chevrons svg {
    width: 34px;
    height: 16px;
    color: rgba(215, 191, 129, 0.8);
    display: block;
    transition: color 0.35s ease;
}

.pm-cta-secondary .pm-cta-explore-chevrons svg + svg {
    margin-top: -5px;
    opacity: 0.60;
}

.pm-cta-secondary:hover .pm-cta-explore-text {
    color: #E6D4A8;
    text-shadow: 0 0 30px rgba(230, 212, 168, 0.6);
}

.pm-cta-secondary:hover .pm-cta-explore-chevrons svg {
    color: rgba(230, 212, 168, 1);
}

.pm-cta-secondary:hover {
    transform: none;
    box-shadow: none;
}

@keyframes pm-chevron-bounce {
    0%, 100% { transform: translateY(0);   opacity: 1; }
    50%       { transform: translateY(7px); opacity: 0.62; }
}

/* Gold serpent trail around button border — emphasised in 2026-04 REV 2
   so the rotating liserai reads clearly from across the page. Arc widened
   (300deg → 250deg onset), opacity doubled, thickness 1px → 2px. */
.pm-cta-secondary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    padding: 2px;
    background: conic-gradient(
        from var(--pm-trail-angle, 0deg),
        transparent 0deg,
        transparent 250deg,
        rgba(212, 175, 55, 0.32) 285deg,
        rgba(240, 216, 112, 0.68) 320deg,
        rgba(255, 235, 160, 0.92) 340deg,
        rgba(255, 245, 190, 1.00) 350deg,
        rgba(255, 235, 160, 0.92) 358deg,
        rgba(240, 216, 112, 0.68) 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(240, 216, 112, 0.55));
    animation: pm-btn-trail 4.2s linear infinite;
}

@property --pm-trail-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pm-btn-trail {
    from { --pm-trail-angle: 0deg; }
    to   { --pm-trail-angle: 360deg; }
}

/* Legacy: keep .pm-cta-secondary active state clean */
.pm-cta-secondary:active {
    transform: none;
    color: inherit;
}

/* Responsive adjustments for CTA */
@media (max-width: 480px) {
    .pm-hero-cta {
        gap: 0.6rem;
        margin-top: 1.25rem;
    }

    .pm-cta-btn {
        padding: 0.85rem 1.75rem;
        font-size: 0.8125rem;
        width: 100%;
        max-width: 280px;
    }
}

/* Touch devices: keep the CTAs from lifting on a sticky :hover (from 3d.css). */
@media (hover: none) and (pointer: coarse) {
    .pm-cta-btn:hover { transform: none; }
}