/* Opportunity chart animation — needs deck tokens + stage */

@import url('../tokens.css');
@import url('../deck/base.css');

  html, body { margin:0; height:100%; background:#1a1a1a; }
  .stage { position:fixed; inset:0; background:#1a1a1a; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .canvas { width:1920px; height:1080px; transform-origin:center center; }
  .slide { width:1920px; height:1080px; background:var(--paper-off); color:var(--ink); position:relative; overflow:hidden; font-family:'IBM Plex Sans', sans-serif; }

  .anim-head {
  opacity: 0;
  transform: translateY(18px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 14px;
}
.anim-head-copy { flex: 1; }
.anim-title {
  margin: 0;
  font-size: 48px;
  line-height: 1;
}
.anim-lede {
  margin: 10px 0 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 1100px;
  font-weight: 400;
}
.anim-lede strong {
  color: var(--ink);
  font-weight: 600;
}
.chrome-chapter {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.slide-pad {
  display: flex;
  flex-direction: column;
}
.anim-frame {
  opacity: 0;
  transform: translateY(14px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 24px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.anim-frame-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.anim-frame-kicker {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 4px;
}
.anim-frame-title {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.anim-chart {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}
.anim-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.svg-halo {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4;
  stroke-linejoin: round;
}
.svg-halo-sm { stroke-width: 3; }
.anim-kpi { opacity: 0; transform: translateY(22px); }
  .bseg { opacity:0; }
  #baseline-labels, #ann-savings, #ann-waste, #band-labels, #end-noaction,
  #noaction-g, #reduce-layer, #waste-pop, #save-pop, #end-withk, #today-mark, #xaxis, #ygrid, #ygrid-opex, #opex-ghost, #essential, #grey-opex, #opex-overlay { opacity:0; }
  #waste-pop, #save-pop { transform-box: fill-box; transform-origin: 0% 50%; }

  .controls {
    margin-top:12px; align-self:flex-start; z-index:60;
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.96); border:1px solid #E4EAE6; border-radius:14px;
    padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,0.08);
    font-family:'IBM Plex Mono', ui-monospace, monospace;
  }
  .controls button { appearance:none; border:1px solid #C9D5CF; background:white; color:var(--ink); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:8px 12px; border-radius:8px; cursor:pointer; }
  .controls button:hover { border-color:var(--green); color:var(--green); }
  .controls .primary { background:var(--green); border-color:var(--green); color:#fff; }
  .controls .primary:hover { background:#348b66; color:#fff; }
  .controls .seg-group { display:inline-flex; gap:6px; align-items:center; padding-left:8px; border-left:1px solid #D6E0DB; margin-left:2px; }
  .controls .btn-seg { border:1px solid #D6E0DB; background:white; color:var(--ink-3); font-size:10px; padding:7px 11px; }
  .controls .btn-seg.is-active { background:var(--green-deep); border-color:var(--green-deep); color:white; }
  .controls .phase { font-size:10px; color:var(--ink-4); letter-spacing:0.12em; text-transform:uppercase; padding-left:8px; border-left:1px solid #D6E0DB; }
  .controls .phase b { color:var(--green-deep); }
  .controls label.chk { display:flex; align-items:center; gap:6px; color:var(--ink-3); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; }
  .controls input { accent-color:var(--green); width:14px; height:14px; }

  /* ---- embed mode (#embed): show only chart + rail, host slide supplies the title ---- */
  body.embed { background:var(--paper-off); }
  body.embed .stage { background:var(--paper-off); }
  body.embed .canvas { width:100%!important; height:100%!important; transform:none!important; }
  body.embed .slide { width:100%!important; height:100%!important; }
  body.embed .slide-pad { padding:0!important; }
  body.embed .chrome-top,
  body.embed .anim-head,
  body.embed .chrome-footer,
  body.embed .curve-bg { display:none!important; }
  /* ---- host-controlled embed (investor site): the host page supplies its own play/arrow controls ---- */
  body.hostctrl .controls { display:none!important; }

  .opp-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    min-height: 0;
  }
  .opp-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
  }
  .kpi-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
  }
  .kpi-deep {
    background: var(--green-deep);
    color: #fff;
    border-color: transparent;
  }
  .kpi-deep-mint {
    background: var(--green-deep);
    color: #fff;
    border: 0;
    border-top: 3px solid #8EE3BA;
  }
  .kpi-waste-card { border-top: 4px solid #A8332B; }
  .kpi-green-card { border-top: 4px solid #3C9E76; }
  .kpi-gold-card {
    border: 1px solid #ECDBAE;
    border-top: 4px solid #B07A0D;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 74px;
    box-shadow: 0 4px 14px rgba(176, 122, 13, 0.1);
  }
  .kpi-kicker {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .kpi-kicker-lg { font-size: 11px; margin-bottom: 0; }
  .kpi-kicker-tight { margin-bottom: 0; }
  .kpi-kicker-mint { color: #8EE3BA; }
  .kpi-kicker-waste { color: #A8332B; }
  .kpi-kicker-gold { color: #B07A0D; }
  .kpi-kicker-green { color: #3C9E76; }
  .kpi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .kpi-lbl {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
  }
  .kpi-lbl-muted { color: rgba(255, 255, 255, 0.78); }
  .kpi-lbl-white { color: #fff; }
  .kpi-val {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .kpi-val-sm { font-size: 24px; }
  .kpi-val-md { font-size: 34px; letter-spacing: -0.025em; }
  .kpi-val-lg { font-size: 38px; letter-spacing: -0.025em; }
  .kpi-val-white { color: #fff; }
  .kpi-val-mint { color: #8EE3BA; }
  .kpi-val-waste { color: #A8332B; }
  .kpi-val-green { color: #075A38; }
  .kpi-val-gold { color: #B07A0D; }
  .cu-waste { color: #a8332a; }
  .kpi-per {
    font-size: 14px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .kpi-eur {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-3);
  }

  @media (max-width: 720px) {
    body.embed .opp-layout {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 10px;
    }
    body.embed .anim-frame {
      padding: 10px 12px 8px !important;
    }
    body.embed .opp-rail {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 0;
      min-height: 0;
    }
    body.embed .opp-rail:has(.is-active) {
      min-height: 112px;
    }
    body.embed .opp-rail .anim-kpi {
      grid-area: 1 / 1;
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      transform: translateX(16px);
      transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease;
    }
    body.embed .opp-rail .anim-kpi.is-active {
      visibility: visible;
      pointer-events: auto;
      opacity: 1;
      transform: none;
    }
  }