/**
 * Movement, for every page a customer sees.
 *
 * Issam's home page moved in a handful of small ways - a striped ribbon that
 * never stops running, tools that sway, a phone that rings - and each of them
 * said something about a barbershop rather than decorating one. This file is
 * those movements made into parts, so the public site, a shop's own page and
 * the three small pages a customer is sent to all move in the same language.
 *
 * Each part has one shape and eight ways of moving, one per theme, because a
 * walnut parlour and a neon window should not move alike. Everything is
 * written in tokens, so a shop that sets its own colours gets its ribbon and
 * its tools in them without a line written here for it.
 *
 * Motion is off when somebody has asked for it off: theme.css already cuts
 * every animation to its last frame under prefers-reduced-motion, and every
 * part here is designed so that its last frame is the one worth seeing.
 */

/* ============================================================ the ribbon */

/*
 * A strip of barber's pole along the top edge of the page.
 *
 * Absolute against the page rather than in its flow, so it sits on the very
 * edge whatever padding the page around it has. The stripes are wider than
 * the strip by one repeat and slide by exactly one, so the loop never shows a
 * seam: 56px of stripe measured across a 45 degree band is 79.2px of strip.
 */
.pole-ribbon {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: 8px; overflow: hidden; pointer-events: none;
}
/* Inside a section rather than across the top of the page. */
.pole-ribbon.inline { position: relative; }

.pole-ribbon::before,
.pole-ribbon::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; }

.pole-ribbon::before {
  width: calc(100% + 80px);
  background: repeating-linear-gradient(-45deg,
    var(--accent) 0 14px, var(--bg) 14px 28px,
    var(--accent-2) 28px 42px, var(--bg) 42px 56px);
  animation: mo-pole 3s linear infinite;
}

/* Parlour: a brass pole, thinner and in no hurry. */
[data-theme="parlour"] .pole-ribbon { height: 5px; }
[data-theme="parlour"] .pole-ribbon::before { animation-duration: 7s; }

/* Pomade: the same pole as Buzz, at the pace of a slower decade. */
[data-theme="pomade"] .pole-ribbon { height: 7px; }
[data-theme="pomade"] .pole-ribbon::before { animation-duration: 4.6s; }

/* Linen: one green line, drawn across once, with daylight passing along it. */
[data-theme="linen"] .pole-ribbon { height: 3px; }
[data-theme="linen"] .pole-ribbon::before {
  width: 100%; background: var(--accent); transform-origin: left;
  animation: mo-draw-x 1.3s cubic-bezier(.16, 1, .3, 1) backwards;
}
[data-theme="linen"] .pole-ribbon::after {
  width: 30%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 75%, transparent), transparent);
  transform: translateX(-100%);
  animation: mo-sheen 8s 1.3s ease-in-out infinite;
}

/* Midnight: a neon tube that strikes, stutters, and then hums. */
[data-theme="midnight"] .pole-ribbon { height: 3px; overflow: visible; }
[data-theme="midnight"] .pole-ribbon::before {
  width: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent) 50%, var(--accent-2));
  box-shadow: 0 0 10px var(--accent), 0 0 26px color-mix(in srgb, var(--accent-2) 70%, transparent);
  animation: mo-strike 2.2s steps(1) both, mo-hum 5s 2.2s ease-in-out infinite;
}

/* Chrome: hazard tape, and fast. */
[data-theme="chrome"] .pole-ribbon { height: 10px; }
[data-theme="chrome"] .pole-ribbon::before {
  width: calc(100% + 40px);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--bg) 12px 24px);
  animation: mo-hazard 1s linear infinite;
}

/* Sage: a soft band of its two greens, drifting. */
[data-theme="sage"] .pole-ribbon { height: 4px; }
[data-theme="sage"] .pole-ribbon::before {
  width: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-2), var(--accent), var(--accent-2));
  background-size: 200% 100%;
  animation: mo-drift 12s ease-in-out infinite alternate;
}

/* Noir: a hairline ruled from the middle out, and a slip of colour crossing it. */
[data-theme="noir"] .pole-ribbon { height: 1px; overflow: visible; }
[data-theme="noir"] .pole-ribbon::before {
  width: 100%; background: color-mix(in srgb, var(--ink) 55%, transparent);
  animation: mo-grow 1.6s cubic-bezier(.2, .8, .2, 1) backwards;
}
[data-theme="noir"] .pole-ribbon::after {
  top: -1px; bottom: auto; height: 3px; width: 60px; border-radius: 2px;
  background: var(--accent); transform: translateX(-80px);
  animation: mo-glide 9s 1.6s ease-in-out infinite;
}

