/* logo-reveal.css — the animated Craftik logo, shared by craftik.bd and
   office.craftik.bd.

   SOURCE: Hosted_Webpages/brand/logo-reveal.css. tools/build_logo.py copies it
   into each site and injects the rigged SVG it animates; the copies in the
   webroots are overwritten on every build, so edit this one.

   Each site decides only three things, in its own stylesheet:
     --lg-t0     when the sequence starts (0s = the squirrel's tail at 0.70s).
                 Every delay below is calc(var(--lg-t0) + …), so one number
                 shifts the whole reveal; craftik.bd leaves it at 0 to make room
                 for its curtain, the office pulls it earlier.
     width       of .logo
     what else   happens around it (flashes, text rising after the name)

   Rig: each <g> owns at most ONE transform animation, so an entrance and an
   idle loop never overwrite each other:
     .lg-squirrel  breathe (idle)          .lg-lean     wind-up + flick
     .lg-*-in      each part's entrance    .lg-tail-sway / .lg-blink  idle
     .lg-arm-work > .lg-arm-in > … > .lg-tool-twirl > .lg-tool-work > .lg-tool-in
   Story: the squirrel assembles, rocks back, flicks its pencil nose, and the
   nib writes "raftik"; the letters land one after another along the line
   (delays computed by the build script from the letter positions). */

.logo {
  /* exactly the colours in brand/craftik-logo.svg — do not "adjust" these */
  --c-body:  #603500;
  --c-belly: #E1B580;
  --c-ink:   #000000;
  --c-steel: #888888;
  --c-ear:   #9A0202;
  --c-light: #FFFFFF;
  --c-type:  #603500;
  --c-dot:   #603500;

  display: block;
  height: auto;
  aspect-ratio: 3708 / 1260;
  overflow: visible;
}

.c-body  { fill: var(--c-body); }
.c-belly { fill: var(--c-belly); }
.c-ink   { fill: var(--c-ink); }
.c-steel { fill: var(--c-steel); }
.c-ear   { fill: var(--c-ear); }
.c-light { fill: var(--c-light); }
.c-type  { fill: var(--c-type); }
.c-dot   { fill: var(--c-dot); }

/* the notch backing gets a same-colour stroke: two abutting same-colour edges
   leave a hairline anti-aliasing seam, which showed while the arm was moving.
   The stroke sits under the body, face and arm, so at rest it can't be seen. */
.lg-backing { stroke: var(--c-body); stroke-width: 8; stroke-linejoin: round; }

/* every origin below is a % of the element's own box */
.logo g, .logo circle, .logo ellipse, .logo rect { transform-box: fill-box; }

/* ---- warm light the squirrel stands in ---- */

.lg-glow {
  opacity: 0;
  animation: glow-in 1.2s ease-out calc(var(--lg-t0, 0s) + .85s) forwards,
             glow-pulse 6s ease-in-out calc(var(--lg-t0, 0s) + 3.6s) infinite;
}

/* ---- act 1: the squirrel assembles (0.70s - 1.55s) ---- */

.lg-tail-in {
  transform-origin: 95% 62%;
  animation: tail-in 1s cubic-bezier(.22, 1.3, .36, 1) calc(var(--lg-t0, 0s) + .70s) both;
}
.lg-body-in {
  transform-origin: 30% 95%;
  animation: body-in .85s cubic-bezier(.2, 1.4, .4, 1) calc(var(--lg-t0, 0s) + .82s) both;
}
.lg-face-in {
  transform-origin: 0% 100%;
  animation: face-in .6s cubic-bezier(.2, 1.3, .4, 1) calc(var(--lg-t0, 0s) + 1.08s) both;
}
.lg-arm-in {
  transform-origin: 28.2% 2%;          /* shoulder */
  animation: pop-in .5s cubic-bezier(.2, 1.5, .4, 1) calc(var(--lg-t0, 0s) + 1.16s) both;
}
/* the wrench spins into the fist, a turn and a half, and settles with a kick */
.lg-tool-in {
  transform-origin: 47% 57.1%;         /* grip */
  animation: tool-in .9s cubic-bezier(.25, .8, .35, 1) calc(var(--lg-t0, 0s) + 1.18s) both;
}
.lg-ear-in {
  transform-origin: 100% 100%;
  animation: ear-in .65s cubic-bezier(.2, 1.6, .4, 1) calc(var(--lg-t0, 0s) + 1.20s) both;
}
.lg-nib-in {
  transform-origin: 20% 60%;
  animation: pop-in .45s cubic-bezier(.2, 1.8, .4, 1) calc(var(--lg-t0, 0s) + 1.40s) both;
}
.lg-eye-in {
  transform-origin: 50% 50%;
  animation: eye-open .38s cubic-bezier(.3, 1.4, .5, 1) calc(var(--lg-t0, 0s) + 1.50s) both;
}

