/* ─────────────────────────────────────────────────────────────
   Flip-clock pieces that go with the N2 "Flip clock" mark.
   Everything here is illustration + motion; the logo file itself is /img/mark.svg.
     .bm          header logo: base <img> + two flaps that flip once on load (CSS only)
     .sf          one split-flap card (top half, bottom half, falling flap, landing flap)
     .flipclock   cards + colon, e.g. the 4:00 in "Why Off By Four?"
     .board       a row of letter cards (success / deposit messages)
     .num.flip    step numbers 01 02 03 04
     .lf          departure-board letters in a headline word
   Markup tagged <!-- MARK-ILLUSTRATION --> uses these. Static HTML always shows the
   final state; main.js only animates when <html> has .motion (no reduced motion, JS on).
   ───────────────────────────────────────────────────────────── */

/* Header logo ----------------------------------------------------
   On load the card starts blank and flips to the 4, like a split-flap:
   .bm-ft blank top falls, .bm-fb (the logo's bottom half) lands over .bm-ob (blank bottom).
   .bm-hv is the logo's top half, used for the small flick on hover. All hidden at rest. */
.bm{position:relative;display:block;width:1.6rem;height:1.6rem;flex:none;perspective:4rem}
.bm img{display:block;width:100%;height:100%}
.bm-ft,.bm-fb,.bm-ob,.bm-hv{position:absolute;left:0;right:0;height:50%;pointer-events:none;backface-visibility:hidden;visibility:hidden}
.bm-ft,.bm-hv{top:0;transform-origin:50% 100%}
.bm-fb,.bm-ob{bottom:0;transform-origin:50% 0}
.bm-fb,.bm-hv{background:url(/img/mark.svg) no-repeat;background-size:100% 200%}
.bm-fb{background-position:0 100%}
.bm-hv{background-position:0 0}
/* blank card halves, drawn to the mark's tile (x 9-55, y 5-59 of 64, seam at 31-33.4) */
.bm-ft::before,.bm-ob::before{content:"";position:absolute;left:14.06%;right:14.06%;background:#141414}
.bm-ft::before{top:15.6%;bottom:3.1%;border-radius:22% 22% 0 0/30% 30% 0 0}
.bm-ob::before{top:4.4%;bottom:15.6%;border-radius:0 0 22% 22%/0 0 30% 30%}

/* Split-flap card ------------------------------------------------- */
.sf{--sf-bg:var(--ink);--sf-fg:var(--paper);--r:.11em;--gap:.045em;--ft:140ms;
  position:relative;display:inline-block;flex:none;width:.78em;height:1.06em;font-family:var(--block);font-weight:400;
  line-height:1.06em;text-align:center;color:var(--sf-fg);perspective:3.2em;vertical-align:middle;letter-spacing:0}
.sf-t,.sf-b,.sf-ft,.sf-fb{position:absolute;left:0;right:0;height:calc(50% - var(--gap)/2);overflow:hidden;background:var(--sf-bg)}
.sf-t,.sf-ft{top:0;border-radius:var(--r) var(--r) .02em .02em}
.sf-b,.sf-fb{bottom:0;border-radius:.02em .02em var(--r) var(--r)}
.sf b{position:absolute;left:0;right:0;height:calc(200% + var(--gap));font-weight:400;font-size:.72em}
.sf-t b,.sf-ft b{top:0}
.sf-b b,.sf-fb b{bottom:0}
.sf-ft,.sf-fb{visibility:hidden;backface-visibility:hidden}
.sf-ft{transform-origin:50% 100%}
.sf-fb{transform-origin:50% 0;transform:rotateX(90deg)}
.sf-ft::after,.sf-fb::after{content:"";position:absolute;inset:0;pointer-events:none}
.sf-ft::after{background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 85%);opacity:0}
.sf-fb::after{background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 85%)}
/* red hinge tabs, as on the mark */
.sf.hinge::before,.sf.hinge::after{content:"";position:absolute;z-index:2;top:50%;width:.085em;height:.19em;margin-top:-.095em;background:var(--red);border-radius:.03em}
.sf.hinge::before{left:-.05em}
.sf.hinge::after{right:-.05em}
.sf.blank b{visibility:hidden}
/* Mechanical card look: a faint sheen on the top flap, a shade toward the hinge on the bottom,
   a fine dot screen (halftone) on the dark stock, a hairline shadow under the card, and two hinge pins. */
