/* ============================================================
   Revebe Digital — polish layer (loads AFTER style.css)
   Same color tokens; adds depth, motion, rhythm & micro-interactions.
   To fully revert: remove the polish.css <link> in inc/layout.php.
   ============================================================ */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 10px 30px rgba(0,0,0,.28);
  --shadow-lift:0 24px 60px rgba(0,0,0,.5);
  --glow-red:0 0 0 1px rgba(255,45,77,.35), 0 22px 55px rgba(255,45,77,.16);
}

/* Smoother motion + premium text rendering */
a,button,.btn,.feature,.pain,.post-card,.panel-box,.channel-row,.chip,.nav-links a{
  transition:all .28s var(--ease);
}
h1,h2,h3{ letter-spacing:-.02em; text-wrap:balance; }
p{ text-wrap:pretty; }

/* Text selection + custom scrollbar */
::selection{ background:rgba(255,45,77,.30); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:rgba(255,45,77,.5) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--red),var(--red-2)); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:var(--bg); }

/* Accessible focus rings */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--red); outline-offset:2px; border-radius:6px;
}

/* Nav: crisper sticky bar + animated link underline */
.nav{ box-shadow:0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.25); }
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
  background:linear-gradient(90deg,var(--red),var(--red-2)); border-radius:2px;
  transition:right .28s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{ right:0; }

/* Buttons: refined depth + press feedback */
.btn{ border-radius:12px; will-change:transform; }
.btn-primary{ box-shadow:0 12px 30px rgba(255,45,77,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(255,45,77,.46); }
.btn:active{ transform:translateY(0) scale(.985); }

/* Cards: unified premium depth, top sheen & hover lift */
.feature,.pain,.post-card{ box-shadow:var(--shadow-soft); position:relative; }
.feature::before,.pain::before,.post-card::before,.panel-box::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.feature:hover,.pain:hover,.post-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,45,77,.45);
  box-shadow:var(--shadow-lift), var(--glow-red);
}
.panel-box{ box-shadow:var(--shadow-lift); position:relative; }

/* Icon pop on card hover */
.feature .ic,.pain .pic{ transition:transform .28s var(--ease); }
.feature:hover .ic,.pain:hover .pic{ transform:scale(1.08) rotate(-3deg); }

/* Channel rows: accent bar + subtle slide on hover */
.channel-row{ position:relative; overflow:hidden; }
.channel-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--red),var(--red-2));
  transform:scaleY(0); transform-origin:top; transition:transform .28s var(--ease);
}
.channel-row:hover{ border-color:rgba(255,45,77,.35); background:rgba(255,45,77,.05); transform:translateX(3px); }
.channel-row:hover::before{ transform:scaleY(1); }

/* Chips / tags */
.region-row .ch:hover,.chip:hover{ border-color:rgba(255,45,77,.6); transform:translateY(-1px); }

/* Eyebrow: inner glow */
.eyebrow{ box-shadow:0 0 24px rgba(255,45,77,.12) inset; }

/* CTA band: soft outer glow */
.cta-band{ box-shadow:0 30px 70px rgba(255,45,77,.14); }

/* Section rhythm: hairline divider between stacked sections */
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1180px,92%); height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.section + .section{ position:relative; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}
