/**
 * Otto Björkland Portfolio Engine v3 — Components Architecture
 * App header (z=4000), navigation buttons, contact popover, modal overlays, 14px mobile geometry
 */

/* ---------------------------------------------------- */
/* DOCKED TOP HEADER (z-index: 4000)                    */
/* ---------------------------------------------------- */
header.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 48px;
  z-index: 4000;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.scrolled header.app-header,
body.header-persistent header.app-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.card-inspected header.app-header,
body.modal-open header.app-header {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  z-index: 4000 !important;
}

/* Explicit touch tap highlight elimination for mobile interactive targets */
.nav-btn, .brand-logo, .glass-slab-card, .interactive-btn, button, a {
  -webkit-tap-highlight-color: transparent !important;
}

.header-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}

.header-inner > * {
  pointer-events: auto;
}

/* Brand Identity Block */
.brand-block {
  display: flex;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-block:hover {
  opacity: 0.82;
}

.brand-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0b1320;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.brand-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}

/* Header Navigation Tabs */
.header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-btn {
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-btn:hover {
  color: #0b1320;
}

.nav-btn.active {
  color: #ff4d15;
}

.nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff4d15;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 77, 21, 0.6);
}

/* ---------------------------------------------------- */
/* GET IN TOUCH POPOVER (With Hover Bridge)             */
/* ---------------------------------------------------- */
.nav-contact-wrapper {
  position: relative;
}

.contact-trigger {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  color: #0b1320 !important;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-rim);
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}

.contact-trigger > span,
.contact-trigger > svg {
  position: relative;
  z-index: 2;
}

.contact-trigger:hover,
.nav-contact-wrapper:hover .contact-trigger,
.nav-contact-wrapper.is-open .contact-trigger {
  border-color: rgba(255, 77, 21, 0.45);
  color: #ff4d15 !important;
  box-shadow: 0 10px 24px -8px rgba(255, 77, 21, 0.28), var(--glass-rim);
  transform: translateY(-1px);
}

.dropdown-chevron {
  transition: transform 0.25s ease;
}

.nav-contact-wrapper:hover .dropdown-chevron,
.nav-contact-wrapper.is-hovered .dropdown-chevron,
.nav-contact-wrapper.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

.contact-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), var(--glass-rim);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  overflow: visible;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 150;
}

/* Micro-Refraction Inner Bevel */
.contact-popover::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 15.5px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}

/* Invisible hover bridge covering the gap so cursor hover is never lost */
.contact-popover::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
  pointer-events: auto;
}

.nav-contact-wrapper:hover .contact-popover,
.nav-contact-wrapper.is-hovered .contact-popover,
.nav-contact-wrapper.is-open .contact-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.contact-options-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-option {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #0b1320;
  transition: background 0.18s ease;
}

.contact-option:hover {
  background: rgba(241, 245, 249, 0.9);
}

.option-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(11, 19, 32, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b1320;
  flex-shrink: 0;
}

.option-icon.email-icon {
  color: #ff4d15;
  background: rgba(255, 77, 21, 0.1);
}

.option-icon.linkedin-icon {
  color: #0077b5;
  background: rgba(0, 119, 181, 0.1);
}

.option-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.option-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0b1320;
}

.option-detail {
  font-size: 10.5px;
  color: #64748b;
}

/* ---------------------------------------------------- */
/* SEAMLESS MODAL OVERLAYS (About Me, OttoBot)          */
/* ---------------------------------------------------- */
.seamless-modal-view {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* The view itself never fades: an ancestor with opacity < 1 cuts the
     panel's backdrop blur off in Chrome, so the blur snapped on only once the
     fade ended. The glass fades instead (below), so its blur fades in with it.
     Visibility waits for the fade-out before hiding. */
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.35s;
}

.seamless-modal-view.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}

.modal-backdrop-blur {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
}

/* About / OttoBot: the scene behind (the jukebox, or an open project's back
   face) goes out of focus, so the sharp cards don't compete with the window.
   The layer's own opacity fades the blur in and out (never a parent's: that
   turns backdrop blur off in Chrome, see .seamless-modal-view). */
.modal-backdrop-blur {
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.seamless-modal-view.is-open .modal-backdrop-blur {
  opacity: 1;
}

.modal-card-glass {
  position: relative;
  width: 100%;
  max-width: min(1080px, 92vw);
  max-height: min(840px, calc(100vh - 90px));
  border-radius: 20px;
  /* Unified frost material (same recipe as cards, pills and popover) */
  background: var(--glass-fill);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-rim);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  contain: paint;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}

/* Micro-Refraction Inner Bevel */
.modal-card-glass::before {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 17.5px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 8;
}

.seamless-modal-view.is-open .modal-card-glass {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 24px 34px 14px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  background: transparent;
  position: relative;
  z-index: 3;
}

.modal-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ff4d15;
  background: rgba(255, 77, 21, 0.1);
  border: 1px solid rgba(255, 77, 21, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-tag-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 6px 16px -2px rgba(11, 19, 32, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(200, 220, 240, 0.25);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #334155;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  z-index: 3;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #ff4d15;
  border-color: rgba(255, 77, 21, 0.55);
  transform: scale(1.08);
  box-shadow:
    0 8px 24px -2px rgba(255, 77, 21, 0.32),
    0 0 16px rgba(255, 77, 21, 0.25),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 0 10px rgba(255, 77, 21, 0.15);
}

.modal-body-scroll {
  padding: 18px 34px 32px 34px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  z-index: 3;
}

/* About Layout Inside Modal */
.about-hero-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
}

.about-photo-wrapper {
  width: 200px;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(11, 19, 32, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-headline {
  font-size: 28px;
  font-weight: 800;
  color: #0b1320;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.about-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ff4d15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-lead {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
}

.about-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
}

.about-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pill-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-btn.primary {
  background: #ff4d15;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(255, 77, 21, 0.35);
  border: none;
}

.pill-btn.primary:hover {
  background: #e03e0b;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 77, 21, 0.45);
}

.pill-btn.secondary {
  background: #ffffff;
  color: #0b1320;
  border: 1px solid rgba(11, 19, 32, 0.15);
  box-shadow: 0 4px 12px rgba(11, 19, 32, 0.05);
}

.pill-btn.secondary:hover {
  border-color: #ff4d15;
  color: #ff4d15;
  transform: translateY(-2px);
}

.about-details-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 20px;
}

.detail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #0b1320;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-block p {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
}

.skills-pill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  color: #334155;
  font-weight: 600;
}

/* OttoBot Layout Inside Modal */
.ottobot-modal {
  max-width: min(1080px, 92vw);
}

.ottobot-content {
  align-items: center;
  padding: 36px 28px 44px;
}

.ottobot-avatar-box {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ottobot-pulse-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 77, 21, 0.4);
  animation: pulseOrb 2.5s infinite ease-out;
}

@keyframes pulseOrb {
  0%   { transform: scale(0.85); opacity: 0.8; }
  50%  { transform: scale(1.15); opacity: 0.2; }
  100% { transform: scale(0.85); opacity: 0.8; }
}

