/* ============================================================
   楽創Factory Creative Design System
   - 波セクション区切り
   - CSSキーフレームアニメーション
   - 手描き風ベーススタイル
   - prefers-reduced-motion対応
   ============================================================ */

/* --- Base & Typography --- */
html {
  overflow-x: hidden;
}

body {
  font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  line-height: 1.8;
  color: #2C3E50;
  overflow-x: hidden;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Hero Gradient --- */
.hero-gradient {
  background: linear-gradient(135deg, #4AADE8 0%, #2E86C1 100%);
  position: relative;
  overflow: hidden;
}

/* --- SVG Gear Animations --- */
@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes flow-dot {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}

@keyframes draw-in {
  from { stroke-dashoffset: var(--path-length, 1000); }
  to { stroke-dashoffset: 0; }
}

/* --- Hero Handwriting Stroke Animation --- */
@keyframes hw-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hw-fill-in {
  to { fill: white; }
}

.hero-handwriting {
  overflow: visible;
  display: block;
}

.hero-handwriting text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  fill: transparent;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1.2;
}

.hero-handwriting.active .hw-line1 {
  animation: hw-draw 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards,
             hw-fill-in 0.5s ease 1.8s forwards;
}

.hero-handwriting.active .hw-line2 {
  animation: hw-draw 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 1s forwards,
             hw-fill-in 0.5s ease 2.6s forwards;
}

.hero-handwriting .hw-underline {
  fill: none;
  stroke: #F5C518;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.hero-handwriting.active .hw-underline {
  opacity: 1;
  animation: hw-draw 0.8s ease-out 2.8s forwards;
}

/* Hero subtitle delayed entrance */
.hero-subtitle-animated {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-subtitle-animated.show {
  opacity: 0.9;
  transform: translateY(0);
}

/* Hero CTA delayed entrance */
.hero-cta-animated {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.15s;
}

.hero-cta-animated.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes counter-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes conveyor-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Gear SVG Styling --- */
.gear {
  transform-origin: center;
}

.gear-cw {
  animation: spin-cw 8s linear infinite;
}

.gear-ccw {
  animation: spin-ccw 6s linear infinite;
}

.gear-cw-slow {
  animation: spin-cw 12s linear infinite;
}

/* --- Flow Dots on Pipes --- */
.flow-dot {
  animation: flow-dot 3s linear infinite;
}

.flow-dot:nth-child(2) { animation-delay: 1s; }
.flow-dot:nth-child(3) { animation-delay: 2s; }

/* --- Floating Elements --- */
.float-anim {
  animation: float 4s ease-in-out infinite;
}

.float-anim-slow {
  animation: float-slow 5s ease-in-out infinite;
}

.float-anim:hover,
.float-anim-slow:hover {
  animation-play-state: paused;
}

/* --- Pulse --- */
.pulse-anim {
  animation: pulse-soft 3s ease-in-out infinite;
}

/* --- Wave Section Dividers --- */
.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: -1px 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.wave-divider-flip svg {
  transform: scaleY(-1);
}

/* --- Section Reveal ---
   GSAP handles initial state via gsap.from().
   No CSS hiding needed - progressive enhancement. */

/* --- Rough.js Canvas Container --- */
.rough-container {
  position: relative;
}

.rough-container canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* --- Before/After Morphing --- */
.morph-container {
  position: relative;
  overflow: hidden;
}

.morph-before,
.morph-after {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.morph-before {
  opacity: 1;
  transform: scale(1);
}

.morph-after {
  opacity: 0;
  transform: scale(0.85);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.morph-container.morphed .morph-before {
  opacity: 0;
  transform: scale(0.85);
}

.morph-container.morphed .morph-after {
  opacity: 1;
  transform: scale(1);
}

/* --- Pipeline / Timeline Path --- */
.pipeline-path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 0.5s ease;
}

.pipeline-dot {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pipeline-dot.active {
  opacity: 1;
  transform: scale(1);
}

/* --- Counter Animation --- */
.counter-value {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.counter-value.counted {
  animation: counter-pop 0.4s ease;
}

/* --- Card Hover Enhancement --- */
.creative-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.creative-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(74, 173, 232, 0.15);
}

/* --- CTA Section Dark Background --- */
.cta-dark {
  background: #2C3E50;
  position: relative;
  overflow: hidden;
}

.cta-dark::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(74, 173, 232, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* --- Conveyor Belt --- */
.conveyor-track {
  overflow: hidden;
  position: relative;
}

.conveyor-items {
  display: flex;
  animation: conveyor-move 20s linear infinite;
  width: max-content;
}

/* --- Stagger Delays for Skill Tags --- */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }

/* --- Step 2: Hero Parallax Layers --- */
.hero-parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes drift-right {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(30px) translateY(-8px); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes drift-left {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-25px) translateY(6px); }
  100% { transform: translateX(0) translateY(0); }
}

.hero-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  filter: blur(40px);
}

.hero-cloud-1 {
  width: 300px; height: 120px;
  top: 15%; left: 5%;
  animation: drift-right 12s ease-in-out infinite;
}

.hero-cloud-2 {
  width: 400px; height: 100px;
  top: 60%; right: 10%;
  animation: drift-left 15s ease-in-out infinite;
  animation-delay: -3s;
}

.hero-cloud-3 {
  width: 200px; height: 80px;
  top: 35%; left: 40%;
  animation: drift-right 18s ease-in-out infinite;
  animation-delay: -7s;
}

/* --- Step 3: Brand Ticker --- */
.brand-ticker {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.brand-ticker-track {
  display: inline-flex;
  animation: ticker-scroll 25s linear infinite;
}

.brand-ticker-track span {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.25;
  text-transform: uppercase;
}

.brand-ticker-track .ticker-dot {
  opacity: 0.4;
  padding: 0 0.5rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Step 4: Loading Screen --- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-gear {
  width: 64px;
  height: 64px;
  animation: smiley-bounce 1s ease-in-out infinite;
}

.loader-gear img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@keyframes smiley-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.05); }
}

.loader-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #4AADE8;
  letter-spacing: 0.2em;
}

