/* ==========================================================================
   PIANOMODE — EGYPTIAN CARTOUCHE
   --------------------------------------------------------------------------
   Compact vertical rail pinned to the BOTTOM-RIGHT corner (replaces the
   legacy scroll-to-top button). Three zones stacked:
       [ top   ] Logo  → home
       [ mid   ] Menu  (3 horizontal bars → opens musical staff panel)
       [ bot   ] Arrow → scroll to top
   Behavior:
       • Scroll down  → dims to 5 % opacity (pointer-events stay active).
       • Scroll up    → instantly back to 100 %.
       • prefers-reduced-motion → no dim, static at 100 %.
   Sizing is driven by --pm-cartouche-w so logo / menu bars / arrow share
   the same canonical optical width.
   ========================================================================== */

.pm-cartouche {
    position: fixed;
    right: var(--pm-cartouche-inset);
    bottom: calc(var(--pm-cartouche-inset) + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: none;
    z-index: var(--pm-z-cartouche);
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pm-cartouche-gap);

    width: var(--pm-cartouche-w);
    padding: var(--pm-space-3) 0;

    /* Translucent glass — reveals the page underneath via backdrop-filter */
    background:
        linear-gradient(180deg,
            rgba(18, 18, 22, .55) 0%,
            rgba(10, 10, 12, .62) 50%,
            rgba(18, 18, 22, .55) 100%);
    border: 1px solid rgba(215, 191, 129, .22);
    border-radius: var(--pm-r-pill);
    box-shadow:
        0 14px 48px rgba(0, 0, 0, .55),
        0 4px 18px rgba(215, 191, 129, .10),
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        inset 0 -1px 0 rgba(0, 0, 0, .35);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    opacity: 1;
    transition:
        opacity var(--pm-dur-slow) var(--pm-ease-smooth),
        transform var(--pm-dur-slow) var(--pm-ease-smooth);
    will-change: opacity, transform;
    contain: layout paint;

    /* Prevent iOS long-press callouts and tap-highlight flashes */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Gold gradient hairline border — runs along the pill edge like a jewel setting.
   Uses mask-composite to create a 1px gradient stroke that CSS border cannot. */
.pm-cartouche::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        rgba(230, 212, 168, .55) 0%,
        rgba(215, 191, 129, .18) 35%,
        rgba(215, 191, 129, .05) 50%,
        rgba(215, 191, 129, .18) 65%,
        rgba(230, 212, 168, .55) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .9;
}

/* Soft inner gold halo that breathes — visible at full opacity, fades on dim */
.pm-cartouche::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(215, 191, 129, .12) 0%,
        transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pm-dur) var(--pm-ease);
    z-index: -1;
}
.pm-cartouche:hover::after,
.pm-cartouche:focus-within::after {
    opacity: 1;
}

/* Dimmed state — user is scrolling down, reading content.
   Slightly more visible than before (0.05 → 0.18) so the rail stays
   discoverable without competing with page content. */
.pm-cartouche.is-dim {
    opacity: .18;
}
.pm-cartouche.is-dim:hover,
.pm-cartouche.is-dim:focus-within {
    opacity: 1;
}

/* Entrance — fades in after first paint so it doesn't flicker with SSR */
.pm-cartouche[data-ready="false"] {
    opacity: 0;
    transform: translate(8px, 0);
}

/* --------------------------------------------------------- Shared button */
.pm-cartouche__btn {
    position: relative;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--pm-gold);
    font: inherit;

    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(var(--pm-cartouche-w) - 12px);
    height: calc(var(--pm-cartouche-w) - 12px);
    border-radius: 50%;

    /* Touch behaviour — tap is immediate, no 300ms delay, no blue flash */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    transition:
        background var(--pm-dur) var(--pm-ease),
        color var(--pm-dur) var(--pm-ease),
        transform var(--pm-dur) var(--pm-ease),
        box-shadow var(--pm-dur) var(--pm-ease);
}

.pm-cartouche__btn:hover {
    background: var(--pm-gold-a15);
    color: var(--pm-gold-bright);
    box-shadow: 0 0 0 1px rgba(215, 191, 129, .18);
}

