/*
Theme Name: jj
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Liiv4 VTuber Studio — English theme
Version: 2.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jj
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600&display=swap');

html { font-display: swap; }

:root {
  --bg-950: #0B0F17;
  --surface-900: #111827;
  --accent: #22D3EE;
  --accent-2: #A78BFA;
  --accent-lime: #B3FC22;
  --text-100: #F3F4F6;
  --text-300: #E5E7EB;
  --text-500: #9CA3AF;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-950);
  color: var(--text-100);
}

h1, h2, h3, .font-heading {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Marquee */
.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  animation: scroll-left 20s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-content-reverse {
  display: flex;
  flex-shrink: 0;
  animation: scroll-right 25s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

/* Featured Works: the two rows animate independently, so hovering either one
   pauses both — otherwise the still-moving row next to the frozen one reads
   as a flash/glitch since both rows share the same photo set. */
.gallery-marquees:hover .marquee-content,
.gallery-marquees:hover .marquee-content-reverse {
  animation-play-state: paused;
}

/* Featured Works: fade the edges of the (static, non-animated) viewport strip
   itself rather than each individual image. Masking the moving child element
   directly is a known source of mask/transform compositing glitches in some
   browsers; masking the static container avoids that entirely. */
.gallery-marquees .marquee-container {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Portfolio (Featured Works) loop speed: slower, calmer pace. Scoped to the
   gallery so the "NOW ACCEPTING COMMISSIONS" text ticker (which shares
   .marquee-content) keeps its own 20s speed. */
.gallery-marquees .marquee-content {
  animation-duration: 50s;
}

.marquee-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  padding-right: 2rem;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  .marquee-text { font-size: 2rem; }
}

/* Sticky CTA */
#sticky-cta {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#sticky-cta.visible {
  transform: translateY(0);
}

/* Header CTA hand-off: the nav's "Order on VGen" button collapses once the
   sticky bottom bar takes over at the same scroll threshold, so the same CTA is
   never on screen twice. The nav itself stays — only the button goes.
   max-width + the negative margin absorb the parent's gap-6 so the pill shrinks
   smoothly instead of leaving a hole. */
#nav-cta {
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}
#nav-cta.is-hidden {
  max-width: 0;
  margin-left: -1.5rem; /* cancels the flex gap-6 left behind by the collapse */
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
}

/* Hamburger open state (X) */
#mobile-menu-btn.is-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#mobile-menu-btn.is-open .hamburger-line:nth-child(2) { opacity: 0; }
#mobile-menu-btn.is-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Why Japan grid pattern */
.japan-grid {
  background-image: radial-gradient(circle, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Testimonial card hover */
.testimonial-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-2px);
}

/* Testimonials carousel (⑥): one card per view with the next peeking, drag/swipe
   + autoplay driven by main.js. Fixed card width means SP shows 1 card (no more
   vertical stacking) while wider screens fit several — the rightmost peeking. */
/* Full-bleed "Overflow Carousel" (matches Figma): the card row spans the whole
   viewport and the cards spill past the left/right screen edges — clipping happens
   only at the true screen edges, never mid-screen. main.js keeps the active card
   centered, so neighbours bleed off symmetrically on both sides. */
/* Contain the 100vw child so the page never scrolls sideways.
   `hidden` on one axis forces the other axis to compute to `auto` (CSS spec),
   which turns this section into a scroll container and can swallow wheel events
   instead of chaining them to the page. `clip` clips without creating a scroll
   container, so overflow-y stays `visible`. `hidden` is kept as the fallback for
   browsers without `overflow: clip` (Safari < 16). */
#testimonials { overflow-x: hidden; }
@supports (overflow-x: clip) {
  #testimonials { overflow-x: clip; }
}
.testimonial-carousel {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* break out of the max-w container to full-bleed */
}
.testimonial-track {
  position: relative;      /* card offsetLeft is measured relative to the track */
  display: flex;
  gap: 1rem;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;     /* let the page scroll vertically; we own horizontal */
  user-select: none;
}
.testimonial-track.is-dragging { cursor: grabbing; }
.testimonial-carousel .testimonial-card {
  flex: 0 0 auto;
  width: min(80vw, 380px);
}

/* FAQ accordion (⑧): the animatable wrapper main.js injects around each answer. */
.faq-answer-wrap { overflow: hidden; will-change: height; }

/* CTA section background (Figma spec) */
.radial-gradient {
  background: radial-gradient(50% 50% at 50% 50%, #10252E 19.71%, #0B0F17 100%);
}

/* Utility classes (custom colors not in Tailwind CDN default) */
.bg-bg-950      { background-color: var(--bg-950); }
.bg-surface-900 { background-color: var(--surface-900); }
.text-text-100  { color: var(--text-100); }
.text-text-300  { color: var(--text-300); }
.text-text-500  { color: var(--text-500); }
.text-accent      { color: var(--accent); }
.text-accent-2    { color: var(--accent-2); }
.text-accent-lime { color: var(--accent-lime); }
.bg-accent        { background-color: var(--accent); }
.bg-accent-lime   { background-color: var(--accent-lime); }
.border-accent      { border-color: var(--accent); }
.border-accent-lime { border-color: var(--accent-lime); }

/* Custom Scrollbar */
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-950); }
::-webkit-scrollbar-thumb { background: var(--surface-900); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }