@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500&family=Rajdhani:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ReactCrop styles - minimal, let module CSS handle positioning */
@keyframes marching-ants {
  0% { background-position: 0 0, 0 100%, 0 0, 100% 0; }
  to { background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px; }
}

:root {
  --rc-drag-handle-size: 12px;
  --rc-drag-handle-mobile-size: 24px;
  --rc-drag-handle-bg-colour: rgba(255, 255, 255, .3);
  --rc-drag-bar-size: 6px;
  --rc-border-color: rgba(255, 255, 255, .7);
  --rc-focus-color: #0088ff;
}

/* Only essential styles without !important */
div.ReactCrop__drag-handle {
  position: absolute;
  width: var(--rc-drag-handle-size);
  height: var(--rc-drag-handle-size);
  background: var(--rc-drag-handle-bg-colour);
  border: 1px solid var(--rc-border-color);
  border-radius: 50%;
  z-index: 10; /* Ensure handles are above everything */
}

div.ReactCrop__drag-handle--ord-nw {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
  z-index: 15; /* Ensure corner handles are above edge handles */
}

div.ReactCrop__drag-handle--ord-ne {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
  z-index: 15;
}

div.ReactCrop__drag-handle--ord-se {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
  z-index: 15;
}

div.ReactCrop__drag-handle--ord-sw {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
  z-index: 15;
}

div.ReactCrop__drag-bar {
  position: absolute;
  background: var(--rc-drag-handle-bg-colour);
  border: 1px solid var(--rc-border-color);
  min-width: 20px;
  min-height: 6px;
}

div.ReactCrop__drag-bar--ord-n {
  top: -3px;
  left: 12px; /* Start after corner handle */
  right: 12px; /* End before corner handle */
  height: var(--rc-drag-bar-size);
  cursor: n-resize;
}

div.ReactCrop__drag-bar--ord-s {
  bottom: -3px;
  left: 12px; /* Start after corner handle */
  right: 12px; /* End before corner handle */
  height: var(--rc-drag-bar-size);
  cursor: s-resize;
}

div.ReactCrop__drag-bar--ord-e {
  top: 12px; /* Start after corner handle */
  bottom: 12px; /* End before corner handle */
  right: -3px;
  width: var(--rc-drag-bar-size);
  cursor: e-resize;
}

div.ReactCrop__drag-bar--ord-w {
  top: 12px !important; /* Start after corner handle */
  bottom: 12px !important; /* End before corner handle */
  left: -3px !important;
  width: var(--rc-drag-bar-size) !important;
  cursor: w-resize;
}

@media (max-width: 768px) {
  :root {
    --rc-drag-handle-size: var(--rc-drag-handle-mobile-size);
  }
}

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

:root {
  /* Void - true darkness */
  --void: #000000;
  --void-deep: #020204;
  --void-surface: #08080c;
  --bg-primary: #05060a;
  --bg-secondary: #080a10;
  --bg-tertiary: #0c0f16;

  /* Chrome - metallic silver spectrum */
  --chrome-bright: #e8eaed;
  --chrome: #a8adb8;
  --chrome-mid: #6a7080;
  --chrome-dark: #3a3f4b;
  --chrome-deep: #1c1e24;

  /* Oil-slick undertones - barely visible */
  --oil-purple: rgba(60, 40, 80, 0.15);
  --oil-teal: rgba(30, 60, 60, 0.12);
  --oil-blue: rgba(40, 50, 80, 0.1);

  /* Text */
  --text-primary: #e0e4ec;
  --text-secondary: #7b8394;
  --text-muted: #5b6374;

  /* Borders */
  --border: #1a1c22;
  --border-chrome: rgba(168, 173, 184, 0.1);
  --border-color: #1a1c22;

  /* Glow - restrained, silver, not blue */
  --glow-chrome: rgba(200, 205, 215, 0.08);
  --glow-chrome-strong: rgba(200, 205, 215, 0.15);
  --aura-blue: #6f7785;
  --aura-electric: #b3bac4;
  --aura-glow: rgba(165, 175, 190, 0.25);

  /* Motion - everything slow */
  --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-glacial: 2000ms var(--ease-out-slow);
  --transition-slow: 1200ms var(--ease-out-slow);
  --transition-medium: 800ms var(--ease-out-slow);
  --transition-base: 500ms var(--ease-out-slow);

  /* Typography scale */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 128px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  background-color: var(--void);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar - nearly invisible */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--void);
}

::-webkit-scrollbar-thumb {
  background: var(--chrome-dark);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--chrome-mid);
}

/* Selection - chrome, not blue */
::selection {
  background: var(--chrome-dark);
  color: var(--chrome-bright);
}

/* Utility */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Grain overlay - reusable */
.grain-overlay {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  animation: grain 8s steps(4) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1%, -1%); }
  50% { transform: translate(1%, 0.5%); }
  75% { transform: translate(-0.5%, 1%); }
}

/* Oil slick shimmer - background effect */
.oil-shimmer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, var(--oil-purple), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, var(--oil-teal), transparent),
    radial-gradient(ellipse 70% 60% at 50% 50%, var(--oil-blue), transparent);
  pointer-events: none;
  opacity: 0.6;
}

/* Chrome text gradient */
.text-chrome {
  background: linear-gradient(
    180deg,
    var(--chrome-bright) 0%,
    var(--chrome) 40%,
    var(--chrome-mid) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Brand gradient - chrome with ember undertone */
.text-gradient {
  background: linear-gradient(
    180deg,
    #e8eaed 0%,
    #d4c4b0 35%,
    #c9a882 60%,
    #8a7060 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animations - all slow, all ease-out */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Button base - quiet, assured */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-slow);
  text-decoration: none;
}

.btn:hover {
  border-color: var(--chrome-dark);
  color: var(--text-primary);
  background: var(--void-surface);
}

/* Mobile global styles */
@media (max-width: 768px) {
  :root {
    --space-md: 20px;
    --space-lg: 48px;
    --space-xl: 80px;
  }

  body {
    line-height: 1.6;
  }

  .btn {
    padding: 14px 32px;
    font-size: 11px;
    letter-spacing: 2.5px;
    /* Ensure touch target is at least 44px */
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  :root {
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
  }

  .btn {
    padding: 12px 24px;
    width: 100%;
    justify-content: center;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* No elastic animations, no bouncing, no "wow" gimmicks */