/*
 RIC HOMEPAGE 2026 — STAGE C
 Live weather / time / Salah atmosphere.

 SAFETY:
 - does not hide page
 - no loader
 - no body opacity changes
 - no blocking full-screen overlay
 - if CSS/JS fails, existing homepage remains intact
*/

body.ric-stage-c{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/dhuhr.webp');

  --ric-c-page-tint-1:rgba(250,248,239,.89);
  --ric-c-page-tint-2:rgba(246,249,246,.94);

  background-image:
    linear-gradient(
      180deg,
      var(--ric-c-page-tint-1),
      var(--ric-c-page-tint-2)
    ),
    var(--ric-c-scene);

  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;

  transition:
    background-image 1.4s ease,
    background-color 1.4s ease;
}

/* ---------------------------------------------
   PRAYER / TIME PERIODS
--------------------------------------------- */

body.ric-stage-c.ric-c-fajr{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/fajr.webp');

  --ric-c-page-tint-1:rgba(238,243,250,.87);
  --ric-c-page-tint-2:rgba(252,247,237,.93);
}

body.ric-stage-c.ric-c-day{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/dhuhr.webp');

  --ric-c-page-tint-1:rgba(250,250,244,.88);
  --ric-c-page-tint-2:rgba(244,249,245,.94);
}

body.ric-stage-c.ric-c-asr{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/asr.webp');

  --ric-c-page-tint-1:rgba(251,247,234,.86);
  --ric-c-page-tint-2:rgba(249,246,235,.93);
}

body.ric-stage-c.ric-c-maghrib{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/maghrib.webp');

  --ric-c-page-tint-1:rgba(250,239,224,.86);
  --ric-c-page-tint-2:rgba(243,242,235,.94);
}

body.ric-stage-c.ric-c-night{
  --ric-c-scene:
    url('/assets/images/prayer-scenes/enhanced/isha.webp');

  --ric-c-page-tint-1:rgba(232,239,241,.89);
  --ric-c-page-tint-2:rgba(242,246,244,.95);
}

/* ---------------------------------------------
   WEATHER MODIFIERS
--------------------------------------------- */

body.ric-stage-c.ric-c-weather-clouds{
  --ric-c-page-tint-1:rgba(238,243,241,.88);
  --ric-c-page-tint-2:rgba(245,247,244,.95);
}

body.ric-stage-c.ric-c-weather-rain{
  --ric-c-page-tint-1:rgba(224,234,235,.89);
  --ric-c-page-tint-2:rgba(239,244,242,.95);
}

body.ric-stage-c.ric-c-weather-snow{
  --ric-c-page-tint-1:rgba(246,250,251,.86);
  --ric-c-page-tint-2:rgba(252,252,249,.95);
}

/* ---------------------------------------------
   HERO
   Stage B admin slide image always wins.
--------------------------------------------- */

body.ric-stage-c
.ric-b-hero:not([data-ric-slide-image="1"]){
  background-image:
    linear-gradient(
      90deg,
      rgba(0,48,39,.74),
      rgba(0,48,39,.30) 60%,
      rgba(0,30,25,.15)
    ),
    var(--ric-c-scene) !important;

  background-size:cover !important;
  background-position:center !important;
}

/* ---------------------------------------------
   SOFT TRANSLUCENT PAGE SURFACES
--------------------------------------------- */

body.ric-stage-c :where(
  .ric-panel,
  .ric-prayer-card,
  .ric-quran-card,
  .ric-adhan-box
){
  backdrop-filter:blur(11px);
}

/*
 Only change backgrounds when the elements already exist.
 No layout or visibility change.
*/
body.ric-stage-c .ric-panel{
  background-color:rgba(255,255,255,.93);
}

/* ---------------------------------------------
   EXISTING WEATHER BADGE
--------------------------------------------- */

body.ric-stage-c .ric-weather-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* ---------------------------------------------
   SMALL ATMOSPHERE STATUS
--------------------------------------------- */

.ric-c-atmosphere-status{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;

  font-size:12px;
  line-height:1.25;
}

.ric-c-atmosphere-status strong{
  color:inherit;
}

/* ---------------------------------------------
   REDUCED MOTION
--------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  body.ric-stage-c{
    transition:none;
    background-attachment:scroll;
  }

}

/*
 Fixed page backgrounds can be expensive on compact screens.
 Use normal scrolling there.
*/
@media (max-width:900px){

  body.ric-stage-c{
    background-attachment:scroll;
  }

}