/*
Theme Name: Austin Haynes Music
Theme URI: https://www.austinhaynesmusic.com
Author: Austin Haynes
Author URI: https://www.austinhaynesmusic.com
Description: A modern, cinematic WordPress theme designed for game composer Austin Haynes. Features a dark, immersive design with smooth animations, a custom waveform audio player with track filters, and responsive layout.
Version: 1.7.13
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: austin-haynes-music
Tags: one-column, custom-menu, featured-images, custom-logo, custom-background

Austin Haynes Music Theme - A cinematic, modern theme for game composers.
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Colors */
    --color-bg-primary: #030303;
    --color-bg-secondary: #070707;
    --color-bg-tertiary: #0e0e0e;
    --color-bg-card: #0a0a0a80;
    --color-accent: #3d7d5a;
    --color-accent-hover: #43825f;
    --color-accent-text: #6cbf94;
    --color-accent-text-hover: #86d5ad;
    --color-accent-glow: rgba(61, 125, 90, 0.3);
    --color-accent-secondary: #3d7d5a;
    --color-text-primary: #e8e6f0;
    --color-text-secondary: #b8b8cc;
    --color-text-muted: #85859a;
    --color-focus: #9be8c0;
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(61, 125, 90, 0.3);
    --color-white: #ffffff;

    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --section-padding: 120px;
    --container-width: 1200px;
    --container-narrow: 800px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Match the body so compositor gaps, repaint tearing during fixed-header
       transitions, and overscroll bounce can only ever show dark, not the
       UA-default white. */
    background-color: var(--color-bg-primary);
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-text-hover);
}

p a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1.5em;
    color: var(--color-text-secondary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section--alt {
    background: var(--color-bg-secondary);
}

.section__header {
    text-align: center;
    margin-bottom: 60px;
}

.section__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin-bottom: 16px;
    padding: 6px 16px;
    background: rgba(61, 125, 90, 0.1);
    border: 1px solid rgba(61, 125, 90, 0.2);
    border-radius: 100px;
}

.section__title {
    margin-bottom: 16px;
}

.section__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Animations: content is visible by default, then enhanced only while the
   head marker is active. A watchdog removes it if the main script fails. */
.fade-in {
    opacity: 1;
    transform: none;
}

.js .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10001;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-bg-primary);
    font-weight: 700;
    line-height: 1.25;
    transform: translateY(calc(-100% - 16px));
    transition: transform var(--transition-fast);
}

.skip-link:hover {
    color: var(--color-bg-primary);
}

.skip-link:focus,
.skip-link:focus-visible {
    color: var(--color-bg-primary);
    transform: translateY(0);
}

/* ============================================
   AMBIENT BACKGROUND
   ============================================ */
.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: float 20s ease-in-out infinite;
}

