/* =========================================================================
   承影智慧 Durendal Systems — Section Texture Layer
   ------------------------------------------------------------------------
   Monochrome indigo vector textures behind selected sections.
   Drawn by assets/js/backgrounds.js into a .section-bg layer.
   Design intent: 低調、克制、可查證的技術性紋理 —— 像戰術地圖墊在文字底下，
   需要時才看得見，呼應「承影 —— 一把用陰影存在的劍」。
   ========================================================================= */

/* Sections that carry a texture get a positioning context + a clipped layer. */
.has-tex {
  position: relative;
  overflow: hidden;          /* keep texture from bleeding past the band */
}

/* The drawn layer sits behind content; content opts back above it. */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fade the texture out toward the top & bottom hairlines so bands read as
     deliberate, not like a flat tiled wallpaper. */
  -webkit-mask-image: linear-gradient(180deg,
              transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg,
              transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.section-bg svg { display: block; width: 100%; height: 100%; }

/* Lift real content above the texture. The site wraps content in .container. */
.has-tex > .container { position: relative; z-index: 1; }
/* Hero already positions its own children; make sure they clear the layer. */
.hero.has-tex > .container { z-index: 1; }

/* ── Hero motion — the single, deliberate moving element on the site ─────────
   A radar sweep slowly rotates; non-radar motifs drift almost imperceptibly.
   Everything stops for users who prefer reduced motion (and for print/PDF). */
@media (prefers-reduced-motion: no-preference) {
  .hero .tex-sweep   { transform-box: fill-box; transform-origin: center;
                       animation: tex-sweep 16s linear infinite; }
  .hero .tex-drift   { animation: tex-drift 22s ease-in-out infinite alternate; }
  .hero .tex-pulse   { animation: tex-pulse 7s ease-in-out infinite; }
}
@keyframes tex-sweep { to   { transform: rotate(360deg); } }
@keyframes tex-drift { from { transform: translateY(-1.2%); }
                       to   { transform: translateY(1.2%); } }
@keyframes tex-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── Comparison switcher panel (DEV ONLY — removed before going live) ───────── */
.tex-switch {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  width: 268px;
  background: rgba(21, 24, 43, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 18px 18px 16px;
  font-family: var(--mono);
  color: var(--ink);
  transition: transform .35s var(--easing), opacity .35s var(--easing);
}
.tex-switch__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.tex-switch__title {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
}
.tex-switch__hint {
  font-size: 10.5px; line-height: 1.6; letter-spacing: 0.04em;
  color: var(--ink-45); margin: 8px 0 16px;
  font-family: var(--sans);
}
.tex-switch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tex-opt {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-75);
  text-align: left;
  transition: border-color .2s var(--easing), color .2s var(--easing), background-color .2s var(--easing);
}
.tex-opt:hover { border-color: var(--accent-soft); color: var(--ink); }
.tex-opt.is-active { border-color: var(--accent); color: var(--ink); background: rgba(124, 132, 204, 0.10); }
.tex-opt__chip { width: 100%; height: 34px; display: block; background: #15182B; border: 1px solid var(--line-soft); }
.tex-opt__chip svg { display: block; width: 100%; height: 100%; }
.tex-opt__zh { font-family: var(--serif); font-size: 13px; letter-spacing: 0.08em; line-height: 1; }
.tex-opt__en { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }
.tex-opt.is-active .tex-opt__en { color: var(--accent); }

.tex-switch__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.tex-switch__row label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); }
.tex-seg { display: inline-flex; border: 1px solid var(--line); }
.tex-seg button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  padding: 6px 9px; color: var(--ink-60); background: transparent;
  transition: color .15s var(--easing), background-color .15s var(--easing);
}
.tex-seg button + button { border-left: 1px solid var(--line); }
.tex-seg button.is-active { color: var(--ink); background: rgba(124, 132, 204, 0.14); }

.tex-switch__collapse {
  font-family: var(--mono); font-size: 14px; line-height: 1;
  color: var(--ink-45); padding: 2px 4px;
}
.tex-switch__collapse:hover { color: var(--ink); }
.tex-switch.is-collapsed { transform: translateY(calc(100% - 52px)); }

@media (max-width: 640px) {
  .tex-switch { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-width: 320px; }
}