/* tears.css — the cook crying over the onion (tears.js): the overlay over the
   canvas and the wipe-your-eyes button in the HUD.

   The overlay (#gm-tears, z-index 1 in styles.css) lies over the canvas and
   under the HUD, the readout and the knife's dock, so the onion swims and the
   numbers that say what a cut does never do. Its layers are drawn in this
   order: the one blur, the sheen and the red over it, the drops, the
   waterworks and the pool, then the goggles' rim, the sleeve and a quip.
   tears.js sets each layer's amount from the level (engine/tears.js look());
   this file only says what each one looks like.

   Two things here are load-bearing. Nothing between the blur layer and the
   stage may have an opacity, filter, mask or clip-path: any of those makes
   that element the blur's backdrop root, and it would blur nothing. And every
   moving part moves by transform or opacity, which the compositor runs
   without a layout or a repaint, beside a WebGL canvas that is already
   busy. */

.gm-tears > * { position: absolute; inset: 0; margin: 0; pointer-events: none; }
/* below QUIET nothing is drawn at all, and nothing is composited */
.gm-tears[data-wet="off"] > .gt-l { display: none; }

/* the one blur: the view swimming. It is `none` until crying, so a watery
   eye costs no GPU pass; the stage's inner corner is the radius */
.gt-blur { border-radius: 13px; }

/* the glassy film at the edges, the tears welling along the bottom lid, and a
   glint where the light catches it */
.gt-wet {
  opacity: 0;
  background:
    radial-gradient(120% 55% at 50% 112%, rgba(150, 205, 255, .55), transparent 45%),
    radial-gradient(ellipse 78% 72% at 50% 46%, transparent 54%, rgba(165, 218, 255, .34) 78%, rgba(215, 240, 255, .7) 100%);
  box-shadow: inset 0 0 34px 6px rgba(175, 222, 255, .55), inset 0 0 6px 1px rgba(255, 255, 255, .55);
}
/* two glints on the film: short soft arcs, faded at both ends so neither
   reads as a ring */
.gt-wet::before, .gt-wet::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(.7px);
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 42%, #000 58%, transparent 88%);
  mask-image: linear-gradient(90deg, transparent 12%, #000 42%, #000 58%, transparent 88%);
}
.gt-wet::before { left: 3%; top: 5%; width: 42%; height: 46%; border-top: 4px solid rgba(255, 255, 255, .7); transform: rotate(-18deg); }
.gt-wet::after { right: 4%; bottom: 7%; width: 30%; height: 30%; border-bottom: 3px solid rgba(255, 255, 255, .5); transform: rotate(-12deg); }

/* the lids gone pink from rubbing: pink, not red, so it never reads as a
   wound */
.gt-red {
  opacity: 0;
  background: radial-gradient(ellipse 82% 78% at 50% 46%, transparent 50%, rgba(255, 128, 142, .3) 76%, rgba(238, 84, 110, .58) 100%);
}

/* a drop: welling at the top edge, hanging, then running down with a trail.
   Its shape is a picture so it is rasterised once, and it moves by transform
   alone (tears.js animates it) */
.gt-run { overflow: hidden; }
.gt-drop {
  position: absolute; top: 0; width: var(--w, 12px); height: calc(var(--w, 12px) * 1.4);
  margin-left: calc(var(--w, 12px) / -2); opacity: 0; will-change: transform, opacity;
}
/* the cartoon tear (the one in 😢): pale blue, outlined, with a shine */
.gt-drop::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23e8f6ff'/%3E%3Cstop offset='.55' stop-color='%23a3d4ff'/%3E%3Cstop offset='1' stop-color='%235ba7ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 1.3C10 1.3 2.7 12.6 2.7 18.6a7.3 7.3 0 0 0 14.6 0C17.3 12.6 10 1.3 10 1.3Z' fill='url(%23a)' fill-opacity='.84' stroke='%232f7fd6' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cellipse cx='7.4' cy='17' rx='1.8' ry='3' fill='%23fff' transform='rotate(20 7.4 17)'/%3E%3Ccircle cx='13' cy='22.6' r='1' fill='%23fff' fill-opacity='.65'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gt-drop::after {
  content: ""; position: absolute; left: 50%; bottom: 66%; width: 26%; height: 260%; transform: translateX(-50%);
  border-radius: 99px; background: linear-gradient(to top, rgba(150, 205, 255, .6), rgba(190, 228, 255, 0));
}
/* a stream: a fat drop with a long trail behind it */
.gt-drop.big::after { width: 36%; height: 820%; background: linear-gradient(to top, rgba(140, 200, 255, .66), rgba(190, 228, 255, 0)); }

/* the waterworks: a stream pouring down each side of the view, thin where it
   starts and spreading as it falls into the pool, kept to the edges so the
   onion between them stays in sight. Glints run down it to make it flow */