.ambient-bg__orb--1 {
    width: 600px;
    height: 600px;
    background: var(--color-accent);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

.ambient-bg__orb--2 {
    width: 400px;
    height: 400px;
    background: var(--color-accent-secondary);
    bottom: -100px;
    left: -100px;
    animation-delay: -10s;
}

.ambient-bg__orb--3 {
    width: 300px;
    height: 300px;
    background: #3d7d5a;
    top: 50%;
    left: 50%;
    animation-delay: -5s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    /* Interior pages have no photo behind the bar, so it is opaque from the
       first pixel. It used to start transparent everywhere, but the page title
       (the former .page-hero started 160px down) slid under the 94px-tall bar at ~66px of scroll
       while the scrolled background only engaged at 80px - so the big white
       title showed straight through the menu for that gap plus the 300ms
       fade. That is the "white flash". Matching the page background exactly
       means the bar is invisible at rest - it looks as "floating" as before,
       it just can't be seen through. */
    background: var(--color-bg-primary);
    /* Held transparent so gaining the scrolled hairline can't shift height. */
    border-bottom: 1px solid transparent;
    /* Never `all`: it also animates backdrop-filter, which makes the compositor
       rebuild the blur layer on every frame of the transition. */
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                padding var(--transition-base);
    /* blur(0) is a visual no-op that creates the backdrop layer up front, so
       switching to the blurred scrolled state can't spawn a new compositing
       layer mid-scroll (that layer creation is its own one-frame flash). */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Only the front page has a photographic hero worth showing the bar through. */
body.is-home .site-header {
    background: transparent;
}

.site-header.is-scrolled {
    padding: 12px 0;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--color-white);
    transition: opacity var(--transition-fast);
}

.site-logo:hover {
    color: var(--color-white);
    opacity: 0.8;
}

.site-logo__name {
    font-family: 'Mrs Saint Delafield', cursive;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.site-logo__label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.site-logo img {
    max-height: 40px;
    width: auto;
}

/* Desktop Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-nav a {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.main-nav a:hover,
.main-nav a.is-active,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
}

.main-nav a.cta-link {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
}

.main-nav a.cta-link:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 4px 20px var(--color-accent-glow);
}

/* Nav dropdown (only renders for menu items that have children) */
.nav-has-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    min-width: 210px;
    padding: 4px;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    z-index: 1001;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
    display: flex;
}

.nav-dropdown a {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 8px 14px;
    border-radius: 4px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    margin: 5px 0;
    transition: all var(--transition-base);
    border-radius: 2px;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 120px 24px 80px;
    /* Solid backdrop so the ambient color orbs can't bleed a green cast
       through the semi-transparent hero photo; skin stays neutral B&W. */
    background: var(--color-bg-primary);
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero__bg img,
.hero__bg .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The source photo is a composite whose subject stands flush against its
       RIGHT edge. Pinning the image's right edge to the box means cover-crop
       eats only the dark left half, so the portrait can never be cut off at
       any viewport width (center X used to slice the face at common sizes). */
    object-position: 100% 22%;
    opacity: 0.4;
    filter: grayscale(1) contrast(1.05);
}

/* Long left fade that dissolves the photo's hard vertical edge into the
   dark half, so the hero reads as one composition instead of two panels. */
.hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* With the image right-pinned, the composite's internal blur-to-photo seam
       lands between ~43% and ~58% of the viewport across desktop widths. The
       veil must be FULLY opaque through that whole zone - any transparency at
       the seam lets the hard edge ghost through - then the photo emerges from
       darkness on the right. */
    background: linear-gradient(to right, var(--color-bg-primary) 0%, var(--color-bg-primary) 58%, rgba(3, 3, 3, 0) 84%);
}

.hero__bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(to top, var(--color-bg-primary), transparent);
}

/* On narrow screens the cover-crop of the ultra-wide hero image would show
   only its middle (the seam), slicing the portrait in half. Frame the crop
   on the portrait instead, and swap the left fade for an even veil so the
   centered text stays readable over the photo. */
@media (max-width: 1024px) {
    /* Pin the hero to the small viewport unit so the collapsing mobile
       address bar doesn't resize the section and visibly rescale (zoom)
       the cover-cropped photo while scrolling. */
    .hero {
        min-height: 100svh;
    }

    .hero__bg img,
    .hero__bg .wp-post-image {
        /* Right-pinned like desktop; Y biased higher so the head clears the
           top of the frame on tall narrow screens. */
        object-position: 100% 15%;
    }

    /* Even veil for text legibility, plus a strong scrim across the top
       so the fixed transparent header always sits on near-black instead
       of floating over the photo before the scroll state kicks in. */
    .hero__bg::before {
        background: linear-gradient(to bottom, rgba(3, 3, 3, 0.92) 0%, rgba(3, 3, 3, 0.40) 24%, rgba(3, 3, 3, 0.40) 100%);
    }

    /* Mobile GPUs flash a white frame when backdrop-filter switches on
       mid-scroll (new render layer), and animating the header's padding
       reveals unpainted pixels for a frame. Keep the mobile header at a
       constant height and only crossfade its colors. */
    .site-header {
        transition: background-color var(--transition-base), border-color var(--transition-base);
        /* No blur layer at all on phones - not even the desktop blur(0)
           placeholder, which some mobile GPUs still promote. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
    }

    .site-header.is-scrolled {
        padding: 20px 0;
        background: rgba(8, 8, 12, 0.97);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* The 1px light hairline is invisible on desktop but reads as a
           bright line on phone screens. */
        border-bottom: none;
    }
}

