/* HEARTSTEEL keychain page — from Figma "Heartsteel" (node 21:3388), 440px wide collage.
   Every size is design px × --u, so the whole collage scales as one piece:
   full width on phones, capped at 520px wide on larger screens.
   Fonts: Adobe Fonts kit jzz0oer (loaded in index.html). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  container-type: inline-size; /* 100cqw = page width without the scrollbar */
  background: #8fb3e8 url("/heartsteel/assets/sky.jpg") center / cover fixed;
  color: #262b1b;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hs {
  --u: calc(min(100cqw, 520px) / 440);
  position: relative;
  width: calc(440 * var(--u));
  margin: 0 auto;
  overflow: hidden;
  background: url("/heartsteel/assets/sky.jpg") center / cover;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Top collage: absolutely placed in design coordinates */
.art { position: relative; height: calc(1512 * var(--u)); }
.art > * { position: absolute; display: block; }

.sky-mid {
  left: calc(-77.4 * var(--u)); top: calc(675 * var(--u));
  width: calc(1509.4 * var(--u)); height: calc(849 * var(--u));
  background: url("/heartsteel/assets/sky-hero.jpg") center / 100% 100%;
}
.new-music { left: calc(41 * var(--u)); top: calc(765 * var(--u)); width: calc(358 * var(--u)); height: auto; }
.honk {
  left: calc(288.83 * var(--u)); top: calc(907.72 * var(--u));
  width: calc(135.653 * var(--u)); height: calc(68.332 * var(--u));
  transform: rotate(21.77deg);
  animation: honk-bloat 3s ease-in-out infinite;
}
/* Soft "breathing" bloat, keeps the sticker's tilt */
@keyframes honk-bloat {
  0%, 100% { transform: rotate(21.77deg) scale(1); }
  50% { transform: rotate(21.77deg) scale(1.06); }
}

.socials { display: flex; gap: calc(30 * var(--u)); align-items: center; }
.socials a { display: block; line-height: 0; transition: opacity .15s; padding: 10px; margin: -10px; } /* 50px tap target */
.socials a:hover, .socials a:focus-visible { opacity: .7; }
.socials img { height: calc(30 * var(--u)); width: auto; }
.art > .socials { left: calc(177 * var(--u)); top: calc(937 * var(--u)); }

/* Subtle sky glitch: copies of the sky show thin, shifted, color-fringed slices for
   ~0.5s every 7s (stepped, VHS-style), then hide. Sits under all the content. */
.glitch { pointer-events: none; clip-path: inset(100% 0 0 0); }
.glitch--a {
  filter: hue-rotate(-25deg) saturate(1.5);
  animation: sky-glitch-a 7s steps(1, end) 2s infinite;
}
.glitch--b {
  filter: hue-rotate(35deg) saturate(1.6) brightness(1.08);
  mix-blend-mode: screen; opacity: .55;
  animation: sky-glitch-b 7s steps(1, end) 2.08s infinite;
}
@keyframes sky-glitch-a {
  0%    { clip-path: inset(22% 0 76% 0); transform: translateX(calc(-9 * var(--u))); }
  1.2%  { clip-path: inset(57% 0 41.5% 0); transform: translateX(calc(7 * var(--u))); }
  2.4%  { clip-path: inset(34% 0 64.8% 0); transform: translateX(calc(-5 * var(--u))); }
  3.6%  { clip-path: inset(71% 0 26% 0); transform: translateX(calc(11 * var(--u))); }
  4.8%  { clip-path: inset(12% 0 87% 0); transform: translateX(calc(-6 * var(--u))); }
  6%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
}
@keyframes sky-glitch-b {
  0%    { clip-path: inset(47% 0 51.8% 0); transform: translateX(calc(6 * var(--u))); }
  1.4%  { clip-path: inset(18% 0 80.5% 0); transform: translateX(calc(-8 * var(--u))); }
  2.8%  { clip-path: inset(63% 0 35.6% 0); transform: translateX(calc(4 * var(--u))); }
  4.2%  { clip-path: inset(29% 0 69.4% 0); transform: translateX(calc(-10 * var(--u))); }
  5.4%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
}

