/* $HOODIE — hero
   Night city, lime character. The lime is sampled from the character's own
   material, so the page accent and the figure are literally one colour. */

:root {
  --night: #02040a;
  --lime: #c4fb07;
  --lime-hover: #d6ff45;
  --lime-ink: #0d1500;
  --paper: #eef1e6;
  --fog: #a7aec2;
  --line: rgba(196, 251, 7, 0.38);
  --warn: #ff8a65;

  --sign: 'Bungee', 'Arial Black', Impact, sans-serif;
  --ui: 'Geologica', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --code: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, canvas { display: block; }

:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  border-radius: 8px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ top bar */

.topbar {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 30px) var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(196, 251, 7, 0.35));
}

.brand__name {
  font-family: var(--sign);
  font-size: 1.125rem;
  color: var(--lime);
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--paper);
  transition: background-color 0.2s, color 0.2s;
}

.icon-link svg { width: 20px; height: 20px; fill: currentColor; }

.icon-link:hover { background: rgba(238, 241, 230, 0.08); color: var(--lime); }

.topbar__buy { margin-left: 10px; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  font: 600 1rem/1 var(--ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.12s;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 14px 36px -14px rgba(196, 251, 7, 0.7);
}

.btn--primary:hover { background: var(--lime-hover); }

.btn--outline {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 10, 0.35);
  color: var(--lime);
}

.btn--outline:hover { border-color: var(--lime); }

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: max(660px, 100svh);
  overflow: hidden;
  container-type: inline-size;              /* cqw in the copy = hero width */
  /* shown until the canvas has painted, and if it never can */
  background: linear-gradient(#02040a 0%, #0f1330 55%, #3d2438 80%, #170f1a 100%);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

/* keeps the headline legible where it sits over the lit skyline */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 72% at 72% 54%,
    rgba(2, 4, 10, 0.8) 0%,
    rgba(2, 4, 10, 0.46) 48%,
    rgba(2, 4, 10, 0) 76%);
}

.hero__fallback {
  position: absolute;
  z-index: -1;
  left: 5vw;
  bottom: 6vh;
  width: min(44vw, 72vh);
}

/* --F is the composition frame: the hero width, capped at a 16:9 box built
   from the hero height. Column position and every type size are fractions of
   it, so on a large screen the copy grows together with the character instead
   of staying at fixed pixel sizes next to it. main.js uses the same frame to
   place the character in the band left of this column. */
.hero__content {
  --F: min(100cqw, max(660px, 100svh) * 1.78);
  width: calc(var(--F) * 0.42);
  margin-left: calc((100cqw - var(--F)) / 2 + var(--F) * 0.52);
  padding: 112px 0 72px;
}

/* the headline is a neon sign over the city */
.sign {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  /* "$HOODIE" is 4.9em wide in Bungee: 0.066F is 0.32F, inside the 0.42F column */
  font-size: max(3.25rem, calc(var(--F) * 0.066));
  line-height: 0.92;
  white-space: nowrap;
  color: var(--lime);
}

.sign__text {
  display: inline-block;
  text-shadow:
    0 0 0.05em rgba(196, 251, 7, 0.75),
    0 0 0.22em rgba(196, 251, 7, 0.35),
    0 0 0.6em rgba(196, 251, 7, 0.18);
  animation: sign-on 1.2s steps(1, end) 0.2s both;
}

/* the one orchestrated moment: the tube strikes, stutters, holds */
@keyframes sign-on {
  0%        { opacity: 0.06; text-shadow: none; }
  9%        { opacity: 0.95; }
  12%       { opacity: 0.2; text-shadow: none; }
  20%       { opacity: 1; }
  25%       { opacity: 0.45; }
  33%, 100% { opacity: 1; }
}

.hero__lede {
  max-width: 30ch;
  margin: 0.7em 0 1.6em;
  font-size: max(1.125rem, calc(var(--F) * 0.0128));
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  font-size: max(1rem, calc(var(--F) * 0.0098));
}

/* second call to action: black with a lime outline, next to the lime buy button */
.btn--x {
  gap: 0.6em;
  border: 2px solid var(--lime);
  background: rgba(2, 4, 10, 0.6);
  color: var(--lime);
}

