/* ============================================================
   Namozim — Weather Sky + Hero Action + Night Polish + Hero Edge Clip Fix
   Append to styles.css OR include as a separate stylesheet
   AFTER styles.css.
   ============================================================ */

/* ── Hero photo background layers ─────────────────────── */
.today-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: linear-gradient(160deg,#6fafcf 0%,#d9ecf3 50%,#e6bf79 100%) !important;
  /* iOS/Safari can leak absolutely-positioned children outside rounded cards
     unless the clipping layer is promoted. This keeps the weather sky inside
     the hero radius in both day and night modes. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center 40%;
  opacity: 0; transition: opacity .55s ease; will-change: opacity, transform;
  transform-origin: center center;
}
.hero-photo.show { opacity: 1; }
/* Faster, more noticeable Ken Burns motion so the hero feels alive. */
.hero-photo.show { animation: nzKen 14s ease-in-out infinite alternate; }
@keyframes nzKen {
  0% { transform: scale(1.035) translate3d(-1.2%, .6%, 0); }
  50% { transform: scale(1.105) translate3d(.9%, -1.2%, 0); }
  100% { transform: scale(1.165) translate3d(1.6%, -2.8%, 0); }
}
.hero-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; border-radius: inherit; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(8,26,20,.28) 0%, rgba(8,26,20,.05) 38%, rgba(8,26,20,.08) 64%, rgba(8,26,20,.34) 100%);
}
.hero-scrim::after { content: none; }
.today-hero.wx-clear .hero-scrim,
.today-hero.wx-partly .hero-scrim,
.today-hero.wx-cloudy .hero-scrim {
  background: linear-gradient(165deg, rgba(8,26,20,.24) 0%, rgba(8,26,20,.04) 40%, rgba(8,26,20,.07) 66%, rgba(8,26,20,.30) 100%);
}
.today-hero.wx-fog .hero-scrim {
  background: linear-gradient(165deg, rgba(8,26,20,.26) 0%, rgba(230,238,240,.12) 44%, rgba(8,26,20,.10) 100%);
}
.today-hero.wx-rain .hero-scrim,
.today-hero.wx-snow .hero-scrim,
.today-hero.wx-storm .hero-scrim {
  background: linear-gradient(165deg, rgba(4,12,8,.48) 0%, rgba(4,12,8,.14) 38%, rgba(4,12,8,.18) 64%, rgba(4,12,8,.52) 100%);
}

/* ── Weather visual tuning: cloud cover should be subtle, not a wrong heavy photo ── */
.today-hero.wx-partly .hero-photo.show { filter: saturate(.98) brightness(.98); }
.today-hero.wx-cloudy .hero-photo.show { filter: saturate(.86) brightness(.90); }
.today-hero.wx-fog .hero-photo.show { filter: saturate(.78) brightness(.98) contrast(.86); }
.today-hero.wx-rain .hero-photo.show,
.today-hero.wx-snow .hero-photo.show,
.today-hero.wx-storm .hero-photo.show { filter: saturate(.82) brightness(.82) contrast(.95); }
.today-hero.wx-cloudy .hero-scrim::after,
.today-hero.wx-fog .hero-scrim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(230,238,240, calc(.08 + var(--wx-intensity, .35) * .10));
}
.today-hero.wx-fog .hero-scrim::after { background: rgba(240,246,248, .16); backdrop-filter: blur(.6px); }
.today-hero.wx-clear .hero-photo.show { filter: saturate(1.06) brightness(1.02); }


