/* ─── BELL common.css ─── */

/* Page-in animation */
@keyframes page-in { from { opacity:0 } to { opacity:1 } }
body { animation:page-in .35s ease both }

/* Scroll Progress Bar */
#scroll-progress {
  position: fixed; top:0; left:0; height:3px;
  background: #1A4B8C; z-index:9999; width:0;
  pointer-events:none; border-radius:0 2px 2px 0;
  transition: width .08s linear;
}

/* Focus visible */
*:focus-visible {
  outline: 2.5px solid #1A4B8C;
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible { border-radius: 3px; }
button:focus-visible { border-radius: 8px; }

/* Page transition overlay */
.pg-overlay {
  position: fixed; inset:0;
  background: #fff;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.pg-overlay.out { opacity: 1; }

/* Back to top */
#back-top {
  position: fixed; left:24px; bottom:24px;
  width:44px; height:44px;
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  cursor: pointer; z-index:500;
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s, transform .3s, box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  text-decoration: none;
}
#back-top.vis { opacity:1; transform:translateY(0); }
#back-top:hover { box-shadow:0 6px 24px rgba(26,75,140,.2); border-color:#A3BDE0; }

/* Active nav link */
.hd-l.active { color:#fff !important; position:relative; }
.hd-l.active::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:2px; background:#6A9FE4; border-radius:1px;
  animation: nav-ul .3s ease;
}
.hd-l[href*="about"].active,
.hd-l[href*="recruit"].active,
.hd-l[href*="media"].active {
  color: var(--g1, #444) !important;
}
@keyframes nav-ul { from { transform:scaleX(0) } to { transform:scaleX(1) } }

/* Button press feedback */
.btn-p:active, .btn-p-lg:active, .hd-btn:active,
.btn-white:active, .plan-btn:active, .btn-o:active,
.dl-f-btn:active { transform:scale(.96) !important; transition:transform .06s !important; }

/* Card tilt containers — enable 3D perspective */
.svc-grid, .cases-grid, .mvv-grid, .why-grid,
.pos-list, .cards, .features-grid, .pain-grid {
  perspective: 1400px;
}

/* Hero particles */
.hero-particles {
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none; z-index:1;
}
.hero-particles span {
  position:absolute;
  background: rgba(106,159,228,.3);
  border-radius: 50%;
  animation: p-rise linear infinite;
  bottom: -10px;
}
@keyframes p-rise {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  8%   { opacity:.8; }
  85%  { opacity:.5; }
  100% { transform:translateY(-110vh) translateX(var(--dx,15px)); opacity:0; }
}

/* Subtle glowing accent on key text */
@keyframes ac-pulse { 0%,100%{opacity:.85} 50%{opacity:1} }
.hero-h1 .ac { animation: ac-pulse 3.5s ease-in-out infinite; }
.mission-h2 em { animation: ac-pulse 3.5s ease-in-out infinite; animation-delay:.5s; }

/* Highlight shimmer on hover for svc-badge / hero-badge */
@keyframes badge-shimmer {
  0%   { background-position:-100% center }
  100% { background-position:200% center }
}
.svc-badge:hover, .hero-badge:hover {
  background: linear-gradient(90deg,#E8F0FA 30%,#fff 50%,#E8F0FA 70%);
  background-size: 200% auto;
  animation: badge-shimmer .8s linear;
}

/* Smooth link underline (nav & footer) */
.hd-l { position:relative; }
.ft-col a { position:relative; display:block; }

/* Input focus glow */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #6A9FE4 !important;
  box-shadow: 0 0 0 3px rgba(26,75,140,.1) !important;
}

/* Field shake animation */
@keyframes field-shake {
  0%,100% { transform:translateX(0) }
  20%     { transform:translateX(-6px) }
  40%     { transform:translateX(6px) }
  60%     { transform:translateX(-4px) }
  80%     { transform:translateX(4px) }
}

/* Character Pop */
.char-pop {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  animation: char-appear .4s ease .4s both;
}
@keyframes char-appear { from { opacity:0 } to { opacity:1 } }
.char-inner {
  display:flex; flex-direction:column; align-items:center;
  animation: char-bounce 3s ease-in-out infinite;
}
@keyframes char-bounce {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-8px) }
}
.char-bubble {
  background:#fff; border:2px solid #0D0D0D;
  border-radius:18px;
  padding:10px 16px; font-size:13px; font-weight:700;
  color:#0D0D0D; white-space:nowrap; margin-bottom:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.15); position:relative;
}
.char-bubble::after {
  content:''; position:absolute; bottom:-13px; left:50%;
  transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#0D0D0D;
}
.char-bubble::before {
  content:''; position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff; z-index:1;
}
.char-img {
  width:88px; height:88px; object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25)); cursor:pointer;
}

/* Mobile — bigger tap targets */
@media (max-width:600px) {
  .btn-p, .btn-p-lg, .btn-white, .btn-o, .plan-btn {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .hd-btn { min-height: 40px; }
  /* Prevent iOS zoom on input focus */
  input, textarea, select { font-size: 16px !important; }
  #back-top { left:16px; bottom:16px; width:40px; height:40px; }
  .char-pop { bottom:16px; right:16px; }
  .char-img { width:68px; height:68px; }
  .char-bubble { font-size:12px; padding:8px 12px; }
}