.loader-bar {
  width: 120px;
  height: 3px;
  background: #E8F4FD;
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  background: #4AADE8;
  border-radius: 2px;
  animation: loader-progress 1.2s ease-in-out forwards;
}

@keyframes loader-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Step 5: Gear Watermark Background --- */
.gear-watermark {
  position: relative;
}

.gear-watermark::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L55 10 L56 18 C58 18.5 60 19.5 62 20.5 L68 15 L73 20 L67 26 C68.5 28 69.5 30 70 32 L78 33 L78 38 L70 39 C69.5 41 68.5 43 67 45 L73 51 L68 56 L62 50.5 C60 51.5 58 52.5 56 53 L55 61 L50 61 L49 53 C47 52.5 45 51.5 43 50.5 L37 56 L32 51 L38 45 C36.5 43 35.5 41 35 39 L27 38 L27 33 L35 32 C35.5 30 36.5 28 38 26 L32 20 L37 15 L43 20.5 C45 19.5 47 18.5 49 18 Z' fill='%232C3E50'/%3E%3Ccircle cx='50' cy='35.5' r='10' fill='white'/%3E%3C/svg%3E");
}

.gear-watermark-tr::after {
  top: -60px; right: -40px;
  width: 240px; height: 240px;
  background-size: contain;
}

.gear-watermark-bl::after {
  bottom: -40px; left: -30px;
  width: 200px; height: 200px;
  background-size: contain;
}

.gear-watermark-br::after {
  bottom: -50px; right: -50px;
  width: 280px; height: 280px;
  background-size: contain;
}

.gear-watermark-tl::after {
  top: -30px; left: -40px;
  width: 180px; height: 180px;
  background-size: contain;
}

