/* nagomi — base styles
   (Layout and component styling is handled by Tailwind utility classes
   directly in js/app.jsx. This file only holds the few things Tailwind
   utility classes can't express: base typography, scrollbar theming,
   the hero scroll-indicator animation and the fixed-background bands.) */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lato', sans-serif;
}

/* Hero section scroll indicator (HeroSection in js/app.jsx) */
@keyframes scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.font-serif {
  font-family: 'Cormorant Garamond', serif;
}

.font-sans {
  font-family: 'Lato', sans-serif;
}

.font-slogan {
  font-family: 'Josefin Sans', sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F8F5EE;
}

::-webkit-scrollbar-thumb {
  background: #C5B078;
  border-radius: 5px;
}

/* Fixed background photo that the page scrolls over (ParallaxBand in js/app.jsx).
   Touch devices (notably iOS Safari) don't support fixed backgrounds, so they
   fall back to a normal scrolling image. */
.parallax-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (hover: none), (max-width: 1024px) {
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Developer badge (exact signature style from SLOUTE) */
.footer-developer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.footer-developer-badge:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(244, 162, 201, 0.45);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(244, 162, 201, 0.15);
}

.dev-badge-label {
  color: #9ca3af;
  transition: color 0.2s ease;
  font-weight: 500;
}

.footer-developer-badge:hover .dev-badge-label {
  color: #f3f4f6;
}

.dev-badge-logo {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  display: block;
}

.footer-developer-badge:hover .dev-badge-logo {
  transform: scale(1.15) rotate(4deg);
}

.dev-badge-arrow {
  width: 11px;
  height: 11px;
  color: #9ca3af;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.footer-developer-badge:hover .dev-badge-arrow {
  opacity: 1;
  color: #f4a2c9;
  transform: translate(2px, -2px);
}

/* Kaiten Conveyor Belt continuous scrolling animation */
@keyframes kaitenConveyor {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-kaiten-belt {
  display: flex;
  width: max-content;
  animation: kaitenConveyor 35s linear infinite;
  will-change: transform;
}

.kaiten-belt-container:hover .animate-kaiten-belt {
  animation-play-state: paused;
}

.kaiten-plate-circle {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
  background-color: #1a1a1a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .kaiten-plate-circle {
    width: 200px;
    height: 200px;
    border-width: 5px;
  }
}

.kaiten-plate-circle:hover {
  transform: scale(1.06);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.08);
}