/* ── Hero text: crisp white, above scrim ──────────────── */
.today-hero .th-meta,
.today-hero .th-body,
.today-hero .th-progress { z-index: 3 !important; }
.today-hero .th-name,
.today-hero .th-count .t-num,
.today-hero .th-count .t-sep {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.7) !important;
}
.today-hero .th-eyebrow { color: rgba(255,255,255,.62) !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.today-hero .th-foot    { color: rgba(255,255,255,.6) !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.today-hero .th-foot .hijri { color: rgba(255,255,255,.8) !important; }
.today-hero .th-meta { color: rgba(255,255,255,.7) !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.today-hero .th-progress-labels { color: rgba(255,255,255,.55) !important; }
.today-hero .th-progress-fill { background: linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.9)) !important; box-shadow: 0 0 8px rgba(255,255,255,.4) !important; }
.today-hero .th-progress-track { background: rgba(255,255,255,.18) !important; }

/* ── Action pill — bottom-center, shows active prayer ─── */
.hero-action-strip {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 4; white-space: nowrap; display: flex; gap: 8px;
}
.ha-btn {
  height: 36px; padding: 0 18px; border-radius: 999px;
  font-family: var(--f-body); font-size: 12.5px; font-weight: 800;
  letter-spacing: .01em; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; pointer-events: auto; transition: transform .13s ease, background .18s ease;
}
.ha-btn:active { transform: translateX(0) scale(.92); }
.ha-btn svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ha-mark {
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.ha-mark:hover { background: rgba(255,255,255,.3); }
.ha-undo {
  background: rgba(34,197,94,.26); color: #fff; border: 1px solid rgba(74,222,128,.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}
.ha-undo .ha-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.ha-hidden { display: none !important; }

/* ── Theme switch: a single full-screen crossfade via the View
   Transitions API so night↔day changes uniformly in one pass (no
   gradient-vs-color split, no per-element desync). Falls back to an
   instant — but still uniform — switch where unsupported. ─────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  mix-blend-mode: normal;
}
/* Fallback cross-dissolve for engines without the View Transitions API
   (keeps the night switch animated and uniform everywhere). */
.app.theme-xfade { transition: opacity .2s ease; will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .app.theme-xfade { transition: none; }
}

/* ── Night: hero de-neon ──────────────────────────────── */
html.namozim-night .today-hero {
  background: #050C07 !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important;
}
html.namozim-night .today-hero .th-name,
html.namozim-night .today-hero .th-count .t-num,
html.namozim-night .today-hero .th-count .t-sep {
  color: #FFFFFF !important; text-shadow: 0 2px 16px rgba(0,0,0,.65) !important;
}

/* ── Night: streak hero flat ──────────────────────────── */
html.namozim-night .streak-hero { background: var(--paper-2) !important; border: 1px solid var(--paper-line-2) !important; box-shadow: none !important; color: var(--ink) !important; }
html.namozim-night .streak-hero .mosque-bg { display: none !important; }
html.namozim-night .streak-eb, html.namozim-night .streak-unit, html.namozim-night .wk-d, html.namozim-night .rec-lbl { color: var(--ink-mute) !important; }
html.namozim-night .streak-num { color: var(--sage) !important; text-shadow: none !important; }
html.namozim-night .streak-record { background: var(--paper-3) !important; border-color: var(--paper-line-2) !important; box-shadow: none !important; }
html.namozim-night .rec-val { color: var(--ink) !important; }
html.namozim-night .rec-val span { color: var(--ink-mute) !important; }
html.namozim-night .streak-flame { filter: none !important; color: var(--brass) !important; }
html.namozim-night .wk-bar { background: var(--paper-line) !important; }
html.namozim-night .wk-fill { background: linear-gradient(0deg,var(--brass-deep) 0%,var(--brass-mid) 100%) !important; }
html.namozim-night .wk.is-today .wk-d { color: var(--brass) !important; }

/* ── Night: plan +/− ──────────────────────────────────── */
html.namozim-night .qaza-step { background: var(--paper-3) !important; border-color: var(--paper-line-2) !important; }
html.namozim-night .qaza-step button.minus { background: var(--paper-2) !important; color: var(--ink) !important; border: 0 !important; }
html.namozim-night .qaza-step button.plus  { background: var(--sage) !important; color: var(--paper) !important; opacity: 1 !important; }
html.namozim-night .qaza-step .qty { color: var(--ink) !important; }

/* ── Night: AI sparkle ────────────────────────────────── */
html.namozim-night .ai-card { background: var(--paper-2) !important; border-color: var(--paper-line-2) !important; }
html.namozim-night .ai-card .ic { color: var(--brass) !important; text-shadow: none !important; opacity: 1 !important; }
html.namozim-night .ai-card strong { color: var(--ink) !important; }

/* ============================================================
   Living sky — drifting cloud layers inside the hero card.
   Built from radial-gradient puffs (no external asset needed) so
   the sky is visibly alive even in a static local preview.
   Sits above the scrim (z1) and below hero content (z3).
   ============================================================ */
.hero-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: var(--sky-cloud-opacity, .42);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero-cloud-layer {
  position: absolute;
  inset: -26% -44%;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 1;
  /* Cool-grey shadow gives the white puffs definition over the bright,
     near-white middle band of the sky gradient (white-on-white otherwise). */
  filter: drop-shadow(0 8px 15px rgba(74,96,118,.22));
  will-change: transform;
  transform: translate3d(0,0,0);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hero-cloud-back {
  background-image:
    radial-gradient(ellipse 22% 30% at 16% 52%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.66) 24%, rgba(255,255,255,0) 64%),
    radial-gradient(ellipse 27% 34% at 38% 44%, rgba(255,255,255,.64) 0%, rgba(255,255,255,.58) 26%, rgba(255,255,255,0) 66%),
    radial-gradient(ellipse 24% 30% at 60% 57%, rgba(255,255,255,.58) 0%, rgba(255,255,255,.52) 24%, rgba(255,255,255,0) 64%),
    radial-gradient(ellipse 27% 33% at 83% 48%, rgba(255,255,255,.56) 0%, rgba(255,255,255,.50) 26%, rgba(255,255,255,0) 66%);
  background-size: 520px 170px;
  transform: translate3d(-12%,-8%,0) scale(1.18);
  animation-name: nzCloudBack;
  animation-duration: var(--cloud-back-speed, 30s);
}
.hero-cloud-mid {
  background-image:
    radial-gradient(ellipse 20% 28% at 12% 60%, rgba(255,255,255,.80) 0%, rgba(255,255,255,.72) 22%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 28% 36% at 33% 50%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.64) 26%, rgba(255,255,255,0) 64%),
    radial-gradient(ellipse 23% 30% at 56% 62%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.56) 24%, rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 26% 32% at 85% 55%, rgba(255,255,255,.66) 0%, rgba(255,255,255,.60) 24%, rgba(255,255,255,0) 64%);
  background-size: 440px 150px;
  transform: translate3d(-18%,2%,0) scale(1.10);
  animation-name: nzCloudMid;
  animation-duration: var(--cloud-mid-speed, 18s);
}
.hero-cloud-front {
  background-image:
    radial-gradient(ellipse 19% 26% at 18% 55%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.78) 22%, rgba(255,255,255,0) 58%),
    radial-gradient(ellipse 24% 30% at 42% 62%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.64) 24%, rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 22% 28% at 68% 52%, rgba(255,255,255,.64) 0%, rgba(255,255,255,.56) 22%, rgba(255,255,255,0) 60%);
  background-size: 380px 140px;
  transform: translate3d(-24%,9%,0) scale(1.05);
  animation-name: nzCloudFront;
  animation-duration: var(--cloud-front-speed, 13s);
}
@keyframes nzCloudBack {
  0%   { transform: translate3d(-12%,-8%,0) scale(1.18); }
  100% { transform: translate3d(12%,-8%,0) scale(1.18); }
}
@keyframes nzCloudMid {
  0%   { transform: translate3d(-18%,2%,0) scale(1.10); }
  100% { transform: translate3d(16%,2%,0) scale(1.10); }
}
@keyframes nzCloudFront {
  0%   { transform: translate3d(-24%,9%,0) scale(1.05); }
  100% { transform: translate3d(20%,9%,0) scale(1.05); }
}
/* Rainy/stormy skies: clouds read better with a faint grey underside. */
.today-hero.wx-rain .hero-cloud-layer,
.today-hero.wx-storm .hero-cloud-layer {
  filter: blur(.6px) brightness(.9) drop-shadow(0 12px 26px rgba(60,72,86,.28));
}
/* Keep hero content above the cloud layer. */
.today-hero .th-meta,
.today-hero .th-body,
.today-hero .th-progress,
.today-hero .hero-action-strip { z-index: 3; }
.today-hero .hero-action-strip { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .hero-cloud-layer { animation: none !important; }
}

