/* ==========================================================================
   Popnants Labs — Visual Enhancements
   Nav underline, card tilt/lift, button glow, counters, scroll ring,
   timeline draw, logo micro-interaction, hero network canvas.
   ========================================================================== */

/* --- Site font: Inter, the closest freely-licensable match to the
   clean geometric sans Oracle.com uses (Oracle Sans is a proprietary
   in-house font that isn't available for third-party embedding). --- */
body, button, input, select, textarea,
.sitename, .header .logo .brand-oregano {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Icon fonts (Bootstrap Icons, glightbox, swiper) are exempt so glyphs keep rendering */
[class^="bi-"], [class*=" bi-"], .bi,
[class*="glightbox"] [class*="icon"],
.swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet {
  font-family: inherit !important;
}

/* --- Logo: small, and continuously drifting through random
   micro-transforms via JS (see enhancements.js .logo-anim handler) --- */
.header .logo img {
  transition: transform 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  will-change: transform;
}
.header .logo:hover img {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: rotate(-8deg) scale(1.08);
}
.header .logo .brand-oregano {
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}
.header .logo:hover .brand-oregano {
  letter-spacing: 1.5px;
}

/* --- Inline expanding video panel (replaces the fullscreen lightbox
   popup for "Watch Popnants TV") --- */
.watch-video-wrap {
  width: 100%;
}
.inline-video-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
  margin-top: 0;
  width: 100%;
}
.inline-video-panel.is-open {
  grid-template-rows: 1fr;
  margin-top: 20px;
}
.inline-video-panel-inner {
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, #000, transparent 65%);
}
.inline-video-panel .ratio {
  background: #000;
  border-radius: 10px;
}
.inline-video-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, #000, transparent 35%);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.inline-video-close:hover {
  background: color-mix(in srgb, #000, transparent 10%);
  transform: scale(1.08);
}

/* --- Larger tap target for the mobile nav toggle (accessibility: min 44x44) --- */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    padding: 8px;
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Nav link underline sweep --- */
.navmenu > ul > li > a {
  position: relative;
}
.navmenu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s ease, left 0.3s ease;
}
.navmenu > ul > li > a:hover::after,
.navmenu > ul > li > a.active::after {
  width: 70%;
  left: 15%;
}

/* --- Card lift + tilt --- */
.service-item,
.portfolio-item,
.features-item,
.team-member,
.pricing-item,
.post-item,
article.position-relative {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  will-change: transform;
}
.service-item:hover,
.features-item:hover,
.pricing-item:hover {
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent-color), transparent 65%);
}
.portfolio-item:hover img,
.team-member:hover .member-img img {
  filter: saturate(1.1);
}

/* --- Button glow / shimmer --- */
.btn-get-started {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent-color), transparent 45%);
}
.btn-get-started::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, #fff, transparent 55%), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn-get-started:hover::before {
  left: 130%;
}

/* --- Animated CTA button (service-details pages) --- */
.sd-cta-wrap {
  padding-top: 8px;
}
.btn-cta-pulse {
  display: inline-flex;
  align-items: center;
  animation: sd-cta-pulse 2.2s ease-in-out infinite;
}
.btn-cta-pulse i {
  transition: transform 0.3s ease;
}
.btn-cta-pulse:hover {
  animation-play-state: paused;
}
.btn-cta-pulse:hover i {
  transform: translateX(5px);
}
@keyframes sd-cta-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color), transparent 45%);
  }
  50% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-color), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta-pulse {
    animation: none;
  }
}

/* --- Stat counters --- */
.counter-value {
  display: inline-block;
  position: relative;
}

/* --- Scroll-to-top progress ring --- */
#scroll-top {
  position: fixed;
  background: var(--accent-color);
}
#scroll-top::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: conic-gradient(var(--accent-color) calc(var(--scroll-pct, 0) * 1%), color-mix(in srgb, var(--default-color), transparent 82%) 0);
  z-index: -1;
  transition: background 0.1s linear;
}

/* --- Timeline draw-in (journey.html) --- */
.timeline-dot {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-dot.in-view {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: scale(1.06);
}

/* --- Hero network canvas --- */
.hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.55;
  pointer-events: none;
}

/* --- Section title accent underline animation --- */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 3px;
  background: var(--accent-color);
  border-radius: 3px;
  transform: translateX(-50%);
  animation: growUnderline 1s 0.3s ease forwards;
}
@keyframes growUnderline {
  to { width: 60px; }
}

/* --- Badge shimmer (status pills on products.html) --- */
.badge-shimmer {
  position: relative;
  overflow: hidden;
}
.badge-shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, #fff, transparent 60%), transparent);
  animation: shimmerSweep 3.2s ease-in-out infinite;
}
@keyframes shimmerSweep {
  0% { left: -60%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

/* --- Remove the green page-title strip under the header (site-wide) --- */
.page-title.accent-background {
  display: none !important;
}

/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  .header .logo img,
  .header .logo .brand-oregano,
  .service-item, .portfolio-item, .features-item, .team-member, .pricing-item,
  .btn-get-started, .timeline-dot {
    transition: none !important;
    animation: none !important;
  }
  .badge-shimmer::after { display: none; }
}

/* --- Hero carousel images: fully visible (no crop) on mobile ---
   object-fit: cover on a tall, narrow phone viewport crops most of a
   wide landscape photo away. Switch to contain + a dark letterbox
   fill below the tablet breakpoint so the whole image always shows,
   and give the carousel a sane height instead of near-full-screen. */
@media (max-width: 768px) {
  .hero .carousel {
    min-height: 62vh;
    height: 62vh;
  }
  .hero img {
    object-fit: contain;
    background-color: #05130d;
  }
}