/* Google Fonts (Syne, Instrument Serif, DM Mono) are loaded via
   <link> in index.html — no @import here to avoid blocking CSS parsing */

/* ============================================================
   CSS RESET
   Normalize browser defaults so layout behaves predictably
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  border: none;
  background: none;
}

button {
  /* Removes the 300 ms tap delay on touch devices without breaking
     text selection or scrolling on inputs */
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Hide scrollbars everywhere while preserving scroll functionality */
html,
body,
.panel,
.panel__content {
  scrollbar-width: none;       /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.panel::-webkit-scrollbar,
.panel__content::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, WebKit */
}


/* ============================================================
   CUSTOM PROPERTIES
   Single source of truth for all design tokens
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Colors: Global Base ---
     Dark neutral foundation shared across all sections */
  --color-bg:          #0d0e10;
  --color-surface:     #13151a;
  --color-border:      #1e2028;
  --color-text-muted:  #6b7080;
  --color-text-body:   #c8ccd8;
  --color-text-bright: #e8ecf5;

  /* --- Colors: Front Page ---
     Warm, personal, minimal — the welcome layer */
  --color-home-accent: #f0ece4;
  --color-home-accent-dim: #c8c4bc;

  /* --- Colors: RefUsAll Section ---
     Warm orange signals a professional tool product */
  --color-refusall-accent:     #e8884a;
  --color-refusall-accent-dim: #c86e33;
  --color-refusall-surface:    #16171c;

  /* --- Colors: PDI Section ---
     Dual-accent for a game atmosphere — sky blue + foliage green */
  --color-pdi-accent-blue:      #4a9de8;
  --color-pdi-accent-blue-dim:  #3282cc;
  --color-pdi-accent-green:     #7ecb6e;
  --color-pdi-accent-green-dim: #64b054;
  --color-pdi-surface:          #0e1420;

  /* --- Colors: PDI Panel Scene ---
     Pre-computed tints for parallax layer gradients — rgba() cannot
     interpolate from custom properties so these are fixed tokens. */
  --color-pdi-bg-glow:        #0e1d30;
  --color-pdi-bg-mid:         #060c14;
  --color-pdi-bg-deep:        #020508;
  --color-pdi-planet-core:    #1a3a60;
  --color-pdi-planet-deep:    #0c1e38;
  --color-pdi-nebula-blue:    rgba(74, 157, 232, 0.08);
  --color-pdi-nebula-teal:    rgba(50, 180, 160, 0.06);
  --color-pdi-nebula-green:   rgba(126, 203, 110, 0.05);
  --color-pdi-nebula-purple:  rgba(110, 60, 200, 0.04);
  --color-pdi-atmo-haze:      rgba(30, 80, 140, 0.15);
  --color-pdi-planet-halo:    rgba(30, 80, 150, 0.15);

  /* --- Colors: Portfolio Section ---
     Neutral warm grey keeps focus on the artwork */
  --color-portfolio-accent:     #a09890;
  --color-portfolio-accent-dim: #857d76;
  --color-portfolio-surface:    #14141a;
  /* Gallery sub-panel is a step lighter to read as a separate layer */
  --color-gallery-bg:           #1e1e28;

  /* --- Colors: Impressum ---
     Inherits global base, no unique accent needed */
  --color-impressum-accent: var(--color-text-muted);

  /* --- Colors: Navigation ---
     Semi-transparent so the page beneath bleeds through the blur */
  --color-nav-bg: rgba(13, 14, 16, 0.75);

  /* --- Colors: Alpha Tints ---
     Transparent variants used for pill button surfaces and borders.
     rgba() cannot consume custom properties directly, so these are
     pre-computed tokens rather than derived values. */
  --color-home-accent-tint:          rgba(240, 236, 228, 0.05);
  --color-home-accent-tint-hover:    rgba(240, 236, 228, 0.09);
  --color-home-accent-border:        rgba(240, 236, 228, 0.15);
  --color-home-accent-border-hover:  rgba(240, 236, 228, 0.35);

  --color-refusall-accent-tint:         rgba(232, 136, 74, 0.06);
  --color-refusall-accent-tint-hover:   rgba(232, 136, 74, 0.12);
  --color-refusall-accent-border:       rgba(232, 136, 74, 0.20);
  --color-refusall-accent-border-hover: rgba(232, 136, 74, 0.40);

  --color-portfolio-accent-tint:         rgba(160, 152, 144, 0.06);
  --color-portfolio-accent-tint-hover:   rgba(160, 152, 144, 0.12);
  --color-portfolio-accent-border:       rgba(160, 152, 144, 0.20);
  --color-portfolio-accent-border-hover: rgba(160, 152, 144, 0.40);


  /* --- Typography: Font Families --- */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Instrument Serif', serif;
  --font-ui:      'DM Mono', monospace;

  /* --- Typography: Scale (1rem = 16px) --- */
  --text-2xs:  0.625rem;   /*  10px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  2.75rem;    /*  44px */
  --text-4xl:  3.75rem;    /*  60px */
  --text-5xl:  5.5rem;     /*  88px */

  /* --- Typography: Line Heights --- */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Typography: Letter Spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;


  /* --- Spacing Scale (4px base unit) --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */


  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;


  /* --- Panel System ---
     Panels slide over the front page with rounded top corners */
  --panel-radius:   16px;
  --panel-duration: 0.5s;
  --panel-ease:     cubic-bezier(0.22, 1, 0.36, 1);

  /* Navigation pill buttons sit 16px from the viewport edge */
  --nav-offset: 16px;


  /* --- Timing / Easing ---
     Durations and curves used across all animations */
  --duration-micro:    0.15s;  /* instant feedback: focus, active states */
  --duration-hover:    0.2s;   /* hover transitions */
  --duration-entrance: 0.55s;  /* elements entering the viewport */
  --duration-panel:    var(--panel-duration);

  /* Natural physical easing — panels and entrances feel weighted */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  /* Balanced ease for reversible transitions like accordion open/close */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  /* Subtle overshoot for small interactive elements */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);


}

/* Breakpoints (CSS custom properties cannot be used inside @media):
   Mobile:  480px  |  Tablet:  768px  |  Desktop: 1024px  |  Wide: 1280px */


/* ============================================================
   BASE BODY STYLES
   ============================================================ */

body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);

  /* Improve subpixel rendering on dark backgrounds */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
}

/* UI labels, tags, button text, captions */
.ui-text,
.label,
time,
figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}


/* ============================================================
   NAVIGATION
   Floating pill bar, always visible above all panels.
   Each button exposes --btn-accent via its section modifier so
   hover and active styles resolve against the correct palette
   without any hardcoded color per-state rule.
   ============================================================ */

.nav {
  position: fixed;
  top: var(--nav-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999; /* must sit above panels (z-index: 100) at all times */

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--space-2);
  max-width: calc(100vw - var(--nav-offset) * 2);

  background: var(--color-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.nav__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);

  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;

  /* List each property explicitly — shorthand "all" would fight GSAP */
  transition:
    color            var(--duration-hover) ease,
    background-color var(--duration-hover) ease,
    box-shadow       var(--duration-hover) ease,
    filter           var(--duration-hover) ease,
    transform        var(--duration-hover) var(--ease-spring);
}

/* Per-section accent — consumed by hover and active rules below */
.nav__btn--home      { --btn-accent: var(--color-home-accent); }
.nav__btn--refusall  { --btn-accent: var(--color-refusall-accent); }
.nav__btn--pdi       { --btn-accent: var(--color-pdi-accent-blue); }
.nav__btn--portfolio { --btn-accent: var(--color-portfolio-accent); }
.nav__btn--impressum { --btn-accent: var(--color-impressum-accent); }

.nav__btn:hover {
  color: var(--btn-accent);
  background-color: rgba(255, 255, 255, 0.05);
  transform: scale(1.05);
  filter: brightness(1.15);
}

/* Active: the currently open section's button stays highlighted.
   box-shadow inset border uses currentColor so it inherits --btn-accent
   without needing a separate color value. No scale — it reads as stable. */
.nav__btn--active {
  color: var(--btn-accent);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px currentColor;
}

.nav__btn--active:hover {
  transform: none;
}

/* --- Mobile ---
   Compress buttons onto one line; allow wrapping only if unavoidable */
@media (max-width: 480px) {
  .nav {
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
  }

  .nav__btn {
    font-size: var(--text-2xs);
    letter-spacing: 0;
    padding: var(--space-1) var(--space-3);
  }
}


/* ============================================================
   FRONT PAGE
   Base layer — always beneath panels, never hidden.
   Two-column layout: portrait photo left, bio content right.
   Vertically centred in the viewport with headroom for the
   fixed navigation bar.
   ============================================================ */

.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* top padding clears the fixed nav; space-20 = 80px gives generous air */
  padding-top:    calc(var(--nav-offset) + var(--space-20));
  padding-bottom: var(--space-16);
  padding-left:   var(--space-8);
  padding-right:  var(--space-8);
}

.home__layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Photo column --- */

.home__photo-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Inner ring in the front-page accent tint; drop shadow grounds the image */
  border: 1px solid var(--color-border);
  box-shadow:
    0 0 0 1px var(--color-home-accent-border),
    0 32px 80px rgba(0, 0, 0, 0.55);
}

.home__photo {
  width: 100%;
  height: auto;
}

/* --- Bio column --- */

.home__name {
  font-size: var(--text-4xl);
  font-weight: 800;
  /* Warm off-white rather than pure bright white keeps it personal */
  color: var(--color-home-accent);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.home__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.home__bio {
  /* Instrument Serif inherited from body; larger size for comfortable reading */
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-body);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}

/* --- Links / CTAs --- */

.home__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--duration-hover) ease,
    border-color     var(--duration-hover) ease,
    transform        var(--duration-hover) var(--ease-spring);
}

.home__link--artstation {
  color: var(--color-home-accent);
  background-color: var(--color-home-accent-tint);
  border: 1px solid var(--color-home-accent-border);
}

.home__link--artstation:hover {
  background-color: var(--color-home-accent-tint-hover);
  border-color: var(--color-home-accent-border-hover);
  transform: scale(1.03);
}

/* Orange accent signals this opens the RefUsAll section */
.home__link--refusall {
  color: var(--color-refusall-accent);
  background-color: var(--color-refusall-accent-tint);
  border: 1px solid var(--color-refusall-accent-border);
}

.home__link--refusall:hover {
  background-color: var(--color-refusall-accent-tint-hover);
  border-color: var(--color-refusall-accent-border-hover);
  transform: scale(1.03);
}

/* --- Tablet (≤ 768px): stack to single column, centre photo --- */

@media (max-width: 768px) {
  .home {
    align-items: flex-start;
    padding-top: calc(var(--nav-offset) + var(--space-24));
  }

  .home__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 480px;
  }

  .home__col--photo {
    display: flex;
    justify-content: center;
  }

  .home__photo-wrap {
    max-width: 260px;
    width: 100%;
  }

  .home__col--bio {
    text-align: center;
  }

  .home__name {
    font-size: var(--text-3xl);
  }

  .home__bio {
    font-size: var(--text-base);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .home__links {
    justify-content: center;
  }
}

/* --- Mobile (≤ 480px): tighten horizontal padding, compress type --- */

@media (max-width: 480px) {
  .home {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .home__name {
    font-size: var(--text-2xl);
  }
}


/* ============================================================
   PANEL SYSTEM
   Full-viewport overlays that slide over the front page.
   PanelManager.init() sets translateY(100%) before first paint;
   these base styles define everything else about the panel shell.
   ============================================================ */

.panel {
  position: fixed;
  inset: 0;

  /* Rounded top corners only — the bottom edge is below the viewport
     during the slide-up animation so no radius is needed there */
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;

  /* Above front-page content, below the nav bar (z-index: 9999) */
  z-index: 100;

  overflow-y: auto;
  overflow-x: hidden;

  touch-action: pan-y;
  overscroll-behavior: contain;

  background-color: var(--panel-bg);

  /* Block accidental clicks while the panel is off-screen */
  pointer-events: none;
}

.panel[aria-hidden="false"] {
  pointer-events: auto;
}

/* Per-panel background and accent.
   --panel-accent is inherited by .panel__close hover state. */
.panel--refusall {
  --panel-bg:     var(--color-refusall-surface);
  --panel-accent: var(--color-refusall-accent);
}

.panel--pdi {
  --panel-bg:     var(--color-pdi-surface);
  --panel-accent: var(--color-pdi-accent-blue);
}

.panel--portfolio {
  --panel-bg:     var(--color-portfolio-surface);
  --panel-accent: var(--color-portfolio-accent);
}

.panel--impressum {
  --panel-bg:     var(--color-surface);
  --panel-accent: var(--color-impressum-accent);
}

/* --- Close button ---
   Sticky so it remains reachable at any scroll depth.
   margin-left: auto right-aligns it within the panel's block context. */

.panel__close {
  position: sticky;
  top: var(--space-4);
  z-index: 1;

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

  /* Push to the right edge of the panel */
  margin-left: auto;
  margin-right: var(--space-4);
  margin-top: var(--space-4);

  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);

  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-text-muted);

  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  cursor: pointer;

  transition:
    color            var(--duration-hover) ease,
    background-color var(--duration-hover) ease,
    border-color     var(--duration-hover) ease,
    transform        var(--duration-hover) var(--ease-spring);
}

.panel__close:hover {
  color: var(--panel-accent);
  background-color: rgba(255, 255, 255, 0.09);
  /* currentColor inherits the accent color set on the line above */
  border-color: currentColor;
  transform: scale(1.1);
}

/* --- Content wrapper --- */

.panel__content {
  padding: var(--space-6) var(--space-8) calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .panel__content {
    padding: var(--space-2) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 20px));
  }
  .panel__close {
    margin-top: var(--space-2);
  }
}

/* --- Mobile (≤ 480px): close button pinned bottom-left, content padded for it --- */

@media (max-width: 480px) {
  .panel__close {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-4);
    top: auto;
    margin: 0;
    z-index: 200;
  }

  .panel__content {
    padding: var(--space-12) var(--space-3) var(--space-20) var(--space-3);
  }
}


/* ============================================================
   REFUSALL PANEL — HERO
   Entry point of the RefUsAll section. Left-aligned for a
   professional, tool-like reading experience. The orange
   accent appears only on the product name and the primary
   CTA — everywhere else the palette stays grey.
   ============================================================ */

.rua-hero {
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
  /* Visual separator that marks the end of the hero zone */
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-16);
}

.rua-hero__name {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

/* Anchoring the orange to one syllable keeps the heading legible
   without turning the whole name into a marketing colour block */
.rua-hero__name-accent {
  color: var(--color-refusall-accent);
}

.rua-hero__tagline {
  /* Instrument Serif inherited from body — feels warm against the tool UI */
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-body);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

/* Compact tag row — communicates core value props at a glance */
.rua-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.rua-hero__badge {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
}

/* CTA row */
.rua-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.rua-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  cursor: not-allowed;
}

/* Primary: orange palette dimmed by opacity — conveys "coming soon"
   without losing the product's colour identity */
.rua-hero__cta--download {
  color: var(--color-refusall-accent);
  background-color: var(--color-refusall-accent-tint);
  border: 1px solid var(--color-refusall-accent-border);
  opacity: 0.45;
}

/* Secondary: plain ghost button — no Steam branding until the page is live */
.rua-hero__cta--steam {
  color: var(--color-text-body);
  background-color: transparent;
  border: 1px solid var(--color-border);
  opacity: 0.5;
}

/* Release timeline — single restrained line of DM Mono below the CTAs */
.rua-hero__status {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* --- Tablet (≤ 768px) --- */

@media (max-width: 768px) {
  .rua-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
    margin-bottom: var(--space-12);
  }

  .rua-hero__name {
    font-size: var(--text-4xl);
  }

  .rua-hero__tagline {
    font-size: var(--text-lg);
    max-width: 100%;
  }

  .rua-hero__cta {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-xs);
  }
}

/* --- Mobile (≤ 480px): compress heading, stack CTAs full-width --- */

@media (max-width: 480px) {
  .rua-hero__name {
    font-size: var(--text-3xl);
  }

  .rua-hero__ctas {
    flex-direction: column;
    /* stretch makes buttons fill the container width without width: 100% */
    align-items: stretch;
  }
}


/* ============================================================
   REFUSALL PANEL — KEY FEATURES ACCORDION
   Six expandable cards. overflow: hidden on .feature clips
   body content to the card's rounded corners. overflow: hidden
   on .feature__body is set in CSS; GSAP owns only the height.
   ============================================================ */