/* --- Step 7: Nav Scroll Shrink --- */
.nav-scrolled {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.nav-scrolled .nav-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

nav {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner {
  transition: padding 0.3s ease;
}

/* --- Step 7: CTA Glow Effect --- */
.cta-glow {
  position: relative;
  overflow: visible;
}

.cta-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(ellipse, rgba(230, 126, 34, 0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  filter: blur(12px);
}

.cta-glow:hover::after {
  opacity: 1;
}

/* --- Step 7: Cursor Glow (PC only) --- */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 173, 232, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.cursor-glow.visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .cursor-glow { display: none; }
}

/* --- Step 6: Section-specific reveal classes --- */
/* (GSAP handles actual animation; these are semantic markers) */

/* --- Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4AADE8, #F5C518);
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
  will-change: transform;
}

/* --- Card 3D Tilt --- */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(74, 173, 232, 0.15), 0 8px 24px rgba(0,0,0,0.08);
}

.tilt-card .tilt-inner {
  transform: translateZ(20px);
}

/* --- Back to Top (Smiley) --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
  pointer-events: none;
  border: 2px solid #E8F4FD;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  box-shadow: 0 8px 30px rgba(74, 173, 232, 0.25);
  transform: translateY(-4px) scale(1.05);
}

.back-to-top img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.back-to-top:hover img {
  animation: smiley-spin 0.6s ease;
}

@keyframes smiley-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Section Heading Reveal (clip-path) --- */
.heading-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.heading-reveal.revealed {
  clip-path: inset(0 0% 0 0);
}

/* --- Character Stagger for Headings --- */
.char-stagger .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.char-stagger.animated .char {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hero Mask Reveal (h1 only) --- */
.hero-mask-reveal .mask-char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.2;
}

.hero-mask-reveal .mask-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* --- Gold Accent on 創 --- */
.gold-accent {
  background: linear-gradient(135deg, #F5C518, #E67E22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.gold-accent::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #F5C518, #E67E22);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gold-accent.active::after {
  transform: scaleX(1);
}

/* --- Why Us Timeline Scroll Enhancement --- */
.timeline-step {
  opacity: 0.4;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-step.active {
  opacity: 1;
  transform: translateX(0);
}

.timeline-dot-pulse {
  animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 173, 232, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(74, 173, 232, 0); }
}

/* --- Smooth Section Transition --- */
.section-fade-in {
  opacity: 0;
  transform: translateY(40px);
}

/* --- Pain Card Interactive --- */
.pain-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(230, 126, 34, 0.15);
  border-color: rgba(230, 126, 34, 0.3);
}

.pain-card .pain-before,
.pain-card .pain-after {
  transition: opacity 0.01s;
}

.pain-card .pain-after.hidden {
  display: none;
}

.pain-card.transformed {
  background: linear-gradient(135deg, #E8F4FD 0%, #F7FAFC 100%);
  border: 2px solid #4AADE8;
}

/* Pain card CTA hint - prominent style */
.pain-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #E67E22, #D35400);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  animation: pain-cta-pulse 2s ease-in-out infinite;
  letter-spacing: 0.02em;
}

.pain-card-cta .material-symbols-outlined {
  font-size: 16px;
  animation: pain-cta-bounce 1.5s ease-in-out infinite;
}

@keyframes pain-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(230, 126, 34, 0); }
}

@keyframes pain-cta-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* Sparkle particle */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(circle, #F5C518 0%, #E67E22 50%, transparent 70%);
  border-radius: 50%;
}

/* --- Factory Hero Stage --- */
.factory-stage-wrap {
  perspective: 1000px;
}

.factory-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-height: 360px;
  transform: scale(1.15);
  transform-origin: center center;
}

.factory-paper {
  opacity: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  flex-shrink: 0;
}

.factory-machine {
  flex-shrink: 0;
  position: relative;
}

.proc-unit {
  transition: fill 0.3s ease;
}

.factory-processing .proc-unit-1 {
  animation: proc-pulse 0.8s ease-in-out infinite;
}

.factory-processing .proc-unit-2 {
  animation: proc-pulse 0.8s ease-in-out 0.2s infinite;
}

.factory-processing .proc-unit-3 {
  animation: proc-pulse 0.8s ease-in-out 0.4s infinite;
}

@keyframes proc-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; fill: rgba(245,197,24,0.4); }
}