/* ============================================================ the tools */

/*
 * A row of tools between two hairlines, from tools.js.
 *
 * Held still until it scrolls into view (tools.js adds `.on`), because the
 * themes that play once would otherwise have played to nobody.
 */
.toolbelt {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  color: var(--ink);
}
.toolbelt::before,
.toolbelt::after { content: ''; flex: 1 1 40px; height: 1px; background: var(--line-strong); }
.toolbelt .tool { display: inline-flex; flex: none; }
.toolbelt .tool svg { display: block; }
.toolbelt .gem { flex: none; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.toolbelt:not(.on) .tool,
.toolbelt:not(.on) .tool * { animation-play-state: paused; }

/* The scissors open about their screw rather than about their middle. */
.tool .blade { transform-box: view-box; transform-origin: 32px 28px; }
.tool .blade.one { --snip: 12deg; }
.tool .blade.two { --snip: -12deg; }

/* Buzz: Issam's own, every tool swaying on a beat of its own. */
[data-theme="buzz"] .toolbelt .tool {
  transform-origin: 50% 80%;
  animation: mo-sway 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.8s);
}

/* Parlour: hung from hooks on the back wall, and barely stirring. */
[data-theme="parlour"] .toolbelt { color: var(--accent); }
[data-theme="parlour"] .toolbelt .tool {
  transform-origin: 50% 0;
  animation: mo-hang 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.3s);
}
[data-theme="parlour"] .toolbelt .gem { width: 6px; height: 6px; border-radius: 50%; transform: none; }

/* Linen: they arrive one after another, and then only the scissors work. */
[data-theme="linen"] .toolbelt .tool {
  animation: mo-arrive .9s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i) * 110ms);
}
[data-theme="linen"] .toolbelt .blade { animation: mo-snip 3.2s 1.2s ease-in-out infinite; }
[data-theme="linen"] .toolbelt .gem { width: 14px; height: 1.5px; transform: none; background: var(--line-strong); }

/* Midnight: neon tubes, each struck in its turn and then left humming. */
[data-theme="midnight"] .toolbelt { color: var(--accent); }
[data-theme="midnight"] .toolbelt .tool {
  filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 9px color-mix(in srgb, var(--accent-2) 65%, transparent));
  animation: mo-tube 6s steps(1) infinite;
  animation-delay: calc(var(--i) * .9s);
}
[data-theme="midnight"] .toolbelt .gem {
  border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2);
}

/* Chrome: a marquee, each tool jumping as its name comes round. */
[data-theme="chrome"] .toolbelt::before,
[data-theme="chrome"] .toolbelt::after { height: 2px; background: var(--ink); }
[data-theme="chrome"] .toolbelt .tool {
  animation: mo-jump 2.2s cubic-bezier(.3, 1.6, .5, 1) infinite;
  animation-delay: calc(var(--i) * .22s);
}
[data-theme="chrome"] .toolbelt .gem { width: 9px; height: 9px; transform: none; }

/* Sage: floating, the way a leaf does in a draught. */
[data-theme="sage"] .toolbelt { color: var(--accent); }
[data-theme="sage"] .toolbelt .tool {
  animation: mo-float 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
[data-theme="sage"] .toolbelt .gem { border-radius: 50%; background: var(--accent-2); }

/* Pomade: swinging on chains, like the signs over the old shop's door,
   in alternating red and black. */
[data-theme="pomade"] .toolbelt .tool {
  transform-origin: 50% 0;
  animation: mo-swing 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.7s);
}
[data-theme="pomade"] .toolbelt .tool:nth-child(4n + 1) { color: var(--accent); }

/* Noir: each tool drawn in, a line at a time, and then left alone. */
[data-theme="noir"] .toolbelt { gap: 36px; }
[data-theme="noir"] .toolbelt .tool svg * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: mo-ink 1.8s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i) * .4s);
}
[data-theme="noir"] .toolbelt .gem { display: none; }

@media (max-width: 560px) {
  .toolbelt { zoom: .62; gap: 22px; }
}

/* ======================================================= the shop's mark */

/*
 * The small sign beside a shop's name on its own pages, for the shops that
 * have not given us a logo. It was one gradient square in every theme.
 */
.mark i { position: relative; overflow: hidden; flex: none; }