.rua-features {
  margin-bottom: var(--space-16);
}

.rua-features__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* --- Card shell --- */

.feature {
  /* overflow: hidden clips the body's animated content to the rounded corners */
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-hover) ease;
}

.feature--open {
  border-color: var(--color-refusall-accent);
}

/* --- Trigger button (the always-visible header of each card) --- */

.feature__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  text-align: left;
  cursor: pointer;
  /* No border-radius needed — parent clips it */
  overflow: hidden;
}

.feature__trigger-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Prevents the 1fr column from growing to max-content width,
     which would allow the teaser text to overflow the card boundary */
  min-width: 0;
}

.feature__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.feature__teaser {
  font-size: var(--text-sm);
  /* Instrument Serif inherited from body */
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

/* Expand indicator: + rotates 45° to become × when open */

.feature__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px; /* optical alignment with the feature name baseline */
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-muted);
  transition:
    transform var(--duration-panel) var(--ease-out),
    color     var(--duration-hover) ease;
}

.feature--open .feature__indicator {
  transform: rotate(45deg);
  color: var(--color-refusall-accent);
}

/* --- Expandable body — height animated by GSAP --- */

.feature__body {
  height: 0; /* CSS default closed state; GSAP animates from here */
  overflow: hidden;
  padding: 0 var(--space-6);
}

.feature__description {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-body);
  max-width: 65ch;
  margin-bottom: var(--space-6);
  /* padding-top separates description from the trigger above */
  padding-top: var(--space-2);
}

/* --- Media placeholder / lazy-loaded GIF --- */

.feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.feature__media-fallback {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.feature__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* JS adds this class once the image has fully loaded */
.feature__media-img--visible {
  opacity: 1;
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .feature__trigger {
    padding: var(--space-4) var(--space-4);
  }

  .feature__body {
    padding: 0 var(--space-4);
  }

  .feature__name {
    font-size: var(--text-base);
  }
}


/* ============================================================
   REFUSALL PANEL — FULL FEATURES LIST
   Grouped accordion by category. Each .feat-group manages its
   own open state independently. Compact detail cards — trigger
   shows the feature name only; body reveals the one-liner and
   an optional lazy-loaded screenshot.
   ============================================================ */

.rua-full-features {
  margin-bottom: var(--space-16);
}

.rua-full-features__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}

/* --- Category group --- */

.feat-group {
  margin-bottom: var(--space-10);
}

/* DM Mono uppercase keeps the category label subtle and UI-like,
   separating it visually from the Syne feature names below */
.feat-group__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-refusall-accent);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.feat-group__list {
  padding: 0;
}

/* --- Individual feature card --- */

.feat {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  transition: border-color var(--duration-hover) ease;
}

.feat--open {
  border-color: var(--color-refusall-accent);
}

/* --- Trigger — single line: name left, indicator right --- */

.feat__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  /* Meets WCAG 2.5.5 / Apple HIG minimum touch target size */
  min-height: 44px;
  text-align: left;
  cursor: pointer;
}

.feat__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Expand indicator — mirrors .feature__indicator pattern */

.feat__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-text-muted);
  transition:
    transform var(--duration-panel) var(--ease-out),
    color     var(--duration-hover) ease;
}

.feat--open .feat__indicator {
  transform: rotate(45deg);
  color: var(--color-refusall-accent);
}

/* --- Expandable body — height animated by GSAP --- */

.feat__body {
  height: 0; /* CSS default closed state; GSAP animates from here */
  overflow: hidden;
  padding: 0 var(--space-4);
}

/* One-liner description revealed on expand */
.feat__description {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  padding-top: var(--space-1);
  padding-bottom: var(--space-4);
}

/* --- Screenshot — injected by JS only when the image loads ---
   JS appends an <img> into this div and adds --loaded to show it.
   The div is always in the DOM as a mounting point but has no
   visual presence until an image successfully loads. */

.feature__screenshot {
  display: none;
  margin-top: 0;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* aspect-ratio enforced via the img inside */
}

.feature__screenshot--loaded {
  display: block;
}

.feature__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature__screenshot img.is-visible {
  opacity: 1;
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .feat__trigger {
    padding: var(--space-3) var(--space-3);
  }

  .feat__body {
    padding: 0 var(--space-3);
  }
}


/* ============================================================
   PDI PANEL — ALIEN LANDSCAPE PARALLAX SCENE
   Nine layers back to front. Layers with data-pdi-parallax are
   driven by PDIParallax in main.js via GSAP quickSetter on
   mousemove. On touch devices the mousemove listener is skipped;
   only the large planet receives a slow CSS ambient float.
   ============================================================ */

/* Fills the fixed panel; overflow:hidden clips all parallax
   layers at the panel boundary during mouse movement. */
.pdi-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Base for all parallax and content layers.
   Non-full-panel layers (large-planet, small-moon, atmosphere-haze)
   override inset with their own positioning. */
.pdi-layer {
  position: absolute;
  inset: 0;
}

/* --- Layer 1: Deep space background --- */

.pdi-layer--deep-space {
  background: radial-gradient(
    ellipse 140% 120% at 55% 45%,
    #0e1a3a 0%,
    #091228 30%,
    #060818 100%
  );
}

/* --- Layer 2: Star field — ~60 small 1px dots via ::before,
   ~20 larger 2px dots via ::after; both anchored at the layer's
   top-left corner and scattered across the sky area. --- */