.conveyor-dot {
  opacity: 0.3;
}

.factory-dashboard {
  opacity: 0;
  filter: drop-shadow(0 4px 12px rgba(74,173,232,0.2));
  flex-shrink: 0;
}

.factory-flow-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  pointer-events: none;
  padding: 0 60px;
}

.factory-arrow {
  opacity: 0;
}

/* Factory stage completed state */
.factory-stage-complete .factory-dashboard {
  filter: drop-shadow(0 8px 24px rgba(74,173,232,0.35));
}

/* Factory stage mobile: handled per-page in mobile hero section below */

/* --- Factory Demo Area --- */
/* Factory Demo Flow (scroll-triggered) */
.factory-demo-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  min-height: 160px;
}

.demo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.demo-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #4A5568;
  text-align: center;
}

.demo-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .factory-demo-flow {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
  }

  .demo-arrow svg {
    transform: rotate(90deg);
  }
}

/* --- Smiley Guide --- */
.smiley-guide {
  position: fixed;
  bottom: 6rem;
  left: 2rem;
  z-index: 80;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.smiley-guide.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.smiley-svg {
  display: block;
  cursor: pointer;
}

.smiley-svg ellipse,
.smiley-svg .smiley-pupil-left,
.smiley-svg .smiley-pupil-right {
  transition: transform 0.05s linear;
}

/* Speech bubble */
.smiley-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.8);
  background: white;
  color: #2C3E50;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 8px;
}

.smiley-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: white;
}

.smiley-bubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Wave animation for hand */
.smiley-waving .smiley-hand {
  display: block !important;
  animation: smiley-wave-hand 0.5s ease-in-out 3;
  transform-origin: 34px 14px;
}

@keyframes smiley-wave-hand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-15deg); }
}

/* Gentle idle bounce */
.smiley-guide.visible .smiley-svg {
  animation: smiley-idle 3s ease-in-out infinite;
}

@keyframes smiley-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- Sub-page Hero SVG Scene Animations --- */

/* Pulse ring on hero nodes */
.hero-pulse-ring {
  animation: hero-pulse 2.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.6); }
}

/* Hero node entrance */
.hero-node, .hero-milestone {
  opacity: 0;
  animation: hero-node-in 0.6s ease-out forwards;
}
@keyframes hero-node-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Growing bars (case hero) */
.hero-grow-bar {
  transform-origin: bottom;
  animation: hero-bar-grow 0.8s ease-out forwards;
  transform: scaleY(0);
}
@keyframes hero-bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Trend line draw-in */
.hero-trend-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: hero-draw 1.5s ease-out 1s forwards;
}
@keyframes hero-draw {
  to { stroke-dashoffset: 0; }
}

/* Circle fill (case hero metric) */
.hero-circle-fill {
  animation: hero-circle-draw 1.2s ease-out 0.8s forwards;
}
@keyframes hero-circle-draw {
  to { stroke-dashoffset: 68; }
}

/* Journey path draw (about hero) */
.hero-journey-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: hero-journey-draw 2s ease-out 0.5s forwards;
}
@keyframes hero-journey-draw {
  to { stroke-dashoffset: 0; }
}

