/* =====================================================================
   401jK — SKIN 77 · JESTER HQ
   "The court is gone. We stayed."
   Drop-in skin: include AFTER skins.css. Activates on html[data-skin="77"].
   Pairs with assets/js/jester-hq.js (the Three.js jester-cap background).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;500;700;900&family=Space+Grotesk:wght@300;400;500&family=Instrument+Serif:ital@1&display=swap');

/* ---------- palette: futurist motley ---------- */
html[data-skin="77"] {
  --jq-void: #0b0614;
  --jq-void-2: #150b26;
  --jq-magenta: #ff2d95;
  --jq-cyan: #19e3ff;
  --jq-gold: #ffc61a;
  --jq-violet: #8b5cf6;
  --jq-bone: #f4eefc;

  /* feed the existing enhancement layer so EVERY button/title/glow
     in styles.css + skins.css automatically goes motley */
  --sk-grad: linear-gradient(90deg, #ff2d95, #ffc61a, #19e3ff, #8b5cf6, #ff2d95);
  --sk-accent: #ffc61a;
  --sk-glow: rgba(255, 45, 149, 0.55);
  --sk-glow2: rgba(25, 227, 255, 0.45);
  --sk-inner: rgba(11, 6, 20, 0.78);
  --sk-speed: 5s;

  background: var(--jq-void);
}

/* let the Three.js stage shine through */
html[data-skin="77"] body {
  background: transparent !important;
  background-image: none !important;
  color: var(--jq-bone);
  font-family: 'Space Grotesk', sans-serif;
}
html[data-skin="77"] :is(.header, .navigation, .main, main, footer) {
  position: relative;
  z-index: 2;
}

/* containers must not paint over the 3D stage — only cards keep glass */
html[data-skin="77"] :is(.main, main, .section, .landing-content, .container,
  .landing-text, .meme-banner-section, .merch-section, footer, .footer) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html[data-skin="77"] ::selection { background: var(--jq-magenta); color: var(--jq-void); }

/* the WebGL canvas mounted by jester-hq.js */
#jester-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none;
}
html[data-skin="77"] #jester-stage { display: block; }

/* soft vignette so text stays readable over the 3D scene */
html[data-skin="77"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(5, 2, 10, 0.6) 100%);
  animation: none;
}
html[data-skin="77"] body::after { content: none; }

/* ---------- typography: the jester voice ---------- */
html[data-skin="77"] :is(.landing-partners-title, .section-title, .manifesto-title,
  .gif-gallery-title, .memeory-title) {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--jq-magenta), var(--jq-gold), var(--jq-cyan), var(--jq-magenta));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
  animation: jq-shimmer 5s linear infinite;
  text-shadow: none;
}
@keyframes jq-shimmer { to { background-position: 300% 0; } }

/* tagline: untouched — the original styles.css look applies (rotating texts incl.
   "Meme your way to freedom...", "Buy your freedom now...") */

html[data-skin="77"] h3 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- header / nav: orbital guild bar ---------- */
html[data-skin="77"] .header {
  background: rgba(11, 6, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244, 238, 252, 0.12);
}
/* ---- LOGO HOVER: calm and clean — a gentle lift with a soft gold breath ---- */
html[data-skin="77"] .logo {
  animation: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  will-change: transform;
}
html[data-skin="77"] .logo:hover {
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 6px 22px rgba(255, 198, 26, 0.35));
}

