/*
  Helionyx.com - Global Styles (global.css)
  Version: 3.0.3 (Helium Branding Theme Update)
  Author: Helionyx LLC (via AI Collaboration)
  Date: May 24, 2024

  Purpose:
  Defines global CSS custom properties, resets, base element styles,
  core typography, utility classes, and global accessibility features
  with the new "Helium" branding.
*/

/* --- 1. CSS Custom Properties (Variables) - Enhanced Helium Theme --- */
:root {
    /* Enhanced Helium Core Color Palette - More Vibrant & Sophisticated */
    --color-helium-dark-bg: #1E2332;         /* Deeper, richer dark background for better contrast */
    --color-helium-light-text: #F8F9FA;      /* Brighter off-white for better readability */
    --color-helium-grey-medium: #B8BCC8;     /* Warmer light grey with better contrast */
    --color-helium-grey-darker: #3A4553;     /* Enhanced darker grey with blue undertones */
    --color-helium-grey-light: #E8EAEF;      /* New lighter grey for subtle backgrounds */

    --color-helium-accent-blue: #2563EB;     /* More vibrant blue for better visibility */
    --color-helium-accent-purple: #7C3AED;   /* Brighter purple for better contrast */
    --color-helium-accent-blue-light: #60A5FA; /* Lighter blue for hover states */
    --color-helium-accent-purple-light: #A78BFA; /* Lighter purple for hover states */

    /* Standard UI Feedback Colors (Enhanced) */
    --color-helium-success: #10B981;         /* More vibrant green */
    --color-helium-error: #EF4444;           /* More vibrant red */
    --color-helium-warning: #F59E0B;         /* More vibrant amber */

    /* Enhanced Text Colors */
    --text-color-primary: #1F2937;           /* Darker, more readable text */
    --text-color-secondary: var(--color-helium-grey-darker); /* Enhanced secondary text */

    --text-color-on-dark: var(--color-helium-light-text);      /* Enhanced light text */
    --text-color-on-dark-muted: var(--color-helium-grey-medium); /* Better contrast muted text */

    --text-color-link: var(--color-helium-accent-blue);
    --text-color-link-hover: var(--color-helium-accent-purple);
    --text-color-hidden-doorway: var(--color-helium-accent-purple);

    /* Borders (Helium Theme) */
    --border-color-light: #D1D1D6; /* Derived from greys, slightly darker than EAEAEF */
    --border-color-medium: var(--color-helium-grey-medium);
    --border-color-dark-accent: rgba(29, 63, 145, 0.4); /* Blue accent, semi-transparent for dark bg */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-card: var(--border-radius-medium);
    --border-radius-pill: 50px;

    /* Typography (Unchanged from previous version) */
    --font-primary: 'Raleway', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --base-font-size: 16px;
    --line-height-base: 1.75;
    --line-height-heading: 1.3;

    /* Spacing Units (Unchanged) */
    --spacing-xxs: 0.25rem;  /* 4px */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 0.75rem;  /* 12px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */
    --spacing-section-sm: 1.5rem;
    --spacing-section-md: 2.25rem;
    --spacing-section-lg: 3rem;

    /* Shadows - Sophisticated & Angelic */
    --shadow-xs: 0 1px 2px rgba(42, 45, 58, 0.04);
    --shadow-sm: 0 2px 4px rgba(42, 45, 58, 0.06);
    --shadow-md: 0 5px 15px rgba(42, 45, 58, 0.08);
    --shadow-lg: 0 10px 30px rgba(42, 45, 58, 0.1);
    --shadow-xl: 0 20px 45px rgba(42, 45, 58, 0.12);
    --shadow-interactive-glow: 0 0 15px var(--color-helium-accent-blue); /* Updated glow color */

    /* Transitions (Unchanged) */
    --transition-short: 0.15s ease-out;
    --transition-base: 0.25s ease-out;
    --transition-long: 0.4s ease-out;

    /* Max Width for Content (Unchanged) */
    --max-width-container: 1240px;
    --max-width-text-readable: 70ch;
    --max-width-narrow: 800px;
}

/* --- 2. Global Resets & Base Styles (Helium Theme) --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--text-color-primary); /* Default text color for light backgrounds */
    background-color: var(--color-helium-grey-light); /* Soft grey background for entire site */
    display: flex; flex-direction: column; min-height: 100vh;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
main { flex-grow: 1; }
img, video, svg { max-width: 100%; height: auto; display: block; vertical-align: middle; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

/* --- 3. Utility Classes (Helium Theme) --- */
.container {
    width: 92%;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg); /* Increased default container padding */
}
.section-padding { padding-top: var(--spacing-section-md); padding-bottom: var(--spacing-section-md); }
.section-padding-sm { padding-top: var(--spacing-section-sm); padding-bottom: var(--spacing-section-sm); }
.section-padding-lg { padding-top: var(--spacing-section-lg); padding-bottom: var(--spacing-section-lg); }

