/*
Theme Name:  Bhukamp Child
Theme URI:   https://bhukamp.in
Description: Child theme for Bhukamp Advertising Agency — built on Hello Elementor
Author:      Bhukamp Agency
Author URI:  https://bhukamp.in
Template:    hello-elementor
Version:     1.0.0
Tags:        advertising, agency, bold, red, elementor
Text Domain: bhukamp-child
*/

/* ============================================================
   BHUKAMP — Brand Variables
   ============================================================ */
:root {
  --bhukamp-red:        #d90012;
  --bhukamp-red-light:  #ff1a27;
  --bhukamp-red-glow:   rgba(217, 0, 18, 0.2);
  --bhukamp-red-pale:   rgba(217, 0, 18, 0.07);

  /* Pastel gradient palette */
  --bhukamp-bg:         #fff8f5;
  --bhukamp-bg-alt:     #fff0f8;
  --bhukamp-card:       rgba(255, 255, 255, 0.78);
  --bhukamp-border:     rgba(217, 0, 18, 0.1);
  --bhukamp-border-soft:rgba(0, 0, 0, 0.06);

  /* Typography colours */
  --bhukamp-ink:        #1a0a0a;
  --bhukamp-ink-mid:    #4a2020;
  --bhukamp-ink-soft:   #9a6060;
  --bhukamp-ink-faint:  rgba(26, 10, 10, 0.3);

  /* Fonts */
  --font-display:  'Anton', sans-serif;
  --font-body:     'Rajdhani', sans-serif;
  --font-mono:     'Share Tech Mono', monospace;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bhukamp-bg);
  color: var(--bhukamp-ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}

/* Animated pastel gradient background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(255,190,190,0.5)  0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 5%,   rgba(255,170,220,0.35) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 85% 95%,  rgba(255,200,170,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 15% 95%,  rgba(210,190,255,0.35) 0%, transparent 50%),
    linear-gradient(160deg, #fff5f5 0%, #fff0f8 35%, #ffeee8 65%, #f8f0ff 100%);
  animation: bgShift 15s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bgShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(8deg) brightness(1.01); }
  100% { filter: hue-rotate(-5deg) brightness(1); }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.bhukamp-cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--bhukamp-red);
  border-radius: 50%; pointer-events: none; z-index: 99999;
  margin-left: -5px; margin-top: -5px;
  box-shadow: 0 0 10px var(--bhukamp-red-glow);
  opacity: 0;
  transition: width .2s, height .2s;
}
.bhukamp-cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(217,0,18,0.5);
  border-radius: 50%; pointer-events: none; z-index: 99998;
  margin-left: -18px; margin-top: -18px;
  opacity: 0;
  transition: width .2s ease, height .2s ease, opacity .2s ease;
}

/* ============================================================
   HEADER / NAV — Transparent → Solid on scroll
   ============================================================ */
.site-header,
.elementor-location-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .45s ease, border-color .45s ease,
              box-shadow .45s ease, padding .45s ease;
}
.site-header.scrolled,
.elementor-location-header.scrolled {
  background: rgba(255, 252, 250, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--bhukamp-border) !important;
  box-shadow: 0 2px 30px rgba(217, 0, 18, 0.07) !important;
}

