/* ================================================================
   KIKUE · FX — Micro-animaciones, efectos modernos y scroll magic
   ================================================================ */

/* ── 0. VARIABLES SPRING & EASINGS ─────────────────────────────── */
:root {
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --snap:     cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 1. GRAIN TEXTURE (profundidad digital) ─────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;   /* keep below lightbox (1050), modals, dropdowns */
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* ── 2. CUSTOM CURSOR ───────────────────────────────────────────── */
#kk-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(245,168,0,.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99990;
  transform: translate(-50%, -50%);
  transition:
    width .35s var(--spring),
    height .35s var(--spring),
    border-color .25s ease,
    background-color .25s ease,
    border-radius .35s var(--spring);
  will-change: transform;
}

#kk-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: #F5A800;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99991;
  transform: translate(-50%, -50%);
  transition: transform .06s linear, background .2s ease;
  will-change: transform;
}

#kk-cursor.kk-hover {
  width: 56px; height: 56px;
  border-color: var(--accent, #C0392B);
  background: rgba(192,57,43,.07);
}

#kk-cursor.kk-image {
  width: 72px; height: 72px;
  border-radius: 10px;
  border-color: rgba(245,168,0,.9);
  background: rgba(245,168,0,.05);
}

#kk-cursor.kk-text {
  width: 3px; height: 32px;
  border-radius: 2px;
  background: rgba(245,168,0,.6);
  border-color: transparent;
}

@media (hover: none), (pointer: coarse) {
  #kk-cursor, #kk-cursor-dot { display: none !important; }
}

/* ── 3. FLOATING NAVBAR (glassmorphism en scroll) ──────────────── */
.navbar {
  transition: all .4s var(--smooth) !important;
  will-change: transform;
}

.navbar.kk-scrolled {
  background: rgba(255,252,240,.88) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow: 0 2px 24px rgba(44,43,40,.12) !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.navbar.kk-scrolled .navbar-brand,
.navbar.kk-scrolled .navbar-light a.btn { height: 58px !important; }

/* ── 4. HIGH-CONTRAST GRADIENT BORDERS ─────────────────────────── */
.kk-border-grad {
  position: relative;
}
.kk-border-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(245,168,0,.5), rgba(192,57,43,.3), rgba(245,168,0,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 5. HOVER GLOW EFFECT (sigue al mouse) ─────────────────────── */
.kk-glow-card {
  position: relative;
  overflow: hidden;
}
.kk-glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(245,168,0,.10),
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}
.kk-glow-card:hover::after { opacity: 1; }

/* ── 6. SCROLL-TRIGGERED REVEAL ────────────────────────────────── */
.kk-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition:
    opacity .6s var(--ease-out),
    transform .6s var(--ease-out);
  will-change: opacity, transform;
}
.kk-reveal.kk-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Safety: WOW-managed elements are never hidden by kk-reveal */
.wow.kk-reveal { opacity: 1 !important; transform: none !important; }

/* Fade-left variant */
.kk-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.kk-reveal-left.kk-revealed { opacity: 1; transform: translateX(0); }

/* Fade-right variant */
.kk-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.kk-reveal-right.kk-revealed { opacity: 1; transform: translateX(0); }

/* ── 7. STAGGERED ENTRANCE ──────────────────────────────────────── */
.kk-stagger .kk-reveal:nth-child(1) { transition-delay: 0s; }
.kk-stagger .kk-reveal:nth-child(2) { transition-delay: .09s; }
.kk-stagger .kk-reveal:nth-child(3) { transition-delay: .18s; }
.kk-stagger .kk-reveal:nth-child(4) { transition-delay: .27s; }
.kk-stagger .kk-reveal:nth-child(5) { transition-delay: .36s; }
.kk-stagger .kk-reveal:nth-child(6) { transition-delay: .45s; }

/* ── 8. MAGNETIC BUTTONS ────────────────────────────────────────── */
.btn {
  will-change: transform;
}

/* Active state feedback */
.btn.kk-loading {
  pointer-events: none;
  opacity: .8;
}
.btn.kk-loading::after {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kkSpin .6s linear infinite;
  vertical-align: middle;
}
.btn.kk-done::after {
  content: " ✓";
  font-weight: 700;
}

@keyframes kkSpin { to { transform: rotate(360deg); } }

/* ── 9. SOFT SPRING TRANSITIONS (cards only, not bare links) ────── */
.service-item, .portfolio-item, .team-item, .product-card {
  transition: transform .45s var(--spring), box-shadow .35s ease !important;
}

.service-item:hover { transform: translateY(-8px) scale(1.01) !important; }
.portfolio-item:hover { transform: translateY(-4px) !important; }
.team-item:hover { transform: translateY(-6px) !important; }