.bg-light { background-color: var(--color-helium-light-text); color: var(--text-color-primary); } /* Primary light bg */
.bg-grey { background-color: var(--color-helium-grey-medium); color: var(--text-color-primary); } /* Alternative light bg */

.bg-dark { background-color: var(--color-helium-dark-bg); color: var(--text-color-on-dark); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.bg-dark .lead, .bg-dark .section-title, .bg-dark .section-subtitle,
.bg-dark p { color: var(--text-color-on-dark); }
.bg-dark .text-color-secondary { color: var(--text-color-on-dark-muted); }
.bg-dark a:not(.btn) { color: var(--color-helium-accent-blue); } /* Or purple, or a lighter variant */
.bg-dark a:not(.btn):hover, .bg-dark a:not(.btn):focus-visible { color: var(--color-helium-accent-purple); }

.light-text-on-dark-bg p, .light-text-on-dark-bg { color: var(--text-color-on-dark) !important; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.inline-list { display: flex; flex-wrap: wrap; gap: var(--spacing-md); padding: 0; }
.inline-list li { display: inline-block; }

/* Section Padding Classes */
.section-padding {
    padding: var(--spacing-section-lg) 0;
}
.section-padding-sm {
    padding: var(--spacing-section-sm) 0;
}
.section-padding-md {
    padding: var(--spacing-section-md) 0;
}

/* Content sections with white backgrounds to stand out against soft grey site background */
.content-section {
    background-color: var(--color-helium-light-text);
    border-radius: var(--border-radius-large);
    margin: var(--spacing-lg) auto;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    max-width: calc(var(--max-width-container) + 4rem);
    position: relative;
}

.content-section .container {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Mobile responsiveness for content sections */
@media (max-width: 767px) {
    .content-section {
        margin: var(--spacing-md) var(--spacing-sm);
        border-radius: var(--border-radius-medium);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    .content-section .container {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .content-section {
        margin: var(--spacing-sm) var(--spacing-xs);
        border-radius: var(--border-radius-small);
    }

    .content-section .container {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
}

/* --- 4. Typography (Base - Helium Theme) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-md);
    color: var(--text-color-primary); /* Default dark text for headings on light bg */
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
    color: var(--text-color-on-dark); /* Light text for headings on dark bg */
}

h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: var(--font-weight-black); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: var(--font-weight-black); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.6rem, 3.8vw, 2.2rem); font-weight: var(--font-weight-bold); }
h4 { font-size: clamp(1.3rem, 3.2vw, 1.8rem); font-weight: var(--font-weight-semibold); }

p { margin-bottom: var(--spacing-lg); max-width: var(--max-width-text-readable); }
p:last-child { margin-bottom: 0; }

.lead {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: var(--font-weight-light);
    color: var(--text-color-secondary);
    margin-left: auto; margin-right: auto;
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
    max-width: var(--max-width-text-readable);
}
.bg-dark .lead {
    color: var(--text-color-on-dark-muted); /* Muted lead on dark backgrounds */
}

.section-title { font-weight: var(--font-weight-black); margin-bottom: var(--spacing-lg); }
.section-subtitle {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.small-print, .small-print-inline {
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    opacity: 0.9;
}
.bg-dark .small-print { color: var(--text-color-on-dark-muted); }

/* Global Link Styles (Helium Theme) */
a {
    color: var(--text-color-link);
    text-decoration: none;
    transition: color var(--transition-base), opacity var(--transition-base);
}
a:hover, a:focus-visible {
    color: var(--text-color-link-hover);
    text-decoration: underline;
}

/* --- Responsive Adjustments for Global Elements (Helium Theme) --- */
@media (max-width: 767px) { /* Mobile */
    body { font-size: calc(var(--base-font-size) * 0.98); }
    h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
    h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
    .lead { font-size: clamp(1rem, 3.5vw, 1.15rem); }
    .section-padding { padding-top: var(--spacing-section-sm); padding-bottom: var(--spacing-section-sm); }
}

@media (max-width: 480px) { /* Small Mobile */
    .container { width: 95%; padding: 0 var(--spacing-md); } /* Ensure mobile still has some padding */
    h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .lead { font-size: 0.95rem; }
    .section-padding-sm { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
}


/* --- Accessibility Enhancements & Focus States (Global - Helium Theme) --- */
*:focus-visible {
    outline: 3px solid var(--color-helium-accent-blue); /* Use new accent for focus */
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--color-helium-light-text), 0 0 0 5px var(--color-helium-accent-blue);
    border-radius: var(--border-radius-small);
    z-index: 10001;
}
*:focus:not(:focus-visible) { outline: none; }

.skip-to-content {
    position: absolute;
    left: -99999px; top: auto;
    width: 1px; height: 1px;
    overflow: hidden; z-index: -9999;
}
.skip-to-content:focus, .skip-to-content:active {
    color: var(--color-helium-light-text); /* Light text */
    background-color: var(--color-helium-accent-blue); /* Blue background */
    left: var(--spacing-md); top: var(--spacing-md);
    width: auto; height: auto;
    overflow: auto; padding: var(--spacing-md);
    border-radius: var(--border-radius-small);
    z-index: 10002;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-lg);
}

/* Section Dividers */
.section-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-helium-accent-blue) 35%, var(--color-helium-accent-blue) 65%, transparent);
    margin: var(--spacing-md) 0; /* Reduced from xl to md for shorter spacing */
    opacity: 0.7;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.section-divider.thick {
    height: 3px;
    opacity: 0.9;
}

.section-divider.subtle {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color-light) 40%, var(--border-color-light) 60%, transparent);
    opacity: 0.5;
}

