/**
 * BASE PAGE STYLES
 * ===================
 * Shared base styles for all non-studio pages (cassette, bio, donate).
 * Provides: resets, body layout, heading base, main container,
 * noise overlay, header component, accessibility defaults.
 *
 * IMPORT ORDER: design-system.css -> base-page.css -> [page-layout.css] -> nav-menu.css -> page.css
 *
 * ITCSS LAYERS:
 * - Generic: Box-sizing reset, body, heading base
 * - Objects: Main container base
 * - Components: Noise overlay, header + tag
 * - Overrides: Mobile, reduced motion, focus-visible
 *
 * BEM NAMING:
 * - Blocks: .header
 * - Elements: .header__tag
 */

/* ==========================================================================
   GENERIC - Resets & Base Elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--neu-bg-dark);
  color: var(--color-text-secondary);
  display: grid;
  place-items: center;
  padding: var(--pad-lg);
  /* Safe area insets for notched devices (iPhone X+, Dynamic Island) */
  padding-left: max(var(--pad-lg), env(safe-area-inset-left));
  padding-right: max(var(--pad-lg), env(safe-area-inset-right));
  padding-bottom: max(var(--pad-lg), env(safe-area-inset-bottom));
  /* Prevent horizontal scroll from glow effects */
  overflow-x: hidden;
  overflow-y: auto;
  /* Webkit text rendering optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent iOS text size adjustment */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1,
h2 {
  font-family: var(--font-title);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   OBJECTS - Main Container Base
   ========================================================================== */

main {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--max-width-content);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(var(--pad-md), 3vw, var(--pad-xl));
  box-shadow: none;
}

/* ==========================================================================
   COMPONENTS - Noise Overlay
   ========================================================================== */

.noise {
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml,%3Csvg width="160" height="160" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"%3E%3Cfilter id="n" x="0" y="0" width="1" height="1"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.05"/%3E%3C/svg%3E');
  opacity: 0.2;
  pointer-events: none;
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 0.15;
  }
}

/* ==========================================================================
   COMPONENTS - Header
   ========================================================================== */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: 1 / -1;
}

.header__brand-link {
  text-decoration: none;
}

.header__tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-purple-primary);
  margin: 0;
}

/* ==========================================================================
   OVERRIDES - Mobile
   ========================================================================== */

@media (max-width: 47.9375rem) {
  body {
    padding: var(--pad-sm);
    padding-left: max(var(--pad-sm), env(safe-area-inset-left));
    padding-right: max(var(--pad-sm), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-sm), env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   OVERRIDES - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .noise {
    animation: none;
    opacity: 0.25;
  }
}

/* ==========================================================================
   OVERRIDES - Focus Indicators
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-purple-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}