/* VHS tracking bar: a faint noisy band that rolls down the sky with each glitch burst */
.vhs-bar {
  left: 0; width: 100%; height: calc(26 * var(--u));
  pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, transparent, rgba(255,255,255,.28) 45%, rgba(210,225,255,.12) 70%, transparent);
  mix-blend-mode: screen;
  filter: blur(.4px);
  animation: vhs-roll 7s linear 1.9s infinite;
}
.vhs-bar--mid { top: calc(675 * var(--u)); --roll: calc(849 * var(--u)); }
.vhs-bar--top { top: 0; --roll: calc(645 * var(--u)); }
@keyframes vhs-roll {
  0% { opacity: 0; transform: translateY(0); }
  1.5% { opacity: 1; }
  10% { opacity: .8; }
  13%, 100% { opacity: 0; transform: translateY(var(--roll)); }
}

/* Old-TV / VCR texture on the sky (toned-down take on the "Old TV and VCR Effects" pen):
   flickering snow, soft RGB scanlines, and a faint band of tracking specks drifting down.
   Pre-made noise tiles stepped with CSS instead of per-frame canvas, so it is light on phones. */
.crt { pointer-events: none; overflow: hidden; }
.crt--mid { left: 0; top: calc(675 * var(--u)); width: 100%; height: calc(849 * var(--u)); }
.crt--top { left: 0; top: 0; width: 100%; height: calc(645 * var(--u)); }
.crt::before { /* snow */
  content: ""; position: absolute; inset: -60px;
  background: url("/heartsteel/assets/snow.png") 0 0 / 160px 160px;
  opacity: .09; mix-blend-mode: overlay;
  animation: crt-snow .5s steps(1, end) infinite;
}
.crt::after { /* scanlines + faint RGB subpixel stripes */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(18, 24, 48, .09) 2px 3px),
    linear-gradient(90deg, rgba(255, 0, 0, .03), rgba(0, 255, 0, .012), rgba(0, 0, 255, .03));
  background-size: 100% 3px, 3px 100%;
}
.crt__track { /* VCR tracking noise band */
  position: absolute; left: -10%; width: 120%; height: calc(70 * var(--u)); top: -15%;
  background: url("/heartsteel/assets/tracking.png") 0 0 / 320px 64px repeat;
  opacity: .32; mix-blend-mode: screen; filter: blur(.6px);
  -webkit-mask: linear-gradient(transparent, #000 35%, #000 65%, transparent);
          mask: linear-gradient(transparent, #000 35%, #000 65%, transparent);
  animation: crt-drift 12s linear infinite, crt-flicker .24s steps(1, end) infinite;
}
@keyframes crt-snow {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-37px, 21px); }
  40% { transform: translate(23px, -41px); }
  60% { transform: translate(-11px, 57px); }
  80% { transform: translate(49px, -13px); }
}
@keyframes crt-drift { from { top: -15%; } to { top: 105%; } }
@keyframes crt-flicker {
  0% { background-position: 0 0; }
  25% { background-position: -87px 13px; }
  50% { background-position: -201px -29px; }
  75% { background-position: -33px 41px; }
}