/* Floating cards */
.hero-float-card {
  opacity: 0;
  animation: hero-card-float 0.8s ease-out forwards, float 4s ease-in-out 1.5s infinite;
}
@keyframes hero-card-float {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Chat bubbles (contact hero) */
.hero-bubble {
  opacity: 0;
  animation: hero-bubble-in 0.5s ease-out forwards;
}
@keyframes hero-bubble-in {
  from { opacity: 0; transform: translateY(15px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Color swatches pulse */
.hero-swatch {
  animation: hero-swatch-pop 0.5s ease-out forwards;
  opacity: 0;
  transform: scale(0.5);
}
@keyframes hero-swatch-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Hero text entrance animation */
.hero-text-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: hero-text-in 0.8s ease-out forwards;
}
.hero-text-animate-delay1 { animation-delay: 0.2s; }
.hero-text-animate-delay2 { animation-delay: 0.4s; }
.hero-text-animate-delay3 { animation-delay: 0.6s; }
.hero-text-animate-delay4 { animation-delay: 0.8s; }
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero scene container */
.hero-scene-wrap {
  position: relative;
  width: 100%;
  min-height: 300px;
}

/* ============================================================
   Mobile Hero SVG Optimization (per-page)
   ============================================================ */
@media (max-width: 767px) {

  /* --- Base mobile styles for all hero SVG scenes --- */
  .hero-scene-wrap {
    min-height: 160px;
    max-height: 240px;
    opacity: 0.6;
    overflow: hidden;
    pointer-events: none;
  }

  /* Hide floating particles on mobile (also skipped in JS) */
  .hero-scene-wrap .float-anim,
  .hero-scene-wrap .float-anim-slow {
    display: none;
  }

  /* Stop continuous gear rotation (GPU-heavy) */
  .hero-scene-wrap .gear-cw,
  .hero-scene-wrap .gear-ccw,
  .hero-scene-wrap .gear-cw-slow {
    animation: none;
  }

  /* Flow dots: static accents by default */
  .hero-scene-wrap .flow-dot {
    animation: none;
    opacity: 0.5;
  }

  /* --- Allowed mobile animations (lightweight, one-shot or slow) --- */

  /* Pulse rings - slow, GPU-friendly opacity+scale */
  .hero-scene-wrap .hero-pulse-ring {
    animation: hero-pulse 3s ease-in-out infinite;
  }

  /* Node/milestone entrance (one-shot) */
  .hero-scene-wrap .hero-node,
  .hero-scene-wrap .hero-milestone {
    animation: hero-node-in 0.8s ease-out forwards;
  }

  /* Floating card entrance (one-shot, no continuous float) */
  .hero-scene-wrap .hero-float-card {
    animation: hero-card-float 0.8s ease-out forwards;
  }

  /* Bubble entrance (one-shot) */
  .hero-scene-wrap .hero-bubble {
    animation: hero-bubble-in 0.6s ease-out forwards;
  }

  /* Bar grow (one-shot) */
  .hero-scene-wrap .hero-grow-bar {
    animation: hero-bar-grow 0.8s ease-out forwards;
  }

  /* Trend line draw (one-shot) */
  .hero-scene-wrap .hero-trend-line {
    animation: hero-draw 1.5s ease-out 0.5s forwards;
  }

  /* Circle fill (one-shot) */
  .hero-scene-wrap .hero-circle-fill {
    animation: hero-circle-draw 1.2s ease-out 0.5s forwards;
  }

  /* Journey path draw (one-shot) */
  .hero-scene-wrap .hero-journey-path {
    animation: hero-journey-draw 2s ease-out 0.3s forwards;
  }

  /* Swatch pop (one-shot) */
  .hero-scene-wrap .hero-swatch {
    animation: hero-swatch-pop 0.5s ease-out forwards;
  }

  /* ===== INDEX: Factory Stage ===== */
  .page-index .factory-stage-wrap {
    display: block;
    max-height: 180px;
    overflow: hidden;
    opacity: 0.45;
    pointer-events: none;
  }
  .page-index .factory-stage {
    transform: scale(0.55);
    transform-origin: center top;
    min-height: 200px;
  }

  /* ===== SERVICE: triangle of 3 nodes ===== */
  .page-service .hero-scene-wrap {
    max-height: 200px;
    opacity: 0.55;
  }
  /* Enable flow dots on service (lightweight path animation) */
  .page-service .hero-scene-wrap .flow-dot {
    animation: flow-dot 4s linear infinite;
    opacity: 0.5;
  }

  /* ===== PRODUCT: tablet device ===== */
  .page-product .hero-scene-wrap {
    max-height: 200px;
    opacity: 0.55;
  }

  /* ===== CASE: bar chart + trend ===== */
  .page-case .hero-scene-wrap {
    max-height: 210px;
    opacity: 0.55;
  }

  /* ===== ABOUT: journey path ===== */
  .page-about .hero-scene-wrap {
    max-height: 210px;
    opacity: 0.5;
  }
  /* Hide mini gear on mobile (about page) */
  .page-about .hero-scene-wrap .gear-cw-slow {
    display: none;
  }

  /* ===== CONTACT: message bubbles ===== */
  .page-contact .hero-scene-wrap {
    max-height: 200px;
    opacity: 0.5;
  }

  /* ===== PAINT-SAAS: hub + 5 modules ===== */
  .page-paint-saas .hero-scene-wrap {
    max-height: 200px;
    opacity: 0.55;
  }

  /* ===== SHINSEIKAI-DB: network nodes ===== */
  .page-shinseikai-db .hero-scene-wrap {
    max-height: 200px;
    opacity: 0.55;
  }
}

/* --- Product Navigation Dots --- */
.product-nav-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-nav-dots.visible { opacity: 1; }
.product-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #4AADE8;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.product-dot.active {
  background: #4AADE8;
  transform: scale(1.2);
}
.product-dot:hover { background: rgba(74, 173, 232, 0.5); }
@media (max-width: 767px) {
  .product-nav-dots { display: none; }
}


/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
  .hero-gears {
    opacity: 0.15;
    transform: scale(0.6);
  }

  .wave-divider svg {
    height: 40px;
  }

  .tilt-card {
    perspective: none;
    transform: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .tilt-card:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
  }

  .back-to-top img {
    width: 30px;
    height: 30px;
  }

  .smiley-guide {
    bottom: 5rem;
    left: 1rem;
  }

  .smiley-bubble {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }
}

/* FAQ Accordion Animation */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: none;
}
.faq-answer.open {
  opacity: 1;
}
.faq-toggle .material-symbols-outlined {
  transition: transform 0.3s ease;
}
.faq-toggle.active .material-symbols-outlined {
  transform: rotate(180deg);
}

