/* Shared styles for the map section across all language pages */

/* Section wrapper */
.map-section {
  background: #000;
  padding: 24px 16px;
}

/* Section title */
.map-title {
  color: #bfa14a;
  text-align: center;
  margin: 0 0 12px;
}

/* Outer width limiter */
.map-container {
  max-width: 600px; /* unify with current inline setting */
  margin: 0 auto;
}

/* Aspect ratio box */
.map-aspect {
  position: relative;
  padding-bottom: 40%; /* unify with current inline setting */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Iframe fits container */
.map-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Optional: small tweak for very small screens */
@media (max-width: 360px) {
  .map-container { max-width: 100%; }
}

/* =============================
   Hero logo float-in animation
   ============================= */
/* Hero logo animation definitions below */

/* Animatable custom property for glow hue (supported in modern Chromium/WebKit) */
@property --glow-h {
  syntax: '<number>';
  inherits: false;
  initial-value: 42; /* warm golden */
}
.tomiki-logo {
  --glow-h: 42; /* warm golden hue */
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  /* Intro + idle ethereal breathing */
  animation:
    logo-float-in 3000ms cubic-bezier(0.25, 0.9, 0.2, 1) 400ms forwards,
    logo-aurora 6.4s ease-in-out 2.1s infinite alternate;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.45)) drop-shadow(0 0 22px hsl(var(--glow-h) 80% 65% / 0.28));
}

@keyframes logo-float-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(1.6px) drop-shadow(0 18px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 28px hsl(var(--glow-h) 80% 65% / 0.30));
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
    filter: blur(0.5px) drop-shadow(0 14px 34px rgba(0,0,0,0.50)) drop-shadow(0 0 20px hsl(var(--glow-h) 80% 65% / 0.26));
  }
  95% {
    opacity: 1;
    transform: translateY(0) scale(1.005);
    filter: blur(0.2px) drop-shadow(0 8px 24px rgba(0,0,0,0.40)) drop-shadow(0 0 14px hsl(var(--glow-h) 80% 65% / 0.22));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) drop-shadow(0 6px 18px rgba(0,0,0,0.35)) drop-shadow(0 0 10px hsl(var(--glow-h) 80% 65% / 0.20));
  }
}

/* Gentle ethereal breathing after intro */
@keyframes logo-aurora {
  0% {
    --glow-h: 38; /* warmer */
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px) drop-shadow(0 6px 18px rgba(0,0,0,0.35)) drop-shadow(0 0 10px hsl(var(--glow-h) 80% 65% / 0.22));
  }
  50% {
    --glow-h: 52; /* slightly pinkish-gold */
    transform: translateY(-1.5px) scale(1.005) rotate(0.15deg);
    filter: blur(0.25px) drop-shadow(0 8px 22px rgba(0,0,0,0.38)) drop-shadow(0 0 18px hsl(var(--glow-h) 82% 66% / 0.28));
  }
  100% {
    --glow-h: 44;
    transform: translateY(0) scale(1.001) rotate(0deg);
    filter: blur(0.1px) drop-shadow(0 6px 18px rgba(0,0,0,0.34)) drop-shadow(0 0 12px hsl(var(--glow-h) 80% 65% / 0.24));
  }
}

/* Subtle hover lift for interactivity (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .tomiki-logo:hover {
    transform: translateY(-3px) scale(1.02);
    transition: transform 240ms ease;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tomiki-logo {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}