/* Fonts are self-hosted (latin subset includes the Uzbek letters ʻ and ʼ). */
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("assets/fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("assets/fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-600.woff2") format("woff2"); }

:root {
  --bg: #04120c;
  --bg-2: #0a2419;
  --gold: #f2c14e;
  --gold-deep: #c8912a;
  --paper: #fbf6ea;
  --ink: #16130f;
  --red: #d8262d;
  --muted: #b9c7bf;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--paper);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Sunburst rays behind the hero, like the thumbnails. */
.rays {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.rays::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18vh;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgba(242, 193, 78, 0.075) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%);
  mask: radial-gradient(circle, #000 0%, transparent 45%);
  animation: spin 160s linear infinite;
}

/* Light paper grain over everything. */
.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.page {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 32px;
}

/* Hero */
.hero { text-align: center; }

.logo {
  display: block;
  width: 136px;
  height: 136px;
  margin: 0 auto 28px;
  padding: 0;
  border: 0;
  border-radius: 32px;
  overflow: hidden;
  background: #020f0a;
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.55), 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 80px rgba(242, 193, 78, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.logo img { display: block; width: 100%; height: 100%; }
.logo:hover { transform: rotate(-3deg) scale(1.04); }
.logo:active { transform: scale(0.96); }
.logo:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Mission: torn-paper labels */
.mission {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.label {
  display: inline-block;
  padding: 0.16em 0.32em 0.2em;
  clip-path: polygon(0% 7%, 5% 0%, 11% 6%, 18% 1%, 25% 7%, 32% 0%, 40% 5%, 47% 1%, 55% 7%, 62% 0%, 70% 6%, 77% 1%, 84% 7%, 91% 0%, 96% 5%, 100% 2%, 100% 93%, 95% 100%, 89% 94%, 82% 99%, 75% 93%, 68% 100%, 60% 95%, 52% 99%, 45% 93%, 38% 100%, 30% 94%, 22% 99%, 15% 93%, 8% 100%, 3% 95%, 0% 99%);
}

.label--paper { background: var(--paper); color: var(--ink); font-size: clamp(46px, 13vw, 88px); transform: rotate(-2.5deg); }
.label--gold {
  background: linear-gradient(180deg, #ffd66b, var(--gold) 55%, var(--gold-deep));
  color: var(--ink);
  font-size: clamp(60px, 19vw, 128px);
  transform: rotate(1.5deg);
}
.label--red { background: var(--red); color: #fff; font-size: clamp(44px, 12.5vw, 84px); transform: rotate(-1deg); }

.lead {
  max-width: 30em;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 4.2vw, 18px);
  text-wrap: balance;
}

/* Links */
.follow { margin-top: 52px; }

.follow__title {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.follow__title::before,
.follow__title::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  background: rgba(242, 193, 78, 0.5);
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .links { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Each link is a die-cut paper sticker. */
.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 76px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #fff, 0 12px 26px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.links li:nth-child(1) .card { --tilt: -1.2deg; }
.links li:nth-child(2) .card { --tilt: 1deg; }
.links li:nth-child(3) .card { --tilt: 0.8deg; }
.links li:nth-child(4) .card { --tilt: -1deg; }

.card:hover,
.card:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gold), 0 18px 34px rgba(0, 0, 0, 0.5);
  outline: none;
}
.card:active { transform: scale(0.98); }

.card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #fff;
}
.card__icon svg { width: 26px; height: 26px; fill: currentColor; }

.card--instagram .card__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.card--youtube .card__icon { background: #ff0033; }
.card--tiktok .card__icon { background: #111; box-shadow: inset -2px -2px 0 #fe2c55, inset 2px 2px 0 #25f4ee; }
.card--telegram .card__icon { background: #229ed9; }

.card__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card__name { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; }
.card__handle { font-size: 14px; color: #5b554c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card__cta {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer {
  margin-top: 56px;
  text-align: center;
  color: rgba(185, 199, 191, 0.6);
  font-size: 13px;
}
.footer p { margin: 0; }

/* "+1%" pops when the logo is tapped. */
.pop {
  position: fixed;
  z-index: 10;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: pop 1.1s ease-out forwards;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -14px) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -110px) scale(1); }
}

/* Entrance: labels slap on one by one. */
@media (prefers-reduced-motion: no-preference) {
  .label, .lead, .links li { animation: slap 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .label--paper { animation-delay: 0.15s; }
  .label--gold { animation-delay: 0.3s; }
  .label--red { animation-delay: 0.45s; }
  .lead { animation-delay: 0.6s; }
  .links li:nth-child(1) { animation-delay: 0.7s; }
  .links li:nth-child(2) { animation-delay: 0.78s; }
  .links li:nth-child(3) { animation-delay: 0.86s; }
  .links li:nth-child(4) { animation-delay: 0.94s; }
}
@keyframes slap {
  from { opacity: 0; translate: 0 18px; scale: 1.12; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rays::before { animation: none; }
  .card, .logo { transition: none; }
}