/**
 * Vintage Editorial Monsoon (বর্ষা) Hero Experience
 * Artistic Trees, Wind Gusts, Swaying Portrait, Lightning Flashes & Rain Sheen Text
 *
 * Emran Rafid Custom WordPress Theme
 */

/* ========================================================
   1. HERO SECTION MONSOON BACKDROP
   ======================================================== */
.er-hero-section--monsoon {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 70% 25%, #E6DFD2 0%, #DDD5C5 45%, #CFD3C4 100%) !important;
  border-bottom: 2px solid var(--er-espresso, #49362D) !important;
  transition: background-color 0.15s ease;
}

/* Atmospheric Overcast Sky Vignette */
.er-monsoon-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Soft monsoon petrichor mist at bottom */
.er-monsoon-mist {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to top, rgba(207, 211, 196, 0.45), transparent);
  pointer-events: none;
  z-index: 4;
}

/* ========================================================
   2. LIGHTNING FLASH & BOLT (বিদ্যুত চমকানো)
   ======================================================== */
.er-monsoon-lightning-flash {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.08s ease;
}

/* Quick natural double-flash keyframe */
.er-hero-section--monsoon.is-lightning .er-monsoon-lightning-flash {
  animation: erLightningFlashAnim 0.32s ease-out forwards;
}

@keyframes erLightningFlashAnim {
  0%   { opacity: 0; }
  10%  { opacity: 0.65; }
  22%  { opacity: 0.15; }
  35%  { opacity: 0.85; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Branching SVG Lightning Bolt in Sky */
.er-monsoon-lightning-bolt {
  position: absolute;
  top: 0;
  right: 22%;
  width: 280px;
  height: 240px;
  pointer-events: none;
  z-index: 16;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px rgba(220, 235, 255, 0.7));
}

.er-hero-section--monsoon.is-lightning .er-monsoon-lightning-bolt {
  animation: erBoltFlicker 0.28s ease-out forwards;
}

@keyframes erBoltFlicker {
  0%   { opacity: 0; }
  12%  { opacity: 1; transform: scaleY(1); }
  25%  { opacity: 0.2; }
  38%  { opacity: 1; transform: scaleY(1.02); }
  70%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* ========================================================
   3. RAIN CANVAS & RAINDROP STREAKS
   ======================================================== */
.er-monsoon-rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.75;
}

/* ========================================================
   4. WIND EFFECT & FLOATING MONSOON LEAVES (বাতাস)
   ======================================================== */
.er-monsoon-wind-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

/* Wind gust lines */
.er-wind-gust {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 1px;
  opacity: 0;
}

.er-wind-gust--1 {
  top: 25%;
  left: -20%;
  width: 240px;
  animation: erWindGustRun 5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.er-wind-gust--2 {
  top: 60%;
  left: -25%;
  width: 320px;
  animation: erWindGustRun 6.5s cubic-bezier(0.25, 1, 0.5, 1) infinite 2.2s;
}

.er-wind-gust--3 {
  top: 80%;
  left: -15%;
  width: 180px;
  animation: erWindGustRun 4.8s cubic-bezier(0.25, 1, 0.5, 1) infinite 3.7s;
}

@keyframes erWindGustRun {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0.4);
  }
  30% {
    opacity: 0.6;
    transform: translate3d(50vw, -15px, 0) scaleX(1);
  }
  70% {
    opacity: 0.4;
    transform: translate3d(90vw, -25px, 0) scaleX(1.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(130vw, -40px, 0) scaleX(0.5);
  }
}

/* Drifting monsoon leaves in wind current */
.er-wind-leaf {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(36, 35, 31, 0.15));
}

.er-wind-leaf--1 {
  top: 15%;
  left: -30px;
  animation: erLeafTumble1 11s linear infinite 1s;
}

.er-wind-leaf--2 {
  top: 45%;
  left: -30px;
  animation: erLeafTumble2 13s linear infinite 5s;
}

@keyframes erLeafTumble1 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    opacity: 0.75;
  }
  85% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate3d(105vw, 120px, 0) rotate(720deg);
  }
}