.ottobot-voice-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 77, 21, 0.3);
  box-shadow: 0 12px 30px rgba(255, 77, 21, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------- */
/* INTERMEDIATE TABLET & NARROW DESKTOP (769px–1200px)  */
/* ---------------------------------------------------- */
@media (max-width: 1200px) {
  .brand-subtitle {
    font-size: 10px;
    max-width: 250px;
  }
  .header-inner {
    gap: clamp(24px, 2.5vw, 28px);
  }
  .header-nav {
    gap: 12px;
  }
}

@media (max-width: 1100px) {
  .brand-subtitle {
    display: none;
  }
}

/* ---------------------------------------------------- */
/* MOBILE GEOMETRY & RESPONSIVENESS (<= 768px)          */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
  header.app-header {
    height: var(--header-h-mobile, 48px);
    padding: 0 14px;
    box-sizing: border-box;
    z-index: 4000;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .brand-block {
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }

  .brand-title {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap !important;
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }

  .brand-subtitle {
    display: none;
  }

  .header-nav {
    gap: 12px;
    align-items: center;
  }

  .nav-btn {
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 0;
  }

  .nav-contact-wrapper {
    display: none !important;
  }

  /* Strict Mobile Modal Geometry: Exactly 14px top from header (48px) and 14px bottom */
  .seamless-modal-view {
    position: fixed;
    inset: 0;
    padding-top: calc(var(--header-h-mobile, 48px) + var(--panel-margin-mobile, 14px));
    padding-bottom: var(--panel-margin-mobile, 14px);
    padding-left: var(--panel-margin-mobile, 14px);
    padding-right: var(--panel-margin-mobile, 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 3500;
  }

  .modal-card-glass {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--header-h-mobile, 48px) - (var(--panel-margin-mobile, 14px) * 2));
    height: calc(100dvh - var(--header-h-mobile, 48px) - (var(--panel-margin-mobile, 14px) * 2));
    max-height: calc(100vh - var(--header-h-mobile, 48px) - (var(--panel-margin-mobile, 14px) * 2));
    max-height: calc(100dvh - var(--header-h-mobile, 48px) - (var(--panel-margin-mobile, 14px) * 2));
    border-radius: 18px;
    margin: 0;
  }

  .modal-header {
    padding: 16px 18px 12px 18px;
  }

  .modal-body-scroll {
    padding: 12px 18px 24px 18px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-photo-wrapper {
    margin: 0 auto;
    width: 160px;
    height: 200px;
  }

  .about-actions-row {
    justify-content: center;
  }

  .about-details-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------- */
/* TEXT SELECTION & COPYING UNIFICATION                 */
/* ---------------------------------------------------- */
.card-face-back,
.card-face-back p,
.card-face-back h1,
.card-face-back h2,
.card-face-back h3,
.card-face-back span,
.card-face-back li,
.modal-card-glass,
.modal-card-glass p,
.modal-card-glass h1,
.modal-card-glass h2,
.modal-card-glass h3,
.modal-card-glass span,
.modal-card-glass li {
  user-select: text !important;
  -webkit-user-select: text !important;
}

.back-close-btn,
.back-close-btn *,
.modal-close-btn,
.modal-close-btn *,
.card-type-badge,
.modal-tag,
.modal-tag-sub,
.card-date-stamp,
.contact-trigger,
.contact-option,
button,
a {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer;
}

/* ---------------------------------------------------- */
/* UNIFIED FROST MATERIAL LAYERS (js/fx/frost-material.js) */
/* ---------------------------------------------------- */
/* Frost surfaces must be hit-testable for warmth, even inside
   pointer-events:none containers such as the hero stage. */
[data-frost] {
  pointer-events: auto;
}

.frost-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.frost-canvas.is-formed {
  opacity: 0.75;
}

/* Warmth from the cursor / finger: a soft ember glow that tracks the pointer
   while the frost under it melts. Only opacity animates on enter/leave. */
.warm-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(
    circle 160px at var(--warm-x, 50%) var(--warm-y, 50%),
    rgba(255, 138, 56, 0.26) 0%,
    rgba(255, 170, 100, 0.11) 42%,
    rgba(255, 200, 150, 0) 72%
  );
}

.warm-glow.is-warm {
  opacity: 1;
  transition-duration: 0.18s;
}

[data-frost="pill"] > .warm-glow {
  background: radial-gradient(
    circle 80px at var(--warm-x, 50%) var(--warm-y, 50%),
    rgba(255, 132, 48, 0.34) 0%,
    rgba(255, 170, 100, 0.13) 45%,
    rgba(255, 200, 150, 0) 75%
  );
}

/* Open panels sit over a scene that is frozen still (idle drift fades out),
   so a real backdrop blur is computed once. The settled card back gets a
   strong one (it sits among the blurred conveyor cards). About / OttoBot get
   only a light one: a strong blur smeared the focused card behind them into
   the white glass, so on big desktop screens they read as solid slabs. With
   4px the scene behind stays recognisable, like the rest of the unified
   material, and the text stays readable. */
body.card-settled .glass-slab-card.is-inspected .card-face-back {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  /* The blur can only switch on once the card has stopped moving in 3D, so
     it grows in from zero instead of snapping on (the scene is still, so this
     is a one-off 0.45 s cost). The end value is the rule above. */
  animation: back-blur-in 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes back-blur-in {
  from {
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
  }
}

.modal-card-glass,
.seamless-modal-view.is-open .modal-card-glass {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Touch devices: a live backdrop blur behind a panel with its own scroller
   flickers on Chrome Android while scrolling, so it stays off. The panel keeps
   the plain unified material (no extra opaque fill layer). */
@media (hover: none), (pointer: coarse) {
  .modal-backdrop-blur {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(241, 245, 249, 0.72);
  }

  .modal-card-glass,
  .seamless-modal-view.is-open .modal-card-glass,
  body.card-settled .glass-slab-card.is-inspected .card-face-back {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }
}

/* Card icons are looping SVG animations. Inside a card they forced the whole
   card layer to re-rasterise every frame, for every visible card. Now only
   the focused card's icon plays, and the badge
   is its own small layer so playing it repaints just the badge. */
.card-wireframe-badge {
  will-change: transform;
}

.glass-slab-card:not(.is-active) .card-wireframe-badge * {
  animation-play-state: paused !important;
}

/* During the showcase fly-in every card is on screen at once; fold away the
   per-card sub-layers that add nothing mid-flight (fewer GPU quads/overdraw). */
body.stage-intro .card-depth-haze {
  display: none;
}

body.stage-intro .card-wireframe-badge {
  will-change: auto;
}

/* Looping decorations only run while they can be seen; hidden ones still
   tick and keep the compositor producing frames. */
body.scrolled .prompt-desktop,
body.scrolled .prompt-mobile,
body.scrolled .scroll-mouse-icon::after,
body.scrolled .swipe-hand-icon,
.seamless-modal-view:not(.is-open) .ottobot-pulse-ring {
  animation: none;
}