/* Kingdom v3: eye-catching effects. Crossed marquee bands, spinning hero badge,
   scroll reveal, magnetic buttons and card tilt. js/fx.js drives the moving parts. */

/* ---------- Crossed marquee bands on the hero's bottom edge (height --mq-h is set on .hero-wrap) ---------- */
.mq { overflow: hidden; white-space: nowrap; user-select: none; }
.mq-track { display: inline-flex; align-items: center; will-change: transform; }
.mq-track span, .mq-track i { flex: none; }
.mq-track i { display: inline-grid; place-items: center; }

.mq-cross { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--mq-h); overflow: hidden; transform: translateY(50%); }
.mq-band { position: absolute; left: -5%; right: -5%; top: 50%; padding: 16px 0; }
.mq-band .mq-track { gap: 28px; }
.mq-band span { font: 400 clamp(24px, 2.8vw, 40px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.mq-band i svg { width: 22px; height: 22px; }
.mq-band-gold { transform: translateY(-50%) rotate(3deg); background: var(--accent-fill); color: var(--accent-ink); }
.mq-band-dark { transform: translateY(-50%) rotate(-3deg); background: var(--dark); color: #f4f1ea; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); }
.mq-band-dark i svg { color: var(--accent-light); }

/* ---------- Spinning badge on the hero ---------- */
.hero-badge {
  position: absolute;
  z-index: 3;
  right: calc(2% + clamp(24px, 4vw, 56px));
  top: calc(14px + clamp(96px, 12vw, 130px));
  display: grid;
  place-items: center;
  width: clamp(128px, 11vw, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(13, 13, 13, .45);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .4s ease;
}
.hero-badge:hover { transform: scale(1.06); }
.hero-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: badge-spin 18s linear infinite; }
.hero-badge-ring text { font: 700 16.5px/1 var(--f-body); letter-spacing: .1em; fill: currentColor; }
.hero-badge-core { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.hero-badge-core svg { width: 50%; height: 50%; }
.hero-badge:hover .hero-badge-ring { animation-duration: 6s; }
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* ---------- Scroll reveal ---------- */
/* uses translate (not transform) so it doesn't fight transforms the element already has, like the category card tilt */
[data-reveal] { opacity: 0; translate: 0 32px; transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0s); }
[data-reveal].is-in { opacity: 1; translate: none; }

/* ---------- Magnetic buttons ---------- */
.btn { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .2s, filter .2s; }

/* ---------- Card tilt with a light sheen ---------- */
.cat { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .9s ease var(--rd, 0s), translate 1s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s); }
.cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%);
  transition: opacity .4s ease;
}
.cat:hover::after { opacity: 1; }

/* ---------- Headline reveal: each word rises out of its own mask (js/fx.js splits the words) ---------- */
.wr { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .03em .1em; margin: -.06em -.03em -.1em; }
.wr-in { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--wi, 0) * 70ms + var(--wd, 0ms)); }
.is-split.is-in .wr-in { transform: none; }

/* ---------- A slow light sweep across the gold word in the hero ---------- */
.h1-gold {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 246, 220, .75) 50%, rgba(255, 255, 255, 0) 58%) no-repeat, var(--accent-fill);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: gold-sheen 6s ease-in-out 1.6s infinite;
}
@keyframes gold-sheen { 0% { background-position: 160% 0, 0 0; } 45%, 100% { background-position: -60% 0, 0 0; } }

/* Calm version for reduced motion, smaller badge on phones */
@media (prefers-reduced-motion: reduce) {
  .hero-badge-ring { animation: none; }
  [data-reveal] { opacity: 1; translate: none; }
  .h1-gold { animation: none; }
}
@media (max-width: 720px) {
  .hero-badge { top: 82px; right: calc(2% + 14px); width: 66px; }
  .hero-badge-ring text { font-size: 17px; }
  .mq-band span { font-size: 22px; }
  /* narrow screens: the bands run parallel, one under the other, so both stay readable and together they
     cover the hero's bottom edge all the way across (crossed, they drifted apart at the sides and the page showed through) */
  .mq-band-gold { top: 34%; transform: translateY(-50%) rotate(-3deg); }
  .mq-band-dark { top: 64%; transform: translateY(-50%) rotate(-3deg); }
}