/* A visual language inspired by gaming interfaces, in PopUP 3D colours. */
body { font-family: "Chakra Petch", Arial, sans-serif; }
h1, h2, h3, .shop-card h3, .shop-hero h1, .shop-content h2, .shop-cta h2, .catalog h2, .about h2, .contact-cta h2 { font-family: "Days One", sans-serif; font-weight: 400; letter-spacing: -.035em; }
.hero__content h1 { font-size: clamp(38px, 3.8vw, 62px); line-height: 1.12; }
.hero__content .headline-line { white-space: normal; }
.hero::before { content: ""; position: absolute; z-index: -1; top: 20%; right: 8%; bottom: 12%; width: 34%; border-left: 1px solid #c94bff28; border-right: 1px solid #fa58e020; transform: skewX(-12deg); pointer-events: none; }
.copy { animation: none; }
.copy h1, .copy .intro, .copy .actions { animation: hero-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.copy .intro { animation-delay: .12s; }
.copy .actions { animation-delay: .24s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal-pending { opacity: 0; transform: translateY(20px); }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.navigation, .shop-header__inner { border-bottom: 1px solid #e55aff24; }
.nav-cta, .header-cta, .button, .hero-link, .shop-cta > a, .request-form__submit {
  border-radius: 4px 14px 4px 14px;
}
.nav-cta, .header-cta, .button--primary, .hero-link, .shop-cta > a, .request-form__submit {
  background-size: 180% 100%;
  background-position: 0 50%;
  transition: background-position .35s ease, transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover, .header-cta:hover, .button--primary:hover, .hero-link:hover, .shop-cta > a:hover, .request-form__submit:hover { background-position: 100% 50%; }
.catalog__heading, .shop-content__top { position: relative; }
.catalog .catalog__heading h2 { background: none; color: #f6f6fa; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.2; max-width: 760px; width: auto; }
.catalog__heading h2 span { background: linear-gradient(100deg, #b749ff, #f12dd0, #ff8742); background-clip: text; -webkit-background-clip: text; color: transparent; }
.catalog__heading > p:last-child { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; }
.catalog__heading::after, .shop-content__top::after {
  content: ""; display: block; width: min(180px, 35%); height: 2px; margin-top: 25px;
  background: linear-gradient(90deg, #ae3bff, #ee2ace, transparent);
}
.product-card, .shop-card {
  border-radius: 4px 20px 4px 20px;
  box-shadow: inset 0 0 0 1px #ffffff0c, 0 16px 36px #0005;
}
.product-card::before {
  content: ""; position: absolute; z-index: 2; top: 12px; left: 12px; width: 20px; height: 20px;
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); pointer-events: none;
}
.product-card__footer { background: linear-gradient(110deg, #171121, #0b0c19); }
.product-card__footer span, .shop-card__action span { border-radius: 4px 10px 4px 10px; transition: background .25s ease, color .25s ease, transform .25s ease; }
.product-card:hover .product-card__footer span, .product-card:focus-within .product-card__footer span { background: var(--accent); color: #080912; transform: translate(2px, -2px); }
.shop-card:hover .shop-card__action span, .shop-card:focus-within .shop-card__action span { background: var(--card-accent); color: #080912; transform: translate(2px, -2px); }
.product-card:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 16px 36px #0007; }
.button:focus-visible, .hero-link:focus-visible, .product-card__footer:focus-visible, .shop-cta > a:focus-visible, .request-form__submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.filter { border-radius: 4px 12px 4px 12px; }
.filter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shop-results { border-top-color: #c052e947; }
@media (max-width: 620px) {
  .hero__content h1 { font-size: clamp(32px, 8vw, 46px); }
  .hero::before { right: 0; width: 40%; opacity: .5; }
  .catalog__heading::after, .shop-content__top::after { margin-top: 18px; }
  .product-card, .shop-card { border-radius: 4px 14px 4px 14px; }
  .product-card__footer span { height: 32px; width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .copy h1, .copy .intro, .copy .actions { animation: none; }
  .reveal-pending { opacity: 1; transform: none; }
  .nav-cta, .header-cta, .button, .hero-link, .shop-cta > a, .request-form__submit, .product-card__footer span, .shop-card__action span { transition: none; }
}