/*
GameDayer motion & energy layer
--------------------------------
Layered on top of style.css. Keeps the editorial brand skeleton (Oswald +
Inter, ink/paper/signal tokens) and injects kinetic energy: marquee tickers,
hero entrance, scroll reveals, parallax drift, neon gradients and micro-
interactions. Everything degrades gracefully without JavaScript and honours
prefers-reduced-motion.
*/

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --gd-neon: #21e6c1;
  --gd-flare: #ff5c1f;
  --gd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Marquee tickers -------------------------------------------------------- */
.gd-ticker {
  overflow: hidden;
  border-top: 1px solid var(--gd-black);
  border-bottom: 1px solid var(--gd-black);
  background: linear-gradient(90deg, var(--gd-signal), var(--gd-neon), var(--gd-signal));
  background-size: 200% 100%;
  animation: gd-ticker-bg 9s linear infinite;
}

.gd-ticker--ink {
  background: var(--gd-black);
  color: var(--gd-white);
}

.gd-ticker__track {
  display: flex;
  width: max-content;
  animation: gd-marquee 24s linear infinite;
}

.gd-ticker--reverse .gd-ticker__track {
  animation-direction: reverse;
}

.gd-ticker__group {
  display: flex;
  gap: 2.6rem;
  padding-right: 2.6rem;
}

.gd-ticker__item {
  display: inline-flex;
  gap: 2.6rem;
  align-items: center;
  padding-block: 0.85rem;
  color: var(--gd-black);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.gd-ticker--ink .gd-ticker__item {
  color: var(--gd-white);
}

.gd-ticker__item::after {
  content: "★";
  color: inherit;
  font-size: 0.72em;
}

.gd-ticker--ink .gd-ticker__item::after {
  color: var(--gd-signal);
}

@keyframes gd-ticker-bg {
  to {
    background-position: -200% 0;
  }
}

@keyframes gd-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* 3. Hero: entrance, energy and drift --------------------------------------- */
.gd-hero__copy {
  position: relative;
  overflow: hidden;
}

.gd-hero__copy::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(46rem 46rem at 12% 4%, rgb(216 255 62 / 0.2), transparent 58%),
    radial-gradient(38rem 38rem at 96% 94%, rgb(33 230 193 / 0.15), transparent 58%);
  content: "";
  pointer-events: none;
}

.gd-hero__copy > * {
  position: relative;
  z-index: 1;
}

.gd-hero__tag {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  width: max-content;
  margin: 0 0 1.7rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--gd-black);
  color: var(--gd-black);
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  transform: skew(-4deg);
}

.gd-hero__tag::before {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--gd-signal);
  border: 1px solid var(--gd-black);
  content: "";
}

.gd-hero__tag,
.gd-hero__copy h1,
.gd-hero__copy > p,
.gd-actions {
  animation: gd-rise 0.85s var(--gd-ease-out) both;
}

.gd-hero__copy h1 {
  animation-delay: 0.1s;
}

.gd-hero__copy > p {
  animation-delay: 0.26s;
}

.gd-actions {
  animation-delay: 0.42s;
}

.gd-hero__copy h1 {
  transition: transform 0.3s var(--gd-ease-out), text-shadow 0.3s var(--gd-ease-out);
}

.gd-hero__copy h1:hover {
  text-shadow: 6px 6px 0 rgb(216 255 62 / 0.9);
  transform: skew(-2deg);
}

.gd-hero__media {
  animation: gd-media-in 1.05s cubic-bezier(0.77, 0, 0.18, 1) both;
}

.gd-hero__caption {
  animation: gd-fade 0.9s ease 0.95s both;
}

.gd-js .gd-hero__photo {
  height: 116%;
  transform: translateY(var(--gd-drift, 0px));
}

.gd-hero:hover .gd-hero__photo {
  transform: translateY(var(--gd-drift, 0px)) scale(1.025);
}

@keyframes gd-rise {
  from {
    opacity: 0;
    transform: translateY(2.2rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gd-media-in {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes gd-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 4. Buttons: sweep and glow ------------------------------------------------ */
.gd-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--gd-fast), color var(--gd-fast), box-shadow 0.3s var(--gd-ease-out), transform 0.3s var(--gd-ease-out);
}

.gd-button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gd-black);
  content: "";
  transform: translateX(-101%);
  transition: transform 0.38s var(--gd-ease-out);
}

