/*
 * ============================================================
 * BHUKAMP — Main Stylesheet
 * File: bhukamp-child/assets/css/bhukamp.css
 * ============================================================
 */

/* ── BRAND TOKENS ─────────────────────────────────────────── */
:root {
  --bk-red:        #d90012;
  --bk-red-light:  #ff1a27;
  --bk-red-glow:   rgba(217, 0, 18, 0.22);
  --bk-ink:        #1a0a0a;
  --bk-ink-soft:   #9a6060;
  --bk-bg:         #fff8f5;
  --bk-white:      #ffffff;
  --bk-border:     rgba(217, 0, 18, 0.1);
  --bk-border-soft:rgba(0, 0, 0, 0.06);
}

/* ── GLOBAL CURSOR OVERRIDE ───────────────────────────────── */
*,
*::before,
*::after {
  cursor: none !important;
}
/* Re-allow text selection cursor on inputs */
input, textarea, [contenteditable] {
  cursor: text !important;
}


/* ══════════════════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════════════════ */
.bk-cursor {
  position:      fixed;
  top:           0;
  left:          0;
  width:         10px;
  height:        10px;
  background:    var(--bk-red);
  border-radius: 50%;
  pointer-events:none;
  z-index:       999999;
  margin-left:   -5px;
  margin-top:    -5px;
  opacity:       0;                       /* hidden until first move */
  box-shadow:    0 0 10px var(--bk-red-glow);
  transition:    opacity .3s ease, width .15s ease, height .15s ease;
}

.bk-cursor-ring {
  position:      fixed;
  top:           0;
  left:          0;
  width:         36px;
  height:        36px;
  border:        1.5px solid rgba(217, 0, 18, 0.45);
  border-radius: 50%;
  pointer-events:none;
  z-index:       999998;
  margin-left:   -18px;
  margin-top:    -18px;
  opacity:       0;
  transition:    opacity .3s ease,
                 width .18s ease, height .18s ease,
                 margin .18s ease, border-color .18s ease;
}

/* Ring expands when hovering a clickable element */
.bk-cursor-ring.bk-hover {
  width:        54px;
  height:       54px;
  margin-left:  -27px;
  margin-top:   -27px;
  border-color: var(--bk-red);
}

/* Seismic canvas — covers entire viewport */
#bkSeismicCanvas {
  position:       fixed;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        999997;
}


/* ══════════════════════════════════════════════════════════
   SEISMIC METER — fixed right-side live bars
══════════════════════════════════════════════════════════ */
.bk-seismic-meter {
  position:       fixed;
  right:          1.8rem;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  z-index:        9000;
  opacity:        0.3;
  pointer-events: none;
}

.bk-sm-label {
  font-family:    'Share Tech Mono', monospace;
  font-size:      0.42rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--bk-red);
  writing-mode:   vertical-rl;
  margin-bottom:  .5rem;
}

.bk-sm-bar {
  width:        3px;
  background:   rgba(217, 0, 18, .35);
  border-radius:2px;
  animation:    bkSmPulse 1.5s ease-in-out infinite;
}

@keyframes bkSmPulse {
  0%, 100% { transform: scaleY(.25); }
  50%       { transform: scaleY(1); background: var(--bk-red); }
}

/* Inline variant (via shortcode) */
.bk-seismic-meter-inline {
  display:        inline-flex;
  align-items:    flex-end;
  gap:            3px;
  opacity:        0.6;
  pointer-events: none;
}

@media (max-width: 768px) {
  .bk-seismic-meter { display: none; }
}


/* ══════════════════════════════════════════════════════════
   SHAKE CLASSES
   ─────────────────────────────────────────────────────────
   Add these CSS classes to ANY Elementor section/widget
   via: Advanced → CSS Classes

   bhukamp-shake        → gentle shake (triggered by JS on scroll/click)
   bhukamp-shake-big    → strong shake
   bhukamp-autoshake    → shakes automatically every 6 seconds
   bhukamp-shake-hover  → shakes when hovered

   The JS watches for these classes and applies the animation.
══════════════════════════════════════════════════════════ */

