/* ==========================================================================
   अशब्द (A-Shabd) — Antique Manuscript Single Page Experience
   Centuries-Old Weathered Parchment with Organic Stains & Walnut Gall Ink
   ========================================================================== */

/* ---------------- Resets & Zero-Scroll Setup ---------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #24140a;
  cursor: default;
}

/* ---------------- Layer 1: Base Tonal Ground & Stains ---------------- */
body {
  /* Warm antique cream/beige base */
  background: #ecdcb9;

  /* Layered organic stains: rust, burnt umber, tea, and moisture tide-lines */
  background-image:
    /* Central sweet-spot: softly luminous antique paper */
    radial-gradient(ellipse 65% 55% at 50% 50%, #fbf5e8 0%, #f5ebd3 45%, rgba(240, 227, 201, 0.4) 80%, transparent 100%),

    /* Top-left scorched antique corner */
    radial-gradient(ellipse 45% 40% at 0% 0%, #2f170a 0%, #582b13 22%, #85451e 40%, rgba(133, 69, 30, 0.2) 65%, transparent 100%),

    /* Bottom-right weathered dark corner */
    radial-gradient(ellipse 50% 45% at 100% 100%, #251207 0%, #4e2510 25%, #7a3d1c 45%, rgba(122, 61, 28, 0.18) 70%, transparent 100%),

    /* Bottom-left moisture & rust stain */
    radial-gradient(ellipse 40% 35% at 0% 100%, #3a1c0d 0%, #693418 20%, #944b24 38%, rgba(148, 75, 36, 0.15) 60%, transparent 100%),

    /* Top-right dried tea stain */
    radial-gradient(ellipse 42% 38% at 100% 0%, #33190b 0%, #5e2c13 22%, #8a4520 42%, rgba(138, 69, 32, 0.18) 65%, transparent 100%),

    /* Irregular perimeter edge foxing and oxidation bands */
    radial-gradient(circle at 18% 45%, rgba(139, 69, 19, 0.14) 0%, transparent 40%),
    radial-gradient(circle at 82% 52%, rgba(158, 74, 43, 0.12) 0%, transparent 38%),
    radial-gradient(circle at 48% 92%, rgba(99, 51, 24, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 52% 8%, rgba(105, 52, 24, 0.15) 0%, transparent 38%);
}

/* ---------------- Layer 2: Organic Canvas Background ---------------- */
#parchment-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* ---------------- Layer 3: Procedural SVG Grain & Fiber Overlay ---------------- */
.paper-grain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  opacity: 0.38;
  mix-blend-mode: multiply;

  /* High-frequency cellulose micro-noise */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='agedPaperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23agedPaperNoise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---------------- Layer 4: Deep Antique Vignette & Candlelight Atmosphere ---------------- */
.vignette-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;

  /* Deep burning vignette along outer edges */
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(68, 34, 15, 0.28) 75%, rgba(36, 17, 7, 0.65) 92%, rgba(20, 9, 3, 0.88) 100%);
  mix-blend-mode: multiply;

  /* Extremely slow, barely perceptible breathing ambient light */
  animation: candle-drift 16s ease-in-out infinite alternate;
}

/* Very subtle organic illumination modulation (breathing old manuscript room ambiance) */
@keyframes candle-drift {
  0% {
    opacity: 0.94;
    transform: scale(1.0);
  }
  50% {
    opacity: 1.0;
    transform: scale(1.008);
  }
  100% {
    opacity: 0.96;
    transform: scale(1.003);
  }
}

/* ---------------- Centerpiece Container ---------------- */
.parchment-container {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

.word-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* ---------------- The Sacred Word: "अशब्द" ---------------- */
.sacred-word {
  /* Classical Devanagari Serif Typography */
  font-family: 'Rozha One', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
  font-weight: 500;
  
  /* Large, commanding, yet dignified and proportionate scale */
  font-size: clamp(3.8rem, 11vw, 8.2rem);
  line-height: 1.15;
  letter-spacing: 0.08em;

  /* Ancient Walnut Gall & Iron Ink Tone */
  color: #24160c;

  /* SVG Ink Bleed & Fiber Feathering */
  filter: url(#ink-bleed);

  /* Subtle ink soak halo into the fibrous paper */
  text-shadow:
    0 0 1px rgba(36, 22, 12, 0.65),
    0 1px 2px rgba(36, 22, 12, 0.35),
    0 0 16px rgba(120, 65, 25, 0.08);

  /* Natural antique ink opacity with microscopic texture bleed */
  opacity: 0.94;

  /* Clean subpixel smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative;
  display: inline-block;
}

/* Subtle aged ink fading variation across the letterpress contour */
.sacred-word::before {
  content: "अशब्द";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #1a0f08;
  opacity: 0.3;
  filter: blur(1.5px);
  pointer-events: none;
  z-index: -1;
}

/* ---------------- Hidden SVG Filters ---------------- */
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------- Responsive Fine-Tuning ---------------- */
@media (max-width: 600px) {
  .sacred-word {
    font-size: clamp(3.2rem, 15vw, 5.2rem);
    letter-spacing: 0.05em;
  }
}

@media (min-width: 1800px) {
  .sacred-word {
    font-size: 8.5rem;
    letter-spacing: 0.09em;
  }
}