/* ── 10. GLASSMORPHISM en tarjetas seleccionadas ────────────────── */
.kk-glass {
  background: rgba(255,252,240,.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(245,168,0,.18) !important;
  box-shadow: 0 8px 32px rgba(44,43,40,.10) !important;
}

/* ── 11. PARALLAX hero image ────────────────────────────────────── */
.header-carousel .owl-carousel-item img {
  will-change: transform;
  transition: transform 0s linear;
}

/* ── 12. KINETIC TYPOGRAPHY ─────────────────────────────────────── */
.section-title h1,
.page-header h1,
.kk-kinetic {
  transition: transform .5s var(--smooth);
  will-change: transform;
  display: inline-block;
}

/* ── 13. SKELETON LOADING ───────────────────────────────────────── */
.kk-skeleton {
  background: linear-gradient(
    90deg,
    rgba(245,168,0,.06) 25%,
    rgba(245,168,0,.15) 50%,
    rgba(245,168,0,.06) 75%
  );
  background-size: 200% 100%;
  animation: kkShimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes kkShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 14. MICRO-BOUNCE al llegar al contenedor ───────────────────── */
@keyframes kkBounce {
  0%,100% { transform: translateY(0); }
  30%      { transform: translateY(-5px); }
  60%      { transform: translateY(2px); }
  80%      { transform: translateY(-2px); }
}
.kk-bouncing { animation: kkBounce .55s var(--spring); }

/* ── 15. BENTO GRID (servicios/features) ───────────────────────── */
.kk-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.kk-bento-item {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(245,168,0,.15);
  transition: transform .45s var(--spring), box-shadow .35s ease;
  position: relative;
}
.kk-bento-item:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 48px rgba(44,43,40,.12), 0 0 0 1px rgba(245,168,0,.25);
}
.kk-bento-item.kk-bento--wide  { grid-column: span 2; }
.kk-bento-item.kk-bento--tall  { grid-row: span 2; }

/* ── 16. SCROLL-PROGRESS BAR (top of page) ──────────────────────── */
#kk-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #F5A800, #C0392B);
  z-index: 99999;
  pointer-events: none;
  transition: width .1s linear;
}

/* ── 17. SECTION DIVIDERS elegantes ─────────────────────────────── */
.kk-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,168,0,.4), rgba(192,57,43,.3), transparent);
  border: none;
  margin: 0;
}

/* ── 18. HIGHLIGHT CHIP (etiquetas de sección) ──────────────────── */
.kk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid rgba(192,57,43,.4);
  color: var(--accent, #C0392B);
  background: rgba(192,57,43,.06);
  margin-bottom: 12px;
}

/* ── 19. FLOATING CTA button (sticky bottom-right) ──────────────── */

/* ── 20. TEXT SHIMMER EFFECT (dorado animado) ───────────────────── */
.kk-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    #FFD166 45%,
    var(--accent) 55%,
    var(--primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kkTextShimmer 3.5s linear infinite;
}
@keyframes kkTextShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── 21. PORTFOLIO ITEM — overlay sutil (sin bloqueo de imagen) ── */
.portfolio-item .portfolio-overlay {
  transition: opacity .4s var(--smooth) !important;
  background: linear-gradient(to top, rgba(44,43,40,.72) 0%, transparent 55%) !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  opacity: 0 !important;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1 !important;
}
.portfolio-item:hover .portfolio-overlay .btn {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform .4s var(--spring) .1s, opacity .3s ease .1s !important;
}
.portfolio-item .portfolio-overlay .btn {
  transform: translateY(12px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease !important;
}

/* ── 22. IMAGE REVEAL on load ───────────────────────────────────── */
img.kk-img-load {
  transition: opacity .5s ease;
}
img.kk-img-load:not(.kk-img-loaded) {
  opacity: 0;
}
img.kk-img-load.kk-img-loaded { opacity: 1; }

/* ── 23. SCROLL-INDICATOR (hero) ────────────────────────────────── */
.kk-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.kk-scroll-hint span {
  font-size: .6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.kk-scroll-hint-wheel {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  position: relative;
}
.kk-scroll-hint-wheel::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px; height: 7px;
  background: rgba(245,168,0,.85);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: kkScrollWheel 1.8s ease-in-out infinite;
}
@keyframes kkScrollWheel {
  0%   { top: 5px; opacity: 1; }
  80%  { top: 20px; opacity: 0; }
  100% { top: 5px; opacity: 0; }
}

/* ── 24. RESPONSIVE safeguards ──────────────────────────────────── */
@media (max-width: 768px) {
    .service-item:hover { transform: translateY(-4px) !important; }
  .kk-bento-item.kk-bento--wide { grid-column: span 1; }
}

/* Hide custom cursor when lightbox or modal is active */
.lb-overlay ~ #kk-cursor,
.lb-overlay ~ #kk-cursor-dot,
body.lb-disable-scrolling #kk-cursor,
body.lb-disable-scrolling #kk-cursor-dot { display: none !important; }

/* ─── DISABLE HEAVY FX ON MOBILE ──────────────────────────── */
@media (max-width: 991.98px) {
    /* Disable custom cursor on all touch devices */
    #kk-cursor, #kk-cursor-dot { display: none !important; }
    
    /* Disable grain (GPU cost on mobile) */
    body::after { display: none; }
    
    /* Disable hover glow (no mouse on touch) */
    .kk-glow-card::after { display: none; }
    
    /* Simpler transitions on mobile */
    .service-item:hover { transform: none !important; }
    .portfolio-item:hover { transform: none !important; }
    .team-item:hover { transform: none !important; }
    
    /* Static navbar on mobile (no glassmorphism transition lag) */
    .navbar { transition: none !important; }
    
    /* CTA float hidden on mobile (WA float is enough) */
        
    /* Scroll hint hidden on tablet/mobile */
    .kk-scroll-hint { display: none; }
}

@media (max-width: 575.98px) {
    /* Faster, simpler reveals on slow mobile */
    .kk-reveal {
        transition: opacity .4s ease, transform .4s ease !important;
        transform: translateY(16px) !important;
    }
    /* No stagger delay on mobile (feels sluggish) */
    .kk-stagger .kk-reveal { transition-delay: 0s !important; }
    
    /* Progress bar thicker on mobile for visibility */
    #kk-progress { height: 3px; }
}