/* ========= Enhanced Layer v2 ========= */

/* ----- Soft global background tone ----- */
body {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  background-attachment: fixed;
}

/* ----- Header Depth & Light Bloom ----- */
header {
  background: linear-gradient(120deg, #0078d4, #005fa3);
  position: relative;
  overflow: hidden;
}
header::before,
header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
header::before {
  background: radial-gradient(circle at 20% 120%, rgba(255,255,255,0.18), transparent 70%);
  animation: headerPulse 10s ease-in-out infinite alternate;
}
header::after {
  background: radial-gradient(circle at 80% -20%, rgba(0,120,212,0.25), transparent 60%);
  mix-blend-mode: overlay;
}
@keyframes headerPulse {
  from { opacity: .3; transform: translateY(0); }
  to   { opacity: .6; transform: translateY(-10px); }
}

/* ----- Logo Hover Glow ----- */
.logo img {
  transition: filter .3s ease, transform .2s ease;
}
.logo img:hover {
  filter: drop-shadow(0 0 8px rgba(0,184,255,.6));
  transform: scale(1.02);
}

/* ----- Search Section Light Play ----- */
.search-section {
  background: linear-gradient(135deg, #0078d4 0%, #005fa3 50%, #004275 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.search-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 40%, rgba(255,255,255,.1), transparent 70%);
  animation: floatGlow 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes floatGlow {
  from { opacity: .3; transform: translateY(0); }
  to   { opacity: .6; transform: translateY(-12px); }
}

/* Accent underline animation */
.search-section h2::after {
  content: '';
  display: block;
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #00b8ff, #0095ff, #0078d4);
  margin: .7rem auto 0;
  border-radius: 2px;
  animation: pulseAccent 3s ease-in-out infinite;
}
@keyframes pulseAccent {
  0%,100% { opacity: .5; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.3); }
}

/* ----- Search Field Styling ----- */
.search-bar {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.1),
              0 4px 10px rgba(0,0,0,0.06);
}
.search-bar input,
.search-bar select {
  transition: box-shadow .25s ease, transform .1s ease;
}
.search-bar input:focus,
.search-bar select:focus {
  box-shadow: 0 0 0 3px rgba(0,184,255,0.3);
  transform: scale(1.02);
}

/* ----- Buttons with Halo Lift ----- */
.button, .btn, .search-bar button {
  background: linear-gradient(90deg, #0095ff, #0078d4);
  box-shadow: 0 4px 12px rgba(0,120,212,0.25);
  transition: background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.button:hover, .btn:hover, .search-bar button:hover {
  background: linear-gradient(90deg, #00b8ff, #0095ff);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,120,212,0.35);
}

/* ----- Card & Panel Motion Depth ----- */
.result .card,
.panel,
.price {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.result .card:hover,
.panel:hover,
.price:hover {
  transform: translateY(-4px);
  border-color: #0095ff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

/* ----- Animated Shadow Flow (optional subtle glow) ----- */
@keyframes softPulse {
  0%,100% { box-shadow: 0 0 0 rgba(0,120,212,0); }
  50% { box-shadow: 0 0 12px rgba(0,120,212,0.25); }
}
.button:focus-visible {
  animation: softPulse 1.8s ease-in-out infinite;
}

/* ----- Footer Gradient Sheen ----- */
footer {
  background: radial-gradient(ellipse at 50% -30%, rgba(0,120,212,.35), transparent 70%),
              linear-gradient(180deg, #0e1217, #0a0d11);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 2px;
  background: linear-gradient(90deg, #0078d4, transparent, #0078d4);
  opacity: .3;
  pointer-events: none;
}
footer nav a:hover {
  color: #00b8ff;
}

/* ----- Typography Refinement ----- */
h2, h3 {
  letter-spacing: .01em;
}
p, li {
  letter-spacing: .005em;
  line-height: 1.7;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body, header, footer, button, input, select {
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.context-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #444;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.context-note a {
  color: var(--accent);
  font-weight: 500;
}
.context-note a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}



footer nav a {
  position: relative;
}
footer nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}
footer nav a:hover::after {
  width: 100%;
}