.pdi-layer--stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    /* original 60 white stars */
    72px 43px 0 0 rgba(255,255,255,0.75),
    318px 65px 0 0 rgba(255,255,255,0.5),
    584px 28px 0 0 rgba(255,255,255,0.65),
    840px 55px 0 0 rgba(255,255,255,0.45),
    1100px 38px 0 0 rgba(255,255,255,0.7),
    1350px 72px 0 0 rgba(255,255,255,0.5),
    155px 102px 0 0 rgba(255,255,255,0.6),
    425px 88px 0 0 rgba(255,255,255,0.45),
    710px 120px 0 0 rgba(255,255,255,0.7),
    960px 95px 0 0 rgba(255,255,255,0.55),
    1220px 108px 0 0 rgba(255,255,255,0.5),
    1408px 55px 0 0 rgba(255,255,255,0.65),
    248px 195px 0 0 rgba(255,255,255,0.55),
    520px 178px 0 0 rgba(255,255,255,0.4),
    780px 210px 0 0 rgba(255,255,255,0.6),
    1020px 188px 0 0 rgba(255,255,255,0.5),
    1290px 202px 0 0 rgba(255,255,255,0.45),
    88px 245px 0 0 rgba(255,255,255,0.6),
    380px 260px 0 0 rgba(255,255,255,0.4),
    645px 238px 0 0 rgba(255,255,255,0.55),
    905px 255px 0 0 rgba(255,255,255,0.45),
    1165px 242px 0 0 rgba(255,255,255,0.65),
    190px 295px 0 0 rgba(255,255,255,0.5),
    468px 310px 0 0 rgba(255,255,255,0.4),
    742px 288px 0 0 rgba(255,255,255,0.6),
    1055px 305px 0 0 rgba(255,255,255,0.5),
    1325px 282px 0 0 rgba(255,255,255,0.55),
    32px 342px 0 0 rgba(255,255,255,0.45),
    285px 365px 0 0 rgba(255,255,255,0.6),
    560px 338px 0 0 rgba(255,255,255,0.5),
    820px 355px 0 0 rgba(255,255,255,0.4),
    1080px 342px 0 0 rgba(255,255,255,0.55),
    1380px 358px 0 0 rgba(255,255,255,0.45),
    125px 412px 0 0 rgba(255,255,255,0.5),
    410px 428px 0 0 rgba(255,255,255,0.4),
    685px 402px 0 0 rgba(255,255,255,0.6),
    945px 418px 0 0 rgba(255,255,255,0.5),
    1205px 405px 0 0 rgba(255,255,255,0.45),
    68px 468px 0 0 rgba(255,255,255,0.55),
    340px 485px 0 0 rgba(255,255,255,0.4),
    615px 462px 0 0 rgba(255,255,255,0.5),
    882px 478px 0 0 rgba(255,255,255,0.45),
    1142px 465px 0 0 rgba(255,255,255,0.6),
    1410px 480px 0 0 rgba(255,255,255,0.4),
    175px 518px 0 0 rgba(255,255,255,0.5),
    448px 532px 0 0 rgba(255,255,255,0.45),
    732px 508px 0 0 rgba(255,255,255,0.55),
    998px 524px 0 0 rgba(255,255,255,0.4),
    1268px 510px 0 0 rgba(255,255,255,0.5),
    38px 568px 0 0 rgba(255,255,255,0.45),
    302px 582px 0 0 rgba(255,255,255,0.5),
    578px 558px 0 0 rgba(255,255,255,0.4),
    848px 574px 0 0 rgba(255,255,255,0.55),
    1115px 560px 0 0 rgba(255,255,255,0.45),
    1395px 575px 0 0 rgba(255,255,255,0.5),
    220px 145px 0 0 rgba(255,255,255,0.6),
    680px 52px 0 0 rgba(255,255,255,0.55),
    1180px 158px 0 0 rgba(255,255,255,0.5),
    48px 392px 0 0 rgba(255,255,255,0.45),
    1332px 444px 0 0 rgba(255,255,255,0.55),
    /* 30 new blue-tinted stars (rgba 200,222,255) */
    142px 22px 0 0 rgba(200,222,255,0.8),
    298px 48px 0 0 rgba(200,222,255,0.6),
    468px 15px 0 0 rgba(200,222,255,0.7),
    622px 72px 0 0 rgba(200,222,255,0.55),
    758px 38px 0 0 rgba(200,222,255,0.75),
    928px 58px 0 0 rgba(200,222,255,0.6),
    1048px 25px 0 0 rgba(200,222,255,0.7),
    1188px 48px 0 0 rgba(200,222,255,0.55),
    1288px 15px 0 0 rgba(200,222,255,0.8),
    62px 128px 0 0 rgba(200,222,255,0.65),
    208px 148px 0 0 rgba(200,222,255,0.5),
    388px 115px 0 0 rgba(200,222,255,0.6),
    548px 158px 0 0 rgba(200,222,255,0.7),
    718px 132px 0 0 rgba(200,222,255,0.55),
    878px 148px 0 0 rgba(200,222,255,0.65),
    1028px 122px 0 0 rgba(200,222,255,0.5),
    1148px 165px 0 0 rgba(200,222,255,0.6),
    1378px 128px 0 0 rgba(200,222,255,0.7),
    35px 225px 0 0 rgba(200,222,255,0.7),
    228px 218px 0 0 rgba(200,222,255,0.55),
    448px 238px 0 0 rgba(200,222,255,0.6),
    668px 215px 0 0 rgba(200,222,255,0.5),
    862px 232px 0 0 rgba(200,222,255,0.65),
    1082px 228px 0 0 rgba(200,222,255,0.55),
    1258px 218px 0 0 rgba(200,222,255,0.7),
    108px 355px 0 0 rgba(200,222,255,0.6),
    488px 362px 0 0 rgba(200,222,255,0.5),
    758px 348px 0 0 rgba(200,222,255,0.65),
    338px 445px 0 0 rgba(200,222,255,0.6),
    1198px 428px 0 0 rgba(200,222,255,0.5);
}