/* On wide screens, anchor the text block in the dark left half so the
   portrait balances it on the right; editorial composition. */
@media (min-width: 1025px) {
    .hero {
        justify-content: flex-start;
        text-align: left;
    }

    .hero__content {
        margin-left: max(48px, calc((100vw - var(--container-width)) / 2));
        max-width: 640px;
    }

    .hero__subtitle {
        margin-left: 0;
    }

    .hero__actions {
        justify-content: flex-start;
    }
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero__title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--color-white), var(--color-text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.4s;
}

.hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.6;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.6s;
}

.hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.8s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 1.2s;
}

.hero__scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-accent), transparent);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--color-accent);
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% { top: -20px; }
    100% { top: 60px; }
}

/* ============================================
   HOME: SELECTED CREDITS / QUOTE / CTA
   ============================================ */
.credit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.credit-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    backdrop-filter: blur(10px);
    transition: all var(--transition-base);
}

.credit-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Optional key art atop a credit card (set per-card in the Customizer /
   homepage defaults). Cards without art simply start at the type label. */
.credit-card__art {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 18px;
}

.credit-card__type {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin-bottom: 14px;
}

.credit-card__title {
    font-size: 1.125rem;
    line-height: 1.35;
    margin-bottom: 6px;
}

.credit-card__client {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.credit-card__note {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Photo-evidence figure for content pages (first use: Earth and Peace at
   Severance Hall on the Credits page). One or two images side by side with a
   mono caption; markup is a custom-HTML block in the page content:
   <figure class="credit-figure"><div class="credit-figure__row"> imgs </div>
   <figcaption>...</figcaption></figure> */
.credit-figure {
    margin: 32px 0 8px;
}

.credit-figure__row {
    display: grid;
    grid-template-columns: 4fr 3fr;   /* 2:1 wide + 3:2 close at equal height */
    gap: 12px;
}

.credit-figure__row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.credit-figure__row img:only-child {
    grid-column: 1 / -1;
}

.credit-figure figcaption {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 700px) {
    .credit-figure__row {
        grid-template-columns: 1fr;
    }
}

.home-credits__more,
.home-quote__more {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0;
}

.home-credits__more a,
.home-quote__more a {
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Featured quote */
.home-quote {
    text-align: center;
    margin: 0 auto;
    max-width: 720px;
}

.home-quote p {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--color-text-primary);
    font-weight: 500;
    margin-bottom: 24px;
}

.home-quote cite {
    display: block;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 1px;
    color: var(--color-accent-text);
}

.home-quote__more {
    margin-top: 24px;
}

/* Contact CTA band */
.home-cta__inner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.home-cta__title {
    margin-bottom: 16px;
}

.home-cta__text {
    font-size: 1.0625rem;
    margin-bottom: 32px;
}

.home-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: 0 4px 20px var(--color-accent-glow);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-accent-glow);
}

.btn--outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.btn--outline:hover {
    color: var(--color-white);
    border-color: var(--color-border-hover);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

/* ============================================
   PAGE HERO (for inner pages)
   ============================================ */
.page-hero {
    padding: 112px 0 40px;
    text-align: center;
    position: relative;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
}

/* The hero already ends with its own padding, so the first content section
   sheds most of its 120px top padding - otherwise every interior page opens
   with a long dead band between the title and the content. */
.page-hero + .section {
    padding-top: 48px;
}

.page-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.page-hero__title:last-child {
    margin-bottom: 0;
}

.page-hero__subtitle {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   MUSIC SECTION / SOUNDCLOUD EMBEDS
   ============================================ */
.music-section {
    padding: 80px 0;
}

.music-player-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.home-music__header {
    margin-bottom: 40px;
}

/* Older homepage content included an empty heading above the player. Keep the
   saved page content intact while preventing that legacy block adding space. */
.music-player-wrapper h2:empty {
    display: none;
}

/* Offset for #music anchor scroll, clearing the fixed header with breathing room. */
#music {
    scroll-margin-top: 70px;
}

/* When WP admin bar is showing, add its height too */
body.admin-bar #music {
    scroll-margin-top: 102px;
}

