/* ============================================================================
   Smartguard — Temperature Showcase
   Uses only tokens from UX-004-Design-Tokens.md, plus one literal colour
   given directly in an earlier brief: oklch(from var(--colour-brand) 0.5 c h)
   for the border glow. No other colours are invented.

   Note on naming: the fourth Temperature state reads as "Cold" in the UI,
   but still pulls its colour from --colour-temp-cool underneath — that's
   the existing design-system token name and isn't being renamed, only
   the displayed word changed.

   STRATEGY:
   All motion is triggered by ".is-active", added once by
   temperature-showcase.js via IntersectionObserver. The brightness /
   border-glow entrance is a one-off transition (it doesn't repeat). The
   tick reveal + Temperature choreography, however, now LOOPS: each pass
   is 10 seconds, followed by a 3-second hold at the final state, for a
   13-second animation-duration on infinite repeat. Every keyframe
   percentage below is simply the original 0–100% (over 10s) rescaled to
   fit inside a 13s cycle (factor 10/13 ≈ 0.7692) — the last real change
   still happens at the same rescaled point, then holds flat through the
   3-second pause before the cycle restarts from 0%.
   ============================================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* ============================================================================
   BEGIN NEW SECTION — layout
   ============================================================================ */

.section--temperature-demo {
  position: relative;
  background: var(--colour-page);
  padding-block: var(--space-xxl);
  overflow-x: clip;
}

.section--temperature-demo__container {
  width: 100%;
  max-width: var(--container-wide);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
@media (width <= 850px) {
  .section--temperature-demo__container {
    padding-inline: 0;
  }
}

.section--temperature-demo__heading {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-lg);
}

.section--temperature-demo__heading h2 {
  font-family: var(--font-family);
  font-size: var(--font-size-5);
  color: var(--colour-text);
  margin: 0;
}

.section--temperature-demo__intro {
  font-family: var(--font-family);
  font-size: var(--font-size-4);
  color: var(--colour-text-muted);
  margin: var(--space-md) 0 0 0;
  line-height: 1.5;
}

.section--temperature-demo__columns {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: var(--space-xl);
  align-items: start;
}

.section--temperature-demo__explain p {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--colour-text);
  line-height: 1.75;
  margin: 0 0 var(--space-lg) 0;
}

.section--temperature-demo__explain p:last-child {
  margin-block-end: 0;
}

@media (max-width: 850px) {
  .section--temperature-demo__columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   TABLE DESIGN
   ============================================================================ */

.temp-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;

  filter: brightness(0.25);
  box-shadow: var(--shadow-soft);
  transition:
    filter 2s ease,
    border-color 2900ms ease,
    box-shadow 2900ms ease;
}

.section--temperature-demo.in-view .temp-table {
  filter: brightness(1);
  border-color: oklch(from var(--colour-brand) 0.8 c h);
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px oklch(from var(--colour-brand) 0.5 c h / 45%),
    0 0 28px oklch(from var(--colour-brand) 0.5 c h / 30%);
}



@media (scripting: none) {
  .temp-table {
    filter: brightness(1);
    transition: none;
  }
}

