/* =====================================================================
   ICE DAM CUTAWAY — widget chrome.
   Shares the site's tokens (loaded after /assets/senco.css). The widget is a
   dark instrument panel on the light page: ink frame, gold accents, Oswald caps.
   ===================================================================== */

.icw{
  border:1px solid var(--line-gold);
  background:var(--ink);
  padding:8px;                       /* same keyline-frame language as .gframe */
}
.icw-stage{
  position:relative;
  background:#8ba7bf;
  overflow:hidden;
}
.icw-canvas,.icw-canvas canvas{display:block;width:100%;height:100%}
.icw-canvas{position:absolute;inset:0}
/* height, never min-height: min-height + aspect-ratio makes the box derive its
   WIDTH from the forced height and overflow the container on narrow screens */
.icw-stage{aspect-ratio:16/9}
@media (max-width:700px){.icw-stage{aspect-ratio:auto;height:clamp(300px,96vw,420px)}}

.icw-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Each note is a bubble with a tail pointing back at a gold dot sitting on the
   thing being described. Outer div carries the projection transform, inner div
   carries scale + bob, so the two never fight over `transform`. */
.icw-label{
  position:absolute;left:0;top:0;pointer-events:none;
  opacity:0;transition:opacity .18s ease;
}
.icw-label.on{opacity:1;transition:opacity .26s ease}
.icw-label-in{
  max-width:190px;white-space:normal;line-height:1.35;text-align:left;
  font-family:var(--oswald);font-weight:600;font-size:.74rem;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;
  background:rgba(19,19,19,.92);
  border:1px solid rgba(205,163,69,.75);
  border-radius:12px;
  padding:.42rem .7rem .44rem;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transform:scale(.82);
  transition:transform .26s cubic-bezier(.2,1.4,.4,1);
  animation:icwBob 3.2s ease-in-out infinite alternate;
}
.icw-label.on .icw-label-in{transform:scale(1)}
.icw-label-in b{color:var(--gold);font-weight:700;margin-right:.35em}

/* the tail: a rotated square with only its two outward edges keylined */
.icw-label::after{
  content:"";position:absolute;width:10px;height:10px;
  background:rgba(19,19,19,.92);transform:rotate(45deg);
}
.icw-label[data-tail="down"]::after{
  bottom:-5px;left:calc(50% - 5px);
  border-right:1px solid rgba(205,163,69,.75);border-bottom:1px solid rgba(205,163,69,.75);
}
.icw-label[data-tail="up"]::after{
  top:-5px;left:calc(50% - 5px);
  border-left:1px solid rgba(205,163,69,.75);border-top:1px solid rgba(205,163,69,.75);
}
.icw-label[data-tail="left"]::after{
  left:-5px;top:calc(50% - 5px);
  border-left:1px solid rgba(205,163,69,.75);border-bottom:1px solid rgba(205,163,69,.75);
}
.icw-label[data-tail="right"]::after{
  right:-5px;top:calc(50% - 5px);
  border-right:1px solid rgba(205,163,69,.75);border-top:1px solid rgba(205,163,69,.75);
}

.icw-dot{
  position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px rgba(19,19,19,.55);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.icw-dot.on{opacity:1;animation:icwPing .5s ease-out 1}

@keyframes icwBob{from{translate:0 0}to{translate:0 -3px}}
@keyframes icwPing{
  from{box-shadow:0 0 0 2px rgba(205,163,69,.7)}
  to{box-shadow:0 0 0 12px rgba(205,163,69,0)}
}

.icw-hint{
  position:absolute;right:.7rem;bottom:.6rem;
  font-family:var(--oswald);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(19,19,19,.55);
  border:1px solid rgba(19,19,19,.25);padding:.25rem .6rem;border-radius:2px;
  pointer-events:none;
}
.icw-loading{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--oswald);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:.85rem;color:#2b3947;padding:1rem;
}