.music-player-wrapper iframe {
    border-radius: var(--radius-md);
    width: 100%;
}

/* ============================================
   CREDITS TABLE
   ============================================ */
.credits-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    backdrop-filter: blur(10px);
}

.credits-table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.credits-table th,
.wp-block-table th {
    padding: 16px 24px;
    text-align: left;
    font-weight: 600;
    color: var(--color-accent-text);
    background: rgba(61, 125, 90, 0.05);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.credits-table td,
.wp-block-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.credits-table tr:last-child td,
.wp-block-table tr:last-child td {
    border-bottom: none;
}

.credits-table tr:hover td,
.wp-block-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-primary);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.testimonial-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    backdrop-filter: blur(10px);
    transition: all var(--transition-base);
    position: relative;
}

.testimonial-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 20px;
    left: 28px;
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

/* The marquee quote (first card - Jon Anderson) spans the full row at
   pull-quote size; the grid of peers follows beneath it. */
.testimonials-grid .testimonial-card:first-child {
    grid-column: 1 / -1;
}

.testimonials-grid .testimonial-card:first-child .testimonial-card__text {
    font-size: 1.375rem;
    line-height: 1.6;
    max-width: 900px;
}

.testimonial-card__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.testimonial-card__author {
    font-weight: 700;
    color: var(--color-white);
    font-size: 0.9375rem;
}

.testimonial-card__role {
    color: var(--color-accent-text);
    font-size: 0.8125rem;
    margin-top: 4px;
}

/* ============================================
   PRESS / AWARDS
   ============================================ */
.press-item {
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}

/* Award entries read as trophies, not just another review: boxed with the
   accent, opened by a mono chip. Add press-item--nomination alongside
   press-item--award to relabel the chip. */
.press-item--award {
    padding: 32px;
    margin: 24px 0;
    background: rgba(61, 125, 90, 0.05);
    border: 1px solid rgba(61, 125, 90, 0.25);
    border-radius: var(--radius-md);
}

.press-item--award::before {
    content: 'Award';
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent-text);
    border: 1px solid rgba(61, 125, 90, 0.35);
    border-radius: 100px;
    padding: 4px 12px;
    margin-bottom: 14px;
}

.press-item--nomination::before {
    content: 'Nomination';
}

.press-item:last-child {
    border-bottom: none;
}

.press-item__title {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--color-white);
}

.press-item__source {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin-bottom: 16px;
}

.press-item__quote {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    font-style: italic;
    padding-left: 24px;
    border-left: 2px solid var(--color-accent);
}

/* ============================================
   BIO / ABOUT
   ============================================ */
.bio-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.bio-content--full {
    grid-column: 1 / -1;
    max-width: var(--container-narrow);
}

.bio-image-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.bio-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.bio-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.bio-content p {
    font-size: 1.0625rem;
    line-height: 1.9;
    margin-bottom: 1.5em;
    color: var(--color-text-primary);
}

.bio-content > *:first-child,
.bio-content > .wp-block-freeform > *:first-child,
.bio-content p:first-child,
.bio-content p:first-of-type,
.bio-content .wp-block-freeform p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.bio-content p:first-of-type,
.bio-content .wp-block-freeform p:first-of-type {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-top: 0 !important;
}

.bio-content,
.bio-content .wp-block-freeform {
    padding-top: 0;
    margin-top: 0;
}