.pdi-layer--stars::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    /* original 20 bright white stars */
    200px 35px 1px 0 rgba(255,255,255,0.9),
    550px 18px 1px 0 rgba(255,255,255,0.85),
    950px 42px 1px 0 rgba(255,255,255,0.9),
    1280px 28px 1px 0 rgba(255,255,255,0.8),
    1430px 95px 1px 0 rgba(255,255,255,0.85),
    80px 138px 1px 0 rgba(255,255,255,0.9),
    460px 155px 1px 0 rgba(255,255,255,0.8),
    785px 132px 1px 0 rgba(255,255,255,0.85),
    1085px 148px 1px 0 rgba(255,255,255,0.9),
    1355px 162px 1px 0 rgba(255,255,255,0.8),
    25px 268px 1px 0 rgba(255,255,255,0.85),
    360px 285px 1px 0 rgba(255,255,255,0.9),
    640px 258px 1px 0 rgba(255,255,255,0.8),
    910px 275px 1px 0 rgba(255,255,255,0.85),
    1195px 262px 1px 0 rgba(255,255,255,0.9),
    1425px 278px 1px 0 rgba(255,255,255,0.8),
    55px 388px 1px 0 rgba(255,255,255,0.85),
    335px 415px 1px 0 rgba(255,255,255,0.9),
    610px 395px 1px 0 rgba(255,255,255,0.8),
    890px 408px 1px 0 rgba(255,255,255,0.85),
    /* 10 new blue-tinted 2px stars */
    132px 65px 1px 0 rgba(200,222,255,0.95),
    425px 42px 1px 0 rgba(200,222,255,0.9),
    728px 78px 1px 0 rgba(200,222,255,0.85),
    1022px 48px 1px 0 rgba(200,222,255,0.9),
    1318px 88px 1px 0 rgba(200,222,255,0.85),
    268px 188px 1px 0 rgba(200,222,255,0.9),
    498px 498px 1px 0 rgba(255,255,255,0.85),
    788px 528px 1px 0 rgba(255,255,255,0.9),
    1108px 512px 1px 0 rgba(255,255,255,0.8),
    1368px 498px 1px 0 rgba(255,255,255,0.85);
}

/* --- Layer 3: Large planet — 420px circle, upper left ---
   Soft atmospheric glow via box-shadow; radial gradient simulates
   a lit surface with a darker limb. */

.pdi-layer--large-planet {
  inset: auto;
  top: 8%;
  left: 2%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #d8eeff 0%,
    #b8d8f8 25%,
    #88b8e8 55%,
    #5888c8 80%,
    #3a68a8 100%
  );
  box-shadow:
    0 0 80px 40px rgba(180,220,255,0.25),
    0 0 160px 80px rgba(100,160,255,0.1);
}

/* --- Layer 4: Small moon — 90px circle, upper center-right --- */

.pdi-layer--small-moon {
  inset: auto;
  top: 18%;
  right: 22%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 42% 38%,
    #b0c8d8 0%,
    #8aafc4 35%,
    #5e7e98 70%,
    #3a5870 100%
  );
  box-shadow: 0 0 20px 8px rgba(160,200,220,0.2);
}

/* --- Layers 3–4: Background planets ---
   Inserted before large-planet in the DOM so they render behind it. */

.pdi-layer--background-planet-1 {
  inset: auto;
  top: 28%;
  left: 40%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 33%,
    #6a4830 0%,
    #4a3020 45%,
    #2a1810 100%
  );
  box-shadow: 0 0 30px 8px rgba(100,70,30,0.2);
}

.pdi-layer--background-planet-2 {
  inset: auto;
  top: 22%;
  right: 30%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    #7a5050 0%,
    #5a3535 50%,
    #3a2020 100%
  );
  box-shadow: 0 0 15px 4px rgba(120,60,60,0.15);
}

/* --- Layer 7: Planet surface ---
   3200px circle; only the top arc is visible at the panel bottom.
   Centered via left:calc(50%-1600px) rather than transform so GSAP parallax
   (x/y quickSetter) can apply without overwriting a CSS transform. */

.pdi-layer--planet-surface {
  inset: auto;
  width: 3200px;
  height: 3200px;
  border-radius: 50%;
  left: calc(50% - 1600px);
  top: 65%;
  background: radial-gradient(
    circle at 50% 5%,
    #1a4060 0%,
    #102840 30%,
    #0d2a3a 60%,
    #081820 100%
  );
  box-shadow:
    0 -20px 60px 10px rgba(30,140,200,0.3),
    0 -50px 120px 0  rgba(20,90,160,0.15);
}

/* --- Layer 8: Content — no parallax ---
   Top-anchored at 120px so the PDI title clears the nav and sits
   firmly in the sky area above the planet horizon. */

.pdi-layer--content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.pdi-content {
  text-align: center;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.7));
}

/* Massive gradient "PDI" — anchors the scene visually */
.pdi-content__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 18vw, 14rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  background: linear-gradient(
    135deg,
    var(--color-pdi-accent-blue)  0%,
    var(--color-pdi-accent-green) 75%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.pdi-content__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-body);
  margin-bottom: var(--space-3);
}

