/* DFVN Basteleur — display font for hero/headings (optional, graceful fallback) */
@font-face {
  font-family: "DFVN Basteleur";
  src: url("../fonts/DFVN-Basteleur-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DFVN Basteleur";
  src: url("../fonts/DFVN-Basteleur-Moonlight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TMK Studio — World-Class Apple Indie Portfolio Showcase
   Crafted with Apple HIG, Bento Architecture, and Modern Web Standards
   ========================================================================== */

:root {
  color-scheme: light dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", -system-ui, sans-serif;  --font-serif: "New York", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Theme tokens */
  --bg-primary: #09090b;
  --bg-surface: rgba(24, 24, 27, 0.65);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.16);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
}

:root:has(> head > meta[name="color-scheme"][content="dark"]) {
  color-scheme: dark;
}

:root:has(> head > meta[name="color-scheme"][content="light"]) {
  color-scheme: light;
}

/* Light theme overrides */
html:not(.dark) {
  --bg-primary: #fbfbfd;
  --bg-surface: rgba(255, 255, 255, 0.75);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-highlight: rgba(0, 0, 0, 0.12);
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.font-display {
  font-family: "DFVN Basteleur", var(--font-sans);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* --------------------------------------------------------------------------
   Tactile Grain & Mesh Background (No cheesy neon blurs)
   -------------------------------------------------------------------------- */
.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
}

.dark .bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.045'/%3E%3C/svg%3E");
}

.bg-dot-grid {
  background-size: 32px 32px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
}

.dark .bg-dot-grid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   Apple Bento Card Styling
   -------------------------------------------------------------------------- */
.bento-card {
  position: relative;
  background: var(--bg-surface);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 10px 30px -10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
  overflow: hidden;
}

.dark .bento-card {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 36px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-highlight);
  box-shadow: 
    0 20px 48px -12px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark .bento-card:hover {
  box-shadow: 
    0 24px 54px -12px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Apple Squircle App Icon
   -------------------------------------------------------------------------- */
.app-squircle {
  border-radius: 22.37%;
  box-shadow: 
    0 4px 14px -2px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-card:hover .app-squircle {
  transform: scale(1.04) rotate(-1deg);
}

/* --------------------------------------------------------------------------
   Simulated Apple Dynamic Island & Live Activity
   -------------------------------------------------------------------------- */
.dynamic-island {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Simulated macOS Window Frame
   -------------------------------------------------------------------------- */
.macos-window {
  background: rgba(30, 30, 36, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.traffic-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.traffic-close { background: #ff5f56; }
.traffic-min { background: #ffbd2e; }
.traffic-max { background: #27c93f; }

/* --------------------------------------------------------------------------
   Modern Dialog Standards (modern-web-guidance)
   Fixed coordinates to prevent ANY scrolling or jumping on modal trigger
   -------------------------------------------------------------------------- */
dialog:modal,
dialog#app-detail-modal {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  max-width: 48rem;
  max-height: 88vh;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #111116 !important;
  color: #f4f4f5;
  border-radius: 28px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
  z-index: 99999;
}

html:not(.dark) dialog#app-detail-modal {
  background: #ffffff !important;
  color: #18181b;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.22);
}

dialog#app-detail-modal::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 640px) {
  dialog:modal,
  dialog#app-detail-modal {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: 90vh !important;
    border-radius: 24px !important;
    margin: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Animations & Micro-interactions
   -------------------------------------------------------------------------- */
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.97); }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes waveform {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.wave-bar {
  animation: waveform 1.2s ease-in-out infinite;
}
.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; }
.wave-bar:nth-child(5) { animation-delay: 0.2s; }
.wave-bar:nth-child(6) { animation-delay: 0.35s; }

/* --------------------------------------------------------------------------
   Custom Toast for Interactive Micro-actions (Copy, Shaking oracle)
   -------------------------------------------------------------------------- */
#toast-notification {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Utility for Apple-grade typography */
.font-serif-culture {
  font-family: var(--font-serif);
}

.font-mono-code {
  font-family: var(--font-mono);
}