.btn--x svg { width: 1.05em; height: 1.05em; fill: currentColor; }

.btn--x:hover { background: rgba(196, 251, 7, 0.12); }

.hero__content .btn {
  min-height: 3em;
  padding: 0 1.5em;
  border-radius: 0.875em;
  font-size: max(1rem, calc(var(--F) * 0.0098));
}

/* ------------------------------------------------------------ contract address */

.ca {
  display: grid;
  grid-template-columns: minmax(0, 100%);
  justify-items: start;
  gap: 0.5em;
  margin-bottom: max(1.25rem, calc(var(--F) * 0.012));
}

.ca__label { font-size: max(0.875rem, calc(var(--F) * 0.0084)); color: var(--fog); }

/* sizes below are in em of this font size, so the pill scales as one piece */
.ca__button {
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  max-width: 100%;
  padding: 0.46em 0.46em 0.46em 1.4em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 4, 10, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font: inherit;
  font-size: max(0.8125rem, calc(var(--F) * 0.0078));
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.ca__button:hover { border-color: rgba(196, 251, 7, 0.85); }

/* before launch: an empty pill keeps its width, the copy button is inert */
.ca__address:empty, .ca__address:has(.ca__full:empty) { min-width: 18ch; }
.ca__button:disabled { cursor: default; }
.ca__button:disabled:hover { border-color: var(--line); }
.ca__button:disabled .ca__action { opacity: 0.45; }

.ca__address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--code);
  font-size: 1em;
}

.ca__short { display: none; }

.ca__action {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55em;
  min-height: 2.6em;
  padding: 0 1.15em;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font-size: 1.077em;
  font-weight: 600;
  transition: background-color 0.2s;
}

.ca__icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ca__icon--done { display: none; }

.ca__button[data-state="copied"] .ca__action { background: var(--paper); }
.ca__button[data-state="copied"] .ca__icon--copy { display: none; }
.ca__button[data-state="copied"] .ca__icon--done { display: block; }

.ca__button[data-state="failed"] { border-color: var(--warn); }
.ca__button[data-state="failed"] .ca__action { background: var(--warn); }

/* ------------------------------------------------------------ ticker */

/* A lime tape of HOODIE and his stickers, pulled over the bottom edge of the
   hero. main.js sets --ticker-shift (one group) and --ticker-duration. */
.ticker {
  position: relative;
  z-index: 2;
  margin-top: -0.55em;
  padding-block: 0.26em;
  overflow: hidden;
  border-block: 3px solid #000;
  background: var(--lime);
  box-shadow: 0 0 70px -10px rgba(196, 251, 7, 0.55);
  color: #000;
  font: 400 max(2.5rem, calc(min(100vw, max(660px, 100svh) * 1.78) * 0.034)) / 1 var(--sign);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker var(--ticker-duration, 40s) linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  padding-right: 0.5em;
}

.ticker__word { white-space: nowrap; }

.ticker__emoji {
  flex: none;
  width: auto;
  height: 1.55em;
  animation: ticker-hop 1.8s ease-in-out infinite alternate;
}

.ticker__emoji:nth-of-type(odd) { --tilt: -7deg; }
.ticker__emoji:nth-of-type(even) { --tilt: 6deg; animation-delay: -0.9s; }
.ticker__emoji:nth-of-type(3n) { animation-delay: -0.45s; }

@keyframes ticker {
  to { transform: translate3d(calc(-1 * var(--ticker-shift, 50%)), 0, 0); }
}

@keyframes ticker-hop {
  from { transform: translateY(0.05em) rotate(var(--tilt, 0deg)); }
  to   { transform: translateY(-0.07em) rotate(calc(var(--tilt, 0deg) * -0.4)); }
}

/* ------------------------------------------------------------ about */

/* Deep pool water, since HOODIE is floating in it: light near the surface,
   darker below, with two slow caustic layers and ripples around the float.
   Lime would swallow the lime character; this green keeps him glowing. */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  padding: clamp(96px, 11vw, 220px) var(--gutter) clamp(88px, 9vw, 180px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(40, 150, 80, 0.35), rgba(40, 150, 80, 0) 70%),
    linear-gradient(180deg, #0b5530 0%, #073a21 45%, #041f12 100%);
}

