/* ============================================
   GLOBAL ENVIRONMENT
   Slate canvas, top-right light source,
   vignette, noise texture
   ============================================ */

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

:root {
  /* ---- CANVAS ---- */
  --canvas: #B0BEC5;
  --canvas-light: #C5D1D8;
  --canvas-dark: #8A9AA3;

  /* ---- WARM BASE GLASS (Level 1) ---- */
  --warm-bg: rgba(180, 170, 150, 0.12);
  --warm-border-light: rgba(255, 245, 225, 0.3);
  --warm-border-dark: rgba(60, 70, 80, 0.1);
  --warm-blur: 24px;

  /* ---- COOL HIGHLIGHT GLASS (Level 2) ---- */
  --cool-bg: rgba(255, 255, 255, 0.22);
  --cool-border-light: rgba(255, 255, 255, 0.6);
  --cool-border-dark: transparent;
  --cool-blur: 32px;

  /* ---- VIOLET ACCENT (Level 3 — Interaction) ---- */
  --cyan: #9B8EC4;
  --cyan-glow: rgba(155, 142, 196, 0.35);
  --cyan-tint: rgba(155, 142, 196, 0.14);
  --cyan-border: rgba(155, 142, 196, 0.55);

  /* ---- TEXT on glass ---- */
  --text-primary: #263238;
  --text-secondary: #37474F;
  --text-tertiary: #546E7A;
  --text-quaternary: #607D8B;
  --text-on-cool: #1A237E;

  /* ---- SHADOWS (cast bottom-left from top-right light) ---- */
  --shadow-warm:
    -6px 6px 24px rgba(69, 90, 100, 0.2),
    -2px 2px 8px rgba(69, 90, 100, 0.1);
  --shadow-cool:
    -8px 8px 40px rgba(38, 50, 56, 0.25),
    -3px 3px 12px rgba(38, 50, 56, 0.1);
  --shadow-pressed:
    inset 4px -4px 10px rgba(69, 90, 100, 0.15),
    inset 1px -1px 3px rgba(69, 90, 100, 0.1);

  /* ---- LAYOUT ---- */
  --max-w: 1080px;
  --radius: 28px;
  --radius-s: 16px;
  --radius-pill: 999px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.3s;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Helvetica Neue', sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;

  /* Slate canvas with vignette: light top-right, dark bottom-left */
  background: var(--canvas);
  background-image:
    radial-gradient(
      ellipse 70% 60% at 80% 15%,
      var(--canvas-light) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 50% at 15% 85%,
      var(--canvas-dark) 0%,
      transparent 65%
    );
}

/* Subtle noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ---- TYPOGRAPHY — Jony Ive ultralight on glass ---- */
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text-primary);
}

h3 {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--text-primary);
}

p {
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  line-height: 1.7;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ---- FADE-IN ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up { opacity: 0; animation: fadeUp 0.5s var(--ease-out) forwards; }
.fade-up-d1 { animation-delay: 0.08s; }
.fade-up-d2 { animation-delay: 0.16s; }
.fade-up-d3 { animation-delay: 0.24s; }
.fade-up-d4 { animation-delay: 0.32s; }

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}