/* Hide empty paragraphs that Classic editor inserts */
.bio-content p:empty {
    display: none !important;
}

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-section {
    max-width: 640px;
    margin: 0 auto;
}

.contact-intro {
    text-align: center;
    margin-bottom: 48px;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

.contact-email-fallback {
    text-align: center;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.contact-email-fallback a {
    color: var(--color-accent-text);
    font-weight: 600;
}

/* WPForms styling overrides */
.wpforms-container,
.wpcf7 {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    backdrop-filter: blur(10px);
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
    background: rgba(255, 255, 255, 0.06);
}

.wpforms-form label,
.wpcf7 label {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 8px;
    display: block;
}

.wpforms-submit,
.wpcf7 input[type="submit"],
input[type="submit"],
button[type="submit"] {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 14px 40px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wpforms-submit:hover,
.wpcf7 input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-accent-glow);
}

/* Hardened WPForms overrides; the plugin ships its own full styling with
   high-specificity selectors, so these must outgun it or the form renders
   as stark white boxes on the dark theme. */
div.wpforms-container-full,
div.wpforms-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    backdrop-filter: blur(10px);
}

div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;
    height: auto;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* The select's DROPDOWN PANEL is native browser UI: on Windows it renders
   white unless the control opts into dark rendering, and the light text
   forced above becomes near-invisible on it. color-scheme flips the native
   panel dark; the option rules are the fallback for engines that style
   options directly instead. */
div.wpforms-container-full .wpforms-form select {
    color-scheme: dark;
}

div.wpforms-container-full .wpforms-form select option {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: var(--color-text-primary) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 8px;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    color: var(--color-text-muted) !important;
    font-size: 0.8125rem;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #d98a8a !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-description {
    color: var(--color-text-secondary) !important;
}

div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form input[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent) !important;
    border: none !important;
    color: var(--color-white) !important;
    padding: 15px 44px !important;
    font-family: var(--font-body);
    font-size: 0.9375rem !important;
    font-weight: 600;
    line-height: 1 !important;
    border-radius: var(--radius-xl) !important;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--color-accent-glow);
    transition: all var(--transition-base);
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form input[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
    background: var(--color-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-accent-glow);
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    margin-top: 8px;
}

div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container {
    margin: 20px 0;
}

/* Confirmation + validation messages, restyled for the dark theme */
div.wpforms-container-full .wpforms-confirmation-container-full {
    background: rgba(61, 125, 90, 0.12) !important;
    border: 1px solid rgba(61, 125, 90, 0.5) !important;
    border-radius: var(--radius-md);
    color: var(--color-text-primary) !important;
}

div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #d98a8a !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    padding: 60px 0 30px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    position: relative;
    z-index: 1;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
}

.footer-brand__tagline {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.footer-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-nav a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--color-white);
}

/* Labeled article group under the footer nav - reads as a deliberate
   section instead of stray long links among the page nav. */
