/* ==========================================================================
   SMARTNIBAS - AUTOMATION ARCHITECTURE HERO ENGINE
   Single Switch Panel -> Animated Finger Tap -> Live Device State Icons
   ========================================================================== */

:root {
  --dna-color-green-neon: #1fd6ff;
  --dna-color-lime-bright: #8fefff;
  --dna-color-typography: #f3fff4;
  --dna-color-muted-text: rgba(205, 245, 255, 0.7);
  --dna-header-offset: 82px;
  --dna-off-grey: rgba(200, 235, 245, 0.35);

  --dna-smooth-bezier: cubic-bezier(0.25, 1, 0.5, 1);
  --dna-hardware-acceleration: translate3d(0, 0, 0);
}

.dna-hero {
  position: relative;
  isolation: isolate;
  height: calc(100vh - var(--dna-header-offset));
  min-height: 580px;
  max-height: 850px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3vh, 35px) clamp(16px, 3vw, 50px) clamp(15px, 2vh, 25px);
  color: var(--dna-color-typography);
  background: #010609;
  border-bottom: 1px solid rgba(31, 214, 255, 0.15);
  transform: var(--dna-hardware-acceleration);
}

.dna-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 50% 48%, rgba(31, 214, 255, 0.14), transparent 26%),
    radial-gradient(circle at 15% 20%, rgba(20, 180, 255, 0.08), transparent 32%),
    radial-gradient(circle at 85% 75%, rgba(70, 210, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #01090d 0%, #000408 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dna-hero::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(31, 214, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 214, 255, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000000, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000000, transparent 75%);
  opacity: 0.85;
}

.dna-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dna-ambient::before,
.dna-ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  opacity: 0.22;
  will-change: transform;
}

.dna-ambient::before {
  width: 380px;
  height: 380px;
  left: -100px;
  top: 15%;
  background: rgba(20, 210, 255, 0.2);
  animation: dnaAmbientFloat 12s var(--dna-smooth-bezier) infinite alternate;
}

.dna-ambient::after {
  width: 450px;
  height: 450px;
  right: -150px;
  bottom: 5%;
  background: rgba(60, 200, 255, 0.14);
  animation: dnaAmbientFloat 14s ease-in-out infinite alternate-reverse;
}

.dna-heading {
  position: relative;
  z-index: 8;
  width: min(1000px, 100%);
  margin: 0 auto;
  text-align: center;
}

