/* K/DA keychain page — from Figma "KDA-2" (node 19:3223), 440px wide design.
   Fonts: Adobe Fonts kit jzz0oer (loaded in index.html). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

:root {
  --sans: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "kensington", "Helvetica Neue", sans-serif;
  --text: #f5f5f5;
  --muted: #ccc;
  --pink: #dd025b;
}

body {
  background: #000;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  /* KDA-CorePattern-2 under an 86% black overlay (Figma) */
  background:
    linear-gradient(rgba(0, 0, 0, .86), rgba(0, 0, 0, .86)),
    #000 url("/kda/assets/pattern.jpg") center top / cover;
  overflow: hidden;
}

/* Hero: 440 x 675 in the design. The stage keeps that ratio and holds the logo + group;
   on phones it is the full width, on larger screens it stays centered and the
   background art stretches edge to edge. */
.hero {
  position: relative;
  overflow: hidden;
  background: #7f263c;
}
.hero-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 440 / 720; /* comp is 675 tall; +45 so the group can sit lower */
  container-type: inline-size;
}
.hero-bg, .hero-fade, .hero-logo, .hero-group { position: absolute; }
.hero-bg {
  left: -38.636%; top: 0; width: 175%; height: 109.778%;
  background: url("/kda/assets/bg.jpg") center / cover no-repeat;
}
.hero-fade { left: 0; width: 100%; height: 26.37%; }
.hero-fade--top { top: 0; background: linear-gradient(to top, transparent, #000); }
/* Eased fade (no hard band): darkens gradually, solid black only at the very bottom */
.hero-fade--bottom {
  bottom: 0; height: 40%;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 15%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.26) 45%,
    rgba(0,0,0,.45) 60%, rgba(0,0,0,.67) 75%, rgba(0,0,0,.87) 90%, #000 100%);
}
/* Logo: comp size (404px at 440), moved down from 50px for more headroom */
.hero-logo { left: 4.091%; top: max(16.8cqw, 56px); width: 91.818%; height: auto; }
.hero-logo img { display: block; width: 100%; height: auto; }
/* Logo light: a slow diagonal sweep (masked to the chrome letters) that fades in and out,
   then a small sparkle on the apex of the A as the light reaches it. Screen-blended, 10s loop. */
.hero-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
      transparent 36%, rgba(255, 255, 255, .06) 43%, rgba(255, 255, 255, .22) 48%,
      rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .22) 52%,
      rgba(255, 255, 255, .06) 57%, transparent 64%) no-repeat;
  background-size: 320% 100%;
  background-position: 120% 0;
  opacity: 0;
  -webkit-mask: url("/kda/assets/kda-logo.png") center / 100% 100% no-repeat;
          mask: url("/kda/assets/kda-logo.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  animation: logo-sweep 10s cubic-bezier(.45, .05, .35, 1) 1.2s infinite;
}
.hero-logo__sparkle {
  position: absolute; z-index: 1; left: 94.1%; top: 11.9%;
  width: 8%; aspect-ratio: 1;
  background: url("/kda/assets/sparkle.svg") center / contain no-repeat;
  mix-blend-mode: screen; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: logo-sparkle 10s ease-in-out 1.2s infinite;
}
@keyframes logo-sweep {
  0% { background-position: 120% 0; opacity: 0; }
  6% { opacity: 1; }
  26% { opacity: 1; }
  32%, 100% { background-position: -20% 0; opacity: 0; } /* ~3.2s glide, then rest */
}
@keyframes logo-sparkle {
  0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-45deg); }
  23% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  27% { opacity: .85; transform: translate(-50%, -50%) scale(.85) rotate(15deg); }
  36%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo::after, .hero-logo__sparkle { animation: none; opacity: 0; }
}
/* Group art is tightly cropped; placed so the figures land where the Figma comp has them */
.hero-group { left: -66.682%; top: 35.9cqw; width: 210.227%; height: auto; }