.pdi-content__status {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

/* --- Tablet (≤ 768px) --- */

@media (max-width: 768px) {
  /* Large blue planet: upper left, right edge stays left of screen center */
  .pdi-layer--large-planet {
    width: 280px;
    height: 280px;
    top: 5%;
    left: 0%;
  }

  /* Small moon: upper right, clear of other planets */
  .pdi-layer--small-moon {
    width: 60px;
    height: 60px;
    top: 12%;
    right: 10%;
  }

  /* Background planet 1 (brown): center-right sky, away from blue planet */
  .pdi-layer--background-planet-1 {
    width: 80px;
    height: 80px;
    top: 28%;
    left: auto;
    right: 15%;
  }

  /* Background planet 2 (red): left-center sky, below blue planet */
  .pdi-layer--background-planet-2 {
    width: 50px;
    height: 50px;
    top: 32%;
    left: 28%;
    right: auto;
  }

  /* Planet surface: horizon arc visible in the bottom 30% of panel */
  .pdi-layer--planet-surface {
    width: 1400px;
    height: 1400px;
    left: calc(50% - 700px);
    top: 70%;
  }

  /* Title sits vertically centered in the clear sky between planets and horizon */
  .pdi-layer--content {
    padding-top: 0;
    align-items: center;
  }
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .pdi-content__subtitle {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
  }

  .pdi-content__status {
    font-size: var(--text-base);
  }
}

/* --- Touch devices: only the large planet gets a slow ambient float.
   JS detects (hover:none)+(pointer:coarse) and adds .pdi-scene--touch;
   all other layers remain static on touch devices. --- */

@keyframes pdi-float {
  0%, 100% { transform: translate(0px, 0px); }
  35%       { transform: translate(8px, -6px); }
  65%       { transform: translate(-5px, -9px); }
}

.pdi-scene--touch .pdi-layer--large-planet {
  animation: pdi-float 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pdi-scene--touch .pdi-layer--large-planet {
    animation: none;
  }
}


/* ============================================================
   PORTFOLIO PANEL
   Filter bar of DM Mono pill buttons, dynamically built from
   portfolio.json by PortfolioPanel in main.js.
   ============================================================ */

.portfolio-header {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.portfolio-header__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
}

/* --- Filter pill row --- */

.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.portfolio-filter__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);

  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;

  transition:
    color            var(--duration-hover) ease,
    background-color var(--duration-hover) ease,
    border-color     var(--duration-hover) ease,
    transform        var(--duration-hover) var(--ease-spring);
}

.portfolio-filter__btn:hover {
  color: var(--color-portfolio-accent);
  background-color: var(--color-portfolio-accent-tint);
  border-color: var(--color-portfolio-accent-border);
  transform: scale(1.04);
}

/* Active filter button mirrors the accent palette without a scale */
.portfolio-filter__btn--active {
  color: var(--color-portfolio-accent);
  background-color: var(--color-portfolio-accent-tint);
  border-color: var(--color-portfolio-accent-border);
}

.portfolio-filter__btn--active:hover {
  transform: none;
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .portfolio-header {
    padding: 0;
    margin-bottom: var(--space-3);
  }

  .portfolio-header__title {
    font-size: var(--text-xl);
    line-height: 1.2;
  }

  .portfolio-filter {
    margin-bottom: var(--space-3);
  }

  .portfolio-filter__btn {
    font-size: var(--text-2xs);
    letter-spacing: 0;
  }
}

/* --- View size toggle --- */

.portfolio-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.portfolio-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color            var(--duration-hover) ease,
    border-color     var(--duration-hover) ease,
    background-color var(--duration-hover) ease;
}

.portfolio-view-toggle__btn:hover {
  color: var(--color-portfolio-accent);
  border-color: var(--color-portfolio-accent-border);
}

.portfolio-view-toggle__btn--active {
  color: var(--color-portfolio-accent);
  border-color: var(--color-portfolio-accent-border);
  background-color: var(--color-portfolio-accent-tint);
}


/* --- Thumbnail grid --- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-16);
}

@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: var(--space-4);
  }

  .portfolio-card {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    height: auto;
  }

  .portfolio-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* --- Large thumbnails modifier (fewer per row, bigger cards) --- */

.portfolio-grid--small {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .portfolio-grid--small {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-grid--small {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}




/* --- Individual thumbnail card --- */

.portfolio-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  touch-action: manipulation;
  /* CSS hover scale — GSAP clears its inline transform after filter animations
     so this CSS rule takes over cleanly once GSAP is done */
  transition:
    transform    0.2s ease,
    border-color 0.2s ease;
}

.portfolio-card:hover {
  transform: scale(1.03);
  border-color: var(--color-portfolio-accent-border);
}

.portfolio-card:focus-visible {
  outline: 2px solid var(--color-portfolio-accent);
  outline-offset: 3px;
}

.portfolio-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 404 fallback — image area collapses to the card's background colour */
.portfolio-card__img--missing {
  visibility: hidden;
}

/* Title overlay — fades up from the bottom edge on hover.
   aria-hidden="true" is set in JS; the card's aria-label carries the title. */
.portfolio-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Generous top padding ensures the gradient covers the bottom third */
  padding: var(--space-8) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);

  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-bright);

  transition:
    opacity   0.2s ease,
    transform 0.2s ease;
}

/* Hide title by default only on devices that support hover — on touch
   devices the title stays visible since there is no hover to reveal it */
@media (hover: hover) {
  .portfolio-card__title {
    opacity: 0;
    transform: translateY(4px);
  }

  .portfolio-card:hover .portfolio-card__title {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .portfolio-view-toggle {
    margin-bottom: var(--space-2);
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: var(--space-6);
  }

  .portfolio-card {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    height: auto;
  }

  .portfolio-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portfolio-grid--small {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
}


/* ============================================================
   PORTFOLIO PANEL — DETAIL VIEW
   Replaces the grid view inside the portfolio panel when a
   thumbnail is clicked. Simple content swap — no separate
   panel, no position:fixed, no animation. Lives inside
   .panel__content and scrolls with the portfolio panel.
   ============================================================ */

.portfolio-detail {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-16);
}

.portfolio-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);

  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.04);
  cursor: pointer;

  transition:
    color            var(--duration-hover) ease,
    background-color var(--duration-hover) ease,
    border-color     var(--duration-hover) ease;
}