/* Logo — hidden until scrolled */
.site-header .site-logo img,
.site-header .custom-logo,
.elementor-location-header .elementor-widget-site-logo img {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.site-header.scrolled .site-logo img,
.site-header.scrolled .custom-logo,
.elementor-location-header.scrolled .elementor-widget-site-logo img {
  opacity: 1;
  pointer-events: auto;
}

/* Nav links */
.site-header .main-navigation a,
.elementor-location-header .elementor-nav-menu a {
  font-family: var(--font-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-ink-mid) !important;
  text-decoration: none !important;
  transition: color .3s ease !important;
  position: relative;
}
.site-header .main-navigation a:hover,
.elementor-location-header .elementor-nav-menu a:hover {
  color: var(--bhukamp-red) !important;
}

/* Nav CTA button */
.nav-cta-btn,
.elementor-location-header .menu-item-cta a {
  background: var(--bhukamp-red) !important;
  color: #fff !important;
  padding: .5rem 1.4rem !important;
  font-family: var(--font-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .2em !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px var(--bhukamp-red-glow) !important;
  transition: background .2s ease !important;
}
.nav-cta-btn:hover,
.elementor-location-header .menu-item-cta a:hover {
  background: var(--bhukamp-red-light) !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-display) !important;
  color: var(--bhukamp-ink);
  line-height: .92;
  letter-spacing: .02em;
}

p, .elementor-widget-text-editor,
.elementor-text-editor {
  font-family: var(--font-body) !important;
  color: var(--bhukamp-ink-soft);
  font-size: .9rem;
  line-height: 1.9;
}

/* Red accent text */
.text-red, .accent-red { color: var(--bhukamp-red) !important; }

/* Stroke/outline text */
.text-stroke {
  -webkit-text-stroke: 2px var(--bhukamp-ink);
  color: transparent !important;
}

/* Section label style */
.section-label {
  font-family: var(--font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .4em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-red) !important;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.section-label::before {
  content: ''; display: block;
  width: 22px; height: 1px;
  background: var(--bhukamp-red);
}
.section-label::after {
  content: ''; display: block;
  width: 5px; height: 5px;
  background: var(--bhukamp-red);
  transform: rotate(45deg);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.elementor-button.btn-primary,
.btn-bhukamp-primary,
a.btn-primary {
  background: var(--bhukamp-red) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 1rem 2.8rem !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
  box-shadow: 0 6px 25px var(--bhukamp-red-glow) !important;
  transition: background .2s, box-shadow .2s, transform .15s !important;
}
.elementor-button.btn-primary:hover,
a.btn-primary:hover {
  background: var(--bhukamp-red-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 35px var(--bhukamp-red-glow) !important;
}

.elementor-button.btn-outline,
a.btn-outline {
  background: rgba(255,255,255,.5) !important;
  color: var(--bhukamp-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  border: 1.5px solid rgba(26,10,10,.18) !important;
  padding: .9rem 2rem !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
  transition: border-color .2s, color .2s !important;
}
.elementor-button.btn-outline:hover,
a.btn-outline:hover {
  border-color: var(--bhukamp-red) !important;
  color: var(--bhukamp-red) !important;
}

/* ============================================================
   SECTIONS — Background tints
   ============================================================ */
.section-services {
  background: linear-gradient(180deg,
    rgba(255,235,235,.5) 0%,
    rgba(255,230,250,.4) 50%,
    transparent 100%) !important;
}
.section-portfolio {
  background: linear-gradient(135deg,
    rgba(255,220,220,.45) 0%,
    rgba(255,230,255,.4) 50%,
    rgba(255,235,215,.45) 100%) !important;
}
.section-contact {
  background: linear-gradient(135deg,
    rgba(255,215,215,.5) 0%,
    rgba(255,225,255,.45) 50%,
    rgba(255,238,215,.5) 100%) !important;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-card,
.elementor-widget-wrap.service-card {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--bhukamp-border-soft) !important;
  border-radius: 6px !important;
  position: relative;
  overflow: hidden;
  transition: background .3s, box-shadow .3s, transform .25s !important;
  box-shadow: 0 2px 16px rgba(217,0,18,.04) !important;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--bhukamp-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.service-card:hover { 
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 45px rgba(217,0,18,.1) !important;
  transform: translateY(-4px) !important;
}
.service-card:hover::before { transform: scaleX(1); }

.service-number {
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  color: rgba(217,0,18,.08) !important;
  line-height: 1;
  transition: color .3s;
}
.service-card:hover .service-number { color: rgba(217,0,18,.2) !important; }

.service-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-ink) !important;
}

/* ============================================================
   PORTFOLIO / IMAGE CARDS
   ============================================================ */
.portfolio-item {
  position: relative; overflow: hidden;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  cursor: pointer;
}
.portfolio-item .portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20,5,5,.85) 0%,
    rgba(20,5,5,.15) 65%,
    transparent 100%);
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 2rem;
  opacity: 0; transform: translateY(15px);
  transition: opacity .4s, transform .4s;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1; transform: translateY(0);
}
.portfolio-cat {
  font-family: var(--font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,200,200,.9) !important;
}
.portfolio-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-card { position: relative; }
.team-card .team-photo {
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  position: relative;
}
.team-card .team-photo::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--bhukamp-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.team-card:hover .team-photo::after { transform: scaleX(1); }

.team-name {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-ink) !important;
}
.team-role {
  font-family: var(--font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-red) !important;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.elementor-form .elementor-field-group label,
.wpcf7-form label {
  font-family: var(--font-mono) !important;
  font-size: .55rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-ink-soft) !important;
}
.elementor-form .elementor-field,
.wpcf7-form input,
.wpcf7-form textarea {
  background: rgba(255,255,255,.6) !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(26,10,10,.12) !important;
  border-radius: 0 !important;
  padding: .9rem 0 !important;
  color: var(--bhukamp-ink) !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  transition: border-color .3s !important;
}
.elementor-form .elementor-field:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--bhukamp-red) !important;
  outline: none !important;
  box-shadow: none !important;
}
.elementor-form .elementor-button[type="submit"],
.wpcf7-submit {
  background: var(--bhukamp-red) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 1.1rem 3rem !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
  box-shadow: 0 6px 25px var(--bhukamp-red-glow) !important;
  transition: transform .15s, box-shadow .2s !important;
}
.elementor-form .elementor-button[type="submit"]:hover,
.wpcf7-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 35px var(--bhukamp-red-glow) !important;
}

