/* Stoppin. realistic solar/moon treatment.
   The astronomical runtime controls the sky palette and Sun path.
   Texture is clipped inside the photosphere by the SVG component; this stylesheet
   only draws circular atmospheric light around it. */

.stoppin-home-stage .circadian-sky__sun {
  border-radius: 50%;
  isolation: isolate;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* The former illustrated ray fan and lens flare caused visible rectangular
   compositing artefacts. They are deliberately disabled. */
.stoppin-home-stage .circadian-sky__sun-rays,
.stoppin-home-stage .circadian-sky__sun-flare {
  display: none !important;
}

/* Broad atmospheric bloom. It is a pure radial gradient with no SVG texture,
   mask, hard shadow or rectangular filter region. */
.stoppin-home-stage .circadian-sky__sun::before {
  position: absolute;
  inset: -235% !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(255 255 247 / 0.48) 0 3%,
    rgb(255 246 204 / 0.38) 7%,
    rgb(255 237 161 / 0.27) 14%,
    rgb(255 218 116 / 0.15) 23%,
    rgb(255 190 79 / 0.075) 34%,
    rgb(255 168 63 / 0.03) 46%,
    transparent 64%
  ) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Tight corona around the photosphere, still entirely radial. */
.stoppin-home-stage .circadian-sky__sun::after {
  position: absolute;
  inset: -72%;
  z-index: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgb(255 255 248 / 0.52) 0 22%,
    rgb(255 237 161 / 0.3) 34%,
    rgb(255 205 96 / 0.12) 51%,
    transparent 72%
  );
}

.stoppin-home-stage .circadian-sky__sun-disc {
  position: relative;
  z-index: 2;
  display: block;
  background: transparent !important;
  filter: none !important;
}

/* Natural photospheric falloff: pale centre, warmer limb. The actual granular
   texture is composited with SourceAlpha and clipped to the circular SVG disc. */
.stoppin-home-stage #circadian-sun-core stop:nth-child(1) {
  stop-color: #fffef7 !important;
}

.stoppin-home-stage #circadian-sun-core stop:nth-child(2) {
  stop-color: #fff8d2 !important;
}

.stoppin-home-stage #circadian-sun-core stop:nth-child(3) {
  stop-color: #ffeda1 !important;
}

.stoppin-home-stage #circadian-sun-core stop:nth-child(4) {
  stop-color: #ffd96f !important;
}

.stoppin-home-stage #circadian-sun-core stop:nth-child(5) {
  stop-color: #f4b94b !important;
}

.stoppin-home-stage .circadian-sky__sun-disc > circle:last-child {
  stroke: rgb(255 247 215 / 0.34) !important;
  stroke-width: 0.55 !important;
}

/* Warmer, softer scattering close to the horizon. */
.stoppin-home-stage .circadian-sky[data-phase="dawn"] .circadian-sky__sun::before,
.stoppin-home-stage .circadian-sky[data-phase="dusk"] .circadian-sky__sun::before {
  background: radial-gradient(
    circle at 50% 50%,
    rgb(255 250 224 / 0.44) 0 4%,
    rgb(255 224 161 / 0.31) 12%,
    rgb(255 182 104 / 0.16) 27%,
    rgb(238 122 72 / 0.055) 43%,
    transparent 64%
  ) !important;
}

/* A low-illumination Moon beside the daytime Sun reads like an unwanted shadow,
   so the Moon stays hidden during full daylight. */
.stoppin-home-stage .circadian-sky[data-phase="day"] .circadian-sky__moon {
  opacity: 0 !important;
}

/* Do not clamp left/top here. CircadianSky updates --moon-x/--moon-y every
   animation frame, allowing the Moon to travel continuously on its own arc. */
.stoppin-home-stage .circadian-sky[data-phase="night"] .circadian-sky__moon {
  filter: drop-shadow(0 0 0.35rem rgb(223 235 255 / 0.18)) !important;
}

.stoppin-home-stage .circadian-sky[data-phase="night"] .circadian-sky__moon::before {
  inset: -145%;
  background: radial-gradient(
    circle,
    rgb(235 244 255 / 0.24) 0 10%,
    rgb(183 211 255 / 0.12) 24%,
    rgb(126 164 224 / 0.045) 43%,
    transparent 67%
  );
}

/* Slight earthshine keeps a thin/new Moon identifiable against the night sky
   without turning its dark side into a bright full disc. */
.stoppin-home-stage .circadian-sky[data-phase="night"] #circadian-moon-dark stop:nth-child(1) {
  stop-color: #68758a !important;
}

.stoppin-home-stage .circadian-sky[data-phase="night"] #circadian-moon-dark stop:nth-child(2) {
  stop-color: #394455 !important;
}