@keyframes erLeafTumble2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  15% {
    opacity: 0.65;
  }
  80% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate3d(105vw, 160px, 0) rotate(-640deg);
  }
}

/* ========================================================
   5. ARTISTIC MONSOON TREES & FOLIAGE (আর্টিস্টিক গাছ)
   ======================================================== */
.er-monsoon-tree {
  position: absolute;
  pointer-events: none;
  z-index: 7;
  overflow: visible;
}

/* LEFT TREE: Bengal Monsoon Tree & Palms */
.er-monsoon-tree--left {
  bottom: -15px;
  left: -30px;
  width: 290px;
  height: 380px;
  transform-origin: bottom left;
  animation: erTreeSwayLeft 5.8s ease-in-out infinite alternate;
}

/* Swaying wind physics for left tree */
@keyframes erTreeSwayLeft {
  0% {
    transform: rotate(0deg) skewX(0deg);
  }
  40% {
    transform: rotate(2.8deg) skewX(1.5deg);
  }
  75% {
    transform: rotate(1.2deg) skewX(0.8deg);
  }
  100% {
    transform: rotate(3.4deg) skewX(2deg);
  }
}

/* RIGHT FOLIAGE: Overhanging rain branches with droplets */
.er-monsoon-tree--right {
  top: -15px;
  right: -25px;
  width: 310px;
  height: 320px;
  transform-origin: top right;
  animation: erBranchSwayRight 5.2s ease-in-out infinite alternate;
}

@keyframes erBranchSwayRight {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-2.6deg) translateY(3px);
  }
  100% {
    transform: rotate(1.4deg) translateY(-2px);
  }
}

/* Raindrop beads clinging to tree leaves */
.er-tree-raindrop {
  animation: erDripPulse 2.8s infinite ease-in-out;
}

@keyframes erDripPulse {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  60% { transform: translateY(2px); opacity: 1; }
}

/* ========================================================
   6. SWAYING PORTRAIT PHOTO (আমার ছবি ঢুলবে)
   ======================================================== */
.er-hero-section--monsoon .er-hero-visual {
  position: relative;
  z-index: 10;
}

