/* Tangerine · Process Assembly — ported from tangerine-step-assembly/src/tg-steps.css.
   Renamed to the tg-assembly namespace (classes, --tga-* properties, tga* gradient
   ids and keyframes): the theme already has a .tg-steps component, and the
   source's bare .tg-line / .tg-head / .tg-mark would collide with anything.
   Every value and timing is the source's, unchanged. */
/* ==========================================================================
   Tangerine · Process Assembly

   Concept: every step sketches the next segment while filling the last one.

   Step 01 draws the crossbar outline. Step 02 fills that crossbar and draws
   the leftArm outline. And so on, so the mark is always one part planned and
   one part built, and it completes exactly on step 05, when the client gets
   the keys.

   A hairline marks a segment that is NOT built yet. The moment its segment
   settles, the hairline flashes and dissolves into it, so a built piece never
   carries an outline on its edge.

   Glow is a static drop-shadow on a piece that is already in place. No filter
   is ever animated, and no filter sits on anything whose geometry changes per
   frame, which is what keeps the drawing smooth.
   ========================================================================== */

.tg-assembly{
  --tga-bg:      #0C0A08;
  --tga-text:    #F5F2ED;
  --tga-dim:     #A39A8E;   /* was #7C746A: too faint to read (client review 11.1) */
  --tga-faint:   #4E4841;
  --tga-accent:  #FF5A1E;
  /* gold and flame both come straight from the Figma file, see the
     <linearGradient> defs in the markup */

  --tga-line-h:  70px;
  --tga-rise:    760ms;    /* heading words rise        */
  --tga-fade:    940ms;    /* a segment fades up        */
  --tga-draw:   1180ms;    /* one outline draws itself  */
  --tga-rim:    1500ms;    /* the light runs the borders */

  --tga-ease: cubic-bezier(.22, .68, .24, 1);  /* long calm decelerate */
  --tga-soft: cubic-bezier(.4,  0,   .2,  1);

  background:var(--tga-bg);
  padding:88px 100px;
  font-family:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow:hidden;
}

.tg-assembly__inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:48px;
}
.tg-assembly__copy{ flex:1 1 auto; min-width:0; }
.tg-assembly__mark{ flex:0 0 423px; }

/* --- step counter ------------------------------------------------------ */
.tg-assembly__idx{
  display:flex; align-items:baseline; gap:5px;
  font-size:14px; font-weight:600; letter-spacing:.16em;
  color:var(--tga-accent); margin:0 0 22px;
}
.tg-assembly__idx-n{ display:inline-block; transition:opacity 300ms linear; }
.tg-assembly__idx-sep, .tg-assembly__idx-t{ color:var(--tga-faint); }

/* ==========================================================================
   Heading: a masked rise, word by word
   ========================================================================== */
.tg-assembly__head{ position:relative; height:var(--tga-head-h, var(--tga-line-h)); overflow:hidden; }
/* assembly.js: a heading that would not fit on one line at this width */
.tg-assembly.is-wrap .tg-assembly__line{ white-space:normal; flex-wrap:wrap; }
.tg-assembly__line{
  position:absolute; left:0; top:0; width:100%;
  display:flex; flex-wrap:nowrap; gap:0 .26em;
  font-size:54px; line-height:var(--tga-line-h); font-weight:700;
  letter-spacing:-.015em; color:var(--tga-text);
  white-space:nowrap;
}
.tg-assembly__word{
  display:inline-block;
  transform:translateY(0); opacity:1;
  transition:transform var(--tga-rise) var(--tga-ease),
             opacity   calc(var(--tga-rise) * .55) linear;
  transition-delay:calc(var(--w, 0) * 40ms);
}
.tg-assembly__line.is-below .tg-assembly__word{ transform:translateY(108%); opacity:0; }
.tg-assembly__line.is-above .tg-assembly__word{ transform:translateY(-108%); opacity:0; }
.tg-assembly__line.no-anim .tg-assembly__word{ transition:none; }

/* --- subline: one quiet move, behind the heading ----------------------- */
.tg-assembly__sub{
  margin:16px 0 0; font-size:23px; line-height:36px;
  color:var(--tga-dim); max-width:34ch;
  transition:opacity 420ms linear, transform 560ms var(--tga-ease);
  transition-delay:120ms;
}
.tg-assembly__sub.is-out{ opacity:0; transform:translateY(12px); transition-delay:0ms; }

/* --- progress: real information, not decoration ------------------------ */
.tg-assembly__rail{
  position:relative; width:100%; max-width:430px; height:2px;
  margin-top:34px; background:#221F1C; overflow:hidden;
}
.tg-assembly__rail-fill{
  position:absolute; left:0; top:0; bottom:0; width:20%;
  background:linear-gradient(90deg, #EF8630, #DE4807);
  transition:width var(--tga-fade) var(--tga-ease);
}

/* ==========================================================================
   The monogram
   ========================================================================== */
.tg-assembly__mark svg{ display:block; width:563px; height:526px; margin:-70px; }

/* the outline of a segment that is planned but not yet built */
.tg-assembly__plan{
  fill:none; stroke:url(#tgaGold); stroke-width:1.4;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  opacity:0;
}
.tg-assembly__frag.is-planned .tg-assembly__plan{
  opacity:1; stroke-dashoffset:0;
  transition:stroke-dashoffset var(--tga-draw) var(--tga-soft),
             opacity 360ms linear;
}
/* built: the outline is gone and the fill speaks for itself */
.tg-assembly__frag.is-on .tg-assembly__plan{
  opacity:0; animation:none;
  transition:opacity 660ms linear 940ms;
}

/* a segment fades up in place, no travel */
.tg-assembly__piece{
  opacity:0;
  transform-box:fill-box; transform-origin:50% 50%;
  transition:opacity var(--tga-fade) var(--tga-soft);
}
.tg-assembly__frag.is-on .tg-assembly__piece{ opacity:1; }

/* every segment carries its own gradient, exactly as the mark does: the T is
   flame, the wing and keyBar are gold, the crossbar bridges the two */
.tg-assembly__frag[data-fragment="crossbar"] .tg-assembly__fill{ fill:url(#tgaCrossbar); }
.tg-assembly__frag[data-fragment="leftArm"]  .tg-assembly__fill{ fill:url(#tgaLeftArm);  }
.tg-assembly__frag[data-fragment="wing"]     .tg-assembly__fill{ fill:url(#tgaWing);     }
.tg-assembly__frag[data-fragment="keyBar"]   .tg-assembly__fill{ fill:url(#tgaKeyBar);   }

/* the glow sits on the leaf path, never on the group that gets scaled, so the
   blur is rasterised once instead of re-running on every frame of the seat.
   Each half of the mark glows in its own colour. */
.tg-assembly__frag.is-on .tg-assembly__fill{ filter:drop-shadow(0 0 24px rgba(239,134,48,.30)); }
.tg-assembly__frag[data-fragment="wing"].is-on   .tg-assembly__fill,
.tg-assembly__frag[data-fragment="keyBar"].is-on .tg-assembly__fill{
  filter:drop-shadow(0 0 24px rgba(223,190,97,.28));
}

/* the moment it fits, two things happen at once:
   the piece swells just past its outline and settles exactly onto it, and
   the outline lights up and dissolves into the piece that replaced it. */
.tg-assembly__frag.is-land .tg-assembly__piece{ animation:tgaSeat 620ms cubic-bezier(.22,.68,.24,1); }
/* the hot gold is swapped in wholesale rather than interpolated: CSS cannot
   tween between two url() paint servers */
.tg-assembly__frag.is-land .tg-assembly__plan{
  stroke:url(#tgaGoldHot);
  animation:tgaRegister 760ms cubic-bezier(.16,.7,.3,1);
}

@keyframes tgaSeat{
  0%   { transform:scale(1);     }
  34%  { transform:scale(1.055); }
  100% { transform:scale(1);     }
}

@keyframes tgaRegister{
  0%   { stroke-width:4.4; opacity:1; }
  20%  { stroke-width:3;   opacity:1; }
  100% { stroke-width:1.4; opacity:0; }
}

/* ==========================================================================
   Step 05 only: a light runs the borders of the finished mark

   Two stacked strokes, a wide soft one under a thin bright one, give the glow
   without a filter. The sweep is a short dash walked along each outline with
   stroke-dashoffset, staggered per segment so the light travels around the
   whole monogram rather than lighting all four at once. It passes once and
   leaves nothing behind, so a built segment still never carries an outline.
   ========================================================================== */
.tg-assembly__rim-w, .tg-assembly__rim{
  fill:none; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:74 99999; stroke-dashoffset:0;
  opacity:0; pointer-events:none;
}
.tg-assembly__rim-w{ stroke:url(#tgaGoldHot); stroke-width:9; stroke-opacity:.34; }
.tg-assembly__rim  { stroke:#FFF8E6;        stroke-width:2; }

.tg-assembly__frag.is-rim .tg-assembly__rim-w,
.tg-assembly__frag.is-rim .tg-assembly__rim{
  animation:tgaRim var(--tga-rim, 1500ms) linear var(--rd, 0ms);
}
@keyframes tgaRim{
  0%   { stroke-dashoffset:0; opacity:0; }
  9%   { opacity:1; }
  84%  { opacity:1; }
  100% { stroke-dashoffset:calc(var(--len) * -1); opacity:0; }
}

/* --- accessibility ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .tg-assembly__word{ transition:opacity 200ms linear; transform:none !important; }
  .tg-assembly__sub{ transition:opacity 200ms linear; transform:none; }
  .tg-assembly__sub.is-out{ transform:none; }
  .tg-assembly__piece{ transition:opacity 200ms linear; }
  .tg-assembly__frag.is-planned .tg-assembly__plan{ transition:opacity 200ms linear; }
  .tg-assembly__frag.is-land .tg-assembly__plan,
  .tg-assembly__frag.is-land .tg-assembly__piece{ animation:none; }
  .tg-assembly__rim-w, .tg-assembly__rim{ display:none; }
  .tg-assembly__rail-fill{ transition:none; }
}

/* --- responsive -------------------------------------------------------- */
@media (max-width:1100px){
  .tg-assembly{ padding:64px 40px; --tga-line-h:58px; }
  .tg-assembly__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .tg-assembly__line{ font-size:42px; line-height:var(--tga-line-h); white-space:normal; flex-wrap:wrap; }
  .tg-assembly__head{ height:var(--tga-head-h, auto); min-height:var(--tga-line-h); }
  /* the column stacks: let the copy take the full width rather than shrinking
     to the subline's 34ch, which wrapped every heading at 343px on a tablet */
  .tg-assembly__copy{ align-self:stretch; }
  .tg-assembly__sub{ font-size:20px; line-height:32px; }
  /* stacked, the desktop flex-basis of 423px is a height: size to the svg instead */
  .tg-assembly__mark{ align-self:center; flex:0 0 auto; }
  .tg-assembly__mark svg{ width:422px; height:394px; margin:-52px; }
}
/* phones: the 1100px step's 42px heading crowded a 393 screen (mobile type pass, 24 Oct) */
@media (max-width:767px){
  .tg-assembly{ --tga-line-h:44px; }
  .tg-assembly__line{ font-size:34px; }
}