html[data-skin="77"] .navigation {
  background: rgba(21, 11, 38, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244, 238, 252, 0.1);
}
html[data-skin="77"] .nav-link {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* ---- THE MOTLEY FLIP ---- */
/* kill the old gold-on-gold hover from the base styles */
html[data-skin="77"] .nav-link:hover,
html[data-skin="77"] .nav-link:focus-visible {
  background: transparent !important;
  color: var(--jq-bone) !important;
  transform: none;
}
/* harlequin pill sweeps up from below */
html[data-skin="77"] .nav-link::before {
  content: '';
  position: absolute;
  inset: -4px -10px;
  z-index: -1;
  border-radius: 999px;
  background:
    linear-gradient(rgba(21, 11, 38, 0.92), rgba(21, 11, 38, 0.92)) padding-box,
    linear-gradient(90deg, var(--jq-magenta), var(--jq-gold), var(--jq-cyan), var(--jq-magenta)) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 2px solid transparent;
  opacity: 0;
  transform: translateY(60%) scaleX(0.4);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-skin="77"] .nav-link:hover::before,
html[data-skin="77"] .nav-link:focus-visible::before {
  opacity: 1;
  transform: none;
  animation: jq-shimmer 3s linear infinite;
}
/* diamond shockwave */
html[data-skin="77"] .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  z-index: -1;
  background: var(--jq-gold);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  pointer-events: none;
}
html[data-skin="77"] .nav-link:hover::after {
  animation: jq-shockwave 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes jq-shockwave {
  0%   { transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) rotate(225deg) scale(7); opacity: 0; }
}
/* letters somersault one by one, each landing in its motley color */
html[data-skin="77"] .nav-link .jq-l {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}
html[data-skin="77"] .nav-link:hover .jq-l,
html[data-skin="77"] .nav-link:focus-visible .jq-l {
  animation: jq-letterflip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 45ms);
  color: var(--lc);
  text-shadow: 0 0 14px var(--lc);
}
@keyframes jq-letterflip {
  0%   { transform: none; }
  45%  { transform: translateY(-9px) rotateX(190deg) scale(1.3); }
  75%  { transform: translateY(2px) rotateX(360deg) scale(0.95); }
  100% { transform: rotateX(360deg); }
}
/* active tab: dark text on the gold pill — always readable */
html[data-skin="77"] .nav-link.active,
html[data-skin="77"] .nav-tabs .active > .nav-link,
html[data-skin="77"] .nav-link[aria-selected="true"],
html[data-skin="77"] .nav-link[aria-current] {
  color: var(--jq-void) !important;
}
html[data-skin="77"] :is(.nav-link.active, .nav-tabs .active > .nav-link,
  .nav-link[aria-selected="true"], .nav-link[aria-current]) .jq-l {
  color: var(--jq-void) !important;
  text-shadow: none;
}
html[data-skin="77"] .lang-btn {
  border-radius: 999px;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
html[data-skin="77"] .lang-btn.active {
  background: var(--jq-gold);
  color: var(--jq-void);
  border-color: var(--jq-gold);
}

/* ---------- buttons: bouncy motley pills ---------- */
html[data-skin="77"] :is(.animated-button, .token-title-button, .token-buy-button,
  .how-to-buy-button, .phantom-button, .randomizer-button) {
  border-radius: 999px;
  animation: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-skin="77"] :is(.animated-button, .token-title-button, .token-buy-button,
  .how-to-buy-button, .phantom-button, .randomizer-button):hover {
  transform: rotate(-2deg) scale(1.06);
}
html[data-skin="77"] :is(.animated-button-inner, .token-title-button-inner,
  .token-buy-button-inner) {
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* ---------- harlequin glass cards ---------- */
html[data-skin="77"] :is(.token-section, .terminal-container, .token-disclaimer,
  .manifesto, .trading-chart-container, .meme-marquee-container,
  .step-card, .stat-card, .memeory-board) {
  position: relative;
  border: 1px solid rgba(244, 238, 252, 0.14);
  border-radius: 18px;
  background: rgba(21, 11, 38, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
html[data-skin="77"] :is(.token-section, .token-disclaimer, .manifesto)::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background: repeating-conic-gradient(from 45deg, var(--jq-magenta) 0% 25%, transparent 0% 50%);
  background-size: 34px 34px;
}

/* terminal goes carnival-cyber */
html[data-skin="77"] .terminal-title { font-family: 'Unbounded', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em; }
html[data-skin="77"] .terminal-prompt { color: var(--jq-magenta); }
html[data-skin="77"] .terminal-text { color: var(--jq-cyan); }
html[data-skin="77"] .terminal-cursor { background: var(--jq-gold); }
html[data-skin="77"] .terminal-body {
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 6vw, 3.2rem);
}

/* token card: natural height, nothing clipped, centered */
html[data-skin="77"] .token-section {
  overflow: visible;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 38px);
}
html[data-skin="77"] .token-section::before { border-radius: inherit; }
html[data-skin="77"] .token-section > * { position: relative; z-index: 1; }
html[data-skin="77"] .token-contract { text-align: center; }
html[data-skin="77"] .token-address {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  padding: 0.7em 1em;
}
html[data-skin="77"] .token-buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 1.2rem;
}

/* the token monter: one big harlequin card around title + buttons + contract */
html[data-skin="77"] .jq-token-card {
  position: relative;
  max-width: 880px;
  margin: 2.5rem auto;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(244, 238, 252, 0.14);
  border-radius: 22px;
  background: rgba(21, 11, 38, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
html[data-skin="77"] .jq-token-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-conic-gradient(from 45deg, var(--jq-magenta) 0% 25%, transparent 0% 50%);
  background-size: 34px 34px;
}
html[data-skin="77"] .jq-token-card > * { position: relative; z-index: 1; }
/* the inner contract card drops its own chrome — no card-in-card */
html[data-skin="77"] .jq-token-card .token-section {
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
}
html[data-skin="77"] .jq-token-card .token-section::before { content: none; }

/* contract address: gold-edged scroll */
html[data-skin="77"] .token-address {
  border: 1px solid var(--jq-gold);
  border-radius: 10px;
  color: var(--jq-gold);
  background: rgba(11, 6, 20, 0.7);
}

/* ---------- meme marquee: the tilted carnival ticker ---------- */
html[data-skin="77"] .meme-banner-section .meme-marquee-container {
  transform: rotate(-1.2deg) scale(1.015);
  border-top: 1px solid rgba(244, 238, 252, 0.14);
  border-bottom: 1px solid rgba(244, 238, 252, 0.14);
}
html[data-skin="77"] .meme-marquee-img {
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
html[data-skin="77"] .meme-marquee-img:hover {
  transform: rotate(2deg) scale(1.07);
  box-shadow: 0 0 24px var(--sk-glow);
}

/* gallery thumbs juggle on hover */
html[data-skin="77"] :is(.meme-thumb, .gif-thumb, .gallery-img):hover {
  transform: rotate(-2deg) scale(1.05);
  box-shadow: 0 0 20px var(--sk-glow2);
}

/* social + partner logos: diamond tilt */
html[data-skin="77"] :is(.social-link, .landing-partner-link) {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}
html[data-skin="77"] :is(.social-link, .landing-partner-link):hover {
  transform: rotate(4deg) scale(1.12);
  filter: drop-shadow(0 0 14px var(--sk-glow));
}

/* videos framed like court portraits */
html[data-skin="77"] :is(.landing-video, .secondary-video) {
  border-radius: 18px;
  border: 1px solid rgba(244, 238, 252, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 198, 26, 0.15), 0 18px 60px rgba(255, 45, 149, 0.18);
}

/* ---------- scroll reveal (class added by jester-hq.js) ---------- */
html[data-skin="77"] .jq-reveal {
  opacity: 0;
  transform: translateY(36px) rotate(0.4deg);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-skin="77"] .jq-reveal.jq-in {
  opacity: 1;
  transform: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="77"] *,
  html[data-skin="77"] *::before,
  html[data-skin="77"] *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html[data-skin="77"] .jq-reveal { opacity: 1; transform: none; }
}