/* Body: 40.612px side padding on the 440px design */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 calc(min(100vw, 480px) * .0923) 50px;
  position: relative;
  isolation: isolate; /* footer texture sits behind the content */
}
/* Torn-edge texture behind the footer (KDA-Texture.png, transparent top cropped off).
   Phone comp: 947px wide on 440, left-aligned, bottom-aligned. */
.footer-texture {
  position: absolute; z-index: -1; left: 0; bottom: -.218vw;
  width: 215.23vw; height: auto;
  pointer-events: none;
}

/* Tablet (520–767): phone layout in a centered 480px stage over the tiled background */
@media (min-width: 520px) and (max-width: 767px) {
  .hero-stage { width: 480px; }
  /* Mirrored tile (bg-tile.jpg = image + flipped copy) so repeats are seamless */
  .hero-bg {
    left: 0; width: 100%; height: 100%;
    background: url("/kda/assets/bg-tile.jpg") center top / auto 100% repeat-x;
  }
  .hero-fade--top { height: 22%; }
  .hero-fade--bottom { height: 36%; }
}

/* Desktop: Figma "KDA-Desktop" (node 28:346), 1440 x 783 hero, scaled with the width */
@media (min-width: 768px) {
  .hero-stage { width: 100%; aspect-ratio: 1440 / 783; }
  .hero-bg {
    left: 0; width: 100%; height: 100%;
    background: url("/kda/assets/bg.jpg") center / cover no-repeat;
  }
  .hero-fade--top { height: 38.825%; }    /* 304px */
  .hero-logo {
    z-index: 1; /* logo sits over the group on desktop */
    left: 30.417%; top: 3.472cqw; width: 39.167%; /* 564px, 50px from top */
    filter: drop-shadow(0 0 17px #000);
  }
  /* 2164px-wide frame centered 96px left of middle, top 50px (image cover-fit into it) */
  /* Relit export already cropped to the hero: full width, 67px down */
  .hero-group { left: 0; top: 4.653cqw; width: 100%; height: auto; }
  /* Softer than the comp's 306px linear fade: taller, eased, solid black only at the very bottom */
  .hero-fade--bottom {
    height: 55%;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 12%, rgba(0,0,0,.08) 24%, rgba(0,0,0,.16) 36%,
      rgba(0,0,0,.28) 48%, rgba(0,0,0,.43) 60%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.78) 84%,
      rgba(0,0,0,.92) 94%, #000 100%);
  }
  /* 440px column, transparent so the pattern shows through */
  .content { max-width: 440px; padding: 0 40.612px 50px; }
  /* 1476 x 984 (full image) centered, 102px below the bottom */
  .footer-texture { left: 50%; transform: translateX(-50%); width: 102.5vw; bottom: -7.081vw; }
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.divider { display: block; width: 100%; height: auto; }
.divider--flip { transform: scaleY(-1); }
.divider-wrap { width: 100%; padding-top: 30px; }

.headline {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.socials { display: flex; gap: 30px; align-items: center; justify-content: center; }
.socials a { display: block; line-height: 0; transition: opacity .15s; padding: 10px; margin: -10px; } /* 50px tap target */
.stack > .socials { margin-bottom: 20px; } /* extra room before the buttons so the icons are easy to tap */
.socials a:hover, .socials a:focus-visible { opacity: .75; }
.socials a:focus-visible, .pill:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 72px;
  padding: 20px 40px;
  border-radius: 90px;
  background: #f5f5f5;
  color: #000;
  text-decoration: none;
  font-size: 20.306px;
  letter-spacing: -0.4061px;
  white-space: nowrap;
  transition: transform .15s, background .15s;
}
.pill:hover { background: #fff; transform: translateY(-1px); }
.pill img { display: block; }

.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 50px 0;
}
.store-icon { width: 72.604px; height: 60px; object-fit: cover; }
.store-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 8vw, 35px);
  line-height: .95;
  color: var(--pink);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.store-address {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.36px;
  color: var(--muted);
  text-align: center;
  font-style: normal;
  line-height: normal;
}
.store .divider-wrap { padding-top: 30px; }

.legal { display: block; }

@media (prefers-reduced-motion: reduce) { .pill, .socials a { transition: none; } }