/* ALEX AI — autumn accents + local-time card, homepage only.
   Design intent: restrained amber sun rays from the upper-right header/menu area,
   a sparse set of falling leaves, and a live local clock/date.
   No third-party scripts, background pictures, or network requests. */

/* The effect is intentionally not interactive and cannot cover click targets. */
.page-index .alex-autumn-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 38;             /* below menu/header/docks (z-index: 80/90+) */
  pointer-events: none !important;
  overflow: hidden;
  contain: strict;
  user-select: none;
  -webkit-user-select: none;
}

/* Warm light radiates from the top-right corner near the mobile menu button.
   Gradient intensity stays low to preserve legibility of headlines. */
.page-index .alex-sunlight {
  position: absolute;
  right: -3px;
  top: 0;
  width: min(92vw, 970px);
  height: min(95vh, 880px);
  opacity: .62;
  mix-blend-mode: screen;
  transform: translateZ(0);
  -webkit-mask-image: radial-gradient(ellipse 100% 95% at 100% 0%,#000 0%,rgba(0,0,0,.79) 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 100% 95% at 100% 0%,#000 0%,rgba(0,0,0,.79) 40%, transparent 85%);
}
.page-index .alex-sunlight::before {
  content:"";
  position:absolute;
  inset:0;
  background: conic-gradient(
    from 0deg at 100% 3%,
    transparent 0deg 178deg,
    rgba(255,214,151,.09) 185deg,
    transparent 197deg,
    rgba(255,206,141,.13) 207deg,
    transparent 220deg,
    rgba(255,214,157,.11) 232deg,
    transparent 241deg,
    rgba(255,230,182,.085) 247deg,
    transparent 260deg,
    transparent 360deg
  );
}
.page-index .alex-sunlight::after {
  content:"";
  position:absolute;
  top:-55px;
  right:-80px;
  width:min(50vw,380px);
  height:min(50vw,380px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,218,155,.17) 0%,rgba(255,218,155,.075) 29%,transparent 68%);
  filter:blur(23px);
}

/* Leaves are authored as tiny inline vector paths; no requests or images. */
.page-index .alex-leaves {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.page-index .alex-leaf {
  position:absolute;
  top:0;
  left:var(--alex-left);
  display:block;
  width:var(--alex-size);
  height:var(--alex-size);
  line-height:0;
  opacity:var(--alex-opacity);
  color:var(--alex-color);
  will-change:transform;
  transform:translate3d(0,-15vh,0) rotate(0deg);
  animation:alex-leaf-fall var(--alex-duration) linear var(--alex-delay) infinite;
  filter:drop-shadow(0 2px 5px rgba(42,24,9,.22));
}
.page-index .alex-leaf svg{display:block;width:100%;height:100%;overflow:visible}
.page-index .alex-leaf svg path{stroke:rgba(255,227,186,.48);stroke-width:.65;vector-effect:non-scaling-stroke}
@keyframes alex-leaf-fall {
  0%   {transform:translate3d(0,-18vh,0) rotate(-22deg) rotateY(0deg)}
  24%  {transform:translate3d(calc(var(--alex-wind) * .32),18vh,0) rotate(38deg) rotateY(75deg)}
  51%  {transform:translate3d(calc(var(--alex-wind) * -.25),53vh,0) rotate(115deg) rotateY(160deg)}
  76%  {transform:translate3d(calc(var(--alex-wind) * .54),81vh,0) rotate(205deg) rotateY(230deg)}
  100% {transform:translate3d(var(--alex-wind),120vh,0) rotate(320deg) rotateY(350deg)}
}

/* Compact live-time card: two usable lines even on 320px mobile devices. */
.page-index .alex-now {
  position:relative;
  z-index:2;
  width:fit-content;
  max-width:100%;
  display:grid;
  grid-template-columns:36px auto 1px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:72px;
  margin-top:23px;
  padding:12px 18px 12px 12px;
  color:#f4f7ff;
  border:1px solid rgba(139,195,236,.28);
  border-radius:17px;
  background:linear-gradient(113deg,rgba(17,36,57,.90),rgba(8,24,42,.78));
  box-shadow:inset 0 1px 0 rgba(220,237,255,.09),0 14px 45px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.page-index .alex-now-glyph {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(248,205,135,.31);
  border-radius:12px;
  color:#eccb98;
  background:rgba(223,169,93,.08);
}
.page-index .alex-now-glyph svg{width:19px;height:19px;display:block}
.page-index .alex-now-time,
.page-index .alex-now-date {display:flex;flex-direction:column;justify-content:center;min-width:0}
.page-index .alex-now-time time {
  font-variant-numeric:tabular-nums;
  font-size:25px;
  font-weight:690;
  letter-spacing:-.035em;
  line-height:1.1;
  white-space:nowrap;
}
.page-index .alex-now-caption {
  font-size:8px;
  line-height:1.35;
  font-weight:720;
  letter-spacing:.115em;
  margin-top:5px;
  color:#a9c3d9;
  white-space:nowrap;
}
.page-index .alex-now-divider{width:1px;align-self:stretch;background:linear-gradient(transparent,rgba(167,200,223,.27),transparent)}
.page-index .alex-now-date span {
  font-size:11px;
  font-weight:735;
  color:#f5d5a5;
  line-height:1.3;
  overflow-wrap:break-word;
}
.page-index .alex-now-date time {
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  color:#c6d6e4;
  overflow-wrap:break-word;
}
@media (max-width:760px) {
  .page-index .alex-sunlight {width:100vw;height:68vh;opacity:.53}
  .page-index .alex-leaf:nth-child(n+9){display:none}
  .page-index .alex-now {margin-top:20px}
}
@media (max-width:500px) {
  .page-index .alex-sunlight {opacity:.43}
  .page-index .alex-leaf:nth-child(n+7){display:none}
  .page-index .alex-now {
    grid-template-columns:28px auto 1px minmax(0,1fr);
    gap:9px;
    min-height:62px;
    padding:9px 10px;
    border-radius:14px;
    margin-top:18px;
  }
  .page-index .alex-now-glyph{width:28px;height:28px;border-radius:9px}
  .page-index .alex-now-glyph svg{width:16px;height:16px}
  .page-index .alex-now-time time{font-size:22px}
  .page-index .alex-now-caption{font-size:7px;letter-spacing:.06em}
  .page-index .alex-now-date span{font-size:10px}
  .page-index .alex-now-date time{font-size:10px}
}
@media (max-width:350px) {
  .page-index .alex-now{grid-template-columns:auto 1px minmax(0,1fr)}
  .page-index .alex-now-glyph{display:none}
}
/* Accessibility and battery: turn off decorative effects when motion reduction is requested. */
@media(prefers-reduced-motion:reduce){
  .page-index .alex-leaves{display:none!important}
  .page-index .alex-sunlight{opacity:.25}
}