.gd-button--outline::before {
  background: linear-gradient(100deg, var(--gd-signal), var(--gd-neon));
}

.gd-button:hover::before,
.gd-button:focus-visible::before {
  transform: translateX(0);
}

.gd-button--signal {
  background: linear-gradient(100deg, var(--gd-signal), var(--gd-neon));
}

.gd-button--signal:hover,
.gd-button--signal:focus-visible {
  box-shadow: 0 0 0 3px rgb(216 255 62 / 0.28), 0 12px 30px rgb(216 255 62 / 0.35);
}

.gd-button:hover {
  transform: translateY(-2px);
}

.gd-button svg {
  transition: transform 0.3s var(--gd-ease-out);
}

.gd-button:hover svg,
.gd-button:focus-visible svg {
  transform: translate(2px, -2px);
}

/* 5. Product rail ------------------------------------------------------------ */
.gd-product {
  transition: transform 0.45s var(--gd-ease-out);
}

.gd-product:hover {
  transform: translateY(-0.35rem);
}

.gd-product__image::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gd-signal), var(--gd-neon));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--gd-ease-out);
}

.gd-product__image:hover::after,
.gd-product__image:focus-visible::after {
  transform: scaleX(1);
}

.gd-product__image:hover img {
  transform: scale(1.06);
}

.gd-product__image span {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  background: linear-gradient(100deg, var(--gd-signal), var(--gd-neon));
  box-shadow: 3px 3px 0 rgb(0 0 0 / 0.8);
}

.gd-product__image span svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
}

.gd-product__sticker {
  position: absolute;
  z-index: 2;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.45rem 0.7rem;
  background: var(--gd-signal);
  color: var(--gd-black);
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-5deg);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 0.85);
  animation: gd-pulse 2.4s ease-in-out infinite;
}

@keyframes gd-pulse {
  0%,
  100% {
    transform: rotate(-5deg) scale(1);
  }

  50% {
    transform: rotate(-5deg) scale(1.08);
  }
}

.gd-product__meta h3 a {
  background-image: linear-gradient(90deg, var(--gd-signal), var(--gd-neon));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.35s var(--gd-ease-out);
}

.gd-product__meta h3 a:hover,
.gd-product__meta h3 a:focus-visible {
  background-size: 100% 2px;
}

.gd-product__meta p {
  transition: color 0.25s ease;
}

.gd-product:hover .gd-product__meta p {
  color: var(--gd-flare);
}

/* 6. Category grid — redesigned: three equal vertical energy cards ----------- */
/* The Shortcode block may inject line-break nodes around generated links. */
.gd-category-grid > br {
  display: none;
}

.gd-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 1.25rem;
  background: transparent;
}

.gd-category {
  min-height: clamp(24rem, 44vh, 33rem);
  border: 1px solid #3d3d3a;
  background-size: 210% 210%;
  transition: background-position 0.8s ease, transform 0.5s var(--gd-ease-out), border-color 0.3s ease;
}

