/* ═══════════════════════════════════════════════════════════════════
   IRIS DEMO SECTION — carousel, phone shell, Telegram UI
   Appended to iris.css — do not edit above this marker
   Dependencies: JetBrains Mono, Bebas Neue (add to Google Fonts link)
   Keyframes riseUp, pulse, msgPop, typingBounce defined below
   ═══════════════════════════════════════════════════════════════════ */

/* ── LOCAL TOKEN SCOPE — isolates fire palette from iris token namespace ── */
.iris-demo-section {
  --iris-fire:       #FF5C00;
  --iris-fire-03:    rgba(255,92,0,.03);
  --iris-fire-07:    rgba(255,92,0,.07);
  --iris-fire-12:    rgba(255,92,0,.12);
  --iris-cream:      #f5ecd7;
  /* remap hv2 vars that reference jomtender tokens */
  --fire:            var(--iris-fire);
  --fire-03:         var(--iris-fire-03);
  --fire-07:         var(--iris-fire-07);
  --fire-12:         var(--iris-fire-12);
}

/* ── SECTION SHELL — follows page standard content width ── */
.iris-demo-section {
  padding: 72px 20px 80px;
  overflow: visible;
  position: relative;
}
.iris-demo-section .section-inner {
  max-width: 960px;
  margin: 0 auto;
  overflow: visible;
}
.iris-demo-kicker {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: .8rem;
  text-align: center;
}
.iris-demo-headline {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
  color: var(--brand-white); margin-bottom: .5rem; line-height: 1.25;
  text-align: center;
}
.iris-demo-subline {
  font-size: 1rem; line-height: 1.7; color: rgba(224,234,255,.6);
  max-width: 560px; margin: 0 auto 2rem;
  text-align: center;
}

/* ── STACK — text intro above, carousel centered below. One layout, all widths. ── */
.iris-demo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  overflow: visible;
}
.iris-demo-text-col {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.iris-demo-phone-col {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: visible;
  padding-top: 1rem;
}

/* ── CAPABILITY ROW — compact inline tags, centered, replaces the old sidebar-style list ── */
.hv2-cap-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
  margin-top: 2.5rem;
  opacity: 0; animation: irisRiseUp .9s .25s cubic-bezier(.22,.68,0,1.2) forwards;
}
.hv2-cap {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--brand-blue); border-radius: 20px;
  background: var(--iris-fire-03);
  transition: border-color .18s, background .18s;
}
.hv2-cap-ico {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0; background: none !important;
}
.hv2-cap-title {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: .72rem; letter-spacing: .02em;
  color: rgba(224,234,255,.85);
  white-space: nowrap;
}
.hv2-cap-sub { display: none; }

/* ── CAROUSEL OVERFLOW FIX ── */
.iris-demo-section,
.iris-demo-section .iris-demo-phone-col,
.iris-demo-section .hv2-carousel-track { overflow: visible !important; }

/* ── PERSONA IDENTITY STRIP (above carousel) ── */
.hv2-persona-identity {
  display: flex; align-items: center; gap: .45rem;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(224,234,255,.65);
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: .6rem;
}
.hv2-persona-identity strong { color: var(--brand-blue); font-weight: 700; }

/* ── CAROUSEL TRACK ── */
.hv2-carousel-track {
  position: relative; width: 780px; height: 660px;
  overflow: visible;
  pointer-events: auto;
  cursor: grab;
  transform-origin: top center;
}
.hv2-carousel-track.dragging { cursor: grabbing; }

