/*
 * Thème Autumn.
 * Summer reste le socle visuel.
 * Autumn ne remplace que le décor de fond et garde ses feuilles discrètes.
 * Le thème n'est chargé visuellement que si APP_CONFIG.theme = "autumn".
 */
:root[data-theme="autumn"]{
  color-scheme:light dark;
  --text:rgba(255,255,255,.90);
  --text-strong:rgba(255,255,255,.98);
  --text-main:rgba(255,255,255,.90);
  --text-soft:rgba(255,255,255,.70);
  --glass:rgba(255,255,255,.16);
  --glass-strong:rgba(255,255,255,.23);
  --glass-line:rgba(255,255,255,.25);
  --shadow-card:0 22px 60px rgba(10,35,70,.22);
  --shadow-soft:0 12px 32px rgba(10,35,70,.16);
  --info:#ffb23f;
  --sky-top:#5b3827;
  --sky-mid:#b56f3d;
  --sky-bottom:#efad63;
  --app-safearea-bottom-background:var(--sky-bottom);
  --solar-x:74%;
  --solar-y:35%;
  --solar-opacity:.48;
  --celestial-glow:rgba(255,198,102,.55);
  --browser-theme-color:#5b3827;
  --theme-background-image:url("../../images/themes/autumn/autumn-day.webp");
  --theme-background-overlay:none;
  --theme-background-position:center center,center center,center top;
  --theme-background-size:cover,cover,100% 100%;
  --theme-stage-background-size:cover,cover,100% 100%;
  --app-background:
    radial-gradient(circle at 78% 34%,rgba(255,236,180,.56) 0 3%,rgba(255,194,86,.30) 7%,transparent 31%),
    radial-gradient(ellipse at 50% 91%,rgba(255,126,54,.24),transparent 46%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 48%,var(--sky-bottom) 100%);
}

:root[data-theme="autumn"]::after{
  display:none;
}

:root[data-theme="autumn"] body.app-page{
  min-height:calc(var(--app-canvas-height) + var(--safe-bottom));
}

:root[data-theme="autumn"] body.app-page > .ambient-stage{
  position:absolute;
  inset:0;
  min-height:calc(100% + var(--safe-bottom) + 160px);
  height:auto;
  background-image:
    var(--theme-background-overlay),
    var(--theme-background-image),
    var(--app-background);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center center,center center,center top;
  background-size:cover,cover,100% 100%;
}

:root[data-theme="autumn"][data-daypart="dawn"]{
  --theme-background-image:url("../../images/themes/autumn/autumn-dawn.webp");
  --sky-top:#7b5f55;
  --sky-mid:#d19664;
  --sky-bottom:#e4b071;
  --browser-theme-color:#7b5f55;
}

:root[data-theme="autumn"][data-daypart="day"]{
  --theme-background-image:url("../../images/themes/autumn/autumn-day.webp");
  --sky-top:#3d73a6;
  --sky-mid:#b57b3b;
  --sky-bottom:#d79a53;
  --browser-theme-color:#3d73a6;
}

:root[data-theme="autumn"][data-daypart="sunset"]{
  --theme-background-image:url("../../images/themes/autumn/autumn-sunset.webp");
  --sky-top:#4e2d24;
  --sky-mid:#c96828;
  --sky-bottom:#a85a2b;
  --browser-theme-color:#4e2d24;
}

:root[data-theme="autumn"][data-daypart="night"]{
  --theme-background-image:url("../../images/themes/autumn/autumn-night.webp");
  --sky-top:#071226;
  --sky-mid:#16243c;
  --sky-bottom:#271d18;
  --celestial-glow:rgba(255,206,142,.18);
  --solar-opacity:.18;
  --browser-theme-color:#071226;
}

:root[data-theme="autumn"] body.app-page::before,
:root[data-theme="autumn"] body.index-page::before{
  content:"";
  position:fixed;
  inset:0;
  bottom:calc((var(--safe-bottom) + 140px) * -1);
  z-index:1;
  pointer-events:none;
  opacity:.08;
  filter:drop-shadow(0 10px 18px rgba(70,28,8,.18));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23c4551f' d='M31 58c-2-10-10-17-20-20 9-2 16-1 22 5-5-9-6-18-1-30 5 12 4 21-1 30 6-6 13-7 22-5-10 3-18 10-20 20h-2Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23e89a38' d='M32 59c-3-11-12-17-24-17 10-5 19-5 25 1-4-8-6-18-2-34 7 13 7 24 1 34 7-6 16-6 25-1-12 0-21 6-24 17h-1Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%238c3f1c' d='M34 57c-5-10-14-15-26-13 9-6 17-8 25-4-7-8-10-17-10-31 8 10 12 20 9 31 5-7 13-10 24-10-10 5-17 14-20 27h-2Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:44px 44px,62px 62px,82px 82px;
  background-position:12% 18%,84% 22%,92% 76%;
  animation:autumnLeavesFloat 72s ease-in-out infinite alternate;
}

@keyframes autumnLeavesFloat{
  0%{transform:translate3d(-1%,0,0) rotate(-1deg);opacity:.06;}
  100%{transform:translate3d(1%,1%,0) rotate(1deg);opacity:.10;}
}

@media (prefers-color-scheme:dark){
  :root[data-theme="autumn"]{
    --glass:rgba(18,28,46,.36);
    --glass-strong:rgba(24,36,58,.46);
    --glass-line:rgba(255,255,255,.16);
    --shadow-card:0 24px 70px rgba(0,0,0,.34);
    --shadow-soft:0 14px 36px rgba(0,0,0,.26);
  }
}