.portfolio-detail__back:hover {
  color: var(--color-portfolio-accent);
  background-color: var(--color-portfolio-accent-tint);
  border-color: var(--color-portfolio-accent-border);
}

.portfolio-detail__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.portfolio-detail__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-body);
  max-width: 65ch;
  margin-bottom: var(--space-10);
}

.portfolio-detail__description:empty {
  display: none;
}

.portfolio-detail__images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: var(--space-4);
}

.detail-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease;
}

.detail-thumb:hover {
  border-color: var(--color-portfolio-accent);
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.detail-thumb img.portfolio-detail__img--loaded {
  opacity: 1;
}

/* --- Fullsize overlay --- */

#detail-fullsize {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#detail-fullsize.active {
  display: flex;
}

#detail-fullsize img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* --- Tablet (≤ 768px) --- */

@media (max-width: 768px) {
  .portfolio-detail {
    padding: var(--space-4) var(--space-4) var(--space-12);
  }

  .portfolio-detail__title {
    font-size: var(--text-2xl);
  }

  .portfolio-detail__images {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .portfolio-detail {
    padding: var(--space-3) var(--space-3) var(--space-10);
  }

  .portfolio-detail__title {
    font-size: var(--text-xl);
  }

  .portfolio-detail__images {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   IMPRESSUM PANEL
   Two-tab layout with a GSAP crossfade between content blocks.
   Deliberately minimal — the copy carries the weight here.
   ============================================================ */

/* --- Tab bar --- */

.impr-tabs {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-10);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.impr-tab {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);

  padding: var(--space-2) var(--space-4) var(--space-3);
  /* 2px bottom border bleeds over the tablist's 1px border-bottom,
     creating the standard "selected tab" underline effect */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;

  transition:
    color        var(--duration-hover) ease,
    border-color var(--duration-hover) ease;
}

.impr-tab:hover {
  color: var(--color-text-body);
}

.impr-tab--active {
  color: var(--color-text-bright);
  border-bottom-color: var(--color-text-muted);
}

/* --- Hidden inactive panel --- */

.impr-panel[aria-hidden="true"] {
  display: none;
}

/* --- Content typography --- */

.impr-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-10);
}

.impr-subheading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.impr-section {
  margin-bottom: var(--space-8);
}

.impr-text {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-body);
  max-width: 65ch;
}

/* Consecutive paragraphs within the same section get breathing room */
.impr-text + .impr-text {
  margin-top: var(--space-4);
}

.impr-text a {
  color: var(--color-text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
  transition: color var(--duration-hover) ease;
}

.impr-text a:hover {
  color: var(--color-text-bright);
}


/* Datenschutzerklärung — stand date at the bottom */
.impr-date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-top: var(--space-10);
}

/* --- Mobile (≤ 480px) --- */

@media (max-width: 480px) {
  .impr-tabs {
    gap: 0;
  }

  .impr-tab {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    font-size: var(--text-2xs);
    letter-spacing: 0;
  }

  .impr-heading {
    font-size: var(--text-2xl);
  }
}


/* ============================================================
   FOCUS STYLES
   Keyboard-navigation focus rings for all interactive elements.
   Uses :focus-visible so mouse users never see the ring.
   Each ring matches the element's own accent colour so it reads
   as part of the design rather than a browser default.
   ============================================================ */

/* Navigation buttons */
.nav__btn:focus-visible {
  outline: 2px solid var(--btn-accent);
  outline-offset: 3px;
}

/* Front-page CTAs */
.home__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Panel close (×) buttons */
.panel__close:focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: 3px;
}

/* RefUsAll hero feature accordion triggers */
.feature__trigger:focus-visible {
  /* Inset ring avoids layout shift inside the card border */
  outline: 2px solid var(--color-refusall-accent);
  outline-offset: -2px;
}

/* RefUsAll full-feature-list accordion triggers */
.feat__trigger:focus-visible {
  outline: 2px solid var(--color-refusall-accent);
  outline-offset: -2px;
}

/* Portfolio filter pills */
.portfolio-filter__btn:focus-visible {
  outline: 2px solid var(--color-portfolio-accent);
  outline-offset: 3px;
}

/* Portfolio thumbnail cards (already defined above, kept for reference) */

/* Portfolio detail back button */
.portfolio-detail__back:focus-visible {
  outline: 2px solid var(--color-portfolio-accent);
  outline-offset: 3px;
}

/* Impressum tab buttons */
.impr-tab:focus-visible {
  outline: 2px solid var(--color-text-muted);
  outline-offset: 3px;
}

/* Impressum body links */
.impr-text a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}


/* ============================================================
   REDUCED MOTION
   Override all motion-heavy properties for users who have
   requested reduced movement at the OS level
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  /* Disable CSS transitions — GSAP panel and entrance animations
     are skipped via matchMedia checks in main.js */
  .nav__btn,
  .home__link,
  .panel__close,
  .feature,
  .feature__indicator,
  .feature__media-img,
  .feat,
  .feat__indicator,
  .feature__screenshot img,
  .portfolio-filter__btn,
  .portfolio-card,
  .portfolio-card__title,
  .portfolio-detail__back,
  .detail-thumb,
  .detail-thumb img,
  .impr-tab,
  .impr-text a {
    transition: none;
  }

}