/* ============================================================
   楽創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) */

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
}

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

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