/* ============================================================
   Per-prayer-time hero sky.
   The weather layer sets data-period on .today-hero (fajr / sunrise /
   dhuhr / asr / maghrib / isha). These gradients are the reliable base
   that always matches the time of day — even when the Unsplash photo
   layer fails to load. Photo layers still overlay on top when available.
   Specificity (0,2,0) beats the plain .today-hero base (0,1,0); manual
   night mode (html.namozim-night .today-hero = 0,2,1) still wins.
   ============================================================ */
.today-hero[data-period="fajr"]    { background: linear-gradient(160deg,#243b6b 0%,#6b5e8f 52%,#d98e63 100%) !important; }
.today-hero[data-period="sunrise"] { background: linear-gradient(160deg,#5b7fb0 0%,#e7b27a 58%,#f6dca6 100%) !important; }
.today-hero[data-period="dhuhr"]   { background: linear-gradient(160deg,#5fa8e0 0%,#bfe3f5 50%,#eaf2f5 100%) !important; }
.today-hero[data-period="asr"]     { background: linear-gradient(160deg,#6fb0d8 0%,#d7ecf8 46%,#e8bf7d 100%) !important; }
.today-hero[data-period="maghrib"] { background: linear-gradient(160deg,#33406d 0%,#d9714e 56%,#f0a85f 100%) !important; }
.today-hero[data-period="isha"]    { background: linear-gradient(160deg,#0f2147 0%,#23335e 55%,#3a3550 100%) !important; }
/* Darker periods read better with brighter clouds + crisper text scrim. */
.today-hero[data-period="fajr"] .hero-scrim,
.today-hero[data-period="maghrib"] .hero-scrim,
.today-hero[data-period="isha"] .hero-scrim {
  background: linear-gradient(165deg, rgba(4,10,20,.42) 0%, rgba(4,10,20,.10) 42%, rgba(4,10,20,.16) 66%, rgba(4,10,20,.48) 100%);
}

/* ============================================================
   Restored motion pack from the previous Mini App build.
   The uploaded redesign kept the visual additions, but some previous
   motion hooks became inactive. These rules restore the old ambient
   cloud drift + smooth UI color transitions without touching backend/API.
   ============================================================ */
.hero-clouds {
  opacity: var(--cloud-opacity, var(--sky-cloud-opacity, .44));
  transition: opacity .7s ease, filter .7s ease;
}
.hero-cloud-layer {
  will-change: background-position, opacity, transform;
  transform: translate3d(0,0,0) scale(var(--cloud-scale,1));
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
.hero-cloud-back,
.cloud-back {
  opacity: .64;
  filter: blur(7px) drop-shadow(0 12px 18px rgba(78,105,116,.22));
  background-size: 760px 245px, 920px 310px, 680px 220px;
  background-position: 0 16%, 240px 34%, 520px 56%;
  background-image:
    radial-gradient(ellipse at 18% 58%, rgba(255,255,255,.78) 0 9%, rgba(185,205,214,.28) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 58% 42%, rgba(255,255,255,.68) 0 12%, rgba(170,194,204,.24) 22%, rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 86% 62%, rgba(255,255,255,.70) 0 10%, rgba(170,194,204,.22) 19%, rgba(255,255,255,0) 36%);
  animation-name: nzCloudBackRestored;
  animation-duration: var(--cloud-speed-back, 78s);
}
.hero-cloud-mid,
.cloud-mid {
  opacity: .78;
  filter: blur(3px) drop-shadow(0 10px 16px rgba(76,104,118,.24));
  background-size: 620px 220px, 820px 270px, 540px 200px;
  background-position: 80px 24%, 360px 45%, 620px 68%;
  background-image:
    radial-gradient(ellipse at 24% 48%, rgba(255,255,255,.90) 0 10%, rgba(190,211,220,.38) 18%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 52% 54%, rgba(255,255,255,.84) 0 13%, rgba(180,203,214,.34) 23%, rgba(255,255,255,0) 43%),
    radial-gradient(ellipse at 76% 48%, rgba(255,255,255,.76) 0 9%, rgba(174,198,210,.30) 18%, rgba(255,255,255,0) 36%);
  animation-name: nzCloudMidRestored;
  animation-duration: var(--cloud-speed-mid, 52s);
}
.hero-cloud-front,
.cloud-front {
  opacity: .60;
  filter: blur(1.2px) drop-shadow(0 8px 12px rgba(69,94,110,.22));
  background-size: 510px 170px, 690px 210px;
  background-position: 0 70%, 260px 18%;
  background-image:
    radial-gradient(ellipse at 24% 55%, rgba(255,255,255,.96) 0 8%, rgba(192,212,222,.42) 17%, rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 70% 58%, rgba(255,255,255,.82) 0 9%, rgba(180,202,214,.34) 18%, rgba(255,255,255,0) 35%);
  animation-name: nzCloudFrontRestored;
  animation-duration: var(--cloud-speed-front, 34s);
}
.hero-cloud-haze {
  position: absolute;
  inset: 0;
  opacity: var(--cloud-haze, .08);
  background:
    radial-gradient(ellipse at 25% 28%, rgba(255,255,255,.35), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
  filter: blur(10px);
}
.sky-cloud-none .hero-clouds { opacity: .18; }
.sky-cloud-few .hero-clouds { opacity: calc(var(--cloud-opacity, .32) * .86); }
.sky-cloud-partly .hero-clouds { opacity: var(--cloud-opacity, .46); }
.sky-cloud-cloudy .hero-clouds { opacity: var(--cloud-opacity, .58); }
.sky-cloud-overcast .hero-clouds { opacity: calc(var(--cloud-opacity, .62) * 1.08); filter: saturate(.88) brightness(.94); }
.sky-night .hero-clouds { mix-blend-mode: lighten; filter: saturate(.78) brightness(.82); }
.sky-night .hero-cloud-haze { opacity: calc(var(--cloud-haze, .08) * .55); }
@keyframes nzCloudBackRestored {
  from { background-position: 0 16%, 240px 34%, 520px 56%; }
  to { background-position: 1520px 16%, 1160px 34%, 1880px 56%; }
}
@keyframes nzCloudMidRestored {
  from { background-position: 80px 24%, 360px 45%, 620px 68%; }
  to { background-position: 1320px 24%, 2000px 45%, 1700px 68%; }
}
@keyframes nzCloudFrontRestored {
  from { background-position: 0 70%, 260px 18%; }
  to { background-position: 1020px 70%, 1640px 18%; }
}

/* Restore previous subtle per-component motion on theme/style changes.
   View Transitions still handle supported browsers; this keeps cards, rows,
   nav, plan, calendar, and settings smoothly animated in the fallback path. */
.app, .app-header, .h-title, .h-sub, .h-right .ai-pill,
.today-hero, .prayer-row, .p-name, .p-meta, .p-time-only,
.bottom-nav, .nav-item, .today-calendar-btn,
.plan-hero, .plan-big, .plan-sub, .goal-card, .streak-hero,
.cal-card, .cal-day, .cal-month, .metric-tile, .ai-card,
.qaza-row, .qaza-step, .qaza-step button, .sec-head h2,
.plan-stat .v, .cdd-pray, .heatmap-card, .namoz-chart, .set-row {
  transition: background-color .5s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo.show,
  .hero-cloud-layer { animation-duration: 120s !important; }
}



/* ── Night toggle seam fix: avoid root snapshot split and mask the hero progress line under the action pill. */
::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(root),
::view-transition-image-pair(root) {
  animation: none !important;
  mix-blend-mode: normal !important;
}
.today-hero .hero-action-strip {
  z-index: 8 !important;
  isolation: isolate;
}
.today-hero .hero-action-strip .ha-btn {
  position: relative;
  z-index: 1;
}
.today-hero .hero-action-strip .ha-mark,
.today-hero .hero-action-strip .ha-undo {
  background: rgba(255,255,255,.48) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
html.namozim-night .today-hero .hero-action-strip .ha-mark,
html.namozim-night .today-hero .hero-action-strip .ha-undo {
  background: rgba(20,34,27,.64) !important;
}

/* Settings function modal visibility fix: modal-only, no settings row/section reveal motion. */
:root {
  --settings-function-modal-ease: cubic-bezier(.2, .8, .2, 1);
}

.modal-backdrop[data-settings-modal="true"] {
  position: fixed;
  z-index: 900;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: settingsFunctionBackdropIn .16s ease-out;
}

.modal-backdrop[data-settings-modal="true"].is-closing {
  animation: settingsFunctionBackdropOut .14s ease-in both;
  pointer-events: none;
}

.modal-backdrop[data-settings-modal="true"] > .modal-card,
.modal-backdrop[data-settings-modal="true"] > .modal-card-sheet,
.modal-backdrop[data-settings-modal="true"] > .modal-card-tall,
.modal-backdrop[data-settings-modal="true"] > .modal-card-center {
  position: relative;
  z-index: 901;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  animation: none;
  will-change: transform, opacity;
}

.modal-backdrop[data-settings-modal="true"][data-open="true"] > .modal-card {
  animation: settingsFunctionOpen .18s var(--settings-function-modal-ease);
  transform-origin: 50% 100%;
}

.modal-backdrop[data-settings-modal="true"][data-open="true"] > .modal-card-center {
  transform-origin: 50% 50%;
}

.modal-backdrop[data-settings-modal="true"].is-closing > .modal-card {
  animation: settingsFunctionClose .14s ease both;
  pointer-events: none;
}

@keyframes settingsFunctionBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes settingsFunctionBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes settingsFunctionOpen {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes settingsFunctionClose {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop[data-settings-modal="true"],
  .modal-backdrop[data-settings-modal="true"].is-closing,
  .modal-backdrop[data-settings-modal="true"] > .modal-card,
  .modal-backdrop[data-settings-modal="true"].is-closing > .modal-card {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}