/* =====================================================
   MEGHER DIARY — EMOTIONAL REFINEMENT CSS ADDITIONS
   Append to styles.css for enhanced atmosphere.
===================================================== */

/* ============ CURSOR RIPPLE CANVAS ============ */
.cursor-ripple-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
  opacity: 0.35;
}

/* ============ EMBER LETTERS ============ */
.ember-letter-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

/* ============ ENHANCED HERO ============ */
.hero-en {
  opacity: 0;
  animation: fadeUp 1.6s 2.4s forwards;
  transition: text-shadow 0.8s ease;
}
.hero-en .em {
  background: linear-gradient(90deg, var(--gold-3), var(--paper), var(--gold-3));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite 3s;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* ============ RAIN CANVAS POLISH ============ */
.rain-canvas {
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* ============ SECTION TITLE HOVER ============ */
.section-title {
  cursor: none;
  transition: letter-spacing 0.5s ease;
}
.section-title:hover {
  letter-spacing: 0.015em;
}

/* ============ POETRY CARD SHIMMER ============ */
.poetry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(233,182,87,0.04) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  pointer-events: none;
  animation: cardShimmer 8s ease infinite;
}
@keyframes cardShimmer {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ============ CHOKH — BLINK OVERLAY ============ */
#chokhLid {
  pointer-events: none;
}

/* ============ JANALA WINDOW — FOG BREATHING ============ */
.window-fog {
  transition: opacity 3s ease;
}

/* ============ ABHIPSA WHISPER — MORE LITERARY ============ */
.abhipsa-whisper {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 30px rgba(233,182,87,0.45),
    0 0 80px rgba(233,182,87,0.2);
  transition: filter 2s ease;
}

/* ============ ENHANCED AUDIO STATE ============ */
.audio-state {
  border-radius: 0;
  background: rgba(8,5,3,0.82);
}
.audio-state .track-name {
  font-family: 'Tiro Bangla', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-3);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ============ DIARY FLIP POLISH ============ */
.diary-flip {
  background: linear-gradient(
    135deg,
    rgba(217,204,174,0.95),
    rgba(200,185,150,0.9)
  );
  box-shadow: -6px 0 30px rgba(0,0,0,0.35), 2px 0 8px rgba(255,235,180,0.12);
}

/* ============ VINYL LABEL GLOW WHEN PLAYING ============ */
.vinyl-stage.playing .vinyl-label {
  box-shadow:
    inset 0 -4px 12px rgba(0,0,0,0.5),
    0 0 24px rgba(194,39,29,0.4),
    0 0 48px rgba(194,39,29,0.2);
  transition: box-shadow 1.5s ease;
}

/* ============ KASH FIELD — DEPTH LAYERS ============ */
.kash::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 6px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(1px);
}

/* ============ PUJA EYES — THIRD EYE GLOW ============ */
#thirdEye ellipse:first-child {
  filter: drop-shadow(0 0 8px rgba(194,39,29,0.8));
}

/* ============ MAP — ROUTE LINE ANIMATION ============ */
.map-route.show {
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(233,182,87,0.5));
}

/* ============ NOSTALGIA GRID — HOVER GLOW ============ */
.memory-experience {
  transition: border-color 0.5s ease, transform 0.4s ease;
}
.memory-experience:hover {
  border-color: rgba(233,182,87,0.25);
  transform: translateY(-3px);
}

/* ============ TRAM MINI — ENHANCED SEATS ============ */
.tram-mini-seat {
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
.tram-mini-seat:hover {
  background: linear-gradient(180deg, rgba(140,40,36,0.94), rgba(60,20,20,0.94));
}
.tram-mini-seat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(233,182,87,0.06), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tram-mini-seat:hover::before {
  opacity: 1;
}

/* ============ VINYL MINI ROOM — ACCENT ============ */
.vinyl-mini-player {
  overflow: hidden;
}
.record-choice {
  border-radius: 0;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.record-choice:hover {
  background: rgba(233,182,87,0.12);
}

/* ============ GRAM POND CANVAS ============ */
#pondCanvas {
  cursor: crosshair;
  border-radius: 4px;
}

/* ============ CINEMA CANDLE ============ */
.cinema-candle-wrap {
  position: absolute;
  bottom: 80px;
  left: 8%;
  z-index: 15;
  pointer-events: none;
}

/* ============ LETTER PAPER — CANDLELIGHT TINT ============ */
.letter-paper {
  background: linear-gradient(
    180deg,
    rgba(250,242,224,0.97),
    rgba(235,222,190,0.94)
  );
}
.letter-paper .line:not(.en) {
  position: relative;
}
.letter-paper .line:not(.en)::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 3px;
  background: rgba(194,39,29,0.4);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1s ease;
}
.letter-paper .line:not(.en)[style*="opacity: 1"]::before,
.letter-paper .line:not(.en).revealed::before {
  opacity: 1;
}

