/* ==========================================================================
   Tool reel -- two rows of tool cards drifting right to left, one card per
   ribbon / sketch tool, with the editor's own icons (src/icons.js).

   Built as a drop-in for the home page: it expects the home page's tokens
   (home.css on body.home-body) and the base icon styling (.icon-svg in
   styles.css). Motion lives in tool-reel.js, which only ever writes a
   transform on each strip and a --f ("focus", 0..1) on each card; every
   visual response to --f is opacity/transform so it stays on the compositor.
   ========================================================================== */

/* Same rhythm as the home page's other sections (84px + a top rule). */
.tool-reel{position:relative;padding:84px 0 88px;border-top:1px solid var(--border);}
.tool-reel-head{text-align:center;margin:0 auto 26px;max-width:960px;}
/* All caps gets a touch of positive tracking back (tight caps collide), and
   text-wrap:balance so a narrow screen never strands one word on line two. */
.tool-reel-head h2{text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;}
.tool-reel-head .features-sub{max-width:52ch;margin:0 auto;}

/* ---------- Rows ----------
   Full-bleed: as wide as the window, whatever container the section sits in.
   Divided by --page-zoom because vw is multiplied by the page zoom on big
   monitors (see page-zoom.js). */
.tool-reel-row{
  --tone:var(--accent);
  position:relative;
  width:calc(100vw / var(--page-zoom, 1));
  margin-left:calc(50% - 50vw / var(--page-zoom, 1));
}
.tool-reel-row[data-row="sketch"]{--tone:var(--accent-orange);margin-top:-12px;}

.tool-reel-viewport{
  position:relative;overflow:hidden;
  /* Room above/below for the lifted centre card and its glow, which would
     otherwise be clipped by overflow:hidden. */
  padding:14px 0 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
.tool-reel-viewport.is-dragging{cursor:grabbing;}
.tool-reel-strip{
  position:relative; /* card.offsetLeft is measured against this */
  display:flex;gap:12px;width:max-content;padding:0 6px;
  will-change:transform;
}

/* ---------- Card ----------
   Compact horizontal tile: the icon on the left, the tool's name and one
   short line beside it. */
.tr-card{
  --f:0;
  position:relative;flex:0 0 auto;
  width:220px;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px 10px 10px;border-radius:8px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--edge-light), var(--shadow-sm);
  /* Cards near the middle of the row rise and sharpen; the edges recede. */
  transform:translate3d(0, calc(var(--f) * -4px), 0) scale(calc(.95 + var(--f) * .06));
  opacity:calc(.5 + var(--f) * .5);
}
/* A toned outline that fades in with --f, so the centre card reads as in
   focus without touching the border colour (which would mean a style change
   per frame, not just opacity). Deliberately no glow. */
.tr-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:var(--f);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent);
}
.tr-card > *{position:relative;z-index:1;}

.tr-icon{
  position:relative;
  width:40px;height:40px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--tone);
  background:linear-gradient(140deg, color-mix(in srgb, var(--tone) 22%, transparent), color-mix(in srgb, var(--tone) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--tone) 22%, transparent);
  box-shadow:var(--edge-light);
}
/* Brighter tile for the focused card, again via opacity only. */
.tr-icon::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:var(--f);
  background:linear-gradient(140deg, color-mix(in srgb, var(--tone) 40%, transparent), color-mix(in srgb, var(--tone) 14%, transparent));
}
.tr-icon i{position:relative;display:block;width:22px;height:22px;}
.tr-icon .icon-svg{stroke-width:1.8;overflow:visible;}

.tr-text{min-width:0;}
.tr-name{
  font-family:var(--font-display);font-size:14px;font-weight:650;letter-spacing:-.008em;line-height:1.25;
  color:var(--text-0);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tr-desc{
  font-size:12px;line-height:1.38;color:var(--text-1);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* CoreShape AI: the one tool that gets both brand colours. */
.tr-card.tr-ai .tr-icon{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--accent-orange)) 60%, var(--accent-orange) 100%);
}
.tr-card.tr-ai .tr-icon::before{background:none;}

/* Hover is handled in tool-reel.js, not with :hover here: the row eases to a
   stop and the card under the pointer eases up to full focus, both in the
   same animation loop, so nothing snaps. */

/* ---------- Icon "draw-on" for the card passing through the centre ----------
   tool-reel.js gives every stroked shape pathLength=1 and the .tr-draw class,
   so one keyframe traces any icon regardless of its geometry. Dashed strokes
   (construction lines, reference planes) are left alone so they keep their
   dashes; filled dots pop in after the strokes. */
.tr-card.is-active .tr-icon .tr-draw{animation:tr-draw 1.05s cubic-bezier(.65,0,.35,1) both;}
.tr-card.is-active .tr-icon .tr-dot{animation:tr-pop .45s .55s cubic-bezier(.34,1.56,.64,1) both;}
.tr-icon .tr-dot{transform-box:fill-box;transform-origin:center;}
@keyframes tr-draw{
  from{stroke-dasharray:1 1;stroke-dashoffset:1;}
  to{stroke-dasharray:1 1;stroke-dashoffset:0;}
}
@keyframes tr-pop{from{transform:scale(0);}to{transform:scale(1);}}

/* ---------- Narrow screens ---------- */
@media (max-width: 640px){
  .tool-reel{padding:64px 0 72px;}
  .tr-card{width:204px;gap:10px;padding:9px 12px 9px 9px;}
  .tool-reel-viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* ---------- Reduced motion ----------
   No drifting: each row becomes a plain swipeable list at full focus, and
   tool-reel.js skips the animation loop and the duplicate cards entirely. */
@media (prefers-reduced-motion: reduce){
  .tool-reel-viewport{overflow-x:auto;cursor:auto;scroll-snap-type:x proximity;scrollbar-width:none;}
  .tool-reel-viewport::-webkit-scrollbar{display:none;}
  .tool-reel-strip{will-change:auto;padding:0 max(24px, 8vw);}
  .tr-card{--f:1 !important;scroll-snap-align:center;transition:none;}
  /* Every card is at full focus here, so drop the outline to a hint --
     a whole row of outlined cards reads as noise, not emphasis. */
  .tr-card::after{opacity:.3;}
  .tr-card[aria-hidden="true"]{display:none;}
  .tr-card.is-active .tr-icon .tr-draw,
  .tr-card.is-active .tr-icon .tr-dot{animation:none;}
}