.stoppin-home-stage .circadian-sky[data-phase="night"] #circadian-moon-dark stop:nth-child(3) {
  stop-color: #1b2330 !important;
}

/* The visual progress indicator follows the same four-second simulated clock. */
.stoppin-home-stage .circadian-sky-toggle[data-timelapsing="true"] .circadian-sky-toggle__progress {
  animation-duration: 4s !important;
}

/* --------------------------------------------------------------------------
   Reactive Liquid Glass

   The glass is intentionally translucent instead of being a dark opaque card.
   backdrop-filter samples the actual moving sky behind every surface, so blue
   daylight, warm twilight and the dark stellar background alter the glass live
   without JavaScript colour snapshots. Phase tints only bias the material; the
   backdrop itself remains the primary source of reflected colour.
   -------------------------------------------------------------------------- */

.stoppin-home-stage > .circadian-sky ~ .stoppin-home-stage__content {
  --liquid-glass-tint: rgb(52 72 112);
  --liquid-glass-fill: rgb(8 15 28 / 0.28);
  --liquid-glass-edge: rgb(235 244 255 / 0.3);
  --liquid-glass-edge-soft: rgb(255 255 255 / 0.11);
  --liquid-glass-specular: rgb(255 255 255 / 0.48);
  --liquid-glass-shadow: rgb(0 0 0 / 0.28);
  --home-panel-bg: rgb(7 14 27 / 0.3) !important;
  --home-card-bg: rgb(8 15 29 / 0.34) !important;
  --home-panel-border: rgb(232 242 255 / 0.25) !important;
}

.stoppin-home-stage > .circadian-sky[data-phase="day"] ~ .stoppin-home-stage__content {
  --liquid-glass-tint: rgb(105 181 255);
  --liquid-glass-fill: rgb(42 100 148 / 0.19);
  --liquid-glass-edge: rgb(245 252 255 / 0.42);
  --liquid-glass-edge-soft: rgb(211 240 255 / 0.18);
  --liquid-glass-specular: rgb(255 255 255 / 0.64);
  --liquid-glass-shadow: rgb(4 34 58 / 0.24);
  --home-panel-bg: rgb(20 70 110 / 0.22) !important;
  --home-card-bg: rgb(20 63 101 / 0.26) !important;
  --home-panel-border: rgb(240 251 255 / 0.34) !important;
}

.stoppin-home-stage > .circadian-sky[data-phase="dawn"] ~ .stoppin-home-stage__content,
.stoppin-home-stage > .circadian-sky[data-phase="dusk"] ~ .stoppin-home-stage__content {
  --liquid-glass-tint: rgb(229 139 107);
  --liquid-glass-fill: rgb(92 54 75 / 0.22);
  --liquid-glass-edge: rgb(255 240 225 / 0.4);
  --liquid-glass-edge-soft: rgb(255 198 164 / 0.18);
  --liquid-glass-specular: rgb(255 246 229 / 0.6);
  --liquid-glass-shadow: rgb(37 16 35 / 0.28);
  --home-panel-bg: rgb(69 39 65 / 0.25) !important;
  --home-card-bg: rgb(58 35 61 / 0.29) !important;
  --home-panel-border: rgb(255 229 210 / 0.32) !important;
}

/* Base material shared by the home filters, campaign panels, event cards and
   all elements already using the project's .glass utility. */
.stoppin-home-stage .stoppin-home-stage__content main .glass,
.stoppin-home-stage .stoppin-home-stage__content main .bg-surface,
.stoppin-home-stage .stoppin-home-stage__content main [class*="bg-surface/"],
.stoppin-home-stage .stoppin-home-stage__content main > div > details,
.stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results,
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] {
  position: relative;
  isolation: isolate;
  border-color: var(--liquid-glass-edge) !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--liquid-glass-specular) 12%, transparent) 0%,
      color-mix(in srgb, var(--liquid-glass-tint) 9%, transparent) 34%,
      transparent 66%
    ),
    var(--liquid-glass-fill) !important;
  box-shadow:
    0 16px 46px var(--liquid-glass-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--liquid-glass-specular) 72%, transparent),
    inset 1px 0 0 var(--liquid-glass-edge-soft),
    inset 0 -1px 0 rgb(0 0 0 / 0.12) !important;
  backdrop-filter: blur(20px) saturate(165%) contrast(106%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%) contrast(106%) brightness(1.03) !important;
}

/* Vibe cards keep their individual chromatic accent but the old opaque gradient
   is weakened so the moving sky can refract through it. */
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] > div[aria-hidden],
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] > div.absolute {
  opacity: 0.34 !important;
  mix-blend-mode: soft-light;
}