/* the poster-state call to action, sitting on the stage itself */
.icw-cta{
  position:absolute;left:50%;bottom:10%;transform:translateX(-50%) translateY(6px);
  font-family:var(--oswald);font-weight:600;font-size:.9rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
  background:var(--gold);color:var(--ink);border:1px solid var(--ink);
  padding:.85rem 1.5rem;cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.icw-cta.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
            animation:icwBreathe 2.2s ease-out infinite}
.icw-cta:hover{background:#dcb356}
.icw-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes icwBreathe{
  from{box-shadow:0 0 0 0 rgba(205,163,69,.45)}
  to{box-shadow:0 0 0 14px rgba(205,163,69,0)}
}

/* ---------------- control panel ---------------- */
.icw-panel{padding:1.1rem 1.1rem 1.2rem;background:var(--ink)}

.icw-mode{display:flex;gap:0;border:1px solid var(--line-gold);width:max-content;max-width:100%;margin-bottom:1rem}
.icw-mode-btn{
  font-family:var(--oswald);font-weight:600;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem 1.1rem;cursor:pointer;
  background:transparent;border:0;color:var(--t-mut-dark);
  transition:background .18s ease,color .18s ease;
}
.icw-mode-btn[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.icw-mode-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* after a full run through the problem, point at the payoff */
.icw-mode-btn.nudge{animation:icwNudge .7s ease-out 3}
@keyframes icwNudge{
  0%{box-shadow:inset 0 0 0 0 rgba(205,163,69,0)}
  40%{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
  100%{box-shadow:inset 0 0 0 0 rgba(205,163,69,0)}
}

.icw-steps{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;
  margin:0 0 1rem;padding:0;
}
.icw-step{
  position:relative;overflow:hidden;
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:var(--ink-2);border:1px solid #2c2a24;color:var(--t-mut-dark);
  padding:.5rem .55rem;cursor:pointer;text-align:left;
  transition:border-color .18s ease,color .18s ease;
}
/* --p is set from JS while a stage plays, so the chips read as the timeline */
.icw-step::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;
}
.icw-step b{
  font-family:var(--oswald);font-weight:700;font-size:.95rem;color:var(--gold);
}
.icw-step span{
  font-family:var(--oswald);font-weight:500;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;
}
.icw-step:hover{border-color:var(--line-gold);color:var(--t-dark)}
.icw-step.on{border-color:var(--gold);color:#fff;background:#211f1a}
.icw-step:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

.icw-caption{min-height:5.2rem;margin-bottom:.9rem}
.icw-cap-title{
  font-family:var(--oswald);font-weight:600;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;margin:0 0 .3rem;max-width:none;
}
.icw-cap-body{color:var(--t-mut-dark);font-size:.97rem;line-height:1.6;margin:0;max-width:70ch}

.icw-ctl{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.icw-nav,.icw-play{
  font-family:var(--oswald);font-weight:600;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:.6rem 1.05rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.icw-nav{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.icw-nav:hover{border-color:var(--gold);color:var(--gold)}
.icw-nav:disabled{opacity:.35;cursor:default}
.icw-nav:disabled:hover{border-color:rgba(255,255,255,.35);color:#fff}
.icw-play{background:var(--gold);border:1px solid var(--gold);color:var(--ink)}
.icw-play:hover{background:#dcb356}
.icw-play.on{background:transparent;color:var(--gold)}
.icw-nav:focus-visible,.icw-play:focus-visible,.icw-mode-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:700px){
  .icw-steps{grid-template-columns:repeat(3,1fr)}
  .icw-caption{min-height:7.5rem}
  .icw-hint{display:none}
  /* one bubble at a time on a phone — a second one covers what it points at */
  .icw-label-in{max-width:130px;font-size:.62rem;padding:.34rem .5rem}
  .icw-label.secondary{display:none}
}
@media (prefers-reduced-motion:reduce){
  .icw-cta.on{animation:none}
  .icw-mode-btn.nudge{animation:none;box-shadow:inset 0 0 0 2px var(--gold)}
  .icw-label,.icw-dot{transition:none}
  .icw-label-in{animation:none;transform:none;transition:none}
  .icw-label.on .icw-label-in{transform:none}
  .icw-dot.on{animation:none}
}