/* ---- act 2: wind-up and flick (1.55s - 2.55s) ---- */

.lg-lean {
  transform-origin: 40% 100%;
  animation: lean 1s cubic-bezier(.45, 0, .3, 1) calc(var(--lg-t0, 0s) + 1.55s) both;
}

/* ---- act 3: the name writes itself (1.95s - 3.05s) ---- */

.lg-l {
  transform-origin: 50% 100%;
  animation: ink-in .62s cubic-bezier(.25, .8, .35, 1) calc(var(--lg-t0, 0s) + 1.95s + var(--t)) both;
}

/* ---- act 4: the dot drops, the page flashes (2.95s - 3.7s) ---- */

.lg-tittle {
  transform-origin: 50% 100%;
  animation: tittle-drop .75s cubic-bezier(.3, .7, .4, 1) calc(var(--lg-t0, 0s) + 2.95s) both;
}
.lg-ping {
  fill: none;
  stroke: var(--c-dot);
  stroke-width: 8;
  opacity: 0;
  transform-origin: 50% 50%;
  /* forwards, not both: the first keyframe is visible, so backwards-fill would
     park a ring beside the logo for the whole build */
  animation: ping 1.4s cubic-bezier(.16, .8, .3, 1) calc(var(--lg-t0, 0s) + 3.36s) forwards,
             ping-idle 5s cubic-bezier(.16, .8, .3, 1) calc(var(--lg-t0, 0s) + 6.5s) infinite;
}

/* ---- idle life (from ~3.6s, forever) ---- */

.lg-squirrel {
  transform-origin: 40% 100%;
  animation: breathe 4.6s ease-in-out calc(var(--lg-t0, 0s) + 3.6s) infinite;
}
.lg-tail-sway {
  transform-origin: 95% 62%;
  animation: tail-sway 3.4s ease-in-out calc(var(--lg-t0, 0s) + 3.7s) infinite;
}
.lg-blink {
  transform-origin: 50% 50%;
  animation: blink 6s ease-in-out calc(var(--lg-t0, 0s) + 4.2s) infinite;
}

/* the wrench at work. Pivots were measured with getBBox() (tools/filmstrip.mjs
   EVAL) and are % of each group's own box: 28.2% 2% is the shoulder, 44.3%
   58.8% is the grip. The fist, wrench and glint share one 2.4s clock, so the
   pull, the hold, the snap-back and the glint land together. */
.lg-arm-work {
  transform-origin: 28.2% 2%;
  animation: fist-work 2.4s ease-in-out calc(var(--lg-t0, 0s) + 3.8s) infinite;
}
.lg-tool-work {
  transform-origin: 44.3% 58.8%;
  animation: ratchet 2.4s ease-in-out calc(var(--lg-t0, 0s) + 3.8s) infinite;
}
.lg-tool-glint {
  fill: #FFF3D6;
  stroke: #E77A19;
  stroke-width: 8;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: glint 2.4s ease-out calc(var(--lg-t0, 0s) + 3.8s) infinite;
}
/* and every 14s it shows off: a full twirl round the grip */
.lg-tool-twirl {
  transform-origin: 44.3% 58.8%;
  animation: twirl 14s ease-in-out calc(var(--lg-t0, 0s) + 6.5s) infinite;
}

/* tap the squirrel: it flicks its tail, blinks at you, and twirls the wrench (app.js) */
.logo.is-poked .lg-tail-sway  { animation: tail-flick .7s cubic-bezier(.3, 1.5, .4, 1); }
.logo.is-poked .lg-blink      { animation: blink-once .35s ease-in-out; }
.logo.is-poked .lg-tool-twirl { animation: twirl-once .7s cubic-bezier(.3, 1.25, .4, 1); }

