/* ╔══════════════════════════════════════════╗
   ║   Tensai Banner – WordPress Plugin CSS   ║
   ╚══════════════════════════════════════════╝ */

/* ── Layout ─────────────────────────────── */
.tsb2-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 19 / 7;
  background: linear-gradient(135deg, #d2d7dc 0%, #f0f2f5 100%);
  overflow: hidden;
  font-family: 'Inter', Inter, sans-serif;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  transition: background 1.5s ease;
}
.tsb2-canvas {
  position: relative;
  display: flex;
  align-items: stretch;
  transform-origin: top left;
}
.tsb2-wrap.tsb2-bg-verified {
  background: linear-gradient(135deg, #c6dfc9 0%, #e6f4e8 100%);
}

/* ── Background ─────────────────────────── */
.tsb2-bg { position: absolute; inset: 0; pointer-events: none; }
.tsb2-bg-svg { width: 100%; height: 100%; }

.tsb2-spotlight { animation: tsbSpotIn 1.2s ease forwards; opacity: 0; }
@keyframes tsbSpotIn { to { opacity: 1; } }

.tsb2-vglow { opacity: 0; animation: tsbGlowPulse 2s ease-in-out infinite; animation-delay: 3.4s; }
@keyframes tsbGlowPulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

/* Particles */
.tsb2-p { opacity: 0; }
.tsb2-p1 { animation: tsbFloat1 2.2s ease-in-out infinite, tsbFadeIn 0.6s 0.1s forwards; }
.tsb2-p2 { animation: tsbFloat2 3.0s ease-in-out infinite, tsbFadeIn 0.6s 0.5s forwards; }
.tsb2-p3 { animation: tsbFloat1 1.8s ease-in-out infinite, tsbFadeIn 0.6s 0.9s forwards; }
.tsb2-p4 { animation: tsbFloat3 2.6s ease-in-out infinite, tsbFadeIn 0.6s 0.2s forwards; }
.tsb2-p5 { animation: tsbFloat2 2.4s ease-in-out infinite, tsbFadeIn 0.6s 0.7s forwards; }
.tsb2-p6 { animation: tsbFloat1 2.8s ease-in-out infinite, tsbFadeIn 0.6s 0.4s forwards; }
.tsb2-p7 { animation: tsbFloat3 2.0s ease-in-out infinite, tsbFadeIn 0.6s 0.8s forwards; }
.tsb2-p8 { animation: tsbFloat2 1.8s ease-in-out infinite, tsbFadeIn 0.6s 0.3s forwards; }

@keyframes tsbFloat1 { 0%,100% { transform: translateY(0)    translateX(0); }  50% { transform: translateY(-14px) translateX(6px); } }
@keyframes tsbFloat2 { 0%,100% { transform: translateY(0)    translateX(0); }  50% { transform: translateY(12px)  translateX(-5px); } }
@keyframes tsbFloat3 { 0%,100% { transform: translateY(-8px) translateX(4px); } 50% { transform: translateY(8px)   translateX(-4px); } }
@keyframes tsbFadeIn { to { opacity: 1; } }

/* ── Divider ─────────────────────────────── */
.tsb2-divider {
  position: absolute;
  left: 44.5%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(94,108,123,0.18) 30%, rgba(94,108,123,0.18) 70%, transparent);
  pointer-events: none;
}