/* ============ FOOTER DAWN LIGHT ============ */
.footer-dawn-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 8s ease;
}

/* ============ FILM END LINES — HOVER DISSOLVE ============ */
.film-end-line {
  cursor: none;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.film-end-line:hover {
  opacity: 0.6 !important;
  filter: blur(0.5px);
}

/* ============ SECTION TRANSITION — SOFT VIGNETTE ============ */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 10% at 50% 0%,
    rgba(0,0,0,0.3),
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ============ BRAND MARK — SUBTLE SHIMMER ============ */
.brand-mark {
  animation: brandFloat 8s ease-in-out infinite;
}
@keyframes brandFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2px); }
}

/* ============ ENHANCED SCROLL HINT ============ */
.scroll-hint {
  font-style: italic;
  letter-spacing: 0.6em;
}

/* ============ ENHANCED TOD OVERLAY ============ */
.tod-overlay {
  transition:
    background 3s ease,
    opacity 2s ease;
}

/* ============ ENHANCED GRAM FEATURES ============ */
.gram-feature {
  transition: all 0.4s ease;
  cursor: none;
}
.gram-feature:hover {
  background: rgba(233,182,87,0.1);
  border-color: rgba(233,182,87,0.35);
  transform: translateY(-2px);
}

/* ============ DETECTIVE DESK — LAMP FLICKER ============ */
.desk-lamp-glow {
  animation: lampFlicker 4s ease-in-out infinite;
}
@keyframes lampFlicker {
  0%, 100% { opacity: 0.9; }
  15% { opacity: 0.75; }
  30% { opacity: 0.95; }
  45% { opacity: 0.8; }
  60% { opacity: 1; }
  75% { opacity: 0.85; }
}

/* ============ MAGNIFIER ENHANCED ============ */
.magnifier {
  border-color: #5a3a18;
  border-width: 4px;
  box-shadow:
    inset 0 0 40px rgba(233,182,87,0.35),
    0 12px 30px rgba(0,0,0,0.6),
    0 0 0 1px rgba(233,182,87,0.2);
}

/* ============ NOSTALGIA SECTION — MEMORY HEAD ============ */
.memory-head {
  margin-bottom: 6px;
}
.memory-head h3 {
  color: var(--gold-3);
  line-height: 1.1;
}

/* ============ WALK STEP ACTIVE STATE ============ */
.walk-step.active {
  background: linear-gradient(135deg, rgba(194,39,29,0.2), rgba(233,182,87,0.1));
  border-color: rgba(194,39,29,0.5);
  color: var(--paper);
}

/* ============ CLUE CHIP — NOIR STYLE ============ */
.clue-chip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.clue-chip.active {
  background: rgba(194,39,29,0.2);
  border-color: rgba(194,39,29,0.6);
  color: var(--paper);
  box-shadow: 0 0 20px rgba(194,39,29,0.2);
}

/* ============ FLOATING QUOTE — REFINED ============ */
.floating-quote {
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* ============ FILM SLATE ENHANCED ============ */
.film-slate .title-bn {
  text-shadow: 0 0 40px rgba(255,255,255,0.15), 0 0 80px rgba(237,228,207,0.08);
}

/* ============ CINEMA COUPLE — FILM GRAIN OVERLAY ============ */
.cinema-couple::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ============ EMOTIONAL LINE HEIGHTS ============ */
.cinema-line {
  line-height: 1.6;
}
.cinema-line .en {
  font-size: 0.5em;
  letter-spacing: 0.06em;
}

/* ============ BHASKAR NOTE — WASHI TAPE STYLE ============ */
.bhaskar-note.tape::before {
  background: rgba(246,214,138,0.14);
  border: 1px solid rgba(246,214,138,0.08);
  width: 70px;
  height: 20px;
  left: 40%;
}

/* ============ MAHALAYA AURA — ENHANCED ============ */
.mahalaya-aura {
  mix-blend-mode: screen;
  animation: auraBreath 6s ease-in-out infinite;
}
@keyframes auraBreath {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ============ RESPONSIVE — EMOTIONAL SECTIONS ============ */
@media (max-width: 900px) {
  .nostalgia-grid {
    grid-template-columns: 1fr;
  }
  .memory-experience {
    min-height: 280px;
  }
  .gram-features {
    gap: 12px;
  }
  .gram-feature {
    padding: 12px 16px;
  }
}

/* ============ PRINT — HIDE AMBIENT EFFECTS ============ */
@media print {
  .rain-canvas, .fog-canvas, .star-canvas,
  .lightning, .grain, .cursor-dot, .cursor-ring,
  .firefly, .audio-orb, .top-nav { display: none; }
}