/* ═══════════════════════════════════════════
   Animations v4.0 — 联合文社
   呼吸灯·流畅补丁·稳定性补丁·粒子·扫描·抖光·GPU加速
   ═══════════════════════════════════════════ */

/* ── Spring-like transitions ── */
.spring { transition: all var(--dur-base) cubic-bezier(0.16,1,0.3,1); }
.spring-slow { transition: all var(--dur-slow) cubic-bezier(0.16,1,0.3,1); }

/* ── Page transitions ── */
.page-enter { animation: pageEnter var(--dur-slow) cubic-bezier(.16,1,.3,1) both; }
@keyframes pageEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page-exit { animation: pageExit var(--dur-base) cubic-bezier(.4,0,1,1) both; }
@keyframes pageExit { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)} }

/* ── Stagger ── */
.stagger>*{opacity:0;transform:translateY(8px)}
.stagger.visible>*{animation:staggerIn var(--dur-slow) cubic-bezier(.16,1,.3,1) both}
.stagger.visible>*:nth-child(1){animation-delay:0ms}
.stagger.visible>*:nth-child(2){animation-delay:50ms}
.stagger.visible>*:nth-child(3){animation-delay:100ms}
.stagger.visible>*:nth-child(4){animation-delay:150ms}
.stagger.visible>*:nth-child(5){animation-delay:200ms}
.stagger.visible>*:nth-child(6){animation-delay:250ms}
.stagger.visible>*:nth-child(7){animation-delay:300ms}
.stagger.visible>*:nth-child(8){animation-delay:350ms}
@keyframes staggerIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}

/* ── Tap Scale ── */
.tap-scale{transition:transform var(--dur-fast) cubic-bezier(.16,1,.3,1)}
.tap-scale:active{transform:scale(.98)}

/* ── Hover Lift ── */
.hover-lift{transition:transform var(--dur-fast) cubic-bezier(.16,1,.3,1);transform:translateY(0)}
.hover-lift:hover{transform:translateY(-2px)}

/* ── Border Pulse ── */
@keyframes borderPulse{0%,100%{border-color:var(--ui-line)}50%{border-color:var(--ui-line-strong)}}
.border-pulse{animation:borderPulse 3s ease-in-out infinite}

/* ═══ Breathing Lights (Enhanced) ═══ */

/* Breath Dot — single point glow */
.breath-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--ui-fg);
  border-radius: 50%;
  animation: breathDotGlow 3s ease-in-out infinite;
  vertical-align: middle;
  margin: 0 6px;
}
@keyframes breathDotGlow {
  0%,100%{ opacity:.15; box-shadow:0 0 0 0 currentColor }
  50%{ opacity:1; box-shadow:0 0 10px 3px currentColor }
}

/* Breath Ring — expanding ring pulse */
.breath-ring {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--ui-fg-muted);
  border-radius: 50%;
  animation: breathRing 2.8s ease-in-out infinite;
  vertical-align: middle;
  margin: 0 6px;
  position: relative;
}
.breath-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--ui-fg-muted);
  border-radius: 50%;
  animation: breathRingOuter 2.8s ease-in-out infinite;
}
@keyframes breathRing { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:.8;transform:scale(1)} }
@keyframes breathRingOuter { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:.3;transform:scale(1.4)} }

/* Breath Glow Border */
.breath-glow { position: relative; }
.breath-glow::after {
  content: ''; position: absolute; inset: -1px;
  border: 1px solid transparent; pointer-events: none;
  animation: breathGlow 4s ease-in-out infinite; z-index:-1;
}
@keyframes breathGlow { 0%,100%{border-color:transparent} 50%{border-color:rgba(167,139,250,.12)} }

/* Breath Line — horizontal scan line */
.breath-line {
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--ui-line),transparent);
  animation: breathLine 4s ease-in-out infinite;
  margin: var(--gap-md) 0;
}
@keyframes breathLine { 0%,100%{opacity:.2;transform:scaleX(.8)} 50%{opacity:1;transform:scaleX(1)} }

/* Breath Text — subtle text glow */
.breath-text { animation: breathText 3.5s ease-in-out infinite; }
@keyframes breathText { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ═══ Fluent Patches v4.0 ═══ */

/* GPU Layer Acceleration — prevent paint flashes */
.gpu-layer {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Smooth Scroll Container */
.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Content Visibility — lazy render off-screen elements */
.content-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* No Layout Shift — reserve space for dynamic content */
.no-shift { contain: layout style; }

/* Image Rendering — prevent blur */
.crisp-render {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Sub-pixel antialiasing for text-heavy sections */
.text-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Transition lock — prevent mid-transition clicks */
.transition-lock {
  pointer-events: none;
  transition: none !important;
}

/* Button debounce — prevent double-tap on mobile */
.btn-debounce:active {
  pointer-events: none;
}
.btn-debounce {
  touch-action: manipulation;
}

/* ═══ Stability Patches ═══ */

/* iOS Safari — prevent rubber band over-scroll blur */
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* Prevent viewport height jump on mobile (address bar show/hide) */
@supports (-webkit-touch-callout: none) {
  .viewport-stable {
    min-height: -webkit-fill-available;
  }
}

/* Stable table — prevents layout shift on hover */
.stable-table td, .stable-table th {
  min-height: 44px;
  vertical-align: middle;
}

/* Font rendering stability */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tap highlight removal for mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Thin scrollbar on touch devices */
@media (hover: none) and (pointer: coarse) {
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* Prevent iOS input zoom on focus */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], textarea, select {
    font-size: 16px !important;
  }
}

/* Prevent pull-to-refresh on admin panel */
.admin-layout {
  overscroll-behavior: contain;
}

/* Fixed position rendering fix for iOS */
.fixed-ios {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Long press prevention for buttons (avoid iOS callout) */
button, .btn, [role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Scrollbar gutter stable — prevent layout shift */
@supports (scrollbar-gutter: stable) {
  html { scrollbar-gutter: stable; }
}

/* Input autofill style fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-fg);
  -webkit-box-shadow: 0 0 0px 1000px var(--ui-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ═══ Existing Animations (Cleaned) ═══ */

/* Glitch effect */
@keyframes glitch1 {
  0%,100%{transform:none;opacity:1}
  7%{transform:skew(-.5deg,-.9deg);opacity:.75}
  10%{transform:none;opacity:1}
  27%{transform:none;opacity:1}
  30%{transform:skew(.8deg,-.1deg);opacity:.75}
  35%{transform:none;opacity:1}
}
@keyframes glitch2 {
  0%,100%{transform:none;opacity:.25}
  7%{transform:translate(-3px,0);opacity:.5}
  10%{transform:none;opacity:.25}
  27%{transform:none;opacity:.25}
  30%{transform:translate(3px,0);opacity:.5}
  35%{transform:none;opacity:.25}
}
.glitch-text{position:relative}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}
.glitch-text:hover::before{animation:glitch2 .3s cubic-bezier(.25,.46,.45,.94) both;color:var(--ui-fg-muted);z-index:-1}
.glitch-text:hover::after{animation:glitch1 .3s cubic-bezier(.25,.46,.45,.94) reverse both;color:var(--ui-fg-muted);z-index:-2}

/* Scanline */
.scanline{position:relative;overflow:hidden}
.scanline::after{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:var(--ui-line);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.scanline:hover::after{opacity:1;animation:scanDown 2s linear infinite}
@keyframes scanDown{0%{top:0}100%{top:100%}}

/* Skeleton */
.skeleton{background:var(--ui-surface-2);animation:skeletonShimmer 1.5s ease-in-out infinite;border:var(--ui-border) solid var(--ui-line)}
@keyframes skeletonShimmer{0%,100%{opacity:.4}50%{opacity:.8}}
.skeleton-text{height:1em;margin-bottom:8px}.skeleton-text:last-child{width:60%}
.skeleton-title{height:1.5em;width:40%;margin-bottom:16px}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) cubic-bezier(.16,1,.3,1),transform var(--dur-slow) cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Cursor Trail */
.cursor-dot{position:fixed;pointer-events:none;z-index:9999;width:4px;height:4px;background:var(--ui-fg);transition:width var(--dur-fast) var(--ease-out),height var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.cursor-ring{position:fixed;pointer-events:none;z-index:9998;width:32px;height:32px;border:1px solid var(--ui-fg-muted);transition:width var(--dur-base) var(--ease-out),height var(--dur-base) var(--ease-out);transform:translate(-50%,-50%)}
.cursor-dot.hovering{width:8px;height:8px}
.cursor-ring.hovering{width:48px;height:48px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none}
}

/* Admin theme (legacy support) */
.admin-theme{--ui-bg:#0a0a0f;--ui-surface:#0f0f19;--ui-surface-2:#151525;--ui-fg:#e0e0f0;--ui-fg-muted:#6a6a8a;--ui-accent:#6c5ce7;--ui-accent-hover:#7d6ff0;--ui-line:#1e1e35;--ui-line-strong:#2a2a45;--ui-line-hover:#6c5ce7}
.admin-theme .sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--ui-surface);border-right:var(--ui-border) solid var(--ui-line);display:flex;flex-direction:column;z-index:100}
.admin-theme .sidebar-brand{padding:var(--gap-lg);border-bottom:var(--ui-border) solid var(--ui-line);font-family:var(--font-mono);font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-accent)}
.admin-theme .sidebar-nav{flex:1;padding:var(--gap-md);overflow-y:auto}
.admin-theme .sidebar-nav-item{display:flex;align-items:center;gap:var(--gap-sm);width:100%;padding:10px 12px;background:transparent;border:var(--ui-border) solid transparent;color:var(--ui-fg-muted);font-family:var(--font-sans);font-size:.825rem;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);text-align:left;margin-bottom:2px;letter-spacing:.02em}
.admin-theme .sidebar-nav-item:hover{background:var(--ui-surface-2);border-color:var(--ui-line);color:var(--ui-fg)}
.admin-theme .sidebar-nav-item.active{background:var(--ui-surface-2);border-color:var(--ui-accent);color:var(--ui-accent)}
.admin-theme .sidebar-nav-item .nav-icon{font-family:var(--font-mono);font-size:.9rem;width:24px;text-align:center}
.admin-theme .sidebar-nav-section{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-fg-muted);padding:var(--gap-md) 12px var(--gap-xs);opacity:.5}
.admin-theme .sidebar-footer{padding:var(--gap-md);border-top:var(--ui-border) solid var(--ui-line);font-size:.7rem;color:var(--ui-fg-muted)}
.admin-theme .main-content{margin-left:var(--sidebar-width);min-height:100vh;padding:var(--gap-xl)}
.admin-theme .admin-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--gap-lg);border-bottom:var(--ui-border) solid var(--ui-line);margin-bottom:var(--gap-xl)}
.admin-theme .admin-title{font-family:var(--font-mono);font-size:1rem;font-weight:600;letter-spacing:.04em}
.admin-theme .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap-md);margin-bottom:var(--gap-xl)}
.admin-theme .stat-card{background:var(--ui-surface);border:var(--ui-border) solid var(--ui-line);padding:var(--gap-md)}
.admin-theme .stat-card .stat-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:700}
.admin-theme .stat-card .stat-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-fg-muted);margin-top:var(--gap-xs)}
.admin-theme .admin-table th{background:var(--ui-surface-2);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em}
.admin-theme .admin-table tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.admin-theme .admin-panel{background:var(--ui-surface);border:var(--ui-border) solid var(--ui-line);padding:var(--gap-lg);margin-bottom:var(--gap-lg)}
.admin-theme .admin-panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--gap-md);border-bottom:var(--ui-border) solid var(--ui-line);margin-bottom:var(--gap-md);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:768px){.admin-theme .sidebar{transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out)}.admin-theme .sidebar.open{transform:translateX(0)}.admin-theme .main-content{margin-left:0}}