.sf-t,.sf-ft{background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 65%,rgba(0,0,0,.12)),radial-gradient(rgba(255,255,255,.055) .45px,transparent .8px);background-size:auto,3px 3px}
.sf-b,.sf-fb{background-image:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0) 30%,rgba(0,0,0,.14)),radial-gradient(rgba(255,255,255,.055) .45px,transparent .8px);background-size:auto,3px 3px;
  box-shadow:0 .035em .05em -.01em rgba(20,20,20,.35)}
.sf b{text-shadow:0 0 .02em rgba(0,0,0,.25)}
.sf:not(.hinge)::before,.sf:not(.hinge)::after{content:"";position:absolute;z-index:3;top:50%;width:.07em;height:.07em;margin-top:-.035em;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#B8B1A3,#5E594F 70%);pointer-events:none}
.sf:not(.hinge)::before{left:.035em}
.sf:not(.hinge)::after{right:.035em}
.sf-sp{display:inline-block;width:.32em;flex:none}

.flipclock{display:inline-flex;align-items:center;gap:.16em;line-height:1}
.colon{display:inline-flex;flex-direction:column;gap:.24em;margin:0 .02em}
.colon i{display:block;width:.11em;height:.11em;border-radius:50%;background:currentColor}

.board{display:flex;flex-wrap:wrap;justify-content:center;gap:.12em .32em;font-family:var(--block);font-size:1.25rem;line-height:1.06;min-height:1.06em;letter-spacing:.04em}
.board .sf b{font-size:.66em}
.board .bw{display:inline-flex;gap:.06em}

/* The 4:00 in "Why Off By Four?": ivory cards on ink, like the inverse mark */
.why-flip{font-size:4rem;margin-bottom:2.25rem;color:var(--paper)}
.why-flip .sf{--sf-bg:var(--paper);--sf-fg:var(--ink)}
.why-flip .sf-t,.why-flip .sf-ft{background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%,rgba(60,45,20,.1))}
.why-flip .sf-b,.why-flip .sf-fb{background-image:linear-gradient(180deg,rgba(60,45,20,.14),rgba(60,45,20,0) 30%,rgba(60,45,20,.12));box-shadow:0 .04em .06em -.01em rgba(0,0,0,.6)}
/* red hinge tabs print a hair off-register */
.sf.hinge::before,.sf.hinge::after{box-shadow:.012em .01em 0 rgba(181,64,42,.35)}
.why-flip .sf-ft::after{background:linear-gradient(to top,rgba(20,20,20,.35),rgba(20,20,20,0) 85%)}
@media (min-width:44rem){.why-flip{font-size:5.6rem}}

/* Step numbers 01-04 (and /start 01-03). Without JS: one tile with a seam. */
.num.flip,.deal .n.flip{display:inline-flex;gap:.08em;width:auto;height:auto;border:0;border-radius:0;font-family:var(--block);font-weight:400;font-size:2.2rem;line-height:1.06;margin-bottom:.8rem}
.num.flip:not(.built),.deal .n.flip:not(.built){padding:0 .18em;color:var(--paper);border-radius:.11em;
  background:linear-gradient(var(--ink) calc(50% - 1px),var(--paper) 0 calc(50% + 1px),var(--ink) 0)}
.deal .n.flip{font-size:1.3rem;margin:0;align-self:center}

/* Footer mini clock: the visitor's own time */
.mini-clock{font-size:1.3rem;display:inline-flex;align-items:center;gap:.08em;line-height:1;color:var(--ink)}
.mini-clock .sf{--gap:.045em}
.mini-clock .sf::before,.mini-clock .sf::after{display:none}
.mini-clock .colon{gap:.2em;margin:0 .06em}

/* Departure-board letters */
.lf-word{white-space:nowrap}
.lf{display:inline-block;text-align:center;transform-origin:50% 55%}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Success + deposit boards */
.sent .board{margin:0 auto 1.4rem;font-size:1.6rem}
.deposit .board{margin:0 auto 1.75rem;font-size:1.45rem}
@media (min-width:44rem){.deposit .board{font-size:1.9rem}}