.gd-category--1 {
  grid-row: auto;
  background: linear-gradient(160deg, #b0111f 0%, #f04e00 55%, #ffa42e 100%);
}

.gd-category--2 {
  background: linear-gradient(160deg, #0b5cff 0%, #21e6c1 100%);
}

.gd-category--3 {
  background: radial-gradient(130% 130% at 20% 10%, #2b2b28 0%, #0b0b0b 62%);
}

/* The crest becomes a compact corner badge instead of a huge centrepiece. */
.gd-category--1 img,
.gd-category--2 img,
.gd-category--3 img {
  top: 1.4rem;
  right: 1.4rem;
  bottom: auto;
  left: auto;
  width: clamp(5.5rem, 6.5vw, 8rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: saturate(0.9) contrast(1.05);
  transform: none;
  transition: filter 320ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gd-category__index {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 1.35rem;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.45);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.2rem, 4.2vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: -webkit-text-stroke-color 0.3s ease;
}

.gd-category__content {
  display: block;
}

.gd-category__content strong {
  display: block;
  font-size: clamp(2.2rem, 3.1vw, 3.5rem);
  transition: text-shadow 0.3s ease;
}

.gd-category__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-top: 1rem;
}

.gd-category__content small {
  margin: 0;
}

.gd-category__arrow {
  position: static;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
}

.gd-category:hover {
  background-position: 100% 60%;
  border-color: rgb(216 255 62 / 0.55);
  transform: translateY(-0.3rem);
}

.gd-category:hover img {
  filter: saturate(1) contrast(1.05);
  transform: rotate(-6deg) scale(1.1);
}

.gd-category:hover .gd-category__index {
  -webkit-text-stroke-color: var(--gd-signal);
}

.gd-category:hover .gd-category__arrow {
  animation: gd-bounce 0.55s var(--gd-ease-spring);
}

.gd-category:hover .gd-category__content strong {
  text-shadow: 0 0 26px rgb(216 255 62 / 0.6);
}

@keyframes gd-bounce {
  0% {
    transform: translate(0, 0);
  }

  55% {
    transform: translate(0.38rem, -0.38rem);
  }

  100% {
    transform: translate(0.2rem, -0.2rem);
  }
}

/* 7. Story --------------------------------------------------------------------- */
.gd-story__visual {
  background: linear-gradient(150deg, var(--gd-signal), var(--gd-neon));
}

.gd-story__visual img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gd-story__visual:hover img {
  transform: scale(1.03);
}

.gd-story__visual > span {
  color: transparent;
  -webkit-text-stroke: 2px var(--gd-white);
  animation: gd-float 5s ease-in-out infinite;
}

@keyframes gd-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.4rem);
  }
}

/* 8. Promise strip -------------------------------------------------------------- */
.gd-promise__grid p {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}

.gd-promise__grid p::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gd-black);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--gd-ease-out);
}

.gd-promise__grid p:hover::before {
  transform: scaleY(1);
}

.gd-promise__grid p:hover {
  color: var(--gd-white);
}

.gd-promise__grid p:hover strong {
  color: var(--gd-signal);
}

.gd-promise__grid p:hover span {
  color: #b7b7b2;
}

/* 9. Section headings ------------------------------------------------------------- */
.gd-section-head h2,
.gd-colours__head h2,
.gd-story__copy h2 {
  transition: text-shadow 0.3s ease, transform 0.3s var(--gd-ease-out);
}

.gd-section-head h2:hover,
.gd-story__copy h2:hover {
  text-shadow: 5px 5px 0 rgb(216 255 62 / 0.85);
  transform: skew(-2deg);
}

.gd-colours__head h2:hover {
  text-shadow: 0 0 34px rgb(33 230 193 / 0.55);
}

.gd-section-head > a,
.gd-text-link {
  transition: color 0.25s ease;
}

.gd-section-head > a:hover,
.gd-text-link:hover {
  color: #8a6d00;
}

/* 10. Header and footer energy ----------------------------------------------------- */
.gd-utility {
  position: relative;
  overflow: hidden;
}

.gd-utility::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgb(216 255 62 / 0.16), transparent);
  content: "";
  animation: gd-sweep 5.5s linear infinite;
}

@keyframes gd-sweep {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(430%);
  }
}

.gd-wordmark {
  transition: transform 0.3s var(--gd-ease-spring), text-shadow 0.3s ease;
}

.gd-wordmark:hover,
.gd-wordmark:focus-visible {
  text-shadow: 4px 4px 0 var(--gd-signal);
  transform: skew(-4deg) translateX(2px);
}

.gd-footer__wordmark {
  transition: color 0.3s ease, transform 0.3s var(--gd-ease-spring);
}

.gd-footer__wordmark:hover,
.gd-footer__wordmark:focus-visible {
  background: linear-gradient(100deg, var(--gd-signal), var(--gd-neon));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transform: skew(-4deg) translateX(2px);
}

.gd-header .wp-block-navigation-item__content::after {
  background: linear-gradient(90deg, var(--gd-signal), var(--gd-neon));
}

.gd-newsletter {
  transition: border-color 0.3s ease;
}

.gd-newsletter:focus-within {
  border-color: var(--gd-signal);
  box-shadow: 0 1px 0 0 var(--gd-signal);
}

/* 11. Jersey hub energy --------------------------------------------------------------- */
.fs-jersey-intro {
  position: relative;
  overflow: clip;
}

