/* ==========================================================================
   Digital twin page  ·  loaded after anomny.css
   One memorable element: the industry explorer. Everything else reuses the
   site's own components (banner, bay, card, phases, faq, cta-band).
   ========================================================================== */

/* ---- intro: the twin loop ------------------------------------------------ */
.dt-loop { margin: 0; }
.dt-loop svg { width: 100%; height: auto; display: block; }
.dt-loop figcaption { font-size: var(--t-xs); color: var(--muted); margin-top: .6rem; }
.dt-loop .n   { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.dt-loop .n--twin { fill: var(--ink); stroke: var(--ink); }
.dt-loop .t   { fill: var(--text); font: 600 14px "IBM Plex Sans", system-ui, sans-serif; }
.dt-loop .s   { fill: var(--muted); font: 400 11.5px "IBM Plex Sans", system-ui, sans-serif; }
.dt-loop .t--on { fill: #fff; }
.dt-loop .s--on { fill: var(--on-ink-dim); }
.dt-loop .a   { fill: none; stroke: var(--signal); stroke-width: 2; }
.dt-loop .a--back { stroke: var(--gold); stroke-dasharray: 5 5; }
.dt-loop .ah  { fill: var(--signal); }
.dt-loop .ah--back { fill: var(--gold); }

/* ---- explorer ------------------------------------------------------------ */
.dt-explorer { display: grid; gap: var(--gap); }

/* without JS every panel simply stacks; the tab rail only exists with JS */
.dt-tabs { display: none; }
.dt-panels { display: grid; gap: var(--gap); }

.dt-js .dt-explorer { grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); align-items: start; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.dt-js .dt-tabs { position: relative; display: flex; flex-direction: column; background: var(--paper-2); border-right: 1px solid var(--line); }
.dt-tab {
  appearance: none; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
  font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--text);
  padding: .95rem 1.1rem .95rem 1.2rem; cursor: pointer; position: relative;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.dt-tab:last-child { border-bottom: 0; }
.dt-tab small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--muted); margin-top: .1rem; }
.dt-tab:hover { background: #fff; }
.dt-tab[aria-selected="true"] { background: #fff; color: var(--signal-dk); }
.dt-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.dt-js .dt-panels { display: block; }
.dt-js .dt-panel[hidden] { display: none; }

.dt-panel { padding: clamp(1.2rem, 3vw, 2rem); background: #fff; }
.dt-js .dt-panel { border: 0; }
.dt-panel:not([hidden]) { border: 1px solid var(--line); border-radius: var(--r-lg); }
.dt-js .dt-panel:not([hidden]) { border: 0; border-radius: 0; }
.dt-panel:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.dt-panel h3 { font-size: var(--t-lg); margin-bottom: .3rem; }
.dt-panel .dt-lead { color: var(--muted); max-width: 62ch; margin-bottom: 1.4rem; }

.dt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem 2rem; margin: 0 0 1.4rem; }
.dt-cols h4 { font-size: var(--t-sm); margin: 0 0 .45rem; color: var(--ink-2); }
.dt-cols p, .dt-cols ul { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.dt-cols ul { list-style: none; padding: 0; }
.dt-cols li { position: relative; padding-left: 1.05rem; margin-bottom: .4rem; }
.dt-cols li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.dt-cols--q li::before { background: var(--gold); }

.dt-outcome { max-width: none; background: var(--signal-tint); border-left: 3px solid var(--signal); padding: .85rem 1.1rem;
  border-radius: 0 var(--r) var(--r) 0; font-size: var(--t-sm); color: var(--text); }
.dt-outcome b { color: var(--signal-dk); }
.dt-fit { margin: .9rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.dt-fit a { font-weight: 600; }

@media (max-width: 760px) {
  .dt-js .dt-explorer { grid-template-columns: 1fr; }
  .dt-js .dt-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scroll-snap-type: x proximity; }
  .dt-tab { flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--line); white-space: nowrap; scroll-snap-align: start; }
  .dt-tab small { display: none; }
}
@media print {
  .dt-tabs { display: none !important; }
  .dt-panel[hidden] { display: block !important; }
}


/* ==========================================================================
   Responsive refinements
   ========================================================================== */
.dt-page { overflow-x: clip; }
.dt-page [id] { scroll-margin-top: 110px; }
.dt-page h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); }
.dt-page .banner p { max-width: 62ch; }
.dt-loop { max-width: 540px; margin-inline: auto; width: 100%; }
.dt-loop .t { font-size: 14px; }
.dt-loop .s { font-size: 11.5px; }
.dt-tab { min-height: 48px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .dt-js .dt-explorer { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
  .dt-tab small { font-size: .74rem; }
}
@media (max-width: 760px) {
  .dt-js .dt-tabs {
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .dt-js .dt-tabs::-webkit-scrollbar { display: none; }
  .dt-js .dt-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .dt-panel { padding: 1.25rem 1.1rem 1.5rem; }
  .dt-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .dt-outcome { padding: .8rem .95rem; }
}
@media (max-width: 560px) {
  .dt-loop .t { font-size: 16.5px; }
  .dt-loop .s { font-size: 14px; }
  .dt-page .banner { padding-block: 1.25rem 1.6rem; }
  .dt-page .cta-band .btn-row { flex-direction: column; align-items: stretch; }
  .dt-page .cta-band .btn { text-align: center; justify-content: center; }
  /* the shared footer's first column forced a 435px minimum width on phones */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  .dt-js .dt-explorer { grid-template-columns: 300px minmax(0, 1fr); }
}

/* ==========================================================================
   Motion  (all of it disabled or shortened under prefers-reduced-motion)
   ========================================================================== */
@keyframes dtRise  { from { opacity: 0; transform: translateY(20px); } }
@keyframes dtPanel { from { opacity: 0; transform: translateX(16px); } }
@keyframes dtPanelY{ from { opacity: 0; transform: translateY(12px); } }
@keyframes dtFlow  { to { stroke-dashoffset: -13; } }
@keyframes dtRing  { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.14, 1.3); opacity: 0; } }