.footer-articles {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-articles__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.footer-articles__links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-articles__links a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer-articles__links a:hover {
    color: var(--color-white);
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.footer-social a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    background: rgba(61, 125, 90, 0.1);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */

/* Block editor content */
.entry-content {
    position: relative;
    z-index: 1;
}

.entry-content > * {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}

.entry-content h2 {
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.entry-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
    color: var(--color-text-secondary);
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 16px 24px;
    margin: 2em 0;
    background: rgba(61, 125, 90, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
}

.entry-content blockquote p {
    color: var(--color-text-primary);
    margin-bottom: 0;
}

/* Search Form */
.search-form {
    display: flex;
    gap: 12px;
}

.search-form .search-field {
    flex: 1;
}

.search-form .search-submit {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
}

/* Navigation for blog posts */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
    margin-top: 60px;
}

.nav-previous a,
.nav-next a {
    color: var(--color-text-secondary);
}

.nav-previous a:hover,
.nav-next a:hover {
    color: var(--color-accent-text);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* Widget Areas */
.widget {
    margin-bottom: 40px;
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-white);
}

/* 404 Page */
.error-404 {
    text-align: center;
    padding: 160px 0;
}

.error-404__code {
    font-size: 8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.error-404__title {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.error-404__text {
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .bio-section {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    /* Mobile Navigation */
    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(280px, 85vw);
        height: 100vh;
        height: 100dvh;
        background: var(--color-bg-secondary);
        border-left: 1px solid var(--color-border);
        flex-direction: column;
        align-items: stretch;
        padding: 80px 24px calc(24px + env(safe-area-inset-bottom));
        gap: 4px;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
        pointer-events: none;
        transition: right var(--transition-base), visibility 0s linear 0.3s;
    }

    .main-nav.is-open {
        right: 0;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .main-nav a {
        font-size: 1rem;
        padding: 12px 16px;
    }

    /* Dropdowns expand inline on mobile rather than hovering */
    .nav-has-dropdown {
        display: block;
    }

    .nav-dropdown {
        position: static;
        display: flex;
        min-width: 0;
        padding: 0 0 0 12px;
        background: none;
        border: none;
        box-shadow: none;
    }

    .nav-dropdown a {
        white-space: normal;
        font-size: 0.9375rem;
        opacity: 0.85;
    }

    /* Mobile Overlay */
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 999;
    }

    .nav-overlay.is-visible {
        display: block;
    }

    /* Bio Section */
    .bio-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Text first, photo second on mobile */
    .bio-content {
        order: -1;
    }

    .bio-image-wrapper {
        max-width: 320px;
        margin: 0 auto;
        position: relative;   /* kill sticky on mobile */
        top: auto;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 30px;
    }

    /* Hero */
    .hero {
        padding: 120px 20px 60px;
    }

    .hero__title {
        letter-spacing: -1px;
    }

    .page-hero {
        padding: 108px 0 36px;
    }
}

@media (max-width: 480px) {
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .credits-table th,
    .credits-table td,
    .wp-block-table th,
    .wp-block-table td {
        padding: 12px 16px;
        font-size: 0.8125rem;
    }

    /* Tighter spacing on small phones */
    .page-hero {
        padding: 96px 0 28px;
    }

    .page-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .contact-section {
        padding: 0 4px;
    }

    .wpforms-container,
    .wpcf7 {
        padding: 24px 20px;
    }

    .testimonial-card {
        padding: 24px;
    }

    .bio-image-wrapper {
        max-width: 260px;
    }
}

/* ============================================
   LITE YOUTUBE FACADE
   ============================================ */
.wp-block-embed__wrapper.has-lite-yt {
    position: relative;
    aspect-ratio: 16 / 9;
}

.wp-block-embed__wrapper.has-lite-yt::before {
    display: none !important; /* neutralize core's padding-ratio hack */
}

.has-lite-yt .lite-yt,
.has-lite-yt .lite-yt__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lite-yt {
    display: block;
    background: #000 center / cover no-repeat;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

.lite-yt__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(8, 8, 12, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: background var(--transition-fast);
}

.lite-yt__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--color-white);
}

.lite-yt:hover .lite-yt__play,
.lite-yt:focus-visible .lite-yt__play {
    background: var(--color-accent);
}

.lite-yt:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.lite-yt__iframe {
    border: 0;
    border-radius: var(--radius-md);
}

/* ============================================
   SOUNDCLOUD EMBED RESPONSIVE
   ============================================ */
.wp-block-embed__wrapper iframe,
.soundcloud-embed iframe {
    border-radius: var(--radius-md);
}

/* ============================================
   LOADING / PAGE TRANSITION
   ============================================ */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-primary);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Noise texture overlay for depth */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.012;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Respect OS-level motion preferences while keeping all content available. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .js .fade-in {
        opacity: 1;
        transform: none;
    }

    .hero__label,
    .hero__title,
    .hero__subtitle,
    .hero__actions,
    .hero__scroll {
        opacity: 1;
    }
}