.about::before,
.about::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* feTurbulence ridges mapped to thin lime lines; tiles stitch, and each layer
   travels exactly one tile per loop so the drift never jumps */
.about::before {
  top: -420px;
  left: -640px;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.00625 0.0119' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.77 0 0 0 0 0.98 0 0 0 0 0.1 -12 0 0 0 1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 640px 420px;
  opacity: 0.12;
  animation: caustics-a 44s linear infinite;
}

.about::after {
  top: 0;
  left: 0;
  right: -900px;
  bottom: -600px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.00444 0.00833' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.95 0 0 0 0 0.45 -10 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 900px 600px;
  opacity: 0.08;
  animation: caustics-b 61s linear infinite;
}

@keyframes caustics-a { to { transform: translate3d(640px, 420px, 0); } }
@keyframes caustics-b { to { transform: translate3d(-900px, -600px, 0); } }

/* same composition frame as the hero copy */
.about__inner {
  --F: min(100cqw, max(660px, 100svh) * 1.78);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--F) * 0.04);
  width: min(100%, calc(var(--F) * 0.9));
  margin-inline: auto;
}

/* The copy sits on a card in the ticker's sticker language: black outline and
   a hard lime offset. The blur calms the caustics right behind the lines. */
.about__copy {
  justify-self: start;
  max-width: 100%;
  padding: max(28px, calc(var(--F) * 0.026));
  border: 3px solid #000;
  border-radius: 28px;
  background: rgba(3, 16, 9, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    max(8px, calc(var(--F) * 0.006)) max(8px, calc(var(--F) * 0.006)) 0 var(--lime),
    0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.about__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.5rem, calc(var(--F) * 0.048));
  line-height: 0.95;
  color: var(--lime);
  text-shadow:
    0 0 0.05em rgba(196, 251, 7, 0.7),
    0 0 0.25em rgba(196, 251, 7, 0.3),
    0 0.06em 0 rgba(0, 0, 0, 0.35);
}

.about__text {
  max-width: 40ch;
  margin-top: 1em;
  font-size: max(1.0625rem, calc(var(--F) * 0.0112));
  line-height: 1.6;
  color: rgba(238, 241, 230, 0.86);
}

.about__text p { margin: 0 0 0.9em; }

.about__lead {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--paper);
}

.about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

/* little stickers: lime, black outline, a hard black offset */
.about__tags li {
  padding: 0.4em 0.9em;
  border: 2px solid #000;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 3px 3px 0 #000;
  color: #000;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
}

.about__tags li:nth-child(odd) { transform: rotate(-2deg); }
.about__tags li:nth-child(even) { transform: rotate(1.5deg); }

/* the float sits a little inside its column so the water reads around it */
.about__art {
  position: relative;
  justify-self: center;
  width: 84%;
  margin: 0;
}

/* the float's lime light spilling over the water */
.about__art::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 58%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 251, 7, 0.26), rgba(196, 251, 7, 0));
  pointer-events: none;
}

.about__float {
  position: relative;
  z-index: 1;
  animation: bob 5.2s ease-in-out infinite;
  transform-origin: 50% 86%;
}

.about__float img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2.5em 2em rgba(0, 0, 0, 0.35));
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-2.2%) rotate(1deg); }
}

/* rings spreading from the waterline (86% down the image, centred on the float) */
.about__ripple {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 86%;
  width: 92%;
  aspect-ratio: 5 / 1;
  border: 2px solid rgba(196, 251, 7, 0.45);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  animation: ripple 6s ease-out infinite;
  pointer-events: none;
}

.about__ripple:nth-child(2) { animation-delay: 2s; }
.about__ripple:nth-child(3) { animation-delay: 4s; }