/* Specular reflection: a broad curved highlight plus a thinner opposing edge.
   Because this layer is blended over a live backdrop-filtered surface, its
   apparent colour shifts with the sky beneath it. */
.stoppin-home-stage .stoppin-home-stage__content main .glass::before,
.stoppin-home-stage .stoppin-home-stage__content main .bg-surface::before,
.stoppin-home-stage .stoppin-home-stage__content main > div > details::before,
.stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results::before,
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
      130% 72% at 12% -15%,
      color-mix(in srgb, var(--liquid-glass-specular) 72%, transparent) 0%,
      color-mix(in srgb, var(--liquid-glass-specular) 24%, transparent) 27%,
      transparent 55%
    ),
    radial-gradient(
      80% 54% at 96% 108%,
      color-mix(in srgb, var(--liquid-glass-tint) 28%, transparent),
      transparent 68%
    );
  mix-blend-mode: screen;
  opacity: 0.72;
}

/* Micro-caustics / grain. This avoids an expensive SVG displacement map while
   still breaking the perfectly flat digital surface into liquid-looking bands. */
.stoppin-home-stage .stoppin-home-stage__content main .glass::after,
.stoppin-home-stage .stoppin-home-stage__content main .bg-surface::after,
.stoppin-home-stage .stoppin-home-stage__content main > div > details::after,
.stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results::after,
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"]::after {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background:
    repeating-radial-gradient(
      ellipse at 22% 18%,
      rgb(255 255 255 / 0.026) 0 1px,
      transparent 1.4px 5px
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0 10px,
      rgb(255 255 255 / 0.018) 11px,
      transparent 13px 22px
    );
  mix-blend-mode: soft-light;
  opacity: 0.42;
}

/* Keep actual component content above the optical layers. */
.stoppin-home-stage .stoppin-home-stage__content main .glass > *,
.stoppin-home-stage .stoppin-home-stage__content main .bg-surface > *,
.stoppin-home-stage .stoppin-home-stage__content main > div > details > *,
.stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results > *,
.stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] > * {
  position: relative;
  z-index: 1;
}

/* Desktop and mobile navigation become part of the same optical material. */
.stoppin-home-stage .stoppin-home-stage__content > header {
  border-color: var(--liquid-glass-edge-soft) !important;
  background: color-mix(in srgb, var(--liquid-glass-tint) 16%, rgb(4 8 15 / 0.45)) !important;
  box-shadow:
    0 12px 36px var(--liquid-glass-shadow),
    inset 0 1px 0 var(--liquid-glass-edge-soft);
  backdrop-filter: blur(24px) saturate(165%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) contrast(105%) !important;
}

body:has(.stoppin-home-stage) > nav[aria-label="Navigation principale"] {
  border-color: rgb(255 255 255 / 0.18) !important;
  background: rgb(7 12 22 / 0.46) !important;
  box-shadow:
    0 -12px 36px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.14);
  backdrop-filter: blur(22px) saturate(165%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) contrast(105%) !important;
}

/* The sky selector itself uses the same reactive material. */
.stoppin-home-stage .circadian-sky-toggle {
  border-color: rgb(255 255 255 / 0.3) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.12), transparent 48%),
    rgb(8 15 28 / 0.3) !important;
  box-shadow:
    0 12px 34px rgb(0 0 0 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.12) !important;
  backdrop-filter: blur(18px) saturate(175%) contrast(108%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%) contrast(108%) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stoppin-home-stage .stoppin-home-stage__content main .glass,
  .stoppin-home-stage .stoppin-home-stage__content main .bg-surface,
  .stoppin-home-stage .stoppin-home-stage__content main [class*="bg-surface/"],
  .stoppin-home-stage .stoppin-home-stage__content main > div > details,
  .stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results,
  .stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] {
    background: rgb(8 14 25 / 0.9) !important;
  }
}

@media (max-width: 767px) {
  .stoppin-home-stage .stoppin-home-stage__content main .glass,
  .stoppin-home-stage .stoppin-home-stage__content main .bg-surface,
  .stoppin-home-stage .stoppin-home-stage__content main [class*="bg-surface/"],
  .stoppin-home-stage .stoppin-home-stage__content main > div > details,
  .stoppin-home-stage .stoppin-home-stage__content main > div > #discovery-results,
  .stoppin-home-stage .stoppin-home-stage__content main button.group[class*="rounded-3xl"] {
    backdrop-filter: blur(14px) saturate(150%) contrast(104%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) contrast(104%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stoppin-home-stage .circadian-sky__sun::before,
  .stoppin-home-stage .circadian-sky__sun::after {
    transition: none;
  }
}