/* =====================================================
   PALACE - FIXED WALLPAPER STAGE
   -----------------------------------------------------
   The site is a wallpaper: one photograph pinned to the
   viewport (WebGL2 in js/stage.js), everything else
   scrolls over it. This file owns the stage layout, the
   legibility scrim and every surface that sits directly
   on the photo (--on-image-* tokens, variables.css).

   Layer order:
     #stage        fixed, z-index 0   (img + canvas + scrim)
     header        z-index var(--z-fixed)
     main/footer   position: relative, z-index 1

   Why a fixed wrapper and not background-attachment:
   iOS Safari ignores `background-attachment: fixed` and
   Android Chrome forces a full-layer repaint on scroll.
   A position:fixed element is compositor-friendly and is
   the only way to host a WebGL surface anyway.
   ===================================================== */

/* ===== STAGE SHELL ===== */
#stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#stage-fallback,
#stage-gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#stage-fallback {
    object-fit: cover;
    object-position: 50% 55%; /* keeps horizon + arch springing line */
    display: none;            /* revealed by JS when WebGL is out */
}

#stage.no-webgl #stage-fallback { display: block; }
#stage.no-webgl #stage-gl { display: none; }

#stage-scrim {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 500ms ease;
}

/* After scrolling past hero: dark overlay for readability */
#stage.blurred #stage-scrim {
    background: var(--stage-scrim);
}

/* Download page + any page that wants a calmer stage. */
#stage[data-scrim="heavy"] #stage-scrim { background: var(--stage-scrim-heavy); }
#stage.blurred[data-scrim="heavy"] #stage-scrim { background: var(--stage-scrim-heavy); }

/* Pages that carry the stage lose their own opaque ground — both
   html and body must be transparent or the viewport stays white. */
:root:has(body.has-stage),
html:has(body.has-stage) { background: transparent; }
body.has-stage {
    background: transparent;
}

body.has-stage main,
body.has-stage .site-footer,
body.has-stage .guide-wrapper {
    position: relative;
    z-index: 1;
}

/* ===== ON-STAGE TYPOGRAPHY & SURFACES =====
   Everything that sits directly on the photograph uses
   --on-image-* so contrast is solved against the scrim,
   not against a page colour that no longer exists. */
.on-stage {
    color: var(--on-image-text);
}
.on-stage h1, .on-stage h2, .on-stage h3,
.on-stage h4, .on-stage h5, .on-stage h6 {
    color: var(--on-image-text);
}
.on-stage p { color: var(--on-image-text-muted); }
.on-stage a:not(.btn) { color: var(--color-primary-text); }
.on-stage a:not(.btn):hover { color: var(--color-accent-text); }

/* Glass card: translucent surface + backdrop blur. */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--color-surface); }
}

/* Section shells that used to paint gradients over the body
   now let the stage show through. */
.on-stage-section {
    position: relative;
    overflow: hidden;
}

/* Thin band that separates stacked sections without hiding the photo. */
.stage-hairline {
    border-top: 1px solid var(--on-image-border);
}

/* ===== HERO — the centred stack (§4.1) ===== */
.hero-stage {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-height) + var(--space-10)) var(--space-6) var(--space-16);
}

.hero-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 56ch;
}

.hero-icon-wrap {
    position: relative;
    display: inline-block;
    animation: heroIconIn 500ms ease-out both;
}
@keyframes heroIconIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-icon-wrap { animation: none; }
}

.hero-icon-glow {
    position: absolute;
    inset: -36px;
    background: radial-gradient(circle,
        rgba(14, 107, 168, 0.28) 0%,
        rgba(63, 167, 214, 0.14) 45%,
        transparent 70%);
    filter: blur(24px);
    z-index: 0;
    pointer-events: none;
}

.hero-icon {
    position: relative;
    z-index: 1;
    width: clamp(140px, 24vw, 200px);
    height: auto;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 1px 8px rgba(255,255,255,.7), 0 0 40px rgba(255,255,255,.4);
}
[data-theme="dark"] .hero-title {
    text-shadow: 0 1px 8px rgba(0,0,0,.5), 0 0 40px rgba(0,0,0,.3);
}