@keyframes ripple {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* ------------------------------------------------------------ nft soon */

/* Deep space, HOODIE on the stones looking up at a
   charged cube. One --cycle drives everything: the cube reforms, hums, builds
   up for a long stretch, trembles harder and harder, then bursts (flash,
   shockwave, faces blown apart, the whole scene quaking) and reforms again. */
@property --burst {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.nft {
  --cycle: 16s;
  --h: clamp(260px, min(52svh, 34vw), 640px);        /* rock reference height */
  --base-x: 30%;
  --cube-x: 68%;
  --cube-y: 32%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(760px, 100svh);
  background:
    radial-gradient(45% 40% at var(--cube-x) var(--cube-y), rgba(120, 170, 10, 0.2), rgba(120, 170, 10, 0) 70%),
    radial-gradient(80% 60% at 20% 100%, rgba(30, 50, 10, 0.35), rgba(0, 0, 0, 0) 70%),
    linear-gradient(#010205 0%, #02040a 55%, #000 100%);
}

.nft__stars { position: absolute; inset: 0; z-index: -3; }

.nft__stars i {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation: twinkle 4.5s ease-in-out infinite alternate;
}

.nft__stars i:nth-child(2) { animation-duration: 6.5s; animation-delay: -2s; }
.nft__stars i:nth-child(3) { width: 2px; height: 2px; animation-duration: 8s; animation-delay: -5s; }

@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* ---- cube */
.nft__cube-wrap {
  --cube: clamp(150px, min(22vw, 30svh), 340px);
  position: absolute;
  z-index: 3;
  left: var(--cube-x);
  top: var(--cube-y);
  width: var(--cube);
  height: var(--cube);
  translate: -50% -50%;
  perspective: calc(var(--cube) * 4.5);
}

.nft__core,
.nft__flash,
.nft__shock {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nft__core {
  inset: -70%;
  background: radial-gradient(closest-side, rgba(236, 255, 150, 0.85), rgba(196, 251, 7, 0.45) 22%, rgba(196, 251, 7, 0.12) 50%, rgba(196, 251, 7, 0) 72%);
  animation: core var(--cycle) ease-in-out infinite;
}

@keyframes core {
  0%    { opacity: 0; transform: scale(0.3); }
  4.8%  { opacity: 0.55; transform: scale(0.9); }
  30%   { opacity: 0.6; transform: scale(0.95); }
  47.8% { opacity: 0.75; transform: scale(1.05); }
  51.4% { opacity: 0.6; transform: scale(1); }
  62.1% { opacity: 0.9; transform: scale(1.2); }
  65.7% { opacity: 0.7; transform: scale(1.1); }
  71.6% { opacity: 1; transform: scale(1.5); }
  73.4% { opacity: 0.7; transform: scale(1.1); }
  76.1% { opacity: 1; transform: scale(2.6); }
  91%   { opacity: 0; transform: scale(3.4); }
  100%  { opacity: 0; transform: scale(0.3); }
}

.nft__flash {
  inset: -120%;
  z-index: 2;
  background: radial-gradient(closest-side, #fff, rgba(236, 255, 150, 0.8) 18%, rgba(196, 251, 7, 0.35) 45%, rgba(196, 251, 7, 0) 72%);
  opacity: 0;
  animation: flash var(--cycle) ease-out infinite;
}

@keyframes flash {
  0%, 73.8%, 100% { opacity: 0; transform: scale(0.3); }
  76.1% { opacity: 1; transform: scale(1.2); }
  85.1% { opacity: 0.35; transform: scale(1.6); }
  94%   { opacity: 0; transform: scale(1.8); }
}

/* shockwave rings */
.nft__shock {
  inset: 0;
  z-index: 2;
  border: 3px solid #efffb8;
  box-shadow: 0 0 24px var(--lime), inset 0 0 24px rgba(196, 251, 7, 0.6);
  opacity: 0;
  animation: shock var(--cycle) cubic-bezier(0.1, 0.6, 0.3, 1) infinite;
}

.nft__shock + .nft__shock { animation-name: shock-late; border-width: 2px; }

@keyframes shock {
  0%, 74.3%, 100% { opacity: 0; transform: scale(0.4); }
  75.5% { opacity: 1; transform: scale(0.8); }
  97%   { opacity: 0; transform: scale(9); }
}

@keyframes shock-late {
  0%, 76.7%, 100% { opacity: 0; transform: scale(0.4); }
  77.9% { opacity: 0.8; transform: scale(0.7); }
  98.5% { opacity: 0; transform: scale(6); }
}

/* the whole scene lights up for a moment */
.nft__whiteout {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(70% 80% at var(--cube-x) var(--cube-y), rgba(240, 255, 190, 0.95), rgba(196, 251, 7, 0.45) 40%, rgba(196, 251, 7, 0.08) 80%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: whiteout var(--cycle) ease-out infinite;
}

@keyframes whiteout {
  0%, 74%, 100% { opacity: 0; }
  76.1% { opacity: 0.85; }
  80.6% { opacity: 0.3; }
  91%   { opacity: 0; }
}

/* the ground jolts with the burst */
@keyframes quake {
  0%, 74%, 100% { transform: translate(0, 0); }
  74.8% { transform: translate(-14px, 9px); }
  75.6% { transform: translate(12px, -8px); }
  76.4% { transform: translate(-11px, 7px); }
  77.2% { transform: translate(10px, -7px); }
  78%   { transform: translate(-9px, 6px); }
  79%   { transform: translate(8px, -5px); }
  80%   { transform: translate(-7px, 5px); }
  81%   { transform: translate(6px, -4px); }
  82.2% { transform: translate(-5px, 3px); }
  83.4% { transform: translate(4px, -3px); }
  84.8% { transform: translate(-3px, 2px); }
  86.4% { transform: translate(2px, -1px); }
  88%   { transform: translate(-1px, 1px); }
  90%   { transform: translate(0, 0); }
}

.nft__stage,
.nft__ridge { animation: quake var(--cycle) linear infinite; }

.nft__charge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: charge var(--cycle) linear infinite;
}

/* reform, a long calm hum, heartbeat pulses, a tremble that builds and builds,
   a held breath, then the burst blows the faces apart */
@keyframes charge {
  0%    { transform: scale(0.2); --burst: 0px; }
  4.2%  { transform: scale(1.05); }
  6%    { transform: scale(1); }
  24%   { transform: translate(0, 0) scale(1); }
  25.4% { transform: translate(-0.3px, 0.2px) scale(1.003); }
  26.8% { transform: translate(-0.3px, -0.3px) scale(1.020); }
  28.1% { transform: translate(0.4px, -0.3px) scale(1.003); }
  29.4% { transform: translate(0.6px, -0.3px) scale(1.003); }
  30.7% { transform: translate(-0.7px, 0.4px) scale(1.004); }
  32.0% { transform: translate(0.8px, 0.6px) scale(1.006); }
  33.2% { transform: translate(1.0px, -0.6px) scale(1.007); }
  34.4% { transform: translate(0.8px, -0.7px) scale(1.009); }
  35.6% { transform: translate(-0.8px, 0.7px) scale(1.012); }
  36.8% { transform: translate(1.2px, -1.0px) scale(1.029); }
  37.9% { transform: translate(1.2px, 0.9px) scale(1.031); }
  39.0% { transform: translate(-1.2px, -1.3px) scale(1.020); }
  40.1% { transform: translate(2.0px, 1.0px) scale(1.023); }
  41.2% { transform: translate(-1.9px, -1.2px) scale(1.026); }
  42.2% { transform: translate(1.8px, 1.5px) scale(1.029); }
  43.2% { transform: translate(2.8px, -1.3px) scale(1.032); }
  44.2% { transform: translate(-2.2px, -2.0px) scale(1.035); }
  45.2% { transform: translate(-2.5px, -1.6px) scale(1.039); }
  46.2% { transform: translate(2.2px, -2.5px) scale(1.043); }
  47.1% { transform: translate(2.4px, 2.0px) scale(1.055); }
  48.0% { transform: translate(-3.9px, 3.1px) scale(1.070); }
  48.9% { transform: translate(-3.7px, 3.3px) scale(1.062); }
  49.8% { transform: translate(3.3px, -3.0px) scale(1.058); }
  50.7% { transform: translate(-4.1px, 2.7px) scale(1.062); }
  51.5% { transform: translate(3.9px, -3.7px) scale(1.066); }
  52.3% { transform: translate(4.2px, -2.6px) scale(1.070); }
  53.1% { transform: translate(-3.5px, -2.4px) scale(1.074); }
  53.9% { transform: translate(-5.0px, -3.7px) scale(1.078); }
  54.7% { transform: translate(-6.2px, 2.8px) scale(1.082); }
  55.5% { transform: translate(5.6px, 3.1px) scale(1.086); }
  56.2% { transform: translate(-5.2px, -4.0px) scale(1.090); }
  56.9% { transform: translate(-5.4px, 4.6px) scale(1.094); }
  57.6% { transform: translate(5.8px, -3.0px) scale(1.104); }
  58.3% { transform: translate(5.2px, 3.6px) scale(1.119); }
  59.0% { transform: translate(-7.4px, 3.5px) scale(1.124); }
  59.7% { transform: translate(-6.6px, 6.4px) scale(1.117); }
  60.4% { transform: translate(6.6px, -3.6px) scale(1.115); }
  61.0% { transform: translate(-6.3px, -5.7px) scale(1.119); }
  61.6% { transform: translate(7.1px, 5.8px) scale(1.123); }
  62.2% { transform: translate(8.7px, 7.1px) scale(1.127); }
  62.8% { transform: translate(-9.1px, 6.2px) scale(1.131); }
  63.4% { transform: translate(-9.1px, 4.3px) scale(1.135); }
  64.0% { transform: translate(9.3px, -6.6px) scale(1.139); }
  64.6% { transform: translate(9.0px, 7.7px) scale(1.143); }
  65.2% { transform: translate(-7.0px, -4.8px) scale(1.147); }
  65.7% { transform: translate(8.0px, -7.4px) scale(1.151); }
  66.2% { transform: translate(8.8px, -8.0px) scale(1.155); }
  66.7% { transform: translate(-9.5px, -5.8px) scale(1.158); }
  67.2% { transform: translate(6.8px, 4.6px) scale(1.162); }
  67.7% { transform: translate(-9.4px, 5.7px) scale(1.166); }
  68.2% { transform: translate(-8.6px, -8.2px) scale(1.174); }
  68.7% { transform: translate(-11.1px, 8.7px) scale(1.186); }
  69.2% { transform: translate(-9.1px, 8.6px) scale(1.197); }
  69.7% { transform: translate(8.5px, 7.3px) scale(1.199); }
  70.1% { transform: translate(7.9px, -9.6px) scale(1.195); }
  70.5% { transform: translate(9.7px, 8.7px) scale(1.192); }
  70.9% { transform: translate(11.0px, -10.0px) scale(1.192); }
  71.3% { transform: translate(10.0px, 9.4px) scale(1.194); }
  72%   { transform: translate(0, 0) scale(0.88); --burst: 0px; }
  74%   { transform: translate(0, 0) scale(0.84); --burst: 0px; }
  76.1% { transform: scale(1.3); --burst: calc(var(--cube) * 0.9); }
  85.1% { transform: scale(1.4); --burst: calc(var(--cube) * 1.7); }
  85.4%, 100% { transform: scale(0.2); --burst: 0px; }
}

.nft__cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: spin 16s linear infinite;
}

@keyframes spin {
  from { transform: rotateX(-22deg) rotateY(0deg) rotateZ(4deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg) rotateZ(4deg); }
}

.nft__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--lime);
  background: linear-gradient(135deg, rgba(196, 251, 7, 0.3), rgba(60, 90, 0, 0.55));
  box-shadow:
    inset 0 0 calc(var(--cube) * 0.2) rgba(196, 251, 7, 0.55),
    0 0 26px rgba(196, 251, 7, 0.35);
  backface-visibility: hidden;
  color: #f2ffc4;
  font: 400 calc(var(--cube) * 0.2) / 0.95 var(--sign);
  text-align: center;
  text-shadow: 0 0 0.12em var(--lime), 0 0 0.45em rgba(196, 251, 7, 0.7);
  animation: face-life var(--cycle) linear infinite;
}

@keyframes face-life {
  0%    { opacity: 0; }
  3.6%  { opacity: 1; }
  62.1% { box-shadow: inset 0 0 calc(var(--cube) * 0.2) rgba(196, 251, 7, 0.55), 0 0 26px rgba(196, 251, 7, 0.35); }
  71.6% { opacity: 1; box-shadow: inset 0 0 calc(var(--cube) * 0.5) rgba(240, 255, 190, 0.95), 0 0 60px rgba(196, 251, 7, 0.8); }
  76.1% { opacity: 1; }
  82.1%, 100% { opacity: 0; }
}

/* hairline cracks on every face, spreading with the charge */
.nft__face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f6ffcf' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M47 52 36 39l3-9-9-13M36 39l-14 2M47 52l15 7 6 13 14 6M62 59l-4 15 4 15M47 52l9-11 15-3 8-12M56 41l-2-12M30 17l-6-11M22 41 8 38l-6 6M84 79l12 3M72 38l14 4'/%3E%3C/svg%3E") center / 100% 100%;
  mix-blend-mode: screen;
  animation: face-cracks var(--cycle) linear infinite;
}

@keyframes face-cracks {
  0%, 24% { opacity: 0.1; transform: scale(0.6); }
  53.8% { opacity: 0.5; transform: scale(0.85); }
  71.6%, 100% { opacity: 1; transform: scale(1); }
}

.nft__face--front  { transform: translateZ(calc(var(--cube) / 2 + var(--burst))); }
.nft__face--back   { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2 + var(--burst))); }
.nft__face--right  { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2 + var(--burst))); }
.nft__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2 + var(--burst))); }
.nft__face--top    { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2 + var(--burst))); }
.nft__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2 + var(--burst))); }