/* BW Graphic Section - Enhanced Scroll-Driven Animation System */
.picture-frame {
    --accent: var(--color-helium-accent-blue);
    --br: 1.5rem; /* rounded corners */
    --gap: 1rem; /* space around image */
    padding-inline: clamp(1rem, 5vw, 4rem);
    margin-block: 4vh; /* Reduced from 8vh to shorten space */
    position: relative;
    /* Removed background - now transparent */
    padding-top: var(--spacing-lg); /* Reduced from xl */
    padding-bottom: var(--spacing-lg); /* Reduced from xl */
}

.divider {
    height: 3px;
    background: linear-gradient(90deg,
                transparent 0 15%,
                var(--accent) 15% 85%,
                transparent 85% 100%);
    border-radius: 5px;
    margin: 0 auto;
    max-width: 400px;
}

.divider.top {
    margin-block-end: 2rem;
}

.divider.bottom {
    margin-block-start: 2rem;
}

.picture-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove padding to fill completely */
    border: 1px solid var(--accent); /* Thinner border */
    border-radius: var(--br);
    perspective: 1000px; /* for 3D flip */
    background-color: var(--color-helium-light-text);
    max-width: 800px; /* Much larger for more impact */
    width: 95%; /* Take up even more horizontal space */
    margin: 0 auto;
    height: 500px; /* Taller for more dramatic presence */
    box-shadow: var(--shadow-xl); /* Always have the shadow */
    position: relative; /* Ensure it's in front */
    z-index: 10; /* Above background */
    overflow: hidden; /* Ensure image fills completely */

    /* declare a view-timeline for scroll-driven animation */
    view-timeline-name: --reveal;
    view-timeline-axis: block;

    /* bind both animations to that timeline */
    animation: frameFlip 1.2s ease-out both,
               imgBloom 1.2s ease-out both;
    animation-timeline: --reveal;
    /* animate through the entire viewport journey */
    animation-range: entry 0% exit 100%;
}

/* Picture - fills the card completely with no white space */
.picture-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br); /* Match the card's border radius */
    filter: contrast(1.1);
    /* Always visible by default */
    opacity: 0.9;
    transform: scale(1) translateY(0);
    transition: transform var(--transition-base), opacity var(--transition-base);
    /* Ensure no white space */
    display: block;
}

/* KEYFRAMES driven by scroll - fade in, peak, fade out */
@keyframes frameFlip {
    0% {
        transform: rotateX(15deg);
        box-shadow: none;
    }
    50% {
        transform: rotateX(0deg);
        box-shadow: var(--shadow-xl);
    }
    100% {
        transform: rotateX(-15deg);
        box-shadow: none;
    }
}

@keyframes imgBloom {
    0% {
        opacity: 0.2;
        transform: scale(0.3) translateY(4rem);
    }
    50% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0.2;
        transform: scale(0.3) translateY(-4rem);
    }
}

/* Fallback for browsers without scroll-timeline support */
.picture-frame.visible .picture-card {
    animation: frameFlipFallback 0.8s ease-out both;
}

.picture-frame.visible .picture-card img {
    animation: imgBloomFallback 0.8s ease-out both;
}

@keyframes frameFlipFallback {
    0% {
        transform: rotateX(15deg);
        box-shadow: none;
    }
    100% {
        transform: rotateX(0deg);
        box-shadow: var(--shadow-xl);
    }
}

@keyframes imgBloomFallback {
    0% {
        opacity: 0.3;
        transform: scale(0.4) translateY(3rem);
    }
    100% {
        opacity: 0.9;
        transform: scale(1) translateY(0);
    }
}

/* Responsive adjustments for picture frames */
@media (max-width: 768px) {
    .picture-frame {
        margin-block: 6vh;
        padding-inline: clamp(0.5rem, 3vw, 2rem);
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .picture-card {
        max-width: 700px; /* Larger on mobile too */
        width: 98%;
        height: 400px; /* Still substantial on mobile */
        border-width: 1px; /* Keep thin border */
    }
}

@media (max-width: 480px) {
    .picture-frame {
        margin-block: 4vh;
        padding-inline: 1rem;
    }

    .picture-card {
        max-width: 600px; /* Still large on small mobile */
        width: 99%;
        height: 350px; /* Prominent even on small screens */
        border-width: 1px; /* Keep thin border */
    }
}

/* End of global.css - Helium Theme */