/* ================================================================
   Chris' OIL WordPress Theme — main.css
   Animations + custom overrides (Tailwind CDN handles utilities)
   ================================================================ */

/* ── Google Fonts via functions.php ── */
:root {
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --col-blue-950: #0d1f36;
  --col-orange:   #f97316;
  scroll-behavior: smooth;
}

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--col-blue-950); }
::-webkit-scrollbar-thumb { background: var(--col-orange); border-radius: 999px; }

/* ── Navbar ── */
#chrisoil-navbar {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#chrisoil-navbar.scrolled {
  background: rgba(13, 31, 54, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
}

/* ── Mobile drawer ── */
#mob-drawer { transform: translateX(100%); transition: transform 0.28s ease; }
#mob-drawer.open { transform: translateX(0); }
#mob-backdrop { display: none; }
#mob-backdrop.open { display: block; }

/* ── Hero orb animations ── */
@keyframes pulse-orb {
  0%,100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.18); opacity: 0.75; }
}
.orb   { animation: pulse-orb var(--dur, 9s) ease-in-out infinite; }
.orb-1 { --dur: 9s;  animation-delay: 0s; }
.orb-2 { --dur: 11s; animation-delay: -3s; }
.orb-3 { --dur: 7s;  animation-delay: -1.5s; }

/* ── HOD Badge glow pulse ── */
@keyframes hod-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
  50%      { box-shadow: 0 0 18px 6px rgba(249,115,22,0.35); }
}
.hod-badge { animation: hod-glow 3s ease-in-out infinite; }

/* ── Scroll-triggered animations ── */
.ai-fade-up,
.ai-fade-left,
.ai-fade-right,
.ai-scale-in {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.ai-fade-up    { transform: translateY(36px); }
.ai-fade-left  { transform: translateX(-48px); }
.ai-fade-right { transform: translateX(48px); }
.ai-scale-in   { transform: scale(0.92); }

.ai-fade-up.visible,
.ai-fade-left.visible,
.ai-fade-right.visible,
.ai-scale-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Stagger helpers ── */
[data-delay="1"] { transition-delay: 0.10s; }
[data-delay="2"] { transition-delay: 0.20s; }
[data-delay="3"] { transition-delay: 0.30s; }
[data-delay="4"] { transition-delay: 0.40s; }

/* ── Button hover scale ── */
.co-btn-primary {
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.co-btn-primary:hover {
  transform: scale(1.04);
  filter: brightness(1.07);
  box-shadow: 0 8px 24px rgba(249,115,22,0.4);
}
.co-btn-primary:active { transform: scale(0.97); }

.co-btn-ghost {
  transition: background 0.2s, transform 0.18s;
}
.co-btn-ghost:hover { transform: scale(1.03); background: rgba(255,255,255,0.15); }

/* ── Service card top-accent line ── */
.co-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f97316, #ea580c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 12px 12px 0 0;
}
.co-service-card:hover::before { transform: scaleX(1); }

/* ── Discount card icon pulse on hover ── */
.co-discount-card:hover .co-disc-icon {
  transform: scale(1.12) rotate(-3deg);
  transition: transform 0.3s ease;
}

/* ── Town pill hover ── */
.co-town-pill { transition: background 0.2s, transform 0.15s; }
.co-town-pill:hover { transform: scale(1.07); }

/* ── About card hover ── */
.co-about-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.co-about-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ── Contact info row ── */
.co-contact-row { transition: transform 0.2s ease; }
.co-contact-row:hover { transform: translateX(4px); }

/* ── Form inputs ── */
.co-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.co-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ══════════════════════════════════════════
   ABOUT IMAGE CAROUSEL
   ══════════════════════════════════════════ */
.co-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.co-carousel-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.co-carousel-slide img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .co-carousel-slide img { height: 420px; }
}

/* Arrows */
.co-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(13,31,54,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  transition: background 0.2s, transform 0.15s;
}
.co-carousel-arrow:hover {
  background: rgba(249,115,22,0.85);
  transform: translateY(-50%) scale(1.08);
}
.co-carousel-prev { left: 10px; }
.co-carousel-next { right: 10px; }

/* Dots */
.co-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(13,31,54,0.25);
  border: 2px solid rgba(13,31,54,0.35);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.co-carousel-dot.active {
  background: #f97316;
  border-color: #f97316;
  transform: scale(1.35);
}
.co-carousel-dot:hover:not(.active) {
  background: rgba(249,115,22,0.4);
  border-color: rgba(249,115,22,0.6);
}

/* ── Footer ── */
.animate-ping-slow {
  animation: ping-slow 2.4s ease-in-out infinite;
}
@keyframes ping-slow {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.6); opacity: 0; }
}

/* ── Font display helper ── */
.font-display { font-family: var(--font-display); }