/* shards of light thrown far out at the burst */
.nft__sparks { position: absolute; left: 50%; top: 50%; z-index: 3; }

.nft__sparks i {
  position: absolute;
  left: 0;
  top: -2px;
  width: calc(var(--cube) * 0.3);
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(196, 251, 7, 0), #f7ffd8);
  box-shadow: 0 0 12px var(--lime);
  transform-origin: 0 50%;
  opacity: 0;
  animation: spark var(--cycle) cubic-bezier(0.05, 0.7, 0.3, 1) infinite;
}

@keyframes spark {
  0%, 74.6%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--cube) * 0.3)) scaleX(0.2); }
  76.1% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--cube) * 0.5)) scaleX(1.4); }
  97%   { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--cube) * 4 * var(--d))) scaleX(0.6); }
}

/* ---- HOODIE on the stones: the rock layers are 2.6h x 0.78h with the
   standing point 0.4 across and 0.33h down, as in the hero */
.nft__stage {
  position: absolute;
  z-index: 2;
  left: calc(var(--base-x) - var(--h) * 1.04);
  bottom: calc(var(--h) * -0.29);
  width: calc(var(--h) * 2.6);
  height: calc(var(--h) * 0.78);
}

.nft__rock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* mirrored copies continue the ridge seamlessly to both screen edges */
.nft__rock--l { left: -100%; transform: scaleX(-1); }
.nft__rock--r { left: 100%; transform: scaleX(-1); }
/* extra foreground boulders so the stone reaches the left corner and fills
   the valley to the right of HOODIE */
