/* ====== Brateck Premium Animations ====== */

/* --- Scroll Reveal Base --- */
[data-reveal]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal="up"]{transform:translateY(32px)}
[data-reveal].revealed{opacity:1;transform:none}

/* Stagger children — use data-reveal-stagger on parent */
[data-reveal-stagger] > [data-reveal]{transition-delay:calc(var(--ri,0) * 90ms)}

/* --- Hero Gradient Animation --- */
@keyframes heroGradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero-gradient-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(
    135deg,
    #0B0C0E 0%,
    #15100a 20%,
    #1a0e08 35%,
    #0B0C0E 50%,
    #0d1018 70%,
    #0B0C0E 100%
  );
  background-size:300% 300%;
  animation:heroGradientShift 12s ease infinite;
}

/* Subtle orange accent glow */
.hero-glow{
  position:absolute;z-index:1;pointer-events:none;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,.08) 0%, transparent 70%);
  top:-10%;right:10%;
  animation:glowPulse 6s ease-in-out infinite alternate;
}
.hero-glow-2{
  position:absolute;z-index:1;pointer-events:none;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,.05) 0%, transparent 70%);
  bottom:5%;left:5%;
  animation:glowPulse 8s ease-in-out 2s infinite alternate;
}
@keyframes glowPulse{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:1;transform:scale(1.15)}
}

/* --- Particle Canvas --- */
.particle-canvas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}

/* --- Hero Text Entrance --- */
@keyframes heroTextIn{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@keyframes heroBarIn{
  from{opacity:0;width:0}
  to{opacity:1;width:54px}
}
.hero-anim .eyebrow{
  opacity:0;animation:heroTextIn .8s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.hero-anim .accent-bar{
  opacity:0;animation:heroBarIn .6s cubic-bezier(.22,1,.36,1) .5s forwards;
}
.hero-anim .hero-title{
  opacity:0;animation:heroTextIn .9s cubic-bezier(.22,1,.36,1) .6s forwards;
}
.hero-anim .hero-art{
  opacity:0;animation:heroTextIn 1s cubic-bezier(.22,1,.36,1) .9s forwards;
}

/* --- Enhanced Card Hovers --- */
.product-card, .cat-card, .prod-card, .op-card{
  transition:box-shadow .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1) !important;
}
.product-card:hover, .prod-card:hover, .op-card:hover{
  box-shadow:0 20px 48px -18px rgba(241,90,36,.12), 0 12px 28px -12px rgba(15,17,23,.18) !important;
  transform:translateY(-4px) !important;
}
.cat-card .cat-img{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.cat-card:hover .cat-img svg{
  transform:scale(1.03);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

/* --- Button Micro-interactions --- */
.btn{
  transition:transform .2s cubic-bezier(.22,1,.36,1), background .25s ease, box-shadow .3s ease !important;
  position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform .5s ease;
  pointer-events:none;
}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{transform:translateY(-2px) !important;box-shadow:0 8px 24px -8px rgba(241,90,36,.5) !important}
.btn:active{transform:translateY(0) scale(.98) !important}

/* --- Submit / CTA shimmer --- */
.submit, .cta-contact, .op-more, .more-info{
  position:relative;overflow:hidden;
}
.submit::after, .cta-contact::after, .op-more::after, .more-info::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.1) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform .5s ease;
  pointer-events:none;
}
.submit:hover::after, .cta-contact:hover::after, .op-more:hover::after, .more-info:hover::after{
  transform:translateX(100%);
}

/* --- Pillar Rule Animation --- */
@keyframes ruleGrow{
  from{width:0;opacity:0}
  to{width:54px;opacity:1}
}
.pillar.revealed .rule{
  animation:ruleGrow .6s cubic-bezier(.22,1,.36,1) forwards;
}

/* --- Section Title Underline --- */
.section-title{position:relative;display:inline-block}
.section-title::after{
  content:"";display:block;height:3px;background:var(--orange);
  width:0;margin:14px auto 0;border-radius:2px;
  transition:width .6s cubic-bezier(.22,1,.36,1) .2s;
}
.section-title.revealed::after{width:64px}

/* --- Smooth header on scroll --- */
.site-header.scrolled{
  background:rgba(11,12,14,.92) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
  transition:background .4s ease, box-shadow .4s ease;
}

/* --- Page Hero Parallax-like --- */
.page-hero, .products-hero{
  transition:background-position .1s linear;
}

/* --- Feature card hover (product detail) --- */
.feat{
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
.feat:hover{
  border-color:var(--orange) !important;
  box-shadow:0 8px 24px -12px rgba(241,90,36,.1);
  transform:translateY(-2px);
}

/* --- Tab active transition --- */
.tab{
  transition:background .25s ease, color .25s ease, box-shadow .25s ease !important;
}
.tab.active{
  box-shadow:0 4px 16px -6px rgba(241,90,36,.3);
}

/* --- Social icon hover --- */
.socials a{
  transition:background .25s ease, transform .25s ease !important;
}
.socials a:hover{
  transform:translateY(-2px) scale(1.05);
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero-gradient-bg{animation:none}
  .particle-canvas{display:none}
}