/* ============================================================
   MARQUEE / TICKER
   ============================================================ */
.bhukamp-marquee-wrap {
  background: var(--bhukamp-red);
  padding: .85rem 0; overflow: hidden;
  box-shadow: 0 4px 25px var(--bhukamp-red-glow);
}
.bhukamp-marquee-track {
  display: flex; white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
}
.bhukamp-marquee-item {
  font-family: var(--font-display);
  font-size: .88rem; letter-spacing: .22em;
  color: #fff; padding: 0 2rem;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   STATS NUMBERS
   ============================================================ */
.stat-number,
.elementor-counter-number-wrapper {
  font-family: var(--font-display) !important;
  color: var(--bhukamp-red) !important;
  font-size: 2.8rem !important;
  line-height: 1 !important;
}
.stat-label {
  font-family: var(--font-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--bhukamp-ink-faint) !important;
}

/* ============================================================
   SEISMIC METER (sidebar decoration)
   ============================================================ */
.seismic-meter {
  position: fixed; right: 2rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: .3rem;
  z-index: 100; opacity: .3;
  pointer-events: none;
}
.seismic-meter .sm-bar {
  width: 3px; background: rgba(217,0,18,.3);
  border-radius: 2px;
  animation: smPulse 1.5s ease-in-out infinite;
}
@keyframes smPulse {
  0%,100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); background: var(--bhukamp-red); }
}

/* ============================================================
   SHAKE ANIMATIONS
   ============================================================ */
.shaking     { animation: pQuake .65s ease both !important; }
.shaking-big { animation: bigQuake .65s ease both !important; }

@keyframes pQuake {
  0%   { transform: translate(0,0) rotate(0deg); }
  10%  { transform: translate(-4px, 2px) rotate(-.3deg); }
  20%  { transform: translate( 4px,-3px) rotate( .3deg); }
  30%  { transform: translate(-3px, 3px) rotate(-.2deg); }
  40%  { transform: translate( 3px,-2px) rotate( .2deg); }
  50%  { transform: translate(-2px, 2px) rotate(-.1deg); }
  60%  { transform: translate( 2px,-1px) rotate( .1deg); }
  80%  { transform: translate(-1px, 1px) rotate(0deg); }
  100% { transform: translate(0,0)  rotate(0deg); }
}
@keyframes bigQuake {
  0%   { transform: translate(0,0) rotate(0deg); }
  8%   { transform: translate(-7px, 3px) rotate(-.5deg); }
  16%  { transform: translate( 7px,-5px) rotate( .5deg); }
  24%  { transform: translate(-5px, 5px) rotate(-.4deg); }
  32%  { transform: translate( 5px,-4px) rotate( .4deg); }
  48%  { transform: translate( 3px,-3px) rotate( .25deg); }
  64%  { transform: translate( 2px,-1px) rotate( .1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.elementor-location-footer {
  background: rgba(255,248,246,.9) !important;
  border-top: 1px solid var(--bhukamp-border-soft) !important;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bhukamp-red), transparent);
}

/* ============================================================
   ELEMENTOR OVERRIDES — spacing/padding reset
   ============================================================ */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}
.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .seismic-meter { display: none !important; }
  h1, .elementor-heading-title { font-size: clamp(3rem, 14vw, 6rem) !important; }
}