@keyframes glow-in    { to { opacity: 1; } }
@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}
@keyframes tail-in {
  0%   { opacity: 0; transform: rotate(-75deg) scale(.35); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes body-in {
  0%   { opacity: 0; transform: scale(.25) rotate(-8deg); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes face-in {
  0%   { opacity: 0; transform: translate(-160px, 120px) scale(.6); }
  100% { opacity: 1; transform: none; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tool-in {
  0%   { opacity: 0; transform: rotate(-540deg) scale(.2); }
  30%  { opacity: 1; }
  80%  { transform: rotate(14deg) scale(1.08); }
  100% { opacity: 1; transform: none; }
}
/* pull the wrench through, hold, snap back for the next bite */
@keyframes ratchet {
  0%        { transform: rotate(0deg); }
  38%, 46%  { transform: rotate(16deg); }
  56%       { transform: rotate(-3deg); }
  64%, 100% { transform: rotate(0deg); }
}
@keyframes fist-work {
  0%        { transform: rotate(0deg); }
  38%, 46%  { transform: rotate(4deg); }
  56%       { transform: rotate(-1deg); }
  64%, 100% { transform: rotate(0deg); }
}
/* the jaw catches the light at the end of each pull */
@keyframes glint {
  0%, 34%   { opacity: 0;   transform: scale(.3); }
  40%       { opacity: .95; transform: scale(1); }
  54%, 100% { opacity: 0;   transform: scale(2.2); }
}
/* 360deg at the end equals 0deg at the restart, so the loop is seamless */
@keyframes twirl {
  0%        { transform: rotate(0deg); }
  6%        { transform: rotate(385deg); }
  9%        { transform: rotate(352deg); }
  12%, 100% { transform: rotate(360deg); }
}
@keyframes twirl-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ear-in {
  0%   { opacity: 0; transform: rotate(-50deg) scale(0); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes eye-open {
  0%   { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}
/* rock back, then flick the nose forward as the writing starts (~1.97s) */
@keyframes lean {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-5deg); }
  42%  { transform: rotate(3.5deg) translateX(18px); }
  70%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ink-in {
  0%   { opacity: 0; transform: translateY(140px) scale(.7, .2); }
  45%  { opacity: 1; transform: translateY(-30px) scale(.94, 1.12); }
  75%  { transform: translateY(6px) scale(1.04, .96); }
  100% { opacity: 1; transform: none; }
}
/* the dot falls, squashes on impact (~3.36s), bounces once */
@keyframes tittle-drop {
  0%   { opacity: 0; transform: translateY(-520px) scale(.5); }
  30%  { opacity: 1; }
  55%  { transform: translateY(0) scale(1.25, .72); }
  72%  { transform: translateY(-70px) scale(.94, 1.08); }
  86%  { transform: translateY(0) scale(1.06, .94); }
  100% { opacity: 1; transform: none; }
}
@keyframes ping {
  0%   { opacity: .9; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(4.2); }
}
@keyframes ping-idle {
  0%   { opacity: .55; transform: scale(.6); }
  30%  { opacity: 0;   transform: scale(3); }
  100% { opacity: 0;   transform: scale(3); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018, 1.028); }
}
@keyframes tail-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}
/* a double blink, every six seconds */
@keyframes blink {
  0%, 90%, 94%, 98%, 100% { transform: scaleY(1); }
  92%, 96%                { transform: scaleY(.08); }
}
@keyframes tail-flick {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-16deg); }
  60%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
@keyframes blink-once {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.08); }
}


/* reduced motion: show the finished logo, still. Specific enough to beat a
   site-wide `* { animation-duration: .001ms !important }` rule (the office
   has one), which would otherwise hold every part invisible for its delay. */
@media (prefers-reduced-motion: reduce) {
  .logo g, .logo circle, .logo ellipse, .logo rect {
    animation: none !important;
    transition: none !important;
  }
  .lg-ping, .lg-tool-glint { display: none; }
  .lg-glow { opacity: 1; }
}