.nft__rock--fl { left: -52%; top: 8%; transform: scaleX(-1); }
.nft__rock--fr { left: 48%; top: 6%; }
.nft__rock--fr2 { left: 80%; top: 4%; transform: scaleX(-1); }

/* a farther ridge across the whole width, behind the stage: the rock layer and
   its mirror image side by side tile without a seam. Below it the ground runs
   into black, so nothing shows through the valleys. */
.nft__ridge {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--h) * 0.62);
  background:
    url("assets/rock-ridge.webp?v=hoodie-22") left calc(var(--base-x) - var(--h) * 2.3) bottom calc(var(--h) * -0.2) / calc(var(--h) * 4.4) calc(var(--h) * 0.66) repeat-x;
  filter: brightness(0.62);
}

.nft::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--h) * 0.22);
  background: linear-gradient(rgba(0, 0, 0, 0), #000 70%);
  pointer-events: none;
}

.nft__sitter {
  --s: calc(var(--h) * 0.92);
  position: absolute;
  left: calc(var(--h) * 1.04 - var(--s) * 0.8045 * 0.52);
  top: calc(var(--h) * 0.38 - var(--s) * 0.935);
  width: calc(var(--s) * 0.8045);
  height: var(--s);
  transform-origin: 50% 93%;
  animation: sit-breathe 4.6s ease-in-out infinite;
}