/* These are the animation classes JS adds/removes */
.bk-shaking {
  animation: bkPQuake 0.65s ease both !important;
}
.bk-shaking-big {
  animation: bkBigQuake 0.65s ease both !important;
}

/* Hover shake — pure CSS, no JS needed */
.bhukamp-shake-hover:hover {
  animation: bkPQuake 0.65s ease both;
}

@keyframes bkPQuake {
  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 bkBigQuake {
  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);    }
}


/* ══════════════════════════════════════════════════════════
   HEADER — Transparent → Solid Sticky
══════════════════════════════════════════════════════════ */

/* Elementor header template wrapper */
.elementor-location-header,
.site-header {
  position:    fixed !important;
  top:         0;
  left:        0;
  right:       0;
  z-index:     8000;
  background:  transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow:  none !important;
  transition:  background .45s ease,
               border-color .45s ease,
               box-shadow .45s ease,
               padding .35s ease;
}

/* Scrolled state — JS adds this class */
.elementor-location-header.bk-scrolled,
.site-header.bk-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(--bk-border) !important;
  box-shadow:    0 2px 30px rgba(217, 0, 18, 0.07) !important;
}

/* Logo hidden in transparent state, visible when scrolled */
.elementor-location-header .elementor-widget-site-logo img,
.elementor-location-header .custom-logo,
.site-header .custom-logo {
  opacity:        0;
  pointer-events: none;
  transition:     opacity .4s ease;
}
.elementor-location-header.bk-scrolled .elementor-widget-site-logo img,
.elementor-location-header.bk-scrolled .custom-logo,
.site-header.bk-scrolled .custom-logo {
  opacity:        1;
  pointer-events: auto;
}

/* Nav link colours */
.elementor-location-header .elementor-nav-menu a,
.site-header .main-navigation a {
  font-family:    'Share Tech Mono', monospace !important;
  font-size:      .65rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color:          var(--bk-ink) !important;
  text-decoration:none !important;
  transition:     color .2s ease !important;
}
.elementor-location-header .elementor-nav-menu a:hover,
.site-header .main-navigation a:hover {
  color: var(--bk-red) !important;
}

/* CTA button in nav */
.elementor-location-header .menu-item-cta a,
.site-header .menu-item-cta a {
  background: var(--bk-red) !important;
  color:      #fff !important;
  padding:    .45rem 1.2rem !important;
  font-weight:700 !important;
  box-shadow: 0 4px 16px var(--bk-red-glow) !important;
}
.elementor-location-header .menu-item-cta a:hover,
.site-header .menu-item-cta a:hover {
  background: var(--bk-red-light) !important;
}


/* ══════════════════════════════════════════════════════════
   FOOTER MARQUEE — Scrolling text behind footer content
   ─────────────────────────────────────────────────────────
   HOW TO USE IN ELEMENTOR:
   1. Edit your Footer template in Elementor Theme Builder
   2. Select the outermost Section/Container
   3. Advanced → CSS Classes → add:  bk-footer-section
   4. Add an HTML widget as the FIRST child of that section
   5. Use the shortcode: [bhukamp_footer_marquee]
      OR paste the HTML directly from bhukamp-cursor-footer.html
══════════════════════════════════════════════════════════ */

/* The footer section must have position:relative */
.bk-footer-section {
  position: relative !important;
  overflow: hidden !important;
}

/* All footer content sits above the marquee */
.bk-footer-section > * {
  position: relative;
  z-index:  1;
}

/* Marquee wrapper — absolute, fills footer, z-index 0 */
.bk-footer-marquee {
  position:       absolute !important;
  inset:          0 !important;
  overflow:       hidden !important;
  pointer-events: none !important;   /* NEVER blocks clicks */
  z-index:        0 !important;
  display:        flex !important;
  flex-direction: column !important;
  justify-content:center !important;
  gap:            1.2rem !important;
}

