/* Floating sparkle canvas */

/* ── ULTRA PREMIUM: Floating sparkles ── */
#sparkleCanvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.55;
}

/* ── iOS 26 Premium: animated border glow on glass cards ── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glass-card {
  background: var(--g1);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border-radius: var(--r-lg);
}
.glass-card::after {
  content: none;
}

/* ── Particle trail on cursor ── */
.sparkle-trail {
  position:fixed; pointer-events:none; z-index:99997;
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,129,58,0.9),rgba(232,168,78,0.3));
  transform:translate(-50%,-50%);
  animation:trailFade .6s ease forwards;
}
@keyframes trailFade { 0%{opacity:0.8;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-60%) scale(0.3)} }

/* ── Section entrance: grid lines (opt-in only via .grid-bg class) ── */
.grid-bg::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(212,129,58,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,129,58,0.025) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none; z-index:0;
  opacity:0.5;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 75%);
}

/* ── Reading progress glow enhancement ── */
#readingProgress {
  height:3px !important;
  background:linear-gradient(90deg,#D4813A,#E8A84E,#F2CC8A,#E8A84E,#D4813A) !important;
  background-size:200% 100% !important;
  animation:progressFlow 2s linear infinite !important;
}
@keyframes progressFlow { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

/* ── Hero avatar: extra shimmer ring ── */
.hero-avatar-ring {
  animation: spin 10s linear infinite !important;
}
.hero-avatar-ring-2 {
  animation: spinReverse 15s linear infinite !important;
}
@keyframes spinReverse { to{transform:rotate(-360deg)} }

/* ── Nav: scrolled state glass intensification ── */
header.scrolled nav {
  background:linear-gradient(145deg,rgba(255,255,255,0.92) 0%,rgba(252,236,212,0.86) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    0 24px 64px rgba(212,129,58,0.22),
    0 4px 16px rgba(0,0,0,0.07),
    0 0 0 0.8px rgba(255,255,255,0.9) !important;
}

/* ── Welcome overlay: extra shimmer ── */
.wbox {
  position:relative; overflow:hidden;
}
.wbox::before {
  animation: spin 6s linear infinite !important;
  opacity: 0.15 !important;
}

/* ── Floating action area fix: proper stacking ── */
#backToTop {
  z-index: 7000 !important;
}
#floatChatBtn {
  z-index: 7999 !important;
}

/* ── Mobile responsiveness improvements ── */
@media(max-width:768px) {
  #backToTop { bottom:1.8rem; right:1.8rem; width:48px; height:48px; font-size:.9rem; }
  #floatChatBtn { bottom:4.8rem !important; right:1.8rem !important; }
}
@media(max-width:480px) {
  #backToTop { bottom:1.4rem; right:1.4rem; width:44px; height:44px; }
  #floatChatBtn { bottom:4.2rem !important; right:1.4rem !important; }
}

/* ── Chat panel mobile: full screen style ── */
@media(max-width:768px) {
  #aiChatOverlay {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  #aiChatPanel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
    height: clamp(60vh,85vh,92vh) !important;
    margin-bottom: 0 !important;
  }
}
@media(max-width:480px) {
  #aiChatPanel {
    height: clamp(65vh,90vh,95vh) !important;
    border-radius: 22px 22px 0 0 !important;
  }
}