/* Form Micro-interactions */
.form-input-animated {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input-animated:focus {
  border-color: #4AADE8 !important;
  box-shadow: 0 0 0 3px rgba(74, 173, 232, 0.15);
}
.form-input-animated.validated {
  border-color: #22C55E !important;
}
.form-check-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #22C55E;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 20px;
}
.form-check-icon.visible { opacity: 1; }
.form-field-wrapper { position: relative; }

/* ============================================================
   Service Diagnostic Quiz
   ============================================================ */

/* --- Progress Steps --- */
.quiz-progress-step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 3px solid #CBD5E0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
}

.quiz-progress-step.active {
  border-color: #4AADE8;
  background: #4AADE8;
}

.quiz-progress-step.active .quiz-progress-num {
  color: white;
}

.quiz-progress-step.done {
  border-color: #22C55E;
  background: #22C55E;
}

.quiz-progress-step.done .quiz-progress-num {
  color: white;
}

.quiz-progress-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #CBD5E0;
  transition: color 0.4s ease;
}

.quiz-progress-line {
  width: 60px;
  height: 3px;
  background: #CBD5E0;
  border-radius: 2px;
  transition: background 0.4s ease;
}

.quiz-progress-line.done {
  background: #22C55E;
}

/* --- Quiz Option Cards --- */
.quiz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 120px;
}

.quiz-option:hover {
  border-color: #4AADE8;
  background: #F7FAFC;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 173, 232, 0.12);
}

.quiz-option.selected {
  border-color: #4AADE8;
  background: #E8F4FD;
  box-shadow: 0 4px 16px rgba(74, 173, 232, 0.15);
}

.quiz-option-text {
  font-weight: 700;
  color: #2C3E50;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- Quiz Question Transition --- */
.quiz-question {
  /* GSAP handles opacity/transform */
}

/* --- Result Card Highlight --- */
#quiz-result-card {
  position: relative;
  overflow: hidden;
}

#quiz-result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4AADE8, #2E86C1);
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .quiz-progress-step {
    width: 34px;
    height: 34px;
  }

  .quiz-progress-line {
    width: 40px;
  }

  .quiz-option {
    min-height: 90px;
    padding: 1.25rem 0.75rem;
  }
}