/* Each scrolling row */
.bk-mq-track {
  display:        flex;
  white-space:    nowrap;
  will-change:    transform;
  pointer-events: none;
}

/* Row 1 — scrolls left */
.bk-mq-fwd { animation: bkMqFwd 40s linear infinite; }

/* Row 2 — scrolls right */
.bk-mq-rev { animation: bkMqRev 32s linear infinite; }

@keyframes bkMqFwd {
  0%   { transform: translateX(0);    }
  100% { transform: translateX(-50%); }
}
@keyframes bkMqRev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0);    }
}

/* Giant faint words */
.bk-mq-item {
  font-family:    'Anton', sans-serif;
  font-size:      clamp(3rem, 6vw, 6.5rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .06);
  padding:        0 1.5rem;
  line-height:    1;
  user-select:    none;
  pointer-events: none;
}

/* Outline variant for Row 2 */
.bk-mq-outline {
  color:                transparent !important;
  -webkit-text-stroke:  1.5px rgba(217, 0, 18, .12);
  pointer-events:       none;
}

/* Dot separator */
.bk-mq-dot {
  font-size:      clamp(1.2rem, 2.5vw, 2.5rem);
  color:          rgba(217, 0, 18, .2);
  padding:        0 .5rem;
  line-height:    1;
  align-self:     center;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   ELEMENTOR UTILITY CLASSES
   Add these in Elementor → Advanced → CSS Classes
══════════════════════════════════════════════════════════ */

/* Scroll-reveal (JS adds .bk-visible) */
.bhukamp-reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.bhukamp-reveal.bk-visible {
  opacity:   1;
  transform: translateY(0);
}

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

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

/* Frosted glass card */
.bhukamp-glass {
  background:    rgba(255, 255, 255, .75) !important;
  backdrop-filter: blur(12px);
  border:        1px solid var(--bk-border-soft) !important;
  border-radius: 6px !important;
}
.bhukamp-glass:hover {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 10px 45px rgba(217, 0, 18, .1) !important;
  transform:  translateY(-4px);
  transition: all .25s ease;
}

/* Red top-border card (hover reveals it) */
.bhukamp-card-line {
  position: relative;
  overflow: hidden;
}
.bhukamp-card-line::before {
  content:          '';
  position:         absolute;
  top:              0; left: 0; right: 0;
  height:           2px;
  background:       var(--bk-red);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .4s ease;
}
.bhukamp-card-line:hover::before {
  transform: scaleX(1);
}

/* Section label style (small caps + red line) */
.bhukamp-label {
  font-family:    'Share Tech Mono', monospace !important;
  font-size:      .58rem !important;
  letter-spacing: .4em !important;
  text-transform: uppercase !important;
  color:          var(--bk-red) !important;
  display:        flex;
  align-items:    center;
  gap:            .8rem;
}
.bhukamp-label::before {
  content:    '';
  display:    block;
  width:      22px; height: 1px;
  background: var(--bk-red);
  flex-shrink:0;
}
.bhukamp-label::after {
  content:    '';
  display:    block;
  width:      5px; height: 5px;
  background: var(--bk-red);
  transform:  rotate(45deg);
  flex-shrink:0;
}

/* Red clipped-corner button */
.bhukamp-btn {
  background:    var(--bk-red) !important;
  color:         #fff !important;
  font-family:   'Share Tech Mono', monospace !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 24px var(--bk-red-glow) !important;
  transition:    background .2s, transform .15s, box-shadow .2s !important;
  text-decoration:none !important;
}
.bhukamp-btn:hover {
  background: var(--bk-red-light) !important;
  transform:  translateY(-2px) !important;
  box-shadow: 0 12px 32px var(--bk-red-glow) !important;
}