.gt-falls { opacity: 0; }
.gt-falls i {
  position: absolute; top: -2px; bottom: 5%; width: clamp(22px, 4%, 34px); overflow: hidden;
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  background: linear-gradient(90deg, rgba(84, 156, 238, .45), rgba(178, 224, 255, .7) 46%, rgba(84, 156, 238, .45));
}
.gt-falls i:first-child { left: 5%; }
.gt-falls i:last-child { right: 5%; }
.gt-falls b {
  position: absolute; left: 0; right: 0; top: -90px; bottom: 0;
  background:
    radial-gradient(ellipse 9% 15% at 40% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 7% 12% at 60% 64%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 6% 9% at 48% 90%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
  background-size: 100% 90px;
}
/* they flow only while they show (tears.js sets gt-falling) */
.gm-tears.gt-falling .gt-falls b { animation: gt-flow .5s linear infinite; }
@keyframes gt-flow { to { transform: translateY(90px); } }

/* the pool along the bottom: shallow water has small waves, so it is
   squashed from the bottom rather than slid up (tears.js sets the scale) */
.gt-pool { top: auto; height: 16%; transform: scaleY(0); transform-origin: 50% 100%; }
.gt-slosh { position: absolute; inset: 0; }
.gt-pool i {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% + 240px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c4e6ff' stop-opacity='.6'/%3E%3Cstop offset='.3' stop-color='%237cbaf2' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%233a78c8' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8C30 2 90 2 120 8S210 14 240 8V60H0Z' fill='url(%23w)'/%3E%3Cpath d='M0 8C30 2 90 2 120 8S210 14 240 8' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
}
/* the wave behind runs the other way, a little lower and paler; both move
   only while there is a pool (tears.js sets gt-pooling) */
.gt-pool i:first-child { top: 10%; opacity: .55; transform: translateX(-120px); }
.gm-tears.gt-pooling .gt-pool i:first-child { animation: gt-wave-b 5.2s linear infinite; }
.gm-tears.gt-pooling .gt-pool i:last-child { animation: gt-wave 3.4s linear infinite; }
@keyframes gt-wave { from { transform: translateX(0); } to { transform: translateX(-240px); } }
@keyframes gt-wave-b { from { transform: translateX(-240px); } to { transform: translateX(0); } }

/* the goggles: a rim round the lens, the rest of the view left alone. Swim
   goggles are blue rubber, faintly blue and fogging at the bottom; onion
   goggles a dark foam seal. The rim is the lens's shadow spread outward and
   clipped by the stage, so it fills the corners whatever the stage's shape */
.gt-gog { display: none; }
.gt-gog.swim, .gt-gog.foam { display: block; }
.gt-gog::before {
  content: ""; position: absolute; inset: 7px 9px 9px;
  border-radius: 34% 34% 30% 30% / 26% 26% 34% 34%;
  box-shadow: 0 0 0 999px var(--gt-rim), inset 0 0 0 2px var(--gt-lip), inset 0 0 0 4px var(--gt-lip2), inset 0 0 18px 6px var(--gt-fog);
}
/* the nose bridge */
.gt-gog::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 76px; height: 36px; margin-left: -38px;
  border-radius: 50% 50% 0 0 / 90% 90% 0 0; background: var(--gt-rim);
  box-shadow: inset 0 2px 0 var(--gt-lip);
}
.gt-gog.swim {
  --gt-rim: #2a73cf; --gt-lip: rgba(178, 222, 255, .65); --gt-lip2: rgba(18, 70, 150, .45); --gt-fog: rgba(236, 246, 255, .22);
  background:
    radial-gradient(ellipse 70% 26% at 50% 100%, rgba(236, 246, 255, .26), transparent 70%),
    rgba(80, 160, 255, .07);
}
.gt-gog.foam {
  --gt-rim: #1c1e22; --gt-lip: rgba(112, 118, 126, .9); --gt-lip2: rgba(0, 0, 0, .55); --gt-fog: rgba(0, 0, 0, .3);
}

/* the sleeve: a gingham shirt, close to the eye and so a little out of
   focus, wiped across the view (tears.js moves it) */
.gt-sleeve {
  display: none; inset: -20% auto -20% 0; width: 66%;
  border-radius: 44% 56% 52% 48% / 50%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .2) 78%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .34) 0 13px, rgba(255, 255, 255, 0) 13px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 13px, rgba(255, 255, 255, 0) 13px 26px),
    #3b6fc4;
  filter: blur(1.5px);
  transform: translateX(-115%);
}
/* the cuff, plain, at the wrist end */
.gt-sleeve::after {
  content: ""; position: absolute; top: 6%; bottom: 6%; right: 7%; width: 15%; border-radius: 40%;
  background: linear-gradient(90deg, #2f5ea9, #5f8fd8 45%, #2f5ea9);
}

/* a quip: one line over the stage, under the toast's place, gone in a few
   seconds; never in the readout, which is the cook's numbers */
.gt-quip { inset: 40% 14px auto; text-align: center; opacity: 0; }
.gt-quip span {
  display: inline-block; max-width: 100%; padding: 7px 14px; border-radius: 14px;
  background: rgba(10, 12, 16, .7); border: 1px solid rgba(150, 205, 255, .38); color: #f2f8ff;
  font-weight: 750; font-size: .92rem; line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* off screen or out of sight: the waves and the waterworks hold still */
.gm-tears.asleep * { animation-play-state: paused !important; }

/* the wipe: in the HUD's left column under the step's chips, which stay put
   when it comes (the column is pinned to the top). Thumb-sized, and the only
   thing in the HUD's left column that takes a touch */
.gm-hud .gm-wipe {
  pointer-events: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(140, 200, 255, .5); background: rgba(10, 12, 16, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #e3f1ff; font: inherit; white-space: nowrap; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.gm-hud .gm-wipe[hidden] { display: none; }
.gm-hud .gm-wipe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-hud .gm-wipe:active { background: rgba(60, 120, 200, .55); }
/* just wiped: it takes a moment before the next */
.gm-hud .gm-wipe.cool { opacity: .45; }
/* the first time it shows, it says so twice */
.gm-hud .gm-wipe.hey { animation: gt-hey 1.1s ease-out 2; }
@keyframes gt-hey {
  0% { box-shadow: 0 0 0 0 rgba(140, 200, 255, .7); }
  100% { box-shadow: 0 0 0 12px rgba(140, 200, 255, 0); }
}
@media (max-width: 560px) {
  .gm-hud .gm-wipe { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-tears * { animation: none !important; }
  .gm-hud .gm-wipe.hey { animation: none; }
}