/* ── Left panel (text – visually on RIGHT) ── */
.tsb2-left {
  width: 44%;
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 5% 4% 80px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.tsb2-pill {
  display: inline-block;
  align-self: flex-start;
  background: #ffffff;
  color: #5e6c7b;
  border: 1.5px solid #5e6c7b;
  border-radius: 20px;
  padding: 3px 16px;
  font-size: clamp(10px,0.75vw,14px);
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 2.5%;
}

.tsb2-title {
  margin: 0 0 1.5% 0;
  font-size: clamp(18px,2.05vw,48px);
  font-weight: 800;
  color: #1a2332;
  line-height: 1.14;
  letter-spacing: -0.5px;
}

.tsb2-accent-bar {
  width: 52px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(to right, #5b47e0, #a78bfa);
  margin-bottom: 2%;
}

.tsb2-subtitle {
  margin: 0 0 1.5% 0;
  font-size: clamp(12px,0.95vw,20.5px);
  font-weight: 700;
  color: #1a2332;
  line-height: 1.35;
}

.tsb2-desc {
  margin: 0 0 3% 0;
  font-size: clamp(11px,0.78vw,15px);
  font-weight: 400;
  color: #536070;
  line-height: 1.65;
}

.tsb2-badges {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: ltr;
  gap: 10px;
}

.tsb2-badge {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  direction: ltr;
  background: #ffffff;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 7px 13px 7px 12px;
  font-size: clamp(10px,0.73vw,14.5px);
  font-weight: 600;
  color: #1a2332;
  box-shadow: 0 3px 16px rgba(59,130,246,0.12),0 1px 4px rgba(0,0,0,0.06);
  white-space: nowrap;
}

.tsb2-tick {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-weight: 700;
}

/* ── Learn More button ───────────────────── */
.tsb2-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 32px;
  background: #1a2332;
  color: #ffffff;
  font-size: clamp(9px,0.78vw,15.5px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(26,46,66,.28);
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  align-self: flex-start;
}
.tsb2-btn:hover,
.tsb2-btn:focus {
  background: rgba(200,218,230,0.55);
  color: #1a2e3b;
  box-shadow: 0 4px 22px rgba(59,130,246,0.18), inset 0 1px 0 rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  outline: none;
}
.tsb2-delay-btn { animation-delay: 3.7s; }

/* ── Right panel (devices – visually on LEFT) */
.tsb2-right {
  width: 56%;
  order: 1;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.tsb2-halo {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(59,130,246,0.09) 0%, transparent 70%);
  pointer-events: none;
  transition: background 1s ease;
}
.tsb2-halo.tsb2-verified {
  background: radial-gradient(ellipse, rgba(34,197,94,0.12) 0%, transparent 70%);
}

/* ─ Monitor ─ */
.tsb2-monitor {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 42%;
}

/* ─ Phone ─ */
.tsb2-phone {
  position: absolute;
  left: 16%;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  width: 13%;
}

/* ─ BLE ─ */
.tsb2-ble {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translateY(13%);
  width: 27%;
}

/* ─ BT waves ─ */
.tsb2-waves { opacity: 0; }
.tsb2-wave1 { animation: tsbWavePulse 1.8s ease-in-out infinite; }
.tsb2-wave2 { animation: tsbWavePulse 1.8s ease-in-out infinite 0.3s; }
.tsb2-wave3 { animation: tsbWavePulse 1.8s ease-in-out infinite 0.6s; }
@keyframes tsbWavePulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }

/* ─ Tagline ─ */
.tsb2-tagline {
  position: absolute;
  bottom: 11%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(10px,0.95vw,18px);
  font-weight: 600;
  color: #4a5568;
  letter-spacing: 0.3px;
  margin: 0;
  opacity: 0;
}

/* ═══ ENTRANCE ANIMATIONS ═══════════════════ */

/* generic fade+slide from left */
.tsb2-anim {
  opacity: 0;
  transform: translateX(-40px);
  animation: tsbSlideIn 0.55s cubic-bezier(.22,.68,0,1.2) both;
}
.tsb2-delay-0  { animation-delay: 0.05s; }
.tsb2-delay-1  { animation-delay: 0.18s; }
.tsb2-delay-2  { animation-delay: 0.32s; }
.tsb2-delay-3  { animation-delay: 0.46s; }
.tsb2-delay-4  { animation-delay: 0.58s; }
.tsb2-delay-5  { animation-delay: 0.70s; }
.tsb2-delay-6  { animation-delay: 0.84s; }
.tsb2-delay-7  { animation-delay: 0.98s; }
.tsb2-delay-9  { animation-delay: 0.75s; }
.tsb2-delay-tagline { animation-delay: 1.15s; }
.tsb2-delay-btn     { animation-delay: 1.12s; }

@keyframes tsbSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* accent bar (no slide) */
.tsb2-accent-bar.tsb2-anim { transform: scaleX(0); transform-origin: left; }
@keyframes tsbSlideIn { to { opacity:1; transform: none; } }

/* Monitor: drop from top */
.tsb2-anim-drop {
  opacity: 0;
  transform: translateY(-120px) translateY(-50%) scale(0.85);
  animation: tsbDrop 0.7s cubic-bezier(.22,.68,0,1.15) 0.05s forwards;
}
@keyframes tsbDrop {
  to { opacity:1; transform: translateY(-50%) scale(1); }
}

/* Phone: slide from bottom-left + rotate */
.tsb2-anim-slide-left {
  opacity: 0;
  transform: translateX(-280px) translateY(calc(-50% + 120px)) rotate(-22deg);
  animation: tsbPhoneIn 0.75s cubic-bezier(.22,.68,0,1.1) forwards;
}
.tsb2-delay-phone { animation-delay: 0.75s; }
@keyframes tsbPhoneIn {
  to { opacity:1; transform: translateY(-50%) rotate(-5deg); }
}

/* BLE: slide from right */
.tsb2-anim-slide-right {
  opacity: 0;
  transform: translateX(320px) translateY(13%);
  animation: tsbBleIn 0.7s cubic-bezier(.22,.68,0,1.1) forwards;
}
.tsb2-delay-ble { animation-delay: 1.3s; }
@keyframes tsbBleIn {
  to { opacity:1; transform: translateY(13%); }
}

/* ═══ SCAN ANIMATION ════════════════════════ */
.tsb2-scanline {
  animation: tsbScan 1.5s linear infinite;
  /* starts at y=22, travels to y=248 */
}
@keyframes tsbScan {
  0%   { transform: translateY(0px);   opacity:1; }
  48%  { transform: translateY(224px); opacity:1; }
  50%  { transform: translateY(224px); opacity:0; }
  52%  { transform: translateY(0px);   opacity:0; }
  54%  { opacity:1; }
  100% { transform: translateY(0px);   opacity:1; }
}

.tsb2-pscan {
  animation: tsbPScan 1.4s linear infinite;
}
@keyframes tsbPScan {
  0%   { transform: translateY(0);    opacity:1; }
  45%  { transform: translateY(90px); opacity:1; }
  50%  { transform: translateY(90px); opacity:0; }
  55%  { transform: translateY(0);    opacity:0; }
  60%  { opacity:1; }
  100% { transform: translateY(0);    opacity:1; }
}

/* ═══ LED blink ═════════════════════════════ */
.tsb2-bled  { animation: tsbLedPulse 0.7s ease-in-out infinite alternate; }
.tsb2-bleda { animation: tsbLedPulse 0.9s ease-in-out infinite alternate 0.2s; }
@keyframes tsbLedPulse { from { opacity:0.5; } to { opacity:1; } }

/* ═══ VERIFIED STATE ════════════════════════ */
/* Classes toggled by JS after 3.35s */

/* Monitor glow border */
.tsb2-mglow.tsb2-active {
  stroke: rgba(34,197,94,0.7) !important;
  animation: tsbBorderGlow 2s ease-in-out infinite;
}
@keyframes tsbBorderGlow { 0%,100% { stroke-opacity:0.4; } 50% { stroke-opacity:0.9; } }

/* Monitor VERIFIED badge pops in */
.tsb2-mverified.tsb2-active {
  animation: tsbVerPop 0.5s cubic-bezier(.22,.68,0,1.4) 0s forwards;
}
@keyframes tsbVerPop {
  from { opacity:0; transform: translate(216px,150px) scale(0); }
  to   { opacity:1; transform: translate(216px,150px) scale(1); }
}

/* Phone glow */
.tsb2-pglow.tsb2-active {
  stroke: rgba(34,197,94,0.8) !important;
  animation: tsbBorderGlow 2s ease-in-out infinite;
}

/* Phone VERIFIED group */
.tsb2-pverified.tsb2-active {
  animation: tsbPVerFade 0.4s ease 0s forwards;
}
@keyframes tsbPVerFade { to { opacity:1; } }

.tsb2-pverified-scale.tsb2-active {
  animation: tsbPVerScale 0.5s cubic-bezier(.22,.68,0,1.4) 0s forwards;
}
@keyframes tsbPVerScale {
  from { transform: translate(66px,112px) scale(0); }
  to   { transform: translate(0,0)        scale(1); }
}

/* Monitor LED turns green */
.tsb2-led.tsb2-active { fill: #4ade80; }

/* Scan lines stop */
.tsb2-scanline.tsb2-stop,
.tsb2-pscan.tsb2-stop {
  animation: none;
  opacity: 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE – Tablet  (601px – 1024px)
   Stack: devices on top, text full-width below
══════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 601px) {
  .tsb2-wrap {
    aspect-ratio: unset;
    flex-direction: column;
    min-height: unset;
  }  .tsb2-canvas { flex-direction: column; width: 100% !important; height: auto !important; transform: none !important; }
  /* ── Devices panel on TOP ── */
  .tsb2-right {
    order: 1;
    width: 100%;
    height: 42vw;
    min-height: 260px;
    max-height: 380px;
    position: relative;
    overflow: hidden;
  }

  /* reposition devices to fill the horizontal space better */
  .tsb2-monitor {
    width: 38%;
    right: 8%;
    top: 50%;
  }
  .tsb2-phone {
    width: 12%;
    left: 8%;
    top: 50%;
  }
  .tsb2-ble {
    width: 24%;
    left: 26%;
    top: 50%;
    transform: translateY(13%);
  }
  .tsb2-halo { width: 55%; height: 85%; right: 6%; }

  /* ── Text panel below, full width ── */
  .tsb2-left {
    order: 2;
    width: 100%;
    padding: 28px 36px 32px 36px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .tsb2-divider { display: none; }

  .tsb2-pill {
    font-size: 13px;
    letter-spacing: 2.5px;
    padding: 4px 15px;
    margin-bottom: 12px;
  }
  .tsb2-title {
    font-size: clamp(28px, 4.5vw, 40px);
    margin-bottom: 10px;
    line-height: 1.15;
  }
  .tsb2-accent-bar {
    width: 48px;
    height: 3.5px;
    margin-bottom: 12px;
  }
  .tsb2-subtitle {
    font-size: clamp(17px, 2.4vw, 22px);
    margin-bottom: 8px;
  }
  .tsb2-desc {
    font-size: clamp(13px, 1.8vw, 16px);
    margin-bottom: 16px;
    line-height: 1.65;
  }
  .tsb2-badges {
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .tsb2-badge {
    font-size: clamp(12px, 1.7vw, 15px);
    padding: 7px 14px 7px 12px;
    white-space: nowrap;
  }
  .tsb2-btn {
    font-size: 15px;
    padding: 12px 30px;
    margin-top: 20px;
  }
  .tsb2-tagline { display: none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE – Mobile  (≤ 600px)
   Stack: devices on top, text below
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .tsb2-wrap {
    aspect-ratio: unset;
    flex-direction: column;
    border-radius: 10px;
    min-height: unset;
  }  .tsb2-canvas { flex-direction: column; width: 100% !important; height: auto !important; transform: none !important; }
  /* ── Match slide 1 mobile flow: text first, devices below ── */
  .tsb2-left {
    order: 1;
    width: 100%;
    padding: 26px 20px 8px 20px;
    align-items: flex-start;
  }

  .tsb2-right {
    order: 2;
    width: 100%;
    height: 44vw;
    min-height: 160px;
    max-height: 220px;
    position: relative;
    overflow: hidden;
    margin-top: 4px;
  }

  .tsb2-monitor {
    width: 46%;
    right: 5%;
    top: 58%;
  }
  .tsb2-phone {
    width: 15%;
    left: 6%;
    top: 56%;
  }
  .tsb2-ble {
    width: 30%;
    left: 24%;
    top: 57%;
    transform: translateY(8%);
  }
  .tsb2-halo { width: 58%; height: 88%; right: 4%; }

  .tsb2-divider { display: none; }

  .tsb2-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 13px;
    border-radius: 20px;
    margin-bottom: 12px;
  }
  .tsb2-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 8px;
  }
  .tsb2-accent-bar {
    width: 40px;
    height: 3px;
    margin-bottom: 10px;
  }
  .tsb2-subtitle {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  .tsb2-desc {
    font-size: 13px;
    color: #536070;
    line-height: 1.65;
    margin-bottom: 14px;
    max-width: 92%;
  }
  .tsb2-badges {
    gap: 8px;
    width: auto;
    align-items: flex-start;
  }
  .tsb2-badge {
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px 8px 12px;
    white-space: normal;
  }
  .tsb2-btn {
    font-size: 14px;
    padding: 11px 28px;
    margin-top: 18px;
    border-radius: 10px;
  }

  /* tagline hidden on mobile – too little space */
  .tsb2-tagline { display: none; }

  /* re-enable all entrance animations with shorter delays on mobile */
  .tsb2-delay-2  { animation-delay: 0.3s; }
  .tsb2-delay-3  { animation-delay: 0.45s; }
  .tsb2-delay-4  { animation-delay: 0.6s; }
  .tsb2-delay-5  { animation-delay: 0.75s; }
  .tsb2-delay-6  { animation-delay: 0.9s; }
  .tsb2-delay-7  { animation-delay: 1.05s; }
  .tsb2-delay-btn { animation-delay: 1.2s; }
}

/* ══════════════════════════════════════════
   VIEWPORT TRIGGER
   All animations are paused by default.
   JS adds .tsb2-started to .tsb2-wrap when
   the banner scrolls into view.
══════════════════════════════════════════ */

/* — Pause everything until visible — */
.tsb2-spotlight,
.tsb2-vglow,
.tsb2-p,
.tsb2-anim,
.tsb2-anim-drop,
.tsb2-anim-slide-left,
.tsb2-anim-slide-right,
.tsb2-scanline,
.tsb2-pscan,
.tsb2-bled,
.tsb2-bleda,
.tsb2-wave1,
.tsb2-wave2,
.tsb2-wave3 {
  animation-play-state: paused;
}

/* — Run when banner enters viewport / slide becomes active — */
.tsb2-wrap.tsb2-started .tsb2-spotlight,
.tsb2-wrap.tsb2-started .tsb2-vglow,
.tsb2-wrap.tsb2-started .tsb2-p,
.tsb2-wrap.tsb2-started .tsb2-anim,
.tsb2-wrap.tsb2-started .tsb2-anim-drop,
.tsb2-wrap.tsb2-started .tsb2-anim-slide-left,
.tsb2-wrap.tsb2-started .tsb2-anim-slide-right,
.tsb2-wrap.tsb2-started .tsb2-scanline,
.tsb2-wrap.tsb2-started .tsb2-pscan,
.tsb2-wrap.tsb2-started .tsb2-bled,
.tsb2-wrap.tsb2-started .tsb2-bleda,
.tsb2-wrap.tsb2-started .tsb2-wave1,
.tsb2-wrap.tsb2-started .tsb2-wave2,
.tsb2-wrap.tsb2-started .tsb2-wave3 {
  animation-play-state: running;
}

/* ══════════════════════════════════════════
   ANIMATION RESET  (slider replay)
   JS briefly adds .tsb2-resetting to kill all
   animation timelines, then removes it so
   animations restart from frame 0.
══════════════════════════════════════════ */
.tsb2-wrap.tsb2-resetting .tsb2-spotlight,
.tsb2-wrap.tsb2-resetting .tsb2-vglow,
.tsb2-wrap.tsb2-resetting .tsb2-p,
.tsb2-wrap.tsb2-resetting .tsb2-anim,
.tsb2-wrap.tsb2-resetting .tsb2-anim-drop,
.tsb2-wrap.tsb2-resetting .tsb2-anim-slide-left,
.tsb2-wrap.tsb2-resetting .tsb2-anim-slide-right,
.tsb2-wrap.tsb2-resetting .tsb2-scanline,
.tsb2-wrap.tsb2-resetting .tsb2-pscan,
.tsb2-wrap.tsb2-resetting .tsb2-bled,
.tsb2-wrap.tsb2-resetting .tsb2-bleda,
.tsb2-wrap.tsb2-resetting .tsb2-wave1,
.tsb2-wrap.tsb2-resetting .tsb2-wave2,
.tsb2-wrap.tsb2-resetting .tsb2-wave3 {
  animation: none !important;
}
/* also hide entrance-animation elements so they don't flash */
.tsb2-wrap.tsb2-resetting .tsb2-anim,
.tsb2-wrap.tsb2-resetting .tsb2-anim-drop,
.tsb2-wrap.tsb2-resetting .tsb2-anim-slide-left,
.tsb2-wrap.tsb2-resetting .tsb2-anim-slide-right,
.tsb2-wrap.tsb2-resetting .tsb2-spotlight,
.tsb2-wrap.tsb2-resetting .tsb2-p {
  opacity: 0;
}