@keyframes sit-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.008); }
}

.nft__haze {
  position: absolute;
  left: calc(var(--h) * 0.1);
  width: calc(var(--h) * 1.9);
  top: calc(var(--h) * -0.25);
  height: calc(var(--h) * 0.9);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 251, 7, 0.22), rgba(196, 251, 7, 0));
}

/* ------------------------------------------------------------ footer */

/* A lime slab under the space scene, in the ticker's sticker language:
   black type, a thick black line on top, a black X badge with a lime offset. */
.footer {
  position: relative;
  z-index: 2;
  border-top: 3px solid #000;
  background: var(--lime);
  color: #000;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: clamp(36px, 4vw, 56px) var(--gutter) 18px;
  text-align: center;
}

.footer__title {
  margin: 0;
  font: 400 clamp(1.5rem, 3vw, 2.5rem) / 1 var(--sign);
  text-transform: uppercase;
}


.footer__x {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  border: 3px solid #000;
  border-radius: 16px;
  background: #000;
  color: var(--lime);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.footer__x svg { width: 46%; height: 46%; fill: currentColor; }

.footer__x:hover { transform: translate(-3px, -3px) rotate(-4deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35); }
.footer__x:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.footer__x:focus-visible { outline-color: #000; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px solid rgba(0, 0, 0, 0.18);
}

.footer .brand__name { color: #000; }
.footer .brand__mark { filter: none; padding: 3px; border-radius: 9px; background: #000; }

.footer__copy { margin: 0; font-size: 0.875rem; font-weight: 500; }

@media (max-width: 480px) {
  .footer__bar { justify-content: center; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 999px) {
  .hero {
    align-items: flex-start;
    min-height: max(800px, 100svh);
  }

  .hero::before {
    background: radial-gradient(95% 50% at 50% 24%,
      rgba(2, 4, 10, 0.82) 0%,
      rgba(2, 4, 10, 0) 78%);
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding: 96px var(--gutter) 0;
    text-align: center;
  }

  .sign { font-size: clamp(2.5rem, 13vw, 4.5rem); }

  .ca { justify-items: center; }
  .hero__actions { justify-content: center; }

  /* stacked: card on top, left-aligned inside (centred paragraphs read badly), float below */
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 56px;
  }

  .about__copy {
    justify-self: stretch;
    width: min(100%, 560px);
    margin-inline: auto;
    padding: 26px 22px 24px;
    border-radius: 22px;
    box-shadow: 7px 7px 0 var(--lime), 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  }

  .about__art { width: min(88%, 540px); }

  .nft {
    --h: clamp(230px, min(40svh, 62vw), 440px);
    --base-x: 40%;
    min-height: max(720px, 100svh);
  }

  .nft { --cube-x: 60%; --cube-y: 25%; }
  .nft__cube-wrap { --cube: clamp(130px, 38vw, 240px); }

}

@media (max-width: 759px) {
  .topbar__buy { display: none; }
}

@media (max-width: 480px) {
  .ca__full { display: none; }
  .ca__short { display: inline; }
  /* when copying is blocked the full address has to be there to select */
  .ca__button[data-state="failed"] .ca__full { display: inline; }
  .ca__button[data-state="failed"] .ca__short { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sign__text { animation: none; }
  .btn, .ca__button, .ca__action, .icon-link, .footer__x { transition: none; }
  .ticker__track, .ticker__emoji, .about__float, .about::before, .about::after { animation: none; }
  .about__ripple { display: none; }
  .nft__stars i, .nft__core, .nft__charge, .nft__cube,
  .nft__face, .nft__face::after, .nft__sitter, .nft__stage, .nft__ridge { animation: none; }
  .nft__core { opacity: 0.6; }
  .nft__cube { transform: rotateX(-22deg) rotateY(-35deg); }
  .nft__flash, .nft__sparks, .nft__shock, .nft__whiteout { display: none; }
}