/* ── 6 SLOTS — JS drives transform/opacity/z-index ── */
.hv2-carousel-slot {
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 760px;
  margin-left: -180px;
  margin-top: -380px;
  transform-origin: center center;
  user-select: none;
  pointer-events: auto;
  will-change: transform, opacity;
}
.hv2-slot-ghost {
  position: absolute; top: 0; left: 0;
  width: 360px; height: 760px;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hv2-slot-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hv2-slot-shell {
  position: absolute; top: 0; left: 0;
  width: 360px; height: 760px;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.hv2-carousel-slot.is-active .hv2-slot-shell  { opacity: 1; visibility: visible; pointer-events: auto; }
.hv2-carousel-slot.is-active .hv2-slot-ghost  { opacity: 0; transition: opacity .3s ease; }

/* Ghost phone persona label below inactive slots */
.hv2-carousel-slot:not([data-pos="active"]) .hv2-ghost-phone::after {
  content: attr(data-name);
  display: block;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(224,234,255,.35);
  text-align: center; margin-top: 10px;
}

/* ── GHOST PHONE LAYERS ── */
.hv2-glass-pane {
  position: absolute;
  top: 2px; left: 2px;
  width: 356px; height: 716px;
  border-radius: 47px;
  pointer-events: none;
  z-index: 2; opacity: 0;
  will-change: backdrop-filter;
}
.hv2-slot-ghost svg { position: relative; z-index: 1; }

.hv2-carousel-slot[data-layer="far"] .hv2-slot-ghost { opacity: .75; }
.hv2-carousel-slot[data-layer="far"] .hv2-slot-ghost svg {
  filter: saturate(.4) brightness(.7) drop-shadow(0 0 8px rgba(255,92,0,.25));
}
.hv2-carousel-slot[data-layer="far"] .hv2-glass-pane {
  opacity: 1; background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hv2-carousel-slot[data-layer="mid"] .hv2-glass-pane {
  opacity: 1;
  background:
    radial-gradient(ellipse 65% 28% at 22% 6%, rgba(255,255,255,.10) 0%, transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,140,60,.02) 50%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 0 0 .5px rgba(255,255,255,.15);
}
.hv2-carousel-slot[data-layer="mid"] .hv2-slot-ghost svg {
  filter: drop-shadow(0 0 14px rgba(255,120,40,.28)) drop-shadow(0 0 36px rgba(255,92,0,.14));
}

/* ── iPhone 15 Pro shell ── */
.hv2-ghost-phone { width:360px; height:760px; position:relative; pointer-events:none; display:block; flex-shrink:0; }
.hv2-ghost-phone svg { width:100%; height:100%; display:block; overflow:visible; }
.hv2-phone-shell {
  width: 360px;
  background: linear-gradient(160deg, #323232 0%, #1e1e1e 40%, #0f0f0f 100%);
  border-radius: 48px;
  border: 1.5px solid rgba(255,255,255,.18);
  padding: 0; position: relative; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 0 5px #1c1c1e,
    0 0 0 6px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.6);
  pointer-events: auto;
}
.hv2-phone-shell::before {
  content: '';
  position: absolute; left: -5px; top: 110px;
  width: 4px; height: 36px;
  background: linear-gradient(180deg, #444 0%, #2a2a2a 50%, #444 100%);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 48px 0 #333, 0 48px 0 -1px rgba(255,255,255,.06), -1px 0 0 rgba(255,255,255,.07);
}
.hv2-phone-shell::after {
  content: '';
  position: absolute; right: -5px; top: 145px;
  width: 4px; height: 72px;
  background: linear-gradient(180deg, #444 0%, #2a2a2a 50%, #444 100%);
  border-radius: 0 2px 2px 0;
  box-shadow: 1px 0 0 rgba(255,255,255,.06);
}

/* ── Dynamic Island ── */
.hv2-di {
  width: 114px; height: 32px; background: #000;
  border-radius: 18px;
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 3px rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.hv2-di::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1a1a1a, #050505);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.06), inset 0 1px 2px rgba(0,0,0,.9);
}
.hv2-di::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #222, #0a0a0a);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}

/* ── Status bar ── */
.hv2-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; height: 56px; flex-shrink: 0;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  position: relative;
}
.hv2-time { font-size: 13px; color: rgba(245,236,215,.9); font-weight: 600; }
.hv2-status-icons { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }

/* ── Screen ── */
.hv2-screen {
  background: #0e1621;
  border-radius: 46px;
  overflow: hidden; width: 100%; height: 734px;
  position: relative; pointer-events: auto;
  display: flex; flex-direction: column;
}
.hv2-screen-panel {
  position: absolute; top: 56px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
}
.hv2-screen-panel.on { opacity: 1; pointer-events: auto; }
.hv2-home-ind {
  width: 100px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.25);
  margin: 6px auto 0; flex-shrink: 0;
}
.hv2-persona-tag      { display: none; }
.hv2-persona-tag-outer { display: none; }

/* ── Telegram-style chat UI ── */
.hv2-tg-header {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px 9px;
  background: #1f2b38; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
}
.hv2-tg-back   { color: #62a6d8; font-size: 28px; cursor: pointer; line-height: 1; }
.hv2-tg-peer   { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hv2-tg-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg,var(--iris-fire),#FF8C00);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.hv2-tg-peer-info { flex: 1; min-width: 0; }
.hv2-tg-name   { font-size: 18px; font-weight: 600; color: #e8f4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv2-tg-status { font-size: 14px; color: #62a6d8; }
.hv2-tg-menu   { color: rgba(255,255,255,.3); font-size: 23px; cursor: pointer; }
.hv2-tg-body {
  flex: 1; overflow-y: auto; padding: 8px 8px 4px;
  display: flex; flex-direction: column; gap: 5px;
  background: #0e1621; scrollbar-width: none;
}
.hv2-tg-body::-webkit-scrollbar { display: none; }
.hv2-tg-date {
  text-align: center; font-size: 14px; color: #c0cad4;
  background: rgba(15,28,46,.75); border-radius: 12px;
  padding: 2px 11px; align-self: center; line-height: 1.6; margin: 2px 0;
}
.hv2-tg-msg       { display: flex; flex-direction: column; gap: 1px; }
.hv2-tg-msg.user  { align-items: flex-end; }
.hv2-tg-msg.bot   { align-items: flex-start; }
.hv2-tg-bubble {
  background: #1f2b38;
  border-radius: 3px 13px 13px 13px;
  padding: 9px 13px 7px; max-width: 93%;
}
.hv2-tg-bubble.user {
  background: #2b5278;
  border-radius: 13px 3px 13px 13px;
}
.hv2-tg-ts      { font-size: 12px; color: rgba(255,255,255,.28); padding: 0 2px; align-self: flex-end; }
.hv2-tg-ts.user { color: rgba(130,180,220,.55); }

/* Rich message components */
.hv2-tg-alert-hdr   { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.hv2-tg-ico         { font-size: 15px; }
.hv2-tg-ico.fire    { color: var(--iris-fire); }
.hv2-tg-ico.amber   { color: #febc2e; }
.hv2-tg-ico.purple  { color: #A78BFA; }
.hv2-tg-ico.green   { color: #4cd964; }
.hv2-tg-ico.teal    { color: #4CAF82; }
.hv2-tg-alert-title { font-size: 16px; font-weight: 600; color: var(--iris-fire); }
.hv2-score-badge {
  margin-left: auto; background: var(--iris-fire); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 8px;
}
.hv2-tg-body-txt    { font-size: 16px; color: #c9d6e3; line-height: 1.48; }
.hv2-tg-matchcard {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,92,0,.09); border: 1px solid rgba(255,92,0,.22);
  border-radius: 9px; padding: 7px 9px; margin: 3px 0;
}
.hv2-tg-mscore {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; color: var(--iris-fire); line-height: 1; flex-shrink: 0; width: 40px; text-align: center;
}
.hv2-tg-mref  { font-size: 13px; color: rgba(200,215,230,.35); }
.hv2-tg-mname { font-size: 16px; font-weight: 600; color: #e8f4fc; }
.hv2-tg-mval  { font-size: 14px; color: #FF8C00; }
.hv2-tg-acts {
  display: flex; gap: 0; margin-top: 5px;
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 4px;
}
.hv2-tg-btn {
  flex: 1; font-size: 15px; padding: 7px 4px;
  background: transparent; border: none; border-right: 1px solid rgba(255,255,255,.07);
  color: #62a6d8; cursor: pointer; font-family: inherit; text-align: center; transition: background .15s;
}
.hv2-tg-btn:last-child { border-right: none; }
.hv2-tg-btn:hover      { background: rgba(255,255,255,.04); }
.hv2-tg-btn.pri        { color: var(--iris-fire); font-weight: 600; }
.hv2-intel-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0; }
.hv2-intel-item  { background: rgba(255,255,255,.05); border-radius: 7px; padding: 7px 8px; text-align: center; }
.hv2-intel-val   { font-family: 'Bebas Neue', sans-serif; font-size: 25px; color: #A78BFA; line-height: 1; }
.hv2-intel-lbl   { font-size: 12px; color: rgba(200,215,230,.35); }
.hv2-pursuit-steps { display: flex; flex-direction: column; gap: 3px; margin: 3px 0; }
.hv2-ps          { font-size: 15px; color: rgba(200,215,230,.3); padding: 2px 0 2px 9px; border-left: 2px solid rgba(255,255,255,.08); }
.hv2-ps.done     { color: #4cd964; border-left-color: #4cd964; }
.hv2-ps.active   { color: #e8f4fc; border-left-color: var(--iris-fire); font-weight: 600; }
.hv2-brief-stats { display: flex; gap: 4px; margin: 4px 0; }
.hv2-bs          { flex: 1; background: rgba(255,255,255,.05); border-radius: 7px; padding: 7px 4px; text-align: center; }
.hv2-bs-val      { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #febc2e; line-height: 1; display: block; }
.hv2-bs-lbl      { font-size: 12px; color: rgba(200,215,230,.35); }

/* ── Scene nav dots ── */
.hv2-scenario-nav {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 20;
}
.hv2-sn-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer; padding: 0;
  transition: width .2s, height .2s, border-radius .2s, background .2s;
  position: relative; overflow: hidden;
}
.hv2-sn-dot.active { background: rgba(255,92,0,.25); height: 16px; border-radius: 3px; }
.hv2-sn-dot.active::after {
  content: '';
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: var(--iris-fire);
  border-radius: inherit;
}
.hv2-sn-dot.sweeping::after {
  animation: hv2DotSweep var(--sweep-dur, 2200ms) linear forwards;
}
@keyframes hv2DotSweep {
  from { height: 0%; }
  to   { height: 100%; }
}

/* ── Input bar ── */
.hv2-tg-inputbar {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px 8px;
  background: #1f2b38; flex-shrink: 0;
}
.hv2-tg-input-wrap {
  flex: 1; background: #17222d; border-radius: 21px; border: 1px solid rgba(255,255,255,.07);
  padding: 7px 13px; display: flex; align-items: center;
}
.hv2-tg-input {
  flex: 1; font-size: 14px; color: rgba(200,215,230,.38);
  background: transparent; border: none; outline: none; font-family: inherit;
}
.hv2-tg-send {
  width: 36px; height: 36px; border-radius: 50%; background: var(--iris-fire); color: #fff;
  border: none; font-size: 14px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.hv2-tg-mic { font-size: 18px; color: rgba(255,255,255,.28); cursor: pointer; }

/* ── Typing indicator + message entry animation ── */
@keyframes irisRiseUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes irisPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,92,0,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,92,0,0); }
}
@keyframes msgPop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typingBounce {
  0%,80%,100% { transform: translateY(0); opacity: .4; }
  40%         { transform: translateY(-5px); opacity: 1; }
}
/* pulse used by phone-label dot and persona tag dot */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,92,0,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,92,0,0); }
}
.hv2-msg-enter { animation: msgPop .28s cubic-bezier(.22,.68,0,1.2) both; }
.hv2-typing-bubble {
  display: flex; align-items: center; gap: 4px;
  background: #1f2b38; border-radius: 3px 13px 13px 13px;
  padding: 10px 13px; width: fit-content;
}
.hv2-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #62a6d8;
  animation: typingBounce 1.1s infinite;
}
.hv2-typing-dot:nth-child(2) { animation-delay: .18s; }
.hv2-typing-dot:nth-child(3) { animation-delay: .36s; }
.hv2-input-typing { color: rgba(245,236,215,.75) !important; font-style: italic; }

/* Phone label above active slot */
.hv2-phone-label {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .45rem;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(224,234,255,.55); white-space: nowrap;
  pointer-events: none; z-index: 20;
}
.hv2-phone-label strong { color: var(--iris-fire); font-weight: 700; }
.hv2-phone-label-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--iris-fire); animation: pulse 2s infinite; flex-shrink: 0;
}

/* ── (mobile single-phone fallback removed — carousel renders at native
   size at every breakpoint) ── */

/* ══════════════════════════════
   RESPONSIVE
   Layout is a single centered stack at every width (set in base rules
   above). Carousel renders at native size (780×660) everywhere — no JS
   or CSS scaling. body{overflow-x:hidden} (already set in iris.css)
   clips whatever bleeds past the viewport edge, so the active phone
   stays fully readable and neighbor ghosts peek in from both sides at
   any screen width. This block only tightens section padding on small
   viewports.
══════════════════════════════ */

@media (max-width: 599px) {
  .iris-demo-section { padding: 48px 0 56px; }
  .iris-demo-text-col { padding: 0 20px; }
}

/* Ghost phone name label */
.hv2-ghost-label {
  font-family: 'JetBrains Mono', monospace; font-size: 18px;
  fill: rgba(255,255,255,.5); letter-spacing: 1px;
}