/* =========================================================================
   Miramar Brewing: hero and tapes
   Hero in two blocks on the page grid (after Miguel's comp, 2026-10-08):
   1. the wordmark, six columns wide (4–9), with the "Desde 1996" ring and the Hecho en Puerto
      Rico seal as bookends at the outer columns;
   2. the tagline with the buttons right under it (--s-3), set --s-7 below the wordmark.
   Miguel's skyline of shapes sits on the fold line: the first screen shows their top half, the
   rest is below, so the page asks to be scrolled. Nothing bigger than it needs.
   ========================================================================= */
.hero {
  /* Fold cell: the skyline's height. Its cells touch and span the content width; a cell is as
     wide as its shape, so the widths add up to --fsum cells (12 on desktop with the can at .424 of
     one, the first 8 on tablet, the first 4 on phones). */
  --fs: calc((100vw - 2 * var(--margin)) / var(--fsum, 11.424));   /* a skyline cell: the shapes' widths add up to --fsum cells (the can is .424 of one) */
  /* Everything above the fold except the wordmark: gaps, tagline, buttons, minimum space.
     The wordmark takes what is left on short screens, so the hook always fits. */
  --hook: 280px;
  --lockup-h: max(12svh, calc(100svh - var(--nav-h) - var(--fs) / 2 - var(--hook)));
  position: relative;
  min-height: calc(100svh + var(--fs) / 2);
  padding: var(--nav-h) var(--margin) 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  grid-template-rows: minmax(var(--s-4), 1fr) auto auto auto minmax(var(--s-5), 1fr) var(--fs);
  text-align: center;
  overflow: clip;
}

/* ---------- Block 1: wordmark ---------- */
.hero__brand { grid-column: 4 / span 6; grid-row: 2; display: flex; justify-content: center; }
.hero__lockup { display: block; width: min(100%, calc(var(--lockup-h) * 4.019)); height: auto; color: var(--on-page); }
.hero__row use {
  transform-box: fill-box;
  transform: translateY(115%);
  transition: transform 1.5s var(--ease-out), color var(--t-letter) var(--ease-cream);
  transition-delay: calc(var(--k) * 55ms + 80ms), 0s;
}
.is-ready .hero__row use { transform: none; }
.hero__row use:hover { transition-delay: 0s, 0s; }
.hero__row use:nth-of-type(5n + 1):hover { color: var(--rosa); }
.hero__row use:nth-of-type(5n + 2):hover { color: var(--parcha); }
.hero__row use:nth-of-type(5n + 3):hover { color: var(--cielo); }
.hero__row use:nth-of-type(5n + 4):hover { color: var(--monte); }
.hero__row use:nth-of-type(5n + 5):hover { color: var(--gallo); }

/* ---------- Block 2: tagline + buttons ---------- */
.hero__tagline {
  grid-column: 1 / -1; grid-row: 3; justify-self: center;
  margin-top: var(--s-7);
  font: 900 italic var(--t-1)/1 var(--f-display);
  font-stretch: 118%; letter-spacing: .01em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; translate: 0 .5em;
  transition: opacity 1.2s var(--ease-out) .3s, translate 1.5s var(--ease-out) .3s;
}
.is-ready .hero__tagline { opacity: 1; translate: 0 0; }

.hero__actions {
  grid-column: 1 / -1; grid-row: 4; justify-self: center;
  margin-top: var(--s-3);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  opacity: 0; translate: 0 24px;
  transition: opacity 1.1s var(--ease-out) .45s, translate 1.4s var(--ease-out) .45s;
}
.is-ready .hero__actions { opacity: 1; translate: 0 0; }

/* 1024 to 1099: the tagline a touch narrower, never wider than the wordmark */
@media (min-width: 1024px) and (max-width: 1099px) { .hero__tagline { font-stretch: 108%; } }

/* ---------- Badges: bookends at the outer columns, centered on both blocks ---------- */
.hero__badge {
  grid-row: 2 / 5; align-self: center;
  position: relative; width: var(--badge); aspect-ratio: 1;
  opacity: 0; scale: .7; rotate: -40deg;
  transition: opacity .8s var(--ease-out) .55s, scale 1.4s var(--ease-spring) .55s, rotate 1.6s var(--ease-out) .55s;   /* the grilling, 2026-10-15: the hero's last parts were in at 3.5s; same order, sooner */
}
.is-ready .hero__badge { opacity: 1; scale: 1; rotate: 0deg; }
.ring { grid-column: 1 / span 2; justify-self: start; }
.seal { grid-column: -3 / -1; justify-self: end; transition-delay: .65s; }

.ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--parcha); }
/* The text turns on an HTML wrapper, not on the SVG itself: an SVG's turn is repainted on the main
   thread every frame, a box's runs on the compositor (2026-10-15, phones) */
.ring__turn { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.ring__text {
  position: absolute; inset: 0; width: 100%; height: 100%;
  font: 700 14.2px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  fill: var(--ink);
}
.ring__iso { position: absolute; left: 50%; top: 50%; width: 42%; translate: -50% -50%; color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Official "Hecho en Puerto Rico" mark (the official file, assets/brand/hecho-en-pr.svg) as a
   negative in pure white (--seal-c; the client, 2026-10-26: white is the only color for an official
   stamp; it was the brand's baby blue): ring and lettering white, the gear open to the black page.
   No disc, no outline. The mark's circle fills the badge; the ™ and the
   copyright line sit just outside it. Never translated: lang="es" translate="no", no data-i18n. */
.seal__mark {
  position: absolute; left: 50%; top: 50%;
  width: 104.72%; aspect-ratio: 1;                 /* the circle is 1081 of the mark's 1132 px */
  translate: -50% -50%;
  background: var(--seal-c);
  -webkit-mask: url('../assets/brand/hecho-en-pr.svg') center / contain no-repeat;
  mask: url('../assets/brand/hecho-en-pr.svg') center / contain no-repeat;
}

/* ---------- Fold row: Miguel's skyline. Each .fs is a cell as tall as the row and as wide as its
   shape (--fw, a square unless said), the cells touching, so every shape meets the next with the
   same no-gap (Miguel, 2026-10-15: "inconsistent spacing between shapes... I like them closer"),
   and together they span the content width. A cell clips; its ::before is the flat shape, rising
   out of the cell on load and morphing on hover. Shapes stand
   on the cell's bottom edge; the dome is half-height, so it sits at the top of its cell, on the
   fold line, where the first screen can see it. ---------- */
.fold {
  grid-column: 1 / -1; grid-row: -2 / -1;
  display: flex;
}
.fs { flex: none; display: grid; align-items: end; width: calc(var(--fs) * var(--fw, 1)); height: var(--fs); overflow: clip; }
.fs:nth-child(n + 13) { display: none; }
.fs::before {
  content: ''; display: block; width: 100%; aspect-ratio: 1;
  background: var(--c);
  translate: 0 101%;
  transition: translate 1.5s var(--ease-out), border-radius var(--t-shape) var(--ease-shape),
              rotate var(--t-shape) var(--ease-shape), scale var(--t-shape) var(--ease-shape);
  transition-delay: calc(var(--i) * 60ms + .45s), 0s, 0s, 0s;
}
.is-ready .fs::before { translate: 0 0; }
.fs:is(:hover, .is-hover)::before { transition-delay: 0s; }

.fs--arch::before { border-radius: 50% 50% 0 0 / 50% 50% 0 0; }
.fs--arch:is(:hover, .is-hover)::before { border-radius: 0 0 50% 50% / 0 0 50% 50%; }
.fs--circle::before { border-radius: 50%; }
.fs--circle:is(:hover, .is-hover)::before { border-radius: 16%; }
.fs--quarter::before { border-radius: 100% 0 0 0; }
.fs--flip::before { border-radius: 0 100% 0 0; }
.fs--quarter:is(:hover, .is-hover)::before { rotate: 90deg; }
.fs--dome { align-items: start; }
.fs--dome::before { aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; }   /* rises out of the fold line */
.fs--dome:is(:hover, .is-hover)::before { border-radius: var(--r-2) var(--r-2) 0 0; }
.fs--pill::before { justify-self: center; width: 50%; aspect-ratio: 1 / 2; border-radius: var(--r-pill); }
.fs--pill:is(:hover, .is-hover)::before { scale: 2 1; }
.fs--half::before { justify-self: start; width: 50%; aspect-ratio: 1 / 2; border-radius: 0 999px 999px 0; }
.fs--half:is(:hover, .is-hover)::before { rotate: 180deg; }
/* Miguel's own shapes (2026-10-15), each with a hover that suits it */
.fs--seal::before { clip-path: url(#gs-scallop); }
.fs--seal:is(:hover, .is-hover)::before { rotate: 45deg; }
/* The tulip on a half circle (Miguel, 2026-10-15: it floated; he drew a bowl under it), a cup */
.fs--tulip { align-content: start; }
.fs--tulip::before { aspect-ratio: 2 / 1; clip-path: url(#gs-tulip); }
.fs--tulip::after {
  content: ''; display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 0 0 999px 999px; background: var(--c);
  translate: 0 101%; transition: translate 1.5s var(--ease-out); transition-delay: calc(var(--i) * 60ms + .45s);
}
.is-ready .fs--tulip::after { translate: 0 0; }
.fs--tulip:is(:hover, .is-hover)::before { scale: 1 -1; }
/* A beer can (Miguel, 2026-10-15: the orange pill "can be changed to a beer can"), its cell as narrow as the can */
.fs--can { --fw: .424; }
.fs--can::before { aspect-ratio: 100 / 236; clip-path: url(#gs-can); }
.fs--can { overflow-x: visible; }   /* its tilt would clip on a cell exactly its width */
.fs--can:is(:hover, .is-hover) { position: relative; z-index: 1; }
.fs--can::before { transform-origin: 50% 100%; }
.fs--can:is(:hover, .is-hover)::before { rotate: -10deg; scale: .9; }
.fs--star::before { clip-path: url(#gs-star); }
.fs--star:is(:hover, .is-hover)::before { rotate: 72deg; }
.fs--petals::before { clip-path: url(#gs-petals); }
.fs--petals:is(:hover, .is-hover)::before { rotate: 90deg; }
.fs--ring::before { clip-path: url(#gs-ring); }
.fs--ring:is(:hover, .is-hover)::before { rotate: 180deg; }
.fs--quatre::before { clip-path: url(#gs-quatrefoil); }
.fs--quatre:is(:hover, .is-hover)::before { scale: .8; }

/* ---------- Tablet and phone: badges move to their own row, under the buttons (tablets) or above them (phones) ---------- */
@media (max-width: 1023px) {
  .hero {
    --hook: 400px;
    grid-template-rows: minmax(var(--s-4), 1fr) auto auto auto auto minmax(var(--s-5), 1fr) var(--fs);
  }
  .hero__brand { grid-column: 2 / span 6; }
  .hero__tagline { margin-top: var(--s-6); }
  .hero__badge { grid-row: 5; align-self: start; margin-top: var(--s-5); }
  .ring { grid-column: 2 / span 2; justify-self: center; }
  .seal { grid-column: -4 / span 2; justify-self: center; }
  .hero { --fsum: 7.424; }                       /* the first 8 cells, the can among them */
  .fs:nth-child(n + 9) { display: none; }      /* 8 cells on tablet */
}
@media (max-width: 639px) {
  .hero { --hook: 400px; }
  .hero__brand { grid-column: 1 / -1; }
  /* Phones (Miguel, 2026-10-16: "the layout feels weird. I dont think the buttons need to be that
     wide. The tagline should sit on top of them. Everything feels tight and awkward"): the
     wordmark, the two badges (above the buttons, his ask earlier that day), then the tagline sitting
     right on the buttons; the groups a step apart (--s-6), the buttons as wide as the longer label,
     centered, not the screen's width. In that order on the way in. */
  .hero__badge { grid-row: 3; margin-top: var(--s-6); transition-delay: .3s; }
  .seal { transition-delay: .4s; }
  .hero__tagline { grid-row: 4; margin-top: var(--s-6); font-stretch: 75%; transition-delay: .5s; }
  .hero__actions { grid-row: 5; margin-top: var(--s-3); display: grid; grid-template-columns: max-content; justify-content: center; transition-delay: .6s; }
  .hero__actions .btn { justify-content: space-between; }   /* the shorter label's arrow lines up with the longer's */
  .ring { grid-column: 1 / span 2; }
  .seal { grid-column: 3 / span 2; }
  /* Four cells on phones, his four (2026-10-16: "since mobile only has 4 shapes on the fold i think
     it should be these four with diff colors for harmony"): the scallop (pink), the can (yellow:
     "make orange can in hero yellow", red on desktop), the star (baby blue) and the petals (green;
     pink on desktop, like the scallop). !important: the cells' color and order are inline in the
     markup */
  .hero { --fsum: 3.424; }                     /* three cells and the can's .424 */
  .fs:not(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(9)) { display: none; }
  .fs:nth-child(2) { --i: 0 !important; }
  .fs:nth-child(5) { --i: 1 !important; --c: var(--parcha) !important; }
  .fs:nth-child(7) { --i: 2 !important; }
  .fs:nth-child(9) { display: grid; --i: 3 !important; --c: var(--monte) !important; }   /* shown again: tablets stop at 8 cells */
}
@media (max-width: 639px) and (max-height: 700px) {
  .hero { --badge: 80px; }
  .hero__badge { margin-top: var(--s-4); }
  .hero__tagline { margin-top: var(--s-4); }
}

/* =========================================================================
   TAPES: two tilted bands. Yellow carries the one line of copy; pink carries black cut-out
   shapes, like holes punched through to the page, so the copy gets the attention.
   ========================================================================= */
.tapes { position: relative; height: calc(var(--t-2) * 6.5); margin-top: var(--s-7); overflow: visible; overflow-x: clip; }   /* clip only the sides: the pink band's end keeps its slope */
.tape {
  position: absolute; left: -8vw; width: 116vw; top: 50%;
  padding: var(--s-2) 0;
  font: 900 italic var(--t-2)/1 var(--f-display); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
/* The bands this far apart since site version B (the grilling; kept 2026-10-16): closer, the yellow
   covered the upper half of the pink's shapes along 40 to 48% of the width */
.tape--a { background: var(--parcha); rotate: -3deg; translate: 0 -125%; z-index: 2; }
.tape--b { background: var(--rosa); rotate: 2.5deg; translate: 0 35%; }
.tape__track { display: inline-flex; will-change: transform; animation: tape-run var(--tape-s, 24s) linear infinite; }   /* two equal halves, sliding by one: js/ui.js fills them and sets the pace (54px a second) */
.tape--b .tape__track { animation-direction: reverse; }   /* the pink tape runs the other way */
@keyframes tape-run { to { transform: translateX(-50%); } }
.tape__item { display: inline-flex; align-items: center; height: 1em; gap: .8em; padding-right: .8em; }
/* Explicit width from the iso's viewBox (513.04 × 349.61) so it can never collapse onto the copy */
.tape__item svg { flex: none; height: .8em; width: calc(.8em * 1.4675); color: var(--ink); }

.tape--b .tape__item { gap: .8em; padding-right: .8em; }   /* the yellow tape's spacing: open again (Miguel, 2026-10-15: "a bit busy now") */
.cut { flex: none; display: block; width: 1em; height: 1em; background: var(--ink); }
/* Only Miguel's own shapes, a line tall, led by the square Puerto Rico flag (2026-10-15). The
   ring, the quatrefoil, the double tulip and the star came off the same day ("a bit busy"). These
   six won the test against B, just the flag, the can and the seal (2026-11-03: no tests left). */
.cut--prflag { clip-path: url(#gs-prflag); }
.cut--can { width: .424em; clip-path: url(#gs-can); }
.cut--seal { clip-path: url(#gs-scallop); }
.cut--tulip { width: 1.4em; height: .7em; align-self: flex-end; margin-bottom: .15em; clip-path: url(#gs-tulip); }
.cut--petals { clip-path: url(#gs-petals); }
.cut--flag { clip-path: url(#gs-flag); }

@media (max-width: 639px) {
  /* Narrow screens see a short stretch of each band, so pull them further apart: the crossing
     then happens off to the side instead of covering the pink band */
  .tapes { height: calc(var(--t-1) * 7); margin-top: var(--s-6); }
  .tape { font-size: var(--t-1); padding: var(--s-1) 0; }
  .tape--a { translate: 0 -120%; }
  .tape--b { translate: 0 40%; }
}