.hero-tagline {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 500;
    color: var(--on-image-text-muted);
    margin: 0;
    text-shadow: 0 1px 6px rgba(255,255,255,.6);
}
[data-theme="dark"] .hero-tagline {
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.hero-value-line {
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--on-image-text-muted);
    max-width: 56ch;
    margin: 0;
    text-shadow: 0 1px 4px rgba(255,255,255,.5);
}
[data-theme="dark"] .hero-value-line {
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
}

/* Scroll cue — decorative, hidden from AT, 1.2s loop. */
.scroll-cue {
    margin-top: var(--space-8);
    color: var(--on-image-text-muted);
    display: flex;
    justify-content: center;
}
.scroll-cue svg {
    animation: cueDip 1.2s ease-in-out infinite;
}
@keyframes cueDip {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue svg { animation: none; }
}

/* ===== TRUST BAND — thin strip directly under the hero ===== */
.trust-band {
    padding: var(--space-6) 0;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    text-align: center;
}
.trust-cell { padding: var(--space-3); }
.trust-cell strong {
    display: block;
    font-size: var(--text-xl);
    color: var(--on-image-text);
    margin-bottom: var(--space-1);
}
.trust-cell span {
    font-size: var(--text-sm);
    color: var(--on-image-text-muted);
}
@media (max-width: 900px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* ===== PLATFORM CARDS ON GLASS ===== */
.platform-grid-glass {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}
@media (max-width: 1024px) { .platform-grid-glass { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .platform-grid-glass { grid-template-columns: repeat(2, 1fr); } }

.platform-card-glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition-base);
}
.platform-card-glass:hover { transform: translateY(-3px); }
.platform-card-glass img,
.platform-card-glass svg.plogosvg {
    width: 34px;
    height: 34px;
    display: block;
}
/* Monochrome brand glyphs follow the text colour so they sit on glass
   in both themes (the old raw devicon SVGs were baked dark). */
.platform-card-glass img.mono,
.platform-card-glass svg.plogosvg {
    fill: currentColor;
    color: var(--on-image-text);
}
.platform-card-glass h3 {
    font-size: var(--text-sm);
    font-weight: 700;
    margin: 0;
    color: var(--on-image-text);
}
.platform-card-glass p {
    font-size: var(--text-xs);
    margin: 0;
    color: var(--on-image-text-muted);
}

/* ===== SECTION HEADERS ON STAGE ===== */
.on-stage .section-header h2 { color: var(--on-image-text); }
.on-stage .section-header p  { color: var(--on-image-text-muted); }

/* ===== COMPARISON TABLE ON STAGE ===== */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
}
.compare-table th,
.compare-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--on-image-border);
}
.compare-table th:first-child,
.compare-table td:first-child { text-align: left; }
.compare-table thead th {
    color: var(--on-image-text);
    font-weight: 700;
    border-bottom: 2px solid var(--on-image-border);
}
.compare-table tbody td:first-child { color: var(--on-image-text); }
.compare-table tbody td { color: var(--on-image-text-muted); }
.compare-table .col-palace { color: var(--color-primary-text); font-weight: 600; }
.icon-cell svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.icon-yes { color: var(--color-primary-text); }
.icon-no  { color: var(--color-text-dim); opacity: 0.85; }

/* Checklist with icon markers (replaces the check text markers). */
.checklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-lg);
    color: var(--on-image-text-muted);
}
.checklist li::before {
    content: '';
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 0.15em;
    background: var(--color-primary-text);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
}

/* ===== ICON SPOTLIGHT ("What is Palace") ===== */
.spotlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
}
@media (max-width: 860px) {
    .spotlight-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.spotlight-figure { text-align: center; }
.spotlight-figure img { width: clamp(140px, 20vw, 200px); height: auto; display: inline-block; }

/* ===== FAQ — native details/summary ===== */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
    margin-bottom: var(--space-3);
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--on-image-text);
    transition: color var(--transition-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '';
    width: 18px; height: 18px; flex: 0 0 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
    transition: transform var(--transition-fast);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--color-primary-text); }
.faq-item .faq-body {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--on-image-text-muted);
}
.glass.faq-item { clip-path: var(--clip-bvl-md); }

/* ===== CTA / FOOTNOTE STRIPS ON STAGE ===== */
.cta-strip {
    text-align: center;
    padding: var(--space-24) 0;
}

/* ===== REDUCED MOTION =====
   Stage renders preset 0 only (js/stage.js honours this too);
   entrance animations are disabled here as well. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .animate-float,
    .animate-pulse { animation: none; }
}