.pm-cartouche__btn:active {
    transform: scale(.92);
}

.pm-cartouche__btn:focus-visible {
    outline: none;
    box-shadow: var(--pm-ring-gold);
}

/* --------------------------------------------------------- Logo slot */
.pm-cartouche__logo {
    width: calc(var(--pm-cartouche-w) - 14px);
    height: calc(var(--pm-cartouche-w) - 14px);
    padding: 2px;
    display: block;
}

.pm-cartouche__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* --------------------------------------------------------- Menu bars */
.pm-cartouche__menu {
    flex-direction: column;
    gap: 5px;
}

/* Menu bar width matches the arrow/logo optical width so the three zones
   share one visual column. */
.pm-cartouche__bar {
    display: block;
    width: calc(var(--pm-cartouche-w) - 24px);
    height: 2px;
    background: var(--pm-gold);
    border-radius: var(--pm-r-xs);
    transition:
        transform var(--pm-dur) var(--pm-ease-smooth),
        background var(--pm-dur) var(--pm-ease),
        width var(--pm-dur) var(--pm-ease);
}

/* Menu open state — morph into a cross */
.pm-cartouche__menu[aria-expanded="true"] .pm-cartouche__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.pm-cartouche__menu[aria-expanded="true"] .pm-cartouche__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.pm-cartouche__menu[aria-expanded="true"] .pm-cartouche__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------- Arrow (scroll-to-top) */
.pm-cartouche__arrow svg {
    width: calc(var(--pm-cartouche-w) - 24px);
    height: calc(var(--pm-cartouche-w) - 24px);
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* The arrow only becomes visible once the user has scrolled past ~60 % of a
   viewport. Before that it stays as a faint dot so the cartouche's bottom
   zone is always visually balanced. */
.pm-cartouche__arrow {
    opacity: .35;
    pointer-events: none;
    transition: opacity var(--pm-dur) var(--pm-ease);
}
.pm-cartouche[data-scrolled="true"] .pm-cartouche__arrow {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------- Touch targets */
/* On touch devices: expand the hit-box without visually enlarging the button
   so iPhone / Android taps land reliably on every zone. Also neutralise
   :hover (it would otherwise stick after a tap on iOS Safari). */
@media (hover: none) and (pointer: coarse) {
    .pm-cartouche__btn {
        width: calc(var(--pm-cartouche-w) - 4px);
        height: calc(var(--pm-cartouche-w) - 4px);
    }
    /* Invisible oversize hit-area (8px halo) so multi-touch / fat-finger
       taps still register reliably. pointer-events auto for the halo, none
       for the pill background so nothing else gets stolen. */
    .pm-cartouche__btn::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: inherit;
    }
    /* Hover background should NOT persist after a tap on touch devices */
    .pm-cartouche__btn:hover { background: transparent; box-shadow: none; }
    /* Dim opacity floor raised on touch so the rail is discoverable by
       thumb-memory without needing to trigger scroll-up first. */
    .pm-cartouche.is-dim { opacity: .25; }
    /* Halo fade-in only on real focus (not on stale hover) */
    .pm-cartouche::after { opacity: 0 !important; }
    .pm-cartouche:focus-within::after { opacity: 1 !important; }
}

/* --------------------------------------------------------- Responsive */
/* On phones keep the cartouche in the same bottom-right corner but a touch
   closer to the edge so it doesn't eat thumb-reachable territory. */
@media (max-width: 768px) {
    .pm-cartouche {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 6px 0;
    }
}

/* --------------------------------------------------------- Hide on print */
@media print {
    .pm-cartouche { display: none !important; }
}

/* --------------------------------------------------------- Hide legacy scroll-to-top */
/* The cartouche arrow replaces any standalone scroll-to-top button. Hit the
   commonly used IDs/classes across the theme + Blocksy so no duplicate can
   appear in the bottom-right corner. */
#ct-back-to-top,
.ct-back-to-top,
#pm-back-to-top,
.pm-back-to-top,
#scroll-to-top,
.scroll-to-top,
#backToTop,
.back-to-top-btn {
    display: none !important;
}

/* ==========================================================================
   HEADER CHROME — freeze state + premium newsletter bar
   --------------------------------------------------------------------------
   The legacy .piano-header already declares position: fixed in
   pianomode-header-footer.css. The rules below:
     • Neutralize the .scrolled state so the header looks identical at
       scroll-top and anywhere else — no resize, no top-bar hiding. The user
       specifically asked for a header that "doesn't follow the scroll" in
       appearance.
     • Add a sharp gold hairline delimiter so nothing can visually bleed
       underneath.
     • Upgrade the top newsletter bar to a premium gold-shimmer strip.
   ========================================================================== */

/* =========================================================================
   NON-STICKY HEADER — the piano-header sits at the TOP of the document and
   scrolls away with the page. No position:fixed, no transforms on scroll.
   The cartouche alone is fixed (bottom-right) to stay reachable after the
   header is gone. The .scrolled class is neutralised as well.
   ========================================================================= */
.piano-header.scrolled .top-bar,
header.piano-header.scrolled .top-bar,
#pianoHeader.scrolled .top-bar {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body .piano-header,
html body header.piano-header,
html body #pianoHeader {
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
    z-index: auto;
    transform: none;
    will-change: auto;
}