/* Top hanging cord / easel peg */
.er-hero-section--monsoon .er-analog-paper-card::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  background: radial-gradient(circle at center, var(--er-ink, #24231F) 4px, transparent 5px),
              linear-gradient(to bottom, #8C7C6D, #5E4E40);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 2px rgba(36, 35, 31, 0.3);
  z-index: 5;
}

/* The Swaying Easel Portrait Card */
.er-hero-section--monsoon .er-analog-paper-card {
  transform-origin: 50% -14px;
  animation: erPortraitWindSway 5.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform, box-shadow;
}

@keyframes erPortraitWindSway {
  0% {
    transform: rotate(-2.8deg) translateY(0);
    box-shadow: 10px 10px 0px var(--er-espresso, #49362D);
  }
  35% {
    transform: rotate(0.4deg) translateY(-2px);
    box-shadow: 8px 8px 0px var(--er-espresso, #49362D);
  }
  70% {
    transform: rotate(2.4deg) translateY(-4px);
    box-shadow: 6px 9px 0px var(--er-espresso, #49362D);
  }
  100% {
    transform: rotate(-2.8deg) translateY(0);
    box-shadow: 10px 10px 0px var(--er-espresso, #49362D);
  }
}

.er-hero-section--monsoon .er-analog-paper-card:hover {
  animation-play-state: paused;
  transform: rotate(0deg) scale(1.01);
  box-shadow: 9px 9px 0px var(--er-espresso, #49362D);
}

/* ========================================================
   7. MONSOON TYPOGRAPHY EFFECTS (লেখা গুলোতে ইফেক্ট)
   ======================================================== */
.er-hero-section--monsoon .er-hero-content {
  position: relative;
  z-index: 10;
}

/* Liquid Rain Sheen across Title Typography */
.er-hero-section--monsoon .er-hero-title {
  background: linear-gradient(
    115deg,
    var(--er-ink, #24231F) 0%,
    var(--er-ink, #24231F) 38%,
    #465851 46%,
    #FCFAF6 50%,
    #465851 54%,
    var(--er-ink, #24231F) 62%,
    var(--er-ink, #24231F) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: erRainTextSheen 7.5s ease-in-out infinite;
  display: inline-block;
  transition: text-shadow 0.15s ease;
}

/* Lightning flash reflection on Title */
.er-hero-section--monsoon.is-lightning .er-hero-title {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
}

@keyframes erRainTextSheen {
  0% {
    background-position: 100% 0;
  }
  40% {
    background-position: -20% 0;
  }
  100% {
    background-position: -20% 0;
  }
}

/* Gentle text breeze highlight on Subtitle */
.er-hero-section--monsoon .er-hero-subtitle {
  color: #38342E;
  position: relative;
}

/* Monsoon Eyebrow Bengali Font styling */
.er-hero-section--monsoon .er-eyebrow-text {
  font-family: var(--er-font-subheading, 'Shorif Sandwip', 'Fraunces', serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--er-espresso, #49362D);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

/* Monsoon CTA Button Glow on Hover */
.er-hero-section--monsoon .er-btn--primary:hover {
  box-shadow: 4px 4px 0 var(--er-espresso, #49362D), 0 0 12px rgba(173, 101, 75, 0.3) !important;
}

/* ========================================================
   8. MONSOON AUDIO CONTROLS (Icon-only Speaker Toggle)
   ======================================================== */
.er-monsoon-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--er-white, #FCFAF6);
  border: 1.5px solid var(--er-espresso, #49362D);
  box-shadow: 2px 2px 0 var(--er-espresso, #49362D);
  border-radius: 50%;
  padding: 0;
  color: var(--er-ink, #24231F);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  vertical-align: middle;
  margin-left: 6px;
}

.er-monsoon-sound-btn:hover {
  background-color: var(--er-cream, #E8E0D1);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--er-espresso, #49362D);
  color: var(--er-terracotta, #AD654B);
}

.er-monsoon-sound-btn.is-active {
  background-color: var(--er-ink, #24231F);
  color: var(--er-paper, #F3EFE5);
  border-color: var(--er-espresso);
}

.er-monsoon-sound-btn.is-active:hover {
  background-color: var(--er-terracotta);
  color: #fff;
}

.er-sound-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.er-sound-icon--playing {
  display: none;
}

.er-monsoon-sound-btn.is-active .er-sound-icon--muted {
  display: none;
}

.er-monsoon-sound-btn.is-active .er-sound-icon--playing {
  display: inline-block;
  animation: erSoundPulse 1.4s infinite ease-in-out;
}

@keyframes erSoundPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* ========================================================
   9. RESPONSIVE OPTIMIZATIONS
   ======================================================== */
@media (max-width: 960px) {
  .er-monsoon-tree--left {
    width: 200px;
    height: 260px;
    opacity: 0.6;
    bottom: -10px;
    left: -20px;
  }

  .er-monsoon-tree--right {
    width: 220px;
    height: 220px;
    opacity: 0.6;
    top: -10px;
    right: -15px;
  }
}

@media (max-width: 640px) {
  .er-monsoon-tree--left,
  .er-monsoon-tree--right,
  .er-monsoon-wind-layer {
    opacity: 0.45;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .er-monsoon-tree--left,
  .er-monsoon-tree--right,
  .er-hero-section--monsoon .er-analog-paper-card,
  .er-hero-section--monsoon .er-hero-title,
  .er-wind-gust,
  .er-wind-leaf {
    animation: none !important;
    transform: none !important;
  }
}


@media (max-width: 480px) {
  .er-monsoon-tree--left {
    width: 130px !important;
    height: 180px !important;
    opacity: 0.28 !important;
    bottom: -15px !important;
    left: -25px !important;
  }

  .er-monsoon-tree--right {
    width: 140px !important;
    height: 140px !important;
    opacity: 0.28 !important;
    top: -15px !important;
    right: -25px !important;
  }

  .er-monsoon-sound-btn {
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .er-monsoon-tree--left,
  .er-monsoon-tree--right {
    display: none !important;
  }
}