/* 404: three big cards (static ones rest with the landing flap down, so no shade without motion) */
.e404-flip .sf-ft{visibility:hidden}.e404-flip .sf-fb{visibility:hidden}
.e404-flip{font-size:clamp(5rem,26vw,11rem);margin:0 auto 1.5rem;display:flex;justify-content:center;gap:.08em}

/* ── Motion (only when motion is welcome) ─────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @keyframes sf-fall{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
  @keyframes sf-land{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
  @keyframes sf-shade-in{from{opacity:0}to{opacity:1}}
  @keyframes sf-shade-out{from{opacity:1}to{opacity:0}}
  @keyframes sf-show{from,to{visibility:visible}}
  .sf.go .sf-ft{visibility:visible;animation:sf-fall var(--ft) cubic-bezier(.55,.06,.68,.19) both}
  .sf.go .sf-ft::after{animation:sf-shade-in var(--ft) ease-in both}
  .sf.go .sf-fb{visibility:visible;animation:sf-land var(--ft) cubic-bezier(.17,.84,.44,1.18) var(--ft) both}
  .sf.go .sf-fb::after{animation:sf-shade-out var(--ft) ease-out var(--ft) both}

  /* header logo: blank card flips to the 4 once on load; a small flick on hover */
  @keyframes bm-hold{from,to{visibility:visible}}
  @keyframes bm-fall{0%{visibility:visible;transform:rotateX(0);filter:none}100%{visibility:visible;transform:rotateX(-90deg);filter:brightness(.7)}}
  @keyframes bm-land{0%{visibility:visible;transform:rotateX(90deg);filter:brightness(.8)}100%{visibility:visible;transform:rotateX(0);filter:none}}
  @keyframes bm-flick{0%,100%{visibility:visible;transform:rotateX(0)}45%{visibility:visible;transform:rotateX(-40deg);filter:brightness(.85)}}
  .bm-ft{animation:bm-hold .5s linear,bm-fall .24s cubic-bezier(.55,.06,.68,.19) .5s}
  .bm-ob{animation:bm-hold 1.04s linear}
  .bm-fb{animation:bm-land .3s cubic-bezier(.17,.84,.44,1.12) .74s backwards}
  @media (hover:hover){.brand:hover .bm-hv{animation:bm-flick .5s cubic-bezier(.3,.6,.3,1)}}

  /* departure-board letters */
  @keyframes lf-flip{from{transform:rotateX(-80deg)}to{transform:rotateX(0)}}
  .lf.tick{animation:lf-flip 70ms ease-out}

  /* success panel */
  @keyframes sent-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .sent.play{animation:sent-rise .7s cubic-bezier(.22,.61,.36,1) both}

  /* 404 cards: each falls once on load, CSS only */
  .page404 h1{animation-delay:1s!important}.page404 .lede{animation-delay:1.2s!important}.page404 .button{animation-delay:1.4s!important}
  .e404-flip .sf .sf-ft{visibility:visible;animation:sf-fall .22s cubic-bezier(.55,.06,.68,.19) both}
  .e404-flip .sf .sf-fb{visibility:visible;animation:sf-land .3s cubic-bezier(.17,.84,.44,1.18) both}
  .e404-flip .sf .sf-ft::after{animation:sf-shade-in .22s ease-in both}
  .e404-flip .sf .sf-fb::after{animation:sf-shade-out .3s ease-out both}
  .e404-flip .sf:nth-child(1) .sf-ft,.e404-flip .sf:nth-child(1) .sf-ft::after{animation-delay:.3s}
  .e404-flip .sf:nth-child(1) .sf-fb,.e404-flip .sf:nth-child(1) .sf-fb::after{animation-delay:.52s}
  .e404-flip .sf:nth-child(2) .sf-ft,.e404-flip .sf:nth-child(2) .sf-ft::after{animation-delay:.45s}
  .e404-flip .sf:nth-child(2) .sf-fb,.e404-flip .sf:nth-child(2) .sf-fb::after{animation-delay:.67s}
  .e404-flip .sf:nth-child(3) .sf-ft,.e404-flip .sf:nth-child(3) .sf-ft::after{animation-delay:.6s}
  .e404-flip .sf:nth-child(3) .sf-fb,.e404-flip .sf:nth-child(3) .sf-fb::after{animation-delay:.82s}
}