.fs-jersey-intro::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(42rem 42rem at 90% 10%, rgb(216 255 62 / 0.26), transparent 60%),
    radial-gradient(30rem 30rem at 4% 88%, rgb(33 230 193 / 0.16), transparent 60%);
  content: "";
  pointer-events: none;
}

.fs-jersey-intro > * {
  position: relative;
  z-index: 1;
}

.fs-jersey-intro h1 {
  animation: gd-rise 0.85s var(--gd-ease-out) both;
  transition: text-shadow 0.3s ease;
}

.fs-jersey-intro h1:hover {
  text-shadow: 6px 6px 0 rgb(216 255 62 / 0.9);
}

.fs-signal-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.3s var(--gd-ease-out), transform 0.3s var(--gd-ease-out);
}

.fs-signal-button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--ink);
  content: "";
  transform: translateX(-101%);
  transition: transform 0.38s var(--gd-ease-out);
}

.fs-signal-button:hover::before,
.fs-signal-button:focus-visible::before {
  transform: translateX(0);
}

.fs-signal-button:hover,
.fs-signal-button:focus-visible {
  box-shadow: 0 0 0 3px rgb(216 255 62 / 0.28), 0 10px 26px rgb(216 255 62 / 0.32);
  transform: translateY(-2px);
}

.fs-league-tab {
  transition: color 0.25s ease, border-color 0.25s ease;
}

.fs-league-tab:hover,
.fs-league-tab.is-active {
  border-bottom-color: var(--wp--preset--color--signal);
}

.fs-team-card img {
  transition: transform 0.3s var(--gd-ease-out);
}

.fs-team-card:hover img,
.fs-team-card:focus-visible img {
  transform: scale(1.07) rotate(-1.5deg);
}

.fs-team-card span {
  transition: background 0.25s ease, color 0.25s ease;
}

.fs-team-card:hover span,
.fs-team-card:focus-visible span {
  background: var(--wp--preset--color--signal);
  color: var(--wp--preset--color--ink);
}

.fs-jersey-filterbar button {
  transition: box-shadow 0.3s var(--gd-ease-out), transform 0.3s var(--gd-ease-out);
}

.fs-jersey-filterbar button:hover {
  box-shadow: 0 0 0 2px rgb(216 255 62 / 0.4), 0 8px 24px rgb(216 255 62 / 0.32);
  transform: translateY(-2px);
}

/* 12. Scroll reveal system -------------------------------------------------------------- */
.gd-js [data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.9s var(--gd-ease-out), transform 0.9s var(--gd-ease-out);
}

.gd-js [data-reveal="left"] {
  transform: translateX(-2.4rem);
}

.gd-js [data-reveal="right"] {
  transform: translateX(2.4rem);
}

.gd-js [data-reveal="zoom"] {
  transform: scale(0.94);
}

.gd-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.gd-js [data-reveal-delay="1"] {
  transition-delay: 0.12s;
}

.gd-js [data-reveal-delay="2"] {
  transition-delay: 0.24s;
}

.gd-js [data-reveal-delay="3"] {
  transition-delay: 0.36s;
}

/* 13. Responsive -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gd-category-grid {
    grid-template-columns: 1fr;
  }

  .gd-category {
    min-height: clamp(19rem, 48vw, 26rem);
  }
}

@media (max-width: 760px) {
  .gd-category,
  .gd-category--2,
  .gd-category--3 {
    min-height: clamp(19rem, 48vw, 26rem);
  }

  .gd-ticker__group {
    gap: 1.6rem;
    padding-right: 1.6rem;
  }

  .gd-ticker__item {
    gap: 1.6rem;
    padding-block: 0.65rem;
    font-size: 1rem;
  }

  .gd-hero__tag {
    margin-bottom: 1.2rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.66rem;
  }

  .gd-product__sticker {
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.62rem;
  }

  .gd-story__visual > span {
    -webkit-text-stroke-width: 1.5px;
  }
}

/* 14. Reduced motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .gd-home *,
  .gd-home *::before,
  .gd-home *::after,
  .fs-jersey-hub *,
  .fs-jersey-hub *::before,
  .fs-jersey-hub *::after,
  .gd-utility,
  .gd-header *,
  .gd-footer * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gd-ticker__track {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}