/* ---- Background ---- */
:root {
  --blur: 0px;           /* increase if you want a frosty look */
  --overlay: rgba(0,0,0,.35);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    url("/images/bg.jpg") center/cover no-repeat fixed;
}

/* ---- Layout ---- */
.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1.25rem;
  backdrop-filter: blur(var(--blur));
}

/* ---- Wonky headline ---- */
.wonky {
  --size-clamp: clamp(42px, 8vw, 120px);
  font-size: var(--size-clamp);
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: .04em;
  line-height: .9;
  margin: 0 0 2rem;
  display: inline-block;
  white-space: pre-wrap;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

.wonky span {
  display: inline-block;
  transform: rotate(calc(var(--r, 0) * 1deg)) translateY(calc(var(--y, 0) * 1px));
  animation: wobble 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .08s);
}

/* Individual letter randomness (tweak if you want) */
.wonky span:nth-child(1)  { --r:-8;  --y:-3; --i:1; }
.wonky span:nth-child(2)  { --r: 5;  --y: 6;  --i:2; }
.wonky span:nth-child(3)  { --r:-4;  --y:-2; --i:3; }
.wonky span:nth-child(4)  { --r: 7;  --y: 4;  --i:4; }
.wonky span:nth-child(5)  { --r:-10; --y: 1;  --i:5; }
.wonky span:nth-child(6)  { --r: 9;  --y:-6; --i:6; }
.wonky span:nth-child(7)  { --r:-3;  --y: 2;  --i:7; }
.wonky span:nth-child(8)  { --r: 6;  --y:-5; --i:8; }
.wonky span:nth-child(9)  { --r:-7;  --y: 5;  --i:9; }
.wonky span:nth-child(10) { --r: 4;  --y:-2; --i:10; }
.wonky span:nth-child(11) { --r:-6;  --y: 3;  --i:11; }
.wonky span:nth-child(12) { --r: 8;  --y:-4; --i:12; }
.wonky span:nth-child(13) { --r:-5;  --y: 2;  --i:13; }
.wonky span:nth-child(14) { --r: 7;  --y:-3; --i:14; }
.wonky span:nth-child(15) { --r:-9;  --y: 4;  --i:15; }

@keyframes wobble {
  0%, 100% { transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * 1px)); }
  50%      { transform: rotate(calc((var(--r) + (random(var(--i))*2 - 1) * 6) * 1deg)) translateY(calc((var(--y) + 4) * 1px)); }
}

/* Fallback since CSS random() isn’t widely supported yet */
@supports not (transform: rotate(calc(random(1) * 1deg))) {
  @keyframes wobble {
    0%, 100% { transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * 1px)); }
    50%      { transform: rotate(calc((var(--r) + 6) * 1deg)) translateY(calc((var(--y) + 4) * 1px)); }
  }
}

/* ---- Buttons row ---- */
.cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var(--maxw);
}

/* Icon button */
.icon-btn {
  --pad: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad) 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  backdrop-filter: blur(6px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.icon-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
}

.icon-btn:active {
  transform: translateY(0) scale(.99);
}

.icon-btn img {
  width: 24px;
  height: 24px;
  display: block;
}

.icon-btn span {
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---- Small screens ---- */
@media (max-width: 420px) {
  .icon-btn { --pad: 10px; }
  .icon-btn span { display: none; } /* icons only on tight screens */
}