/* Beers Labs end card for the cupcake hero. Chrome = the hive tokens from /work (styles.css) and the Scroll Film end
   card: honey mark, label, display title, three facts, the /work .btn with wipe + flash and the Get Bizzzy bee.
   Mobile first (390), wider at 760 and 1100. Every reveal is transform-only; nothing rests at opacity 0. */

:root {
  --honey: #f5b623;
  --pink: #ff37b4;
  --cyan: #19b6e6;
  --ink: #0b0a12;
  --paper: #f4e9d2;
  --line-strong: #0b0a12;
  --bw: 3px;
  --shadow: 6px 6px 0 #ff37b4;
  --shadow-up: 9px 9px 0 #ff37b4;
  --f-display: "Archivo Black", "Arial Black", sans-serif;
  --f-body: "Spectral", "Times New Roman", serif;
  --f-label: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.3, .7, .2, 1);
  --dur: 900ms;
  --cta-bg: #ff37b4;
  --cta-fg: #0b0a12;
  --bee-fill: #f5b623;
  --bee-stripe: #0b0a12;
  --bee-wing: rgba(244, 233, 210, .85);
  --bee-line: #0b0a12;
  --gut: 16px;
}

.end :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* the card rises over the washed batter: a soft top edge (never a hard full-width line), then solid cream */
.end { position: relative; z-index: 2; color: var(--ink); font: 400 17px/1.5 var(--f-body);
  background: linear-gradient(to bottom, rgba(244, 233, 210, 0) 0, rgba(244, 233, 210, .92) 120px, var(--paper) 200px);
  padding: 220px calc(var(--gut) + 20px) 64px var(--gut); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.end a { color: inherit; }

/* (right padding clears the progress rail, which stays on the right edge to the bottom of the page) */
/* the honey mark, top-left of the card, back to /work */
.logo { position: absolute; top: 132px; left: var(--gut); display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; text-decoration: none;
  color: var(--paper) !important; background: var(--ink); border: 1px solid rgba(244, 233, 210, .18); border-radius: 999px; }
.mark { width: 32px; height: 32px; flex: none; display: block; }
.mark-hex { fill: var(--honey); stroke: var(--line-strong); stroke-width: 2.5; }
.mark-b { fill: var(--ink); }
.wordmark { font: 400 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.back { font: 500 11px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 233, 210, .74); padding-left: 9px; border-left: 1px solid rgba(244, 233, 210, .25); }

.end .label { margin: 0 0 8px; font: 500 12px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(11, 10, 18, .7); }
.end-grid { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; gap: 34px; }
.end-copy { min-width: 0; }
.end-title { margin: 0 0 22px; font: 400 clamp(38px, 11vw, 96px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 58ch; }
.facts li { padding: 14px 16px; border: 3px solid var(--ink); border-radius: 12px; background: #fff8e8; box-shadow: 4px 4px 0 var(--honey); }
.facts b { font-weight: 700; }
.motion .facts li { transform: translateY(var(--rise, 0)); transition: transform .9s var(--ease); }
.motion .end:not(.in) .facts li { --rise: 22px; }
.motion .facts li:nth-child(2) { transition-delay: .08s; }
.motion .facts li:nth-child(3) { transition-delay: .16s; }
.end-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; align-self: start; }
.back-all { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font: 500 14px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- buttons: the /work .btn with wipe + flash ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 22px;
  font: 500 15px/1 var(--f-label); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: var(--bw) solid var(--line-strong); border-radius: 999px; cursor: pointer;
  background: var(--cta-bg); color: var(--cta-fg) !important; box-shadow: var(--shadow);
  position: relative; isolation: isolate; --wipe: #f5f3ef; --wipe-fg: #121d2e;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color .3s cubic-bezier(.4, 0, .2, 1);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-up); }
.btn:active { transform: translate(2px, 2px); }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.btn::before { background: var(--wipe); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.btn::after { background: #fff; opacity: 0; z-index: 1; }
@media (hover: hover) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover { color: var(--wipe-fg) !important; }
}
.btn:focus-visible::before { transform: scaleX(1); }
.btn:focus-visible { color: var(--wipe-fg) !important; }
.btn.is-pressed::before { transform: scaleX(1); transition-duration: 0s; }
.btn.is-pressed { color: var(--wipe-fg) !important; }
.btn.is-flash::after { animation: wipe-flash .45s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes wipe-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
:root:not(.motion) .btn, :root:not(.motion) .btn::before { transition: none; }

.bizzzy { overflow: visible; }
.bizzzy:is(:hover, :focus-visible) { box-shadow: 10px 10px 0 #ff37b4, 0 0 0 3px #f5b623; }
.zzz { display: inline-flex; }
.zzz i { font-style: normal; display: inline-block; }
.bz-bee { position: absolute; left: calc(100% - 14px); top: -13px; width: 24px; height: 24px; z-index: 3; overflow: visible; pointer-events: none; }
.bee-body { fill: var(--bee-fill); stroke: var(--bee-line); stroke-width: 1.6; }
.bee-stripe { fill: none; stroke: var(--bee-stripe); stroke-width: 2.2; }
.bee-wing { fill: var(--bee-wing); stroke: var(--bee-line); stroke-width: 1.2; }
.bee-eye { fill: var(--bee-line); }
.motion .bizzzy:is(:hover, :focus-visible) { animation: bz-wiggle 400ms linear; }
.motion .bizzzy:is(:hover, :focus-visible) .bz-bee { animation: bz-fly 1.2s cubic-bezier(.45, .05, .55, .95); }
@keyframes bz-wiggle { 0%, 100% { rotate: 0deg; translate: 0 0; } 20% { rotate: -3deg; translate: -1px 0; } 40% { rotate: 3deg; translate: 1px 0; } 60% { rotate: -2deg; translate: -1px 0; } 80% { rotate: 1deg; translate: 1px 0; } }
@keyframes bz-fly {
  0% { left: calc(100% - 14px); top: -13px; rotate: 0deg; }
  20% { left: calc(100% + 8px); top: calc(100% - 8px); rotate: 90deg; }
  45% { left: -16px; top: calc(100% + 2px); rotate: 180deg; }
  68% { left: -18px; top: -18px; rotate: 270deg; }
  86% { left: 50%; top: -24px; rotate: 340deg; }
  100% { left: calc(100% - 14px); top: -13px; rotate: 360deg; }
}

@media (min-width: 760px) {
  :root { --gut: 32px; }
  .end-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (min-width: 1100px) {
  .end-grid { grid-template-columns: 7fr 4fr; align-items: start; gap: 56px; }
  .end-actions { flex-direction: column; align-items: stretch; padding-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion .facts li { transition: none; }
}