/* tab indicator: one bar that slides between tabs */
.dt-ind { display: none; position: absolute; left: 0; top: 0; z-index: 2; background: var(--signal); pointer-events: none; border-radius: 0 2px 2px 0; }
.dt-js .dt-ind { display: block; }
.dt-ind.is-ready { transition: transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease), top .38s var(--ease); }

/* the loop: signal travelling the circuit, flowing arrows, pulse on the twin */
.dt-loop .dt-ring { fill: none; stroke: var(--signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.dt-loop .dt-signal__dot  { fill: var(--gold); }
.dt-loop .dt-signal__halo { fill: var(--gold); opacity: .28; }

@media (prefers-reduced-motion: no-preference) {
  .dt-loop .a { stroke-dasharray: 7 6; animation: dtFlow 1s linear infinite; }
  .dt-loop .a--back { stroke-dasharray: 5 5; }
  .dt-loop .dt-ring { animation: dtRing 3s ease-out infinite; }

  /* one orchestrated entrance for the banner */
  .dt-page .banner .crumb { animation: dtRise .6s var(--ease) backwards; }
  .dt-page .banner h1     { animation: dtRise .7s var(--ease) .08s backwards; }
  .dt-page .banner p      { animation: dtRise .7s var(--ease) .18s backwards; }

  /* scroll reveals (the class is added by JS, so no-JS visitors see everything) */
  .dt-anim [data-rv]:not(.is-in) { opacity: 0; }
  .dt-anim [data-rv].is-in { animation: dtRise .7s var(--ease) backwards; animation-delay: calc(var(--rv-i, 0) * 90ms); }

  /* switching industry: panel slides in, its columns follow one after another */
  .dt-js .dt-panel:not([hidden]) { animation: dtPanel .42s var(--ease); }
  .dt-js .dt-panel:not([hidden]) .dt-cols > div { animation: dtRise .5s var(--ease) backwards; }
  .dt-js .dt-panel:not([hidden]) .dt-cols > div:nth-child(1) { animation-delay: .06s; }
  .dt-js .dt-panel:not([hidden]) .dt-cols > div:nth-child(2) { animation-delay: .13s; }
  .dt-js .dt-panel:not([hidden]) .dt-cols > div:nth-child(3) { animation-delay: .20s; }
  .dt-js .dt-panel:not([hidden]) .dt-outcome { animation: dtRise .5s var(--ease) .28s backwards; }

  /* answers open smoothly */
  .faq details[open] p { animation: dtRise .35s var(--ease) backwards; }

  .dt-tab { transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease); }
  .dt-tab[aria-selected="true"] { padding-left: 1.45rem; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .dt-js .dt-panel:not([hidden]) { animation-name: dtPanelY; }
  .dt-tab[aria-selected="true"] { padding-left: 1.2rem; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .dt-page .grid > .card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
  .dt-page .grid > .card:hover { transform: translateY(-4px); border-color: var(--signal); box-shadow: 0 16px 30px -20px rgba(6, 24, 43, .45); }
  .dt-page .phase { transition: background-color .25s var(--ease); }
  .dt-page .phase:hover { background: linear-gradient(90deg, var(--signal-tint), transparent 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .dt-loop .dt-signal { display: none; }
}

.dt-page code { font-size: .86em; overflow-wrap: anywhere; }