/* Paper-scrap buttons */
.btn {
  left: calc(54 * var(--u));
  width: calc(332 * var(--u)); height: calc(85 * var(--u));
  color: #262b1b; text-decoration: none;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .25));
  transition: transform .15s;
}
.btn:hover { transform: translateY(-2px) rotate(-.5deg); }
.btn:focus-visible { outline: 2px solid #262b1b; outline-offset: 4px; }
.btn--1 { top: calc(1017 * var(--u)); } /* comp 997; +20 so the socials are easier to tap */
.btn--2 { top: calc(1122 * var(--u)); }
.btn--3 { top: calc(1227 * var(--u)); }
.btn__paper { position: absolute; display: block; }
.btn--1 .btn__paper { left: 0; top: 0; width: calc(332 * var(--u)); height: calc(85 * var(--u)); }
.btn--2 .btn__paper { left: calc(10 * var(--u)); top: 0; width: calc(318 * var(--u)); height: calc(88 * var(--u)); }
.btn--3 .btn__paper { left: 0; top: calc(2 * var(--u)); width: calc(332 * var(--u)); height: calc(83 * var(--u)); }
.btn__label {
  position: absolute; left: calc(27 * var(--u)); top: calc(31 * var(--u));
  width: calc(278.776 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  font-size: calc(20.306 * var(--u)); letter-spacing: calc(-.4061 * var(--u));
  white-space: nowrap;
}
.btn__label img { width: calc(75 * var(--u)); height: auto; }

.tag-1800 { left: calc(25 * var(--u)); top: calc(1362 * var(--u)); width: calc(390 * var(--u)); height: calc(120 * var(--u)); }

/* Hero (painted after the content, as in the comp) */
.sky-top {
  left: calc(-2 * var(--u)); top: calc(-120 * var(--u));
  width: calc(1208 * var(--u)); height: calc(765 * var(--u));
  background: url("/heartsteel/assets/sky-hero.jpg") center / cover;
}
.group {
  left: calc(-84 * var(--u)); top: calc(-67 * var(--u));
  width: calc(607 * var(--u)); height: calc(794 * var(--u));
  object-fit: cover;
}
/* Full cluster PNG fills its Figma box (454 x 160 at x -20.27) */
.logo-cluster { left: calc(-20.27 * var(--u)); top: calc(541.4 * var(--u)); width: calc(454.23 * var(--u)); height: auto; }

/* Bottom: paper section */
.bottom {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(50 * var(--u)) 0;
  background: #e9f5a8 url("/heartsteel/assets/paper.jpg") center / cover;
}
.collage { position: relative; width: calc(460 * var(--u)); height: calc(276 * var(--u)); flex: none; }
.collage img { position: absolute; display: block; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .25)); }
.receipt {
  left: calc(241.42 * var(--u)); top: calc(-101.1 * var(--u));
  width: calc(205.859 * var(--u)); height: calc(387.546 * var(--u)); transform: rotate(9.12deg);
}
.glitter {
  left: calc(-23.48 * var(--u)); top: calc(-56.9 * var(--u));
  width: calc(298.161 * var(--u)); height: calc(210.446 * var(--u)); transform: rotate(-3.38deg);
  filter: none !important;
}
.pick {
  left: calc(36.02 * var(--u)); top: calc(75.88 * var(--u));
  width: calc(151 * var(--u)); height: calc(176 * var(--u)); transform: rotate(-9.14deg);
}
.bear {
  left: calc(152.75 * var(--u)); top: calc(134.24 * var(--u));
  width: calc(168.803 * var(--u)); height: calc(158.394 * var(--u)); transform: rotate(5.14deg);
}
.music-city { display: block; width: calc(280.247 * var(--u)); height: auto; }
.address {
  margin: 0; font-style: normal; text-align: center;
  font-size: calc(18 * var(--u)); letter-spacing: calc(-.36 * var(--u)); line-height: 1.2;
  text-box: trim-both cap alphabetic; /* matches Figma's trimmed text box */
}
.legal { display: block; width: calc(191 * var(--u)); height: auto; }

/* Desktop: Figma "Heartsteel" desktop frame (node 28:683, 1440 x 2452).
   The 440px column stays at real size (--u = 1px), centered; backgrounds run full width. */
@media (min-width: 768px) {
  .hs { --u: 1px; width: 100%; }
  .art { width: 440px; height: 1623px; margin: 0 auto; }

  /* One tall sky backdrop behind the whole top: full window width, 1703px tall, cover */
  .sky-mid { left: calc(220px - 50vw); top: -7px; width: 100vw; height: 1703px; background-size: cover; }
  .sky-top { display: none; }
  .vhs-bar--top { display: none; }
  .crt--top { display: none; }
  .crt--mid { left: calc(220px - 50vw); top: -7px; width: 100vw; height: 1703px; }
  .crt__track { height: 90px; }
  .vhs-bar--mid { top: 0; --roll: 1600px; height: 34px; }

  /* Content sits 73px lower than on phones */
  .new-music { top: 838px; }
  .honk { top: 980.72px; }
  .art > .socials { top: 1010px; }
  .btn--1 { top: 1090px; }
  .btn--2 { top: 1195px; }
  .btn--3 { top: 1300px; }
  .tag-1800 { top: 1435px; }

  /* Bigger hero: 708 x 926 group centered, 708px logo cluster */
  .group { left: -134px; top: -133px; width: 708px; height: 926px; }
  .logo-cluster { left: -141.7px; top: 579.3px; width: 708.052px; }

  /* Paper section spans the full width, 829px tall */
  .bottom { height: 829px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .btn, .socials a { transition: none; } .honk { animation: none; } .glitch, .vhs-bar, .crt__track { display: none; } .crt::before { animation: none; } }