/* A turning pole, in the three themes a pole belongs in. The stripes are
   drawn taller than the pole and slid by one repeat, which at 45 degrees is
   20px times the square root of two. */
[data-theme="buzz"] .mark i,
[data-theme="parlour"] .mark i,
[data-theme="pomade"] .mark i {
  width: 11px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--bg);
}
[data-theme="buzz"] .mark i::before,
[data-theme="parlour"] .mark i::before,
[data-theme="pomade"] .mark i::before {
  content: ''; position: absolute; left: 0; right: 0; top: -30px; bottom: 0;
  background: repeating-linear-gradient(45deg,
    var(--accent) 0 5px, var(--bg) 5px 10px, var(--accent-2) 10px 15px, var(--bg) 15px 20px);
  animation: mo-mark-pole 3.2s linear infinite;
}

[data-theme="midnight"] .mark i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 18px color-mix(in srgb, var(--accent-2) 70%, transparent);
  animation: mo-hum 4s ease-in-out infinite;
}
[data-theme="chrome"] .mark i {
  border-radius: 0; background: var(--accent);
  animation: mo-turn 2.4s cubic-bezier(.5, 0, .2, 1.4) infinite;
}
[data-theme="sage"] .mark i {
  border-radius: 50%; animation: mo-breathe 4.5s ease-in-out infinite;
}
[data-theme="linen"] .mark i {
  animation: mo-arrive .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
[data-theme="noir"] .mark i {
  width: 2px; height: 18px; border-radius: 1px; background: var(--ink);
  transform-origin: bottom; animation: mo-grow-y 1.2s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* ============================================================== shared */

/* A card arriving, used where a page has one thing to show. */
.mo-in { animation: mo-in .55s cubic-bezier(.2, .8, .2, 1) both; }

/* A live thing: a shop that is open now, a receptionist on the line. */
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none;
  animation: mo-pulse 2s ease-out infinite;
}

/* ========================================================== keyframes */

@keyframes mo-pole { from { transform: translateX(-79.2px); } to { transform: none; } }
@keyframes mo-hazard { from { transform: translateX(-33.94px); } to { transform: none; } }
@keyframes mo-draw-x { from { transform: scaleX(0); } }
@keyframes mo-grow { from { transform: scaleX(0); } }
@keyframes mo-grow-y { from { transform: scaleY(0); } }
@keyframes mo-sheen { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(440%); } }
@keyframes mo-glide { 0% { transform: translateX(-80px); } 55%, 100% { transform: translateX(calc(100vw + 20px)); } }
@keyframes mo-drift { to { background-position: 100% 0; } }
@keyframes mo-strike {
  0%, 8%   { opacity: .15; }
  9%, 11%  { opacity: 1; }
  12%, 14% { opacity: .3; }
  15%, 19% { opacity: 1; }
  20%, 21% { opacity: .5; }
  22%, 100% { opacity: 1; }
}
@keyframes mo-hum { 0%, 100% { opacity: 1; } 50% { opacity: .8; } 51% { opacity: .55; } 52% { opacity: .92; } }

@keyframes mo-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes mo-hang { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes mo-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes mo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mo-arrive { from { opacity: 0; transform: translateY(16px); } }
@keyframes mo-jump { 0%, 34%, 100% { transform: none; } 14% { transform: translateY(-10px) rotate(-8deg); } }
@keyframes mo-tube { 0%, 5% { opacity: .18; } 6%, 8% { opacity: 1; } 9%, 11% { opacity: .35; } 12%, 100% { opacity: 1; } }
@keyframes mo-ink { to { stroke-dashoffset: 0; } }
@keyframes mo-snip {
  0%, 55%, 100% { transform: none; }
  65%, 85% { transform: rotate(var(--snip)); }
  75%, 95% { transform: none; }
}

@keyframes mo-mark-pole { to { transform: translateY(28.28px); } }
@keyframes mo-turn { 0%, 70% { transform: none; } 85%, 100% { transform: rotate(90deg); } }
@keyframes mo-breathe { 50% { transform: scale(.72); opacity: .7; } }

@keyframes mo-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes mo-pop {
  0% { opacity: 0; transform: scale(.85); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { transform: none; }
}
@keyframes mo-stamp {
  0% { opacity: 0; transform: scale(1.06) rotate(-1.5deg); }
  55% { opacity: 1; transform: scale(.985); }
  100% { transform: none; }
}
@keyframes mo-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes mo-wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes mo-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}