/* Premium newsletter strip — gold-on-black with idle shimmer sweep */
#pm-newsletter-banner,
.piano-header .top-bar#pm-newsletter-banner {
    position: relative;
    height: var(--pm-newsletter-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pm-space-4);
    background:
        linear-gradient(90deg,
            var(--pm-black) 0%,
            #14120A 20%,
            #1C1708 50%,
            #14120A 80%,
            var(--pm-black) 100%);
    color: var(--pm-gold-bright);
    font-family: var(--pm-font);
    font-size: var(--pm-fs-caption);
    font-weight: var(--pm-fw-semibold);
    letter-spacing: var(--pm-tracking-widest);
    text-transform: uppercase;
    border-bottom: 1px solid var(--pm-gold-a25);
    overflow: hidden;
    cursor: pointer;
    transition: color var(--pm-dur) var(--pm-ease), background var(--pm-dur) var(--pm-ease);
}

#pm-newsletter-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 224, 144, .14) 50%,
        transparent 70%,
        transparent 100%);
    transform: translateX(-100%);
    animation: pm-newsletter-shimmer 8s var(--pm-ease-smooth) infinite;
    pointer-events: none;
}

#pm-newsletter-banner:hover {
    color: var(--pm-white);
}

@keyframes pm-newsletter-shimmer {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    #pm-newsletter-banner::before { animation: none; }
}

#pm-newsletter-banner:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--pm-gold-bright);
}

/* First section safety — ensure smooth anchor scrolling doesn't put a link
   target under the fixed header. */
body:not(.home) main > section:first-child,
body:not(.home) main > article:first-child {
    scroll-margin-top: calc(var(--pm-header-h) + var(--pm-space-4));
}

/* ==========================================================================
   Mobile menu search input — neutralise iOS autofill so the slim minimalist
   design from pianomode-header-footer.css stays transparent (no white pill)
   even when Safari tries to paint a yellow/blue autofill background.
   ========================================================================== */
.mobile-search input,
.mobile-search input:-webkit-autofill,
.mobile-search input:-webkit-autofill:hover,
.mobile-search input:-webkit-autofill:focus,
.mobile-search input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
            box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #2a2a2a !important;
    caret-color: #BEA86E !important;
    background-color: transparent !important;
    color-scheme: light !important;
    transition: background-color 9999s ease-out 0s;
}

/* ==========================================================================
   iPhone 15/17 Dynamic Island + notch optimization
   --------------------------------------------------------------------------
   The header background must extend into the status-bar safe area so the
   Dynamic Island pill sits on a black band (not a white strip). Already
   partially handled in pianomode-header-footer.css; we re-assert with
   higher specificity as a safety net.
   ========================================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
    html body .piano-header {
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Landscape safe areas */
    html body .piano-header {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    /* Cartouche respects the bottom home indicator */
    .pm-cartouche {
        bottom: calc(var(--pm-cartouche-inset) + env(safe-area-inset-bottom, 0px));
    }
}