/* ============================================================
   새지마요 — style.css
   Visual Enhancement Layer
   ============================================================ */

/* ---------- 1. CSS Variables & Base ---------- */
:root {
  --topbar-height: 64px;
  --floating-bar-height: 72px;

  --navy:  #0A1128;
  --blue:  #1D4ED8;
  --gold:  #D97706;
  --red:   #DC2626;
  --kakao: #FEE500;

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ---------- 2. Global Body Grain & Noise ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Ensure main content sits above the grain */
header, main, footer, .floating-cta { position: relative; z-index: 1; }

/* ---------- 3. Glassmorphism Panel ---------- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.glass-panel:hover {
  border-color: rgba(255,255,255,0.14);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(29,78,216,0.15);
}

/* ---------- 4. Text Gradient Utility ---------- */
.text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- 5. Pulsing CTA Animation ---------- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(29,78,216,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(29,78,216,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,78,216,0); }
}
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}
.animate-pulse-custom {
  animation: icon-pulse 2s ease-in-out infinite;
}

/* ---------- 6. Hero Section — Ambient Glow Orbs ---------- */
#hero .hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(29,78,216,0.22) 0%, transparent 70%);
  top: -15%; left: -10%;
  animation-delay: 0s;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(217,119,6,0.16) 0%, transparent 70%);
  top: 30%; right: -5%;
  animation-delay: -4s;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(56,189,248,0.12) 0%, transparent 70%);
  bottom: 5%; left: 40%;
  animation-delay: -8s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -20px) scale(1.08); }
}

/* ---------- 7. Hero Particle Canvas ---------- */
#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* ---------- 8. Number Band — Shimmer Effect ---------- */
#number_band {
  background: linear-gradient(135deg, #1a3dba 0%, #1D4ED8 50%, #1a3dba 100%);
  background-size: 200% 100%;
  animation: band-shimmer 6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
#number_band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.02) 20px,
    rgba(255,255,255,0.02) 40px
  );
}
@keyframes band-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.stat-number {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  font-feature-settings: "tnum";
}

/* ---------- 9. Section Divider Glow ---------- */
.section-glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,0.6), rgba(56,189,248,0.6), transparent);
  border: none;
  margin: 0;
}

/* ---------- 10. Scroll-triggered Fade-In ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.23,1,0.32,1), transform 0.7s cubic-bezier(0.23,1,0.32,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---------- 11. Facility Cards — Gradient Border on Hover ---------- */
#special_facility .glass-panel {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
}
#special_facility .glass-panel::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(29,78,216,0.4), rgba(255,255,255,0.05), rgba(217,119,6,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#special_facility .glass-panel:hover::after { opacity: 1; }

/* ---------- 12. Process Line Pulse ---------- */
#process .absolute.left-1\/2 {
  background: linear-gradient(180deg, transparent 0%, rgba(29,78,216,0.5) 20%, rgba(56,189,248,0.3) 80%, transparent 100%);
}

/* ---------- 13. Mid CTA Section ---------- */
#mid_cta {
  background: linear-gradient(135deg, #1a3dba 0%, #1D4ED8 60%, #1e5cff 100%);
  position: relative;
}
#mid_cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------- 14. Review Cards — Subtle Inner Glow ---------- */
#reviews .glass-panel {
  position: relative;
}
#reviews .glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  border-radius: inherit;
}

/* ---------- 15. Final CTA Section ---------- */
#final_cta {
  position: relative;
}
#final_cta::before {
  content: '';
  position: absolute;
  top: 0; inset-x: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff, #60a5fa, #fff, transparent);
  opacity: 0.3;
}

/* ---------- 16. Floating CTA Bar Polish ---------- */
.floating-cta {
  backdrop-filter: blur(20px);
}
.floating-cta a {
  position: relative;
  overflow: hidden;
}
.floating-cta a::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.floating-cta a:hover::before { left: 150%; }

/* ---------- 17. Topbar Glow Line ---------- */
header::after {
  content: '';
  position: absolute;
  bottom: 0; inset-x: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,0.6), rgba(56,189,248,0.4), transparent);
}

/* ---------- 18. Insurance Section Background ---------- */
#insurance .bg-gradient-to-br {
  position: relative;
  overflow: hidden;
}
#insurance .bg-gradient-to-br::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,0.3) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
}

/* ---------- 19. Technology Grid Cards ---------- */
#technology .glass-panel {
  position: relative;
  overflow: hidden;
}
#technology .glass-panel::before {
  content: '';
  position: absolute;
  bottom: 0; inset-x: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(29,78,216,0.05));
  pointer-events: none;
}

/* ---------- 20. Custom Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A1128; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1D4ED8, #3b82f6);
  border-radius: 10px;
}

/* ---------- 21. Selection Color ---------- */
::selection {
  background: rgba(29,78,216,0.4);
  color: #fff;
}

/* ---------- 22. Word-Break Korean ---------- */
.break-keep-all { word-break: keep-all; }

/* ---------- 23. Hover lift for Service Range cards ---------- */
#service_range .bg-white\/5 {
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;
}
#service_range .bg-white\/5:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(29,78,216,0.2);
}