.temp-table th,
.temp-table td {
  font-family: var(--font-family);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.temp-table th {
  font-size: var(--font-size-2);
  font-weight: 500;
  color: var(--colour-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--colour-border);
}


.temp-table td {
    font-size: var(--font-size-3);
    color: var(--colour-text);
}

.temp-table tbody tr + tr td {
    border-top: 1px solid var(--colour-border);
}

.section--temperature-demo__table-wrap {
  width: 100%;
  container-type: inline-size;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@container (max-width: 700px) {
  .temp-table th,
  .temp-table td {
    padding: var(--space-sm) var(--space-md);
  }
  .temp-table th {
    font-size: var(--font-size-2);
  }
  .temp-table td {
    font-size: var(--font-size-3);
  }
}

@container (max-width: 600px) {
  .temp-table th,
  .temp-table td {
    padding: var(--space-sm) var(--space-sm);
  }
  .temp-table th {
    font-size: var(--font-size-1);
  }
  .temp-table td {
    font-size: var(--font-size-2);
  }
}

/* .temp-table__num      { width: 5%; } */
.temp-table__matter   { width: 21%; }
.temp-table__risk     { width: 14%; }
.temp-table__task-col { width: 14%; text-align: center; }
.temp-table__temp     { width: 23%; }

p.temp-table__footnote {
  font-family: var(--font-family);
  font-size: var(--font-size-2);
  color: var(--colour-text-subtle);
  margin: var(--space-md) 0 0 0;
  line-height: 1.6;
  text-align: center;
}

/* ---------- Task ticks ---------- */

.task-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: oklch(from var(--colour-brand) 92% c h / 14%);
  opacity: 0;
  transform: scale(0.85);
}

.task-tick::after {
  content: "";
  width: 0.6em;
  height: 0.35em;
  border-inline-start: 2px solid var(--colour-brand);
  border-block-end: 2px solid var(--colour-brand);
  transform: rotate(-45deg) translateY(-1px);
}

@media (scripting: none) {
  .task-tick {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Temperature pill ---------- */

.temp-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-small);
  font-weight: 500;
  border-radius: var(--radius-md);
}

@container (max-width: 600px) {
  .temp-pill {
    font-size: var(--font-size-1);
  }
}

.temp-pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.temp-pill__label {
  position: relative;
  display: inline-grid;
}

.temp-pill__label-text {
  grid-area: 1 / 1;
  opacity: 0;
}

.temp-pill__label-text.is-final {
  opacity: 1;
}

/* ---- Resting / no-JS state ----
   Commercial and Conveyancing both settle on Cold, which drops the badge
   entirely: no tinted background, no padding, no dot — plain text only.
   Litigation settles on Warm, which keeps the full badge treatment. */

/* .temp-pill--commercial,
.temp-pill--conveyancing {
  background: transparent;
  padding: 0;
}
.temp-pill--commercial .temp-pill__dot,
.temp-pill--conveyancing .temp-pill__dot {
  display: none;
}
.temp-pill--commercial .temp-pill__label,
.temp-pill--conveyancing .temp-pill__label {
  color: var(--colour-text-muted);
} */

.temp-pill--commercial {
  background: oklch(from var(--colour-temp-warm) 95% c h / 12%);
  padding: var(--space-xs) var(--space-md);
}
.temp-pill--commercial .temp-pill__dot {
  background: var(--colour-temp-warm);
}

.temp-pill--conveyancing {
  background: oklch(from var(--colour-temp-warm) 95% c h / 12%);
  padding: var(--space-xs) var(--space-md);
}
.temp-pill--conveyancing .temp-pill__dot {
  background: var(--colour-temp-warm);
}

.temp-pill--litigation {
  background: oklch(from var(--colour-temp-warm) 95% c h / 12%);
  padding: var(--space-xs) var(--space-md);
}
.temp-pill--litigation .temp-pill__dot {
  background: var(--colour-temp-warm);
}

/* ============================================================================
   END NEW SECTION — layout
   ============================================================================ */

/* ============================================================================
   BEGIN NEW SECTION — JS-triggered, looping animation
   ============================================================================ */

.section--temperature-demo.is-active .task-tick,
.section--temperature-demo.is-active .temp-pill,
.section--temperature-demo.is-active .temp-pill__dot,
.section--temperature-demo.is-active .temp-pill__label-text {
  animation-duration: 8s;              /* 5s choreography + 3s hold, looped */
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* ---------- Ticks: fade + slight scale, staged one column at a time ---------- */
/* Original stops (of 10s): 7/12, 37/42, 67/72 — rescaled ×(10/13) below. */

@keyframes tick-reveal-id {
  0%, 5.38%  { opacity: 0; transform: scale(0.85); }
  9.23%      { opacity: 1; transform: scale(1); }
  100%       { opacity: 1; transform: scale(1); }
}
@keyframes tick-reveal-aml {
  0%, 28.46% { opacity: 0; transform: scale(0.85); }
  32.31%     { opacity: 1; transform: scale(1); }
  100%       { opacity: 1; transform: scale(1); }
}
@keyframes tick-reveal-risk {
  0%, 51.54% { opacity: 0; transform: scale(0.85); }
  55.38%     { opacity: 1; transform: scale(1); }
  100%       { opacity: 1; transform: scale(1); }
}

.section--temperature-demo.is-active .task-tick--id   { animation-name: tick-reveal-id; }
.section--temperature-demo.is-active .task-tick--aml  { animation-name: tick-reveal-aml; }
.section--temperature-demo.is-active .task-tick--risk { animation-name: tick-reveal-risk; }

/* ---------- Temperature: colour, and — for Cold-bound rows — the badge itself ---------- */

/* Commercial — Hot until AML (~33.85%), Warm until Risk Assessment (~60.77%),
   then Cold — badge (background + padding) disappears at the same point
   the colour would have become Cold. Holds through the 3s pause, then
   resets to Hot (with its badge back) at the start of the next loop. */
@keyframes pill-bg-commercial {
  0%, 33.85%   { background: oklch(from var(--colour-temp-hot) 95% c h / 12%);  padding: var(--space-xs) var(--space-md); }
  38.46%, 60.77% { background: oklch(from var(--colour-temp-warm) 95% c h / 12%); padding: var(--space-xs) var(--space-md); }
  65.38%, 100% { background: oklch(from var(--colour-temp-cold) 95% c h / 22%); padding: var(--space-xs) var(--space-md);  }
}
@keyframes dot-commercial {
  0%, 33.85%   { opacity: 1; background: var(--colour-temp-hot); }
  38.46%, 60.77% { opacity: 1; background: var(--colour-temp-warm); }
  65.38%, 100% { opacity: 1; background: var(--colour-temp-cold); }
}
@keyframes label-hot-commercial  { 0%, 33.85% { opacity: 1; } 38.46%, 100% { opacity: 0; } }
@keyframes label-warm-commercial { 0%, 33.85% { opacity: 0; } 38.46%, 60.77% { opacity: 1; } 65.38%, 100% { opacity: 0; } }
@keyframes label-cold-commercial { 0%, 60.77% { opacity: 0; } 65.38%, 100% { opacity: 1; } }
@keyframes label-colour-commercial {
  0%, 60.77%   { color: var(--colour-text); }
  65.38%, 100% { color: var(--colour-text-muted); }
}

.section--temperature-demo.is-active .temp-pill--commercial                 { animation-name: pill-bg-commercial; }
.section--temperature-demo.is-active .temp-pill--commercial .temp-pill__dot { animation-name: dot-commercial; }
.section--temperature-demo.is-active .temp-pill--commercial .temp-pill__label-text--hot  { animation-name: label-hot-commercial; }
.section--temperature-demo.is-active .temp-pill--commercial .temp-pill__label-text--warm { animation-name: label-warm-commercial; }
.section--temperature-demo.is-active .temp-pill--commercial .temp-pill__label-text--cold { animation-name: label-cold-commercial; }
.section--temperature-demo.is-active .temp-pill--commercial .temp-pill__label {
  animation-name: label-colour-commercial;
  animation-duration: 13s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* Conveyancing — Warm throughout; AML doesn't change it; Cold (badge dropped)
   only after Risk Assessment (~60.77%). */
@keyframes pill-bg-conveyancing {
  0%, 60.77%   { background: oklch(from var(--colour-temp-warm) 95% c h / 12%); padding: var(--space-xs) var(--space-md); }
  65.38%, 100% { background: oklch(from var(--colour-temp-cold) 95% c h / 22%); padding: var(--space-xs) var(--space-md); }
}
@keyframes dot-conveyancing {
  0%, 60.77%   { opacity: 1; background: var(--colour-temp-warm); }
  65.38%, 100% { opacity: 1; background: var(--colour-temp-cold);}
}
@keyframes label-warm-conveyancing { 0%, 60.77% { opacity: 1; } 65.38%, 100% { opacity: 0; } }
@keyframes label-cold-conveyancing { 0%, 60.77% { opacity: 0; } 65.38%, 100% { opacity: 1; } }
@keyframes label-colour-conveyancing {
  0%, 60.77%   { color: var(--colour-text); }
  65.38%, 100% { color: var(--colour-text-muted); }
}

.section--temperature-demo.is-active .temp-pill--conveyancing                 { animation-name: pill-bg-conveyancing; }
.section--temperature-demo.is-active .temp-pill--conveyancing .temp-pill__dot { animation-name: dot-conveyancing; }
.section--temperature-demo.is-active .temp-pill--conveyancing .temp-pill__label-text--warm { animation-name: label-warm-conveyancing; }
.section--temperature-demo.is-active .temp-pill--conveyancing .temp-pill__label-text--cold { animation-name: label-cold-conveyancing; }
.section--temperature-demo.is-active .temp-pill--conveyancing .temp-pill__label {
  animation-name: label-colour-conveyancing;
  animation-duration: 13s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/* Litigation — Hot throughout; AML doesn't change it; Warm only after Risk
   Assessment (~60.77%). Never reaches Cold, so it always keeps its badge —
   only the colour animates, nothing here removes background/padding/dot. */
@keyframes pill-bg-litigation {
  0%, 60.77%   { background: oklch(from var(--colour-temp-hot) 95% c h / 12%); }
  65.38%, 100% { background: oklch(from var(--colour-temp-warm) 95% c h / 12%); }
}
@keyframes dot-litigation {
  0%, 60.77%   { background: var(--colour-temp-hot); }
  65.38%, 100% { background: var(--colour-temp-warm); }
}
@keyframes label-hot-litigation  { 0%, 60.77% { opacity: 1; } 65.38%, 100% { opacity: 0; } }
@keyframes label-warm-litigation { 0%, 60.77% { opacity: 0; } 65.38%, 100% { opacity: 1; } }

.section--temperature-demo.is-active .temp-pill--litigation                 { animation-name: pill-bg-litigation; }
.section--temperature-demo.is-active .temp-pill--litigation .temp-pill__dot { animation-name: dot-litigation; }
.section--temperature-demo.is-active .temp-pill--litigation .temp-pill__label-text--hot  { animation-name: label-hot-litigation; }
.section--temperature-demo.is-active .temp-pill--litigation .temp-pill__label-text--warm { animation-name: label-warm-litigation; }

/* Respect reduced-motion: no looping, no choreography — jump straight to
   the resolved final state (temperature-showcase.js also checks this and
   activates immediately without observing scroll; this is the CSS backstop). */
@media (prefers-reduced-motion: reduce) {
  .section--temperature-demo.is-active .task-tick,
  .section--temperature-demo.is-active .temp-pill,
  .section--temperature-demo.is-active .temp-pill__dot,
  .section--temperature-demo.is-active .temp-pill__label,
  .section--temperature-demo.is-active .temp-pill__label-text {
    animation: none !important;
  }
  .task-tick { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   END NEW SECTION — JS-triggered, looping animation
   ============================================================================ */