.dna-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 14px;
  border: 1px solid rgba(110, 225, 255, 0.25);
  border-radius: 100px;
  background: rgba(31, 214, 255, 0.06);
  color: rgba(190, 240, 255, 0.85);
  font-size: clamp(0.58rem, 0.8vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dna-heading h1 {
  margin: 12px 0 8px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dna-heading h1 span {
  display: block;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.18em;
}

.dna-heading h1 strong {
  display: inline-block;
  margin-top: 6px;
  color: var(--dna-color-green-neon);
  font-size: clamp(1.95rem, 3.6vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.025em;
  text-shadow: 0 0 15px rgba(31, 214, 255, 0.35);
  animation: dnaPulseEngine 2s var(--dna-smooth-bezier) infinite;
}

.dna-heading p {
  max-width: 750px;
  margin: 0 auto;
  color: var(--dna-color-muted-text);
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  line-height: 1.5;
}

/* ==========================================================================
   VISUAL STAGE — switch panel (left) | data bus (center) | device icons (right)
   ========================================================================== */

.dna-visual {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 3vw, 40px);
  width: min(1280px, 100%);
  height: 100%;
  margin: 0 auto;
}

.dna-network-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dna-grid-lines path {
  fill: none;
  stroke: rgba(31, 214, 255, 0.04);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dna-core-rings circle {
  fill: none;
  stroke: rgba(31, 214, 255, 0.18);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: dnaRingPulseModule 3.5s ease-in-out infinite;
}

.dna-core-rings circle:nth-child(2) { animation-delay: -1.1s; }
.dna-core-rings circle:nth-child(3) { animation-delay: -2.2s; }

.dna-knx-tag rect:first-child {
  fill: #030d14;
  stroke: rgba(110, 225, 255, 0.5);
  stroke-width: 2.5;
}

.dna-knx-tag-inner {
  fill: url(#dnaCableGradient);
  opacity: 0.98;
}

.dna-knx-tag .dna-knx-letters {
  fill: #eafcff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
}

.dna-knx-tag .dna-knx-letters tspan {
  dominant-baseline: middle;
}

/* one-shot heartbeat ring — pulses when a command reaches the KNX box */
.dna-knx-heartbeat {
  fill: none;
  stroke: var(--dna-color-lime-bright);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.dna-knx-heartbeat.is-pulsing {
  animation: dnaKnxHeartbeat 0.6s ease-out 1;
}

/* ==========================================================================
   CIRCUIT WIRING — switch -> KNX -> 5 devices, drawn + animated by JS
   ========================================================================== */

.dna-wire-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.dna-wire-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dna-wire-base {
  fill: none;
  stroke: rgba(60, 210, 255, 0.24);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dna-wire-glow {
  fill: none;
  stroke: rgba(190, 245, 255, 0.65);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: url(#dnaWireGlow);
}

.dna-pulse-arrow {
  opacity: 0;
}

/* Soft glowing "bubble" that breathes as the water-drop pulses through the pipe */
.dna-pulse-bubble {
  fill: rgba(143, 239, 255, 0.35);
  filter: url(#dnaWireGlow);
  transform-box: fill-box;
  transform-origin: center;
  animation: dnaBubbleBreathe 0.55s ease-in-out infinite;
}

/* The droplet itself — glossy radial-gradient fill (set inline via #dnaDropGradient) */
.dna-pulse-drop {
  filter: url(#dnaWireGlow);
}

@keyframes dnaBubbleBreathe {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 0.25; }
}

.dna-panel-caption {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.6rem, 1vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dna-color-lime-bright);
  text-shadow: 0 0 12px rgba(31, 214, 255, 0.45);
  white-space: nowrap;
}

/* ==========================================================================
   LEFT — single wall switch plate with 5 touch buttons
   ========================================================================== */

.dna-switch-panel {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  margin-left: clamp(2%, 4vw, 6%);
}

.dna-switch-plate {
  display: flex;
  flex-direction: column;
  width: clamp(78px, 7vw, 108px);
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(31, 214, 255, 0.55);
  background: linear-gradient(160deg, rgba(8, 20, 28, 0.98), rgba(1, 6, 10, 0.97));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 20px 45px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(31, 214, 255, 0.15);
}

.dna-switch-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(10px, 1.4vh, 16px) 4px;
  border: none;
  border-bottom: 1px solid rgba(60, 210, 255, 0.14);
  background: transparent;
  color: rgba(210, 245, 255, 0.8);
  cursor: default;
  transition: background 0.35s var(--dna-smooth-bezier), color 0.35s ease;
}

.dna-switch-btn:last-child { border-bottom: none; }

.dna-switch-icon {
  display: grid;
  place-items: center;
  width: clamp(20px, 2vw, 26px);
  height: clamp(20px, 2vw, 26px);
  color: rgba(170, 235, 250, 0.75);
  transition: color 0.3s ease, filter 0.3s ease;
}

.dna-switch-icon svg { width: 100%; height: 100%; }

.dna-switch-text {
  font-size: clamp(0.4rem, 0.55vw, 0.5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(190, 235, 245, 0.55);
}

/* pressed / active pulse when the finger taps this button */
.dna-switch-btn.is-pressed {
  background: rgba(31, 214, 255, 0.16);
}

.dna-switch-btn.is-pressed .dna-switch-icon {
  color: var(--dna-color-lime-bright);
  filter: drop-shadow(0 0 8px rgba(143, 239, 255, 0.85));
}

.dna-switch-btn.is-pressed .dna-switch-text { color: var(--dna-color-lime-bright); }

.dna-switch-btn.is-active .dna-switch-icon { color: var(--dna-color-green-neon); }
.dna-switch-btn.is-active .dna-switch-text { color: rgba(200, 255, 200, 0.85); }

.dna-switch-ripple {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1.5px solid rgba(143, 239, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

.dna-switch-btn.is-pressed .dna-switch-ripple {
  animation: dnaRippleOut 0.55s ease-out;
}

/* ==========================================================================
   RIGHT — five live device-state indicators
   ========================================================================== */

.dna-output-icons {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 20px);
  margin-right: clamp(2%, 4vw, 6%);
}

.dna-output-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}

.dna-output-badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(46px, 4.6vw, 64px);
  height: clamp(46px, 4.6vw, 64px);
  border-radius: 50%;
  border: 1.5px solid rgba(31, 214, 255, 0.35);
  background: radial-gradient(circle at 35% 30%, rgba(14, 32, 42, 0.9), rgba(2, 8, 6, 0.95));
  color: var(--dna-off-grey);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.dna-output-badge svg { width: 58%; height: 58%; overflow: visible; }

.dna-output-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dna-output-info b {
  font-size: clamp(0.6rem, 0.85vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 250, 255, 0.9);
}

.dna-output-state {
  margin-top: 4px;
  font-size: clamp(0.55rem, 0.78vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dna-off-grey);
  transition: color 0.4s ease;
}

/* --- device "on" states --- */

.dna-output-item.is-on .dna-output-badge {
  color: var(--dna-color-lime-bright);
  border-color: rgba(143, 239, 255, 0.8);
  box-shadow: 0 0 28px rgba(31, 214, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.45);
}

.dna-output-item.is-on .dna-output-state { color: var(--dna-color-lime-bright); }

/* bulb glow rays */
.dna-bulb-rays { opacity: 0; transition: opacity 0.4s ease; }
.is-on .dna-bulb-rays { opacity: 1; }
.dna-bulb-fill { transition: fill 0.4s ease, opacity 0.4s ease; }

/* fan blades spin while on */
.dna-fan-blades { transform-box: fill-box; transform-origin: center; }
.is-on .dna-fan-blades { animation: dnaFanSpin 1.1s linear infinite; }

/* blind slats gradually lower into view (top to bottom), like a real blind
   unrolling — and roll back up again when reopened */
.dna-blind-slats {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-on .dna-blind-slats {
  clip-path: inset(0 0 0% 0);
}

/* AC snow glow + fan lines */
.dna-ac-glow { opacity: 0; transition: opacity 0.4s ease; }
.is-on .dna-ac-glow { opacity: 1; }
.dna-ac-temp {
  opacity: 0;
  font-size: 9px;
  font-weight: 800;
  fill: var(--dna-color-lime-bright);
  transform-box: fill-box;
  transition: opacity 0.4s ease;
}
.is-on .dna-ac-temp { opacity: 1; }

/* lock shackle swings open */
.dna-lock-shackle {
  transform-box: fill-box;
  transform-origin: 20% 100%;
  transition: transform 0.5s var(--dna-smooth-bezier);
}
.is-on .dna-lock-shackle { transform: translate(-3px, -3px) rotate(-22deg); }

/* ==========================================================================
   ANIMATED FINGER — taps each switch button in sequence
   ========================================================================== */

.dna-finger {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: clamp(34px, 3.6vw, 48px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-38%, -30%) scale(0.9);
  transition: left 0.5s var(--dna-smooth-bezier), top 0.5s var(--dna-smooth-bezier),
              opacity 0.35s ease, transform 0.25s ease;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

.dna-finger svg { display: block; width: 100%; height: auto; }

.dna-finger.is-visible { opacity: 1; }
.dna-finger.is-tapping { transform: translate(-38%, -20%) scale(0.82); }

.dna-bottom-status {
  position: relative;
  z-index: 8;
  align-self: end;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: rgba(200, 240, 250, 0.7);
  font-size: clamp(0.56rem, 0.75vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dna-bottom-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dna-bottom-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dna-color-green-neon);
  box-shadow: 0 0 12px rgba(31, 214, 255, 0.9);
  animation: dnaStatusIndicator 1.5s var(--dna-smooth-bezier) infinite;
}

.dna-bottom-status span:nth-child(2) i { animation-delay: -0.45s; }
.dna-bottom-status span:nth-child(3) i { animation-delay: -0.9s; }

.dna-hero.dna-paused *,
.dna-hero.dna-paused *::before,
.dna-hero.dna-paused *::after {
  animation-play-state: paused !important;
}

/* Operational Keyframe Sets */
@keyframes dnaPulseEngine {
  0%, 100% { transform: scale(1); text-shadow: 0 0 12px rgba(31, 214, 255, 0.4); }
  50% { transform: scale(1.02); text-shadow: 0 0 22px rgba(31, 214, 255, 0.7), 0 0 40px rgba(31, 214, 255, 0.2); }
}

@keyframes dnaRingPulseModule {
  0%, 100% { opacity: 0.2; transform: scale(0.94); }
  50% { opacity: 0.75; transform: scale(1.05); }
}

@keyframes dnaTextFlowArrows {
  0%, 100% { opacity: 0.45; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

@keyframes dnaStatusIndicator {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes dnaAmbientFloat {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to { transform: translate3d(50px, -25px, 0) scale(1.05); }
}

@keyframes dnaRippleOut {
  from { opacity: 0.9; transform: scale(0.85); }
  to { opacity: 0; transform: scale(1.25); }
}

@keyframes dnaFanSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dnaKnxHeartbeat {
  0% { opacity: 0.9; transform: scale(0.85); stroke-width: 5; }
  70% { opacity: 0.35; }
  100% { opacity: 0; transform: scale(1.55); stroke-width: 1; }
}

/* Responsive Structural Breakpoints */
@media (max-width: 900px) {
  :root { --dna-header-offset: 74px; }
  .dna-hero { height: calc(100vh - var(--dna-header-offset)); min-height: 540px; padding: 18px 10px 12px; }
  .dna-heading h1 { margin: 8px 0 6px; }
  .dna-heading p { max-width: 600px; padding: 0 10px; font-size: clamp(0.68rem, 2.2vw, 0.82rem); }
  .dna-switch-panel { margin-left: 3%; }
  .dna-output-icons { margin-right: 3%; }
}

@media (max-width: 560px) {
  .dna-hero { height: calc(100vh - var(--dna-header-offset)); min-height: 520px; padding: 16px 8px 10px; }
  .dna-kicker { padding: 4px 10px; font-size: 0.45rem; }
  .dna-heading h1 span { font-size: 0.85rem; }
  .dna-heading h1 strong { font-size: clamp(1.45rem, 8.5vw, 2.2rem); }
  .dna-heading p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.62rem; line-height: 1.35; }

  .dna-visual { gap: 4px; }
  .dna-switch-panel { margin-left: 2%; }
  .dna-output-icons { margin-right: 2%; }

  .dna-switch-plate { width: 50px; }
  .dna-switch-btn { padding: 7px 2px; gap: 3px; }
  .dna-switch-icon { width: 16px; height: 16px; }
  .dna-switch-text { font-size: 0.3rem; }

  .dna-output-item { gap: 6px; }
  .dna-output-badge { width: 34px; height: 34px; }
  .dna-output-info { max-width: 74px; }
  .dna-output-info b { font-size: 0.46rem; white-space: normal; line-height: 1.2; }
  .dna-output-state { font-size: 0.4rem; }

  .dna-panel-caption { font-size: 0.48rem; letter-spacing: 0.07em; margin-top: 6px; }
  .dna-bottom-status { gap: 4px 12px; font-size: 0.42rem; }
}

@media (max-width: 380px) {
  .dna-switch-plate { width: 42px; }
  .dna-switch-icon { width: 14px; height: 14px; }
  .dna-output-badge { width: 28px; height: 28px; }
  .dna-output-info { max-width: 60px; }
  .dna-output-info b { font-size: 0.42rem; }
  .dna-output-state { font-size: 0.36rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .dna-finger { display: none; }
}