/* =====================================================================
   DIGITAL FLOW — BRAND SYSTEM 2026: UNIFIED FLOW & AMBIENT CONTINUITY
   Architecture: ONE VISUAL WORLD WITH MULTIPLE CHAPTERS
   - Continuous scroll integration from opening baseline into full homepage
   - Variable ambient intensity by chapter (Immersive -> Partial -> Quiet -> Structured -> Re-entry -> Quiet)
   - Route conduit lines and visual carry-through bridging all chapters
   - Pointer-reactive atmosphere with lightweight CSS variable updates
   ===================================================================== */

:root {
  --mouse-x: 0.5;
  --mouse-y: 0.5;
  --mouse-px: 50vw;
  --mouse-py: 50vh;
}

/* 1. Global Reset & Typography Baseline */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--df-surface-base, #050605);
  color: var(--df-text-primary, #F2EEE6);
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--df-surface-base, #050605);
  color: var(--df-text-primary, #F2EEE6);
  font-family: var(--df-font-sans, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Skip to Content */
.skip {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--df-signal-green, #B6FF2E);
  color: #1C1D1B;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip:focus {
  top: 16px;
}

/* 3. Progress Bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1100;
  background: rgba(242, 238, 230, 0.05);
  pointer-events: none;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--df-signal-green, #B6FF2E);
  box-shadow: 0 0 8px rgba(182, 255, 46, 0.6);
  will-change: transform;
}

/* 4. Unified Brand Header (Nav) */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(23, 24, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--df-border-subtle, rgba(242, 238, 230, 0.08));
  z-index: 1000;
  box-sizing: border-box;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--df-text-primary, #F2EEE6);
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand__mark {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.nav__center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__status {
  font-family: var(--df-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--df-text-faint, rgba(242, 238, 230, 0.45));
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .nav__center {
    display: none;
  }
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language selector */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(242, 238, 230, 0.04);
  border: 1px solid var(--df-border-subtle, rgba(242, 238, 230, 0.08));
  border-radius: 9999px;
  padding: 3px 6px;
}

.lang__opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-family: var(--df-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  color: var(--df-text-muted, rgba(242, 238, 230, 0.70));
  transition: all 140ms ease;
}

.lang__opt:hover:not(.lang__opt--active) {
  color: var(--df-text-primary, #F2EEE6);
  background: rgba(242, 238, 230, 0.08);
}

.lang__opt--active {
  background: rgba(182, 255, 46, 0.15);
  color: var(--df-signal-green, #B6FF2E);
}

.lang__flag {
  width: 14px;
  height: 10px;
  border-radius: 1px;
  object-fit: cover;
}

.nav__cta {
  font-family: var(--df-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1C1D1B;
  background: var(--df-signal-green, #B6FF2E);
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
}

.nav__cta:hover {
  background: #cbfb60;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(182, 255, 46, 0.25);
}

@media (max-width: 640px) {
  .nav__cta {
    display: none;
  }
}

/* =====================================================================
   5. VISUAL CARRY-THROUGH CONDUITS & CHAPTER TRANSITION SEAMS
   Connecting individual chapters into one continuous architectural narrative
   ===================================================================== */

/* Conduit bridge between sections */
.ambient-conduit-bridge {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  margin-top: -32px;
  margin-bottom: -32px;
}

.conduit-line-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, 
    rgba(182, 255, 46, 0.4) 0%, 
    rgba(242, 238, 230, 0.15) 50%, 
    rgba(182, 255, 46, 0.4) 100%
  );
}

.conduit-node-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-signal-green, #B6FF2E);
  box-shadow: 0 0 10px rgba(182, 255, 46, 0.8);
}

/* Chapter Transition Seams */
.flow-seam {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.flow-seam::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--df-border-frame, rgba(242, 238, 230, 0.12)) 20%, 
    var(--df-border-active, rgba(242, 238, 230, 0.28)) 50%, 
    var(--df-border-frame, rgba(242, 238, 230, 0.12)) 80%, 
    transparent 100%
  );
  pointer-events: none;
}

/* =====================================================================
   6. CHAPTER AMBIENT INTENSITY MODULATION
   Chapter A: Immersive (Opening baseline #continuous-scene)
   Chapter B: Partial Field (.bts #business-types)
   Chapter C: Quiet / Human Trust (.people #people)
   Chapter D/B: Structured Spatial Break (.paths #how-it-works)
   Chapter E: Re-entry / Interactive (.agent #agent-showcase)
   Chapter C: Quiet / Focused Closing (.close #contact-close)
   ===================================================================== */

/* Chapter B: Partial Field — Business Sectors */
.bts.ambient-chapter-partial {
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.bts.ambient-chapter-partial::before {
  display: none;
}

.bts__intro,
.selector,
.story {
  position: relative;
  z-index: 1;
}

/* Grounding bridge from orbit into bts */
.bts-opening-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.bts-opening-conduit {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--df-signal-green, #B6FF2E) 0%, rgba(242, 238, 230, 0.12) 100%);
  margin-bottom: 8px;
}

.bts-opening-badge {
  font-family: var(--df-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--df-text-faint, rgba(242, 238, 230, 0.45));
  padding: 4px 12px;
  background: rgba(16, 17, 15, 0.8);
  border: 1px solid var(--df-border-subtle, rgba(242, 238, 230, 0.08));
  border-radius: 9999px;
}

/* Chapter C: Quiet / Human Trust — Meet Digital Flow (#people) */
.people.ambient-chapter-quiet {
  background-color: transparent;
  border-top: none;
  border-bottom: none;
  position: relative;
}

.people.ambient-chapter-quiet::before {
  display: none;
}

.people__inner {
  position: relative;
  z-index: 1;
}

/* Chapter D/B: Structured Spatial Break — Two Ways to Start (#how-it-works) */
.paths.ambient-chapter-structured {
  background-color: transparent;
  position: relative;
}

.paths.ambient-chapter-structured::before {
  display: none;
}

/* Visual Conduit Bifurcation in Paths */
.paths-bifurcation-conduit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.paths-conduit-stem {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(242, 238, 230, 0.12) 0%, rgba(242, 238, 230, 0.28) 100%);
}

.paths-conduit-branch {
  width: min(440px, 80%);
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(242, 238, 230, 0.15) 0%, 
    rgba(242, 238, 230, 0.3) 50%, 
    rgba(242, 238, 230, 0.15) 100%
  );
  position: relative;
}

.paths-conduit-branch::before,
.paths-conduit-branch::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 16px;
  background: rgba(242, 238, 230, 0.25);
}

.paths-conduit-branch::before { left: 0; }
.paths-conduit-branch::after { right: 0; }

/* Chapter E: Re-entry / Interactive Innovation — Digital Guide Showcase (#agent-showcase) */
.agent.ambient-chapter-reentry {
  background: var(--df-surface-elevated, #282926);
  border: 1px solid var(--df-border-active, rgba(242, 238, 230, 0.28));
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.agent.ambient-chapter-reentry::before {
  display: none;
}

/* Chapter C: Quiet / Focused Closing — Contact Close (#contact-close) */
.close.ambient-chapter-quiet {
  background-color: transparent;
  border-top: none;
  position: relative;
}

.close.ambient-chapter-quiet::before {
  display: none;
}

/* Footer Grounding Floor */
.foot {
  background-color: #050605;
  border-top: 1px solid var(--df-border-subtle, rgba(242, 238, 230, 0.06));
}

/* =====================================================================
   7. SECTOR CARDS & TRUST REFINEMENTS
   ===================================================================== */
.card {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 220ms ease, 
              box-shadow 220ms ease !important;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(242, 238, 230, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.principles li {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 220ms ease, 
              background-color 220ms ease !important;
}

.principles li:hover {
  border-color: rgba(242, 238, 230, 0.25) !important;
  background-color: rgba(242, 238, 230, 0.03) !important;
}

.path {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 220ms ease, 
              box-shadow 220ms ease !important;
}

.path:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 238, 230, 0.28) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

/* Digital Guide Host Boundary */
#digital-flow-guide-root { min-height: 0 !important; height: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }