/* The wait on /griptok/ (live; /preview/griptok/ keeps its own copy) (griptok-wait.js): the name as bubble letters over the 3D view (.gtw, on
   #waitFx) and the timeline in the progress card (.gtwl, on #waitLine). On top of shop.css and its tokens
   (green as text = --green-ink). Only transform and opacity move, and the letters' colour; ?motion=0 is
   shop.css's .nomotion rule (everything still), and prefers-reduced-motion keeps the fades and the colour
   but drops every movement (the block at the end). */

/* ---------- over the 3D view ---------- */
.gtw{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 7.6 16.4 11 24 12C16.4 13 13 16.4 12 24C11 16.4 7.6 13 0 12C7.6 11 11 7.6 12 0Z'/%3E%3C/svg%3E");
  position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  pointer-events:none;contain:layout paint;-webkit-user-select:none;user-select:none}
/* a milky veil, brightest behind the name: the turning topper (and an older design on it) stays in view,
   softened. No backdrop blur: re-blurring the turning 3D every frame starved slower machines. */
.gtw::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#ffffffeb,#f4f6faca 55%,#e9edf4e0);
  transition:opacity .4s var(--ease);animation:gtwin .3s var(--ease) backwards}
.gtw-glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#ffffffc2,#ffffff6b 50%,#fff0);
  transition:opacity .3s;animation:gtwglow 3.4s ease-in-out infinite}
.gtw-name{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1;white-space:nowrap}
.gtw-name>.gtw-ln{animation:gtwfloat 4.2s ease-in-out infinite}
.gtw-name>.gtw-ln:nth-child(2n){animation-delay:-2.1s}
.gtw-ln{display:flex;align-items:center;gap:.38em;height:calc(var(--p,1) * 1em)}
.gtw-w{display:flex;gap:.05em}
.gtw-l{position:relative;display:block}
/* A letter is sketched, then inked (ยู, 2026-10-14): its outline (.gtw-o, an SVG of the same glyph in a
   deeper shade of the emblem's colour) and its ink (.gtw-g, the glyph filled with a soft gradient of the
   emblem's colour, revealed from the bottom up by its clip). Both tilted alike (--r).
     queued     the outline as a faint dashed line, marching: waiting to be drawn; no ink
     drawing    a pen draws the outline row by row (griptok-wait.js pen()), then the ink rises -- slowly,
                most of the way, while the picture is being drawn
     checking   the ink fills up, and a green light goes along the outlines, letter by letter
     redrawing  the ink drains away; then (.ink) it rises again
     building / done  full -- and the letters melt into the picture (melt()) */
.gtw-g{position:relative;display:block;color:transparent;
  font-family:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','Varela Round',system-ui,sans-serif;font-weight:800;
  background:linear-gradient(180deg,var(--gtw-light) 0%,var(--gtw-fill) 46%,var(--gtw-deep) 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 .05em .05em #0f172a33);transform:rotate(var(--r,0deg));
  clip-path:inset(100% -10% -10% -10%);transition:clip-path .5s var(--ease) calc(var(--i,0) * 30ms)}
/* the display font has a single weight: asked for bold it would be thickened by the browser */
.gtw.wf .gtw-g,.gtw.wf .gtw-o text{font-family:'GT Bubble',ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','Varela Round',system-ui,sans-serif;font-weight:400}
.gtw-o{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(var(--r,0deg))}
.gtw-o text{fill:none;stroke:var(--gtw-deep);stroke-width:.05;stroke-linejoin:round;stroke-linecap:round;
  font-family:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','Varela Round',system-ui,sans-serif;font-weight:800;
  stroke-dasharray:.07 .055;opacity:.5;animation:gtwmarch 1.6s linear infinite;transition:opacity .4s}
.gtw[data-k=drawing] .gtw-o text,.gtw[data-k=redrawing] .gtw-o text,.gtw[data-k=checking] .gtw-o text,
.gtw[data-k=building] .gtw-o text,.gtw[data-k=done] .gtw-o text,.gtw[data-k=failed] .gtw-o text{opacity:1}
.gtw[data-k=drawing] .gtw-o text{stroke-dasharray:8;stroke-dashoffset:8;animation:gtwdraw var(--draw,2.4s) cubic-bezier(.45,.05,.3,1) var(--dd,0ms) forwards}
.gtw[data-k=redrawing] .gtw-o text,.gtw[data-k=building] .gtw-o text,.gtw[data-k=done] .gtw-o text,.gtw[data-k=failed] .gtw-o text{stroke-dasharray:none;animation:none}
.gtw[data-k=checking] .gtw-o text{stroke-dasharray:none;animation:gtwchk var(--scan,2.6s) linear var(--sd,0ms) infinite}
/* the ink: most of the way up while drawing (after the outline is in), full from the check on, gone for a redraw */
.gtw[data-k=drawing] .gtw-g{clip-path:inset(30% -10% -10% -10%);transition:clip-path 11s cubic-bezier(.15,.6,.3,1) calc(var(--draw,2.4s) * .8 + var(--i,0) * 40ms)}
.gtw[data-k=redrawing].ink .gtw-g{clip-path:inset(30% -10% -10% -10%);transition:clip-path 9s cubic-bezier(.15,.6,.3,1) calc(var(--i,0) * 40ms)}
.gtw[data-k=checking] .gtw-g,.gtw[data-k=building] .gtw-g,.gtw[data-k=done] .gtw-g{clip-path:inset(-10%);transition:clip-path .9s var(--ease) calc(var(--i,0) * 30ms)}
.gtw[data-k=failed] .gtw-g{transition:none}
/* the pen drawing the outline: a bright dot with a glow and a little star */
.gtw-pen{position:absolute;z-index:3;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0 28%,#22c55e66 45%,#22c55e00)}
.gtw-pen::after{content:'';position:absolute;inset:3px;background:#fff;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;animation:gtwspin 1.2s linear infinite}
/* the spelling check: each letter lifts a little as the green light reaches it */
.gtw[data-k=checking]:not(.pop):not(.out) .gtw-l{animation:gtwlift var(--scan,2.6s) ease-in-out var(--sd,0ms) infinite}
/* in: one by one (--stag apart), out: a quick burst away from the middle, the last gone within 0.6 s */
.gtw.pop .gtw-l{animation:gtwpop .56s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * var(--stag,60ms)) backwards}
.gtw.out .gtw-l{animation:gtwout .4s cubic-bezier(.23,1,.32,1) calc(var(--i,0) * var(--ostag,8ms)) forwards}
.gtw.out::before{opacity:0}
.gtw.out .gtw-glow{animation:gtwglowout .4s cubic-bezier(.23,1,.32,1) forwards}
.gtw.out .gtw-sp{animation:gtwspout .36s cubic-bezier(.23,1,.32,1) forwards}
/* the melt into the finished design (griptok-wait.js melt(), run by the Web Animations API): the veil
   lifts, the letters stop bobbing and checking so their pull inward reads clean, and the drawn emblem
   (.gtw-pic, the emblem's colour on nothing) comes up in their place and lies down onto the disc */
.gtw.melt::before{opacity:0;transition-duration:.6s}
.gtw.melt .gtw-o text{animation:none}
.gtw-pic{position:absolute;z-index:2;display:block;max-width:none;pointer-events:none;will-change:transform,opacity;
  filter:drop-shadow(0 8px 14px #0f172a2e);-webkit-user-drag:none;user-select:none}
/* four-point sparkles like the ones drawn round the lettering */
.gtw-sps{position:absolute;z-index:2;inset:0;transition:opacity .3s}
.gtw-sp{position:absolute;display:block;background:var(--c,#22c55e);opacity:.85;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  animation:gtwtw var(--t,2.2s) ease-in-out var(--d,0s) infinite}
/* failed: everything comes to rest where it is, dimmed, while the page says why; it leaves with a plain
   fade, never the burst a finished design gets */
.gtw[data-k=failed] .gtw-g{animation-play-state:paused}
.gtw[data-k=failed] .gtw-name{opacity:.4;transition:opacity .4s var(--ease)}
.gtw[data-k=failed] .gtw-sps,.gtw[data-k=failed] .gtw-glow{opacity:0}
.gtw[data-k=failed].out .gtw-l{animation:gtwfadeout .25s ease-out forwards}
/* griptok-wait.js measures each letter here, unturned */
.gtw-probe{position:absolute;left:0;top:0;display:flex;visibility:hidden;font-size:100px;line-height:1;white-space:nowrap}
.gtw-probe .gtw-g{animation:none;transform:none;transition:none;clip-path:none}

@keyframes gtwin{from{opacity:0}}
@keyframes gtwpop{0%{opacity:0;transform:translateY(.3em) scale(.45)}55%{opacity:1;transform:translateY(-.06em) scale(1.1)}
  78%{transform:translateY(.015em) scale(.97)}to{transform:none}}
@keyframes gtwfloat{0%,100%{transform:translateY(-.03em)}50%{transform:translateY(.04em)}}
@keyframes gtwmarch{to{stroke-dashoffset:-.25}}
@keyframes gtwdraw{to{stroke-dashoffset:0}}
@keyframes gtwchk{0%,18%,100%{stroke:var(--gtw-deep);stroke-width:.05}6%{stroke:#22c55e;stroke-width:.075}}
@keyframes gtwlift{0%,18%,100%{transform:none}7%{transform:translateY(-.08em) scale(1.08)}}
@keyframes gtwglow{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
@keyframes gtwtw{0%,100%{opacity:.2;transform:scale(.45) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes gtwout{to{opacity:0;transform:translate(var(--dx,0),var(--dy,-.2em)) scale(1.4)}}
@keyframes gtwglowout{to{opacity:0;transform:scale(1.3)}}
@keyframes gtwspout{to{opacity:0;transform:scale(1.8) rotate(60deg)}}

/* ---------- the timeline, in the progress card ---------- */
.gtwl{display:flex;flex-direction:column;gap:10px}
.gtwl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.gtwl-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
/* the path from the step before, green as far as the work has got */
.gtwl-steps li+li::before{content:'';position:absolute;top:13px;right:calc(50% + 19px);width:calc(100% - 38px);height:2px;
  border-radius:1px;background:var(--line);transition:background .3s}
.gtwl-steps li.is-done::before,.gtwl-steps li.is-cur::before,.gtwl-steps li.is-fail::before{background:var(--blue)}
.gtwl-ic{position:relative;width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#0f172a0d;color:var(--ink4);transition:background .25s,color .25s}
.gtwl-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gtwl-steps li.is-done .gtwl-ic{background:var(--blue);color:var(--on-accent)}
.gtwl-steps li.is-cur .gtwl-ic{background:#dcfce7;color:var(--green-ink)}
/* the step being worked on: a ring going round it, its icon nodding */
.gtwl-steps li.is-cur .gtwl-ic::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--blue);border-right-color:var(--blue);animation:gtwspin .9s linear infinite}
.gtwl-steps li.is-cur .gtwl-ic svg{animation:gtwnod 1.6s ease-in-out infinite}
.gtwl-steps li.is-fail .gtwl-ic{background:#fef2f2;color:var(--red)}
/* two lines kept for every label, so a longer one (วาดใหม่ให้ฟรี on a narrow phone) moves nothing */
.gtwl-lb{min-height:2.7em;font-size:12px;font-weight:600;line-height:1.35;color:var(--ink4);text-wrap:balance}
.gtwl-steps li.is-done .gtwl-lb{color:var(--ink2)}
.gtwl-steps li.is-cur .gtwl-lb{color:var(--ink)}
.gtwl-steps li.is-redo .gtwl-lb{color:var(--green-ink)}
.gtwl-steps li.is-fail .gtwl-lb{color:var(--red)}
.gtwl-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gtwl-say{min-width:0;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink2)}
.gtwl-sec{flex:none;font-size:12px;line-height:1.5;color:var(--ink4);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the tip: two lines' room whatever its length, so the card under it never jumps */
.gtwl-tip{display:flex;align-items:flex-start;gap:8px;min-height:calc(3.1em + 18px);margin:0;padding:9px 11px;border-radius:12px;
  background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);font-size:12px;line-height:1.55;color:var(--ink3)}
.gtwl-tip svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gtwl-tip span{display:block;min-width:0;animation:gtwtip .35s var(--ease) backwards}

@keyframes gtwspin{to{transform:rotate(1turn)}}
@keyframes gtwnod{0%,100%{transform:none}50%{transform:translateY(-1.5px) rotate(-8deg)}}
@keyframes gtwtip{from{opacity:0;transform:translateY(5px)}}
@keyframes gtwfade{from{opacity:0}}
@keyframes gtwfadeout{to{opacity:0}}

/* reduced motion: nothing moves -- the letters fade in and out where they stand, the outline is simply
   there (no marching, no drawing, no light going along it), the ink still comes in, the timeline and the
   tips still change */
@media (prefers-reduced-motion:reduce){
  .gtw-glow,.gtw-sp,.gtw-name>.gtw-ln,.gtw-o text,.gtw[data-k=checking]:not(.pop):not(.out) .gtw-l,
  .gtw[data-k=drawing] .gtw-o text,.gtw[data-k=checking] .gtw-o text,
  .gtwl-steps li.is-cur .gtwl-ic::after,.gtwl-steps li.is-cur .gtwl-ic svg{animation:none}
  .gtw-o text{stroke-dasharray:none;stroke-dashoffset:0}
  .gtw-pen{display:none}
  .gtw-g,.gtw[data-k=drawing] .gtw-g,.gtw[data-k=redrawing].ink .gtw-g,.gtw[data-k=checking] .gtw-g{transition-delay:0s;transition-duration:.6s}
  .gtw.pop .gtw-l{animation:gtwfade .3s ease-out backwards}
  .gtw.out .gtw-l,.gtw.out .gtw-glow,.gtw.out .gtw-sp{animation:gtwfadeout .2s ease-out forwards}
  .gtwl-tip span{animation:gtwfade .3s ease-out backwards}
}