/* БМК — КАПІТАЛ | effects.css
   Анімації та візуальні ефекти:
   canvas particles, shimmer, tilt, typewriter, cursor.
*/

/* ══════════════════════════════════════════
   ✦ VISUAL UPGRADE — EFFECTS & ENHANCEMENTS
   ══════════════════════════════════════════ */

/* ─── 1. CANVAS PARTICLES (hero bg) ─── */
#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ─── 2. HERO GLOW BLOB ─── */
.hero__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%);
  top: -150px;
  right: -100px;
  z-index: 0;
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.12); opacity: 1; }
}

/* ─── 3. SECTION DIVIDERS ─── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0.4) 30%,
    rgba(201,168,76,0.6) 50%,
    rgba(201,168,76,0.4) 70%,
    transparent 100%
  );
  margin: 0;
}

/* ─── 4. HERO TITLE — shimmer on em ─── */
.hero__title em {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    #f0d680 40%,
    var(--color-accent) 60%,
    #c9a84c 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ─── 5. BTN SHINE EFFECT ─── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
}
.btn-primary:hover::after {
  animation: btnShine 0.55s ease forwards;
}
@keyframes btnShine {
  0%   { left: -75%; }
  100% { left: 135%; }
}

/* ─── 6. SECTION TITLE — gold underline animate ─── */
.section-title-line {
  width: 0;
  transition: width 0.8s ease 0.3s;
}
.visible .section-title-line,
.section-title-line.visible {
  width: 40px;
}

/* ─── 7. ABOUT SECTION — diagonal bg accent ─── */
.about {
  position: relative;
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.about .container {
  position: relative;
  z-index: 1;
}

/* ─── 8. SERVICES SECTION — card number watermark ─── */
.service-card {
  counter-increment: svc-counter;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.service-card:hover::after {
  transform: scaleX(1);
}

/* ─── 9. PROCESS SECTION — line connector ─── */
.process {
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 100px,
    rgba(201,168,76,0.018) 100px,
    rgba(201,168,76,0.018) 101px
  );
  pointer-events: none;
}

/* ─── 10. PROCESS STEP — glow number ─── */
.process-step__num {
  position: relative;
}
.process-step__num::before {
  content: attr(data-n);
  position: absolute;
  font-size: 80px;
  font-weight: 900;
  color: rgba(201,168,76,0.04);
  left: -8px;
  top: -20px;
  line-height: 1;
  pointer-events: none;
  font-family: var(--font-heading);
}

/* ─── 11. WHY-US SECTION — diagonal accent bg ─── */
.why-us {
  position: relative;
  overflow: hidden;
}
.why-us::after {
  content: '';
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.045) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.why-us .container {
  position: relative;
  z-index: 1;
}

/* ─── 12. WHY-CARD — icon glow on hover ─── */
.why-card {
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.why-card:hover {
  box-shadow: 0 8px 40px rgba(201,168,76,0.07), 0 2px 8px rgba(0,0,0,0.35);
}
.why-card__icon {
  transition: filter var(--transition), transform var(--transition);
}
.why-card:hover .why-card__icon {
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.45));
  transform: scale(1.08);
}


/* ─── 14. REVIEW CARD — quote mark glow ─── */
.review-card__quote {
  background: linear-gradient(135deg, var(--color-accent), #f0d680);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 56px;
  line-height: 0.8;
  display: block;
  margin-bottom: 20px;
}

/* ─── 15. CTA BANNER — animated gradient border ─── */
.cta-banner {
  position: relative;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    rgba(201,168,76,0.5) 0%,
    transparent 40%,
    transparent 60%,
    rgba(201,168,76,0.3) 100%
  );
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ─── 16. FAQ ITEM — accent left bar on open ─── */
.faq-item {
  position: relative;
  transition: background var(--transition);
  padding-left: 0;
}
.faq-item.open {
  background: rgba(201,168,76,0.02);
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.faq-item.open::before {
  transform: scaleY(1);
}
.faq-item__trigger,
.faq-item__body-inner {
  padding-left: 16px;
}

/* ─── 17. CONTACTS FORM — input glow ─── */
.form__input:focus,
.form__textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1), 0 0 16px rgba(201,168,76,0.06);
}

/* ─── 18. STAT CARD — accent number glow ─── */
.stat-card__number {
  text-shadow: 0 0 40px rgba(201,168,76,0.25);
}

/* ─── 19. SCROLL INDICATOR — improved pulse ─── */
.hero__scroll-arrow {
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ─── 20. HEADER LOGO — accent dash animated ─── */
.logo span {
  display: inline-block;
  transition: color var(--transition), transform var(--transition);
}
.logo:hover span {
  color: var(--color-accent);
  transform: scaleX(1.4);
}

/* ─── 21. NAV LINK — underline slide ─── */
.nav__link {
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
}

/* ─── 22. ABOUT UTP — counter accent on stat ─── */
.about-utp:nth-child(2) {
  border-top-color: var(--color-accent);
}
.about-utp:nth-child(3) {
  border-top-color: var(--color-accent);
}


/* ─── 24. REGION ITEMS — dot pulse for main ─── */
.region-item__dot--main {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(201,168,76,0); }
}

/* ─── 25. FLOAT CALL BUTTON — ring effect ─── */
.float-btn-call {
  position: fixed; /* не перебиваємо fixed з components.css */
}
.float-btn-call::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(201,168,76,0.4);
  animation: callRing 2.5s ease-in-out infinite;
}
@keyframes callRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  50%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}


/* ══════════════════════════════════════════
   ✦ VISUAL UPGRADE — ROUND 2
   ══════════════════════════════════════════ */

/* ─── CTA BANNER — dark redesign with animated bg ─── */
.cta-banner {
  background: var(--color-bg-dark) !important;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(201,168,76,0.07) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(201,168,76,0.015) 40px,
      rgba(201,168,76,0.015) 41px
    );
  pointer-events: none;
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner__label {
  color: var(--color-accent) !important;
  opacity: 0.8;
}
.cta-banner__title {
  color: var(--color-text) !important;
}
.cta-banner__sub {
  color: var(--color-text-muted) !important;
}
.cta-banner__btn {
  background: var(--color-accent) !important;
  color: #000 !important;
  border-color: var(--color-accent) !important;
}
.cta-banner__btn:hover {
  background: var(--color-accent-hover) !important;
}
.cta-banner__note {
  color: var(--color-text-muted) !important;
}
.cta-banner__note a {
  color: var(--color-accent) !important;
}

/* ─── CTA BANNER — accent left border ─── */
.cta-banner__inner {
  border-left: 3px solid var(--color-accent);
  padding-left: 40px;
}
@media (max-width: 768px) {
  .cta-banner__inner { border-left: none; padding-left: 0; border-top: 3px solid var(--color-accent); padding-top: 24px; }
}

/* ─── PROCESS — step number glow on intersect ─── */
.process-step__num {
  transition: background var(--transition), box-shadow 0.4s ease, border-color var(--transition), transform 0.4s ease;
}
.process-step.in-view .process-step__num {
  background: rgba(201,168,76,0.1);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.06), 0 0 20px rgba(201,168,76,0.15);
  transform: scale(1.05);
}

/* ─── PROCESS — horizontal line draw animation ─── */
.process__steps::before {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s ease 0.2s;
  opacity: 0.35;
}
.process__steps.line-drawn::before {
  transform: scaleX(1);
}

/* ─── WHY-CARD — number watermark ─── */
.why-card {
  counter-increment: why-counter;
}
.why-card__icon-wrap {
  position: relative;
}

/* ─── TILT CARDS — applied via JS ─── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card:hover {
  transition: transform 0.1s linear !important;
}
.tilt-card:not(:hover) {
  transition: transform 0.5s ease !important;
}

/* ─── CURSOR SPOTLIGHT ─── */
#cursorSpot {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,168,76,0.045) 0%, transparent 65%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ─── HERO TYPEWRITER cursor ─── */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--color-accent);
  margin-left: 3px;
  vertical-align: middle;
  animation: blinkCursor 0.9s ease-in-out infinite;
}
@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── PROCESS STEPS — mobile stacked with connector line ─── */
@media (max-width: 768px) {
  .process__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .process__steps::before {
    top: 0; bottom: 0;
    left: 27px; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
    transform-origin: top;
  }
  .process-step {
    flex-direction: row;
    text-align: left;
    padding: 0 0 32px 0;
    gap: 20px;
    align-items: flex-start;
  }
  .process-step:last-child { padding-bottom: 0; }
  .process-step__num {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .process-step__body { padding-top: 12px; }
}

/* ─── SCROLL-TRIGGERED FADE-UP STAGGER for service cards ─── */
.service-card {
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition),
              opacity 0.6s ease, translate 0.6s ease;
}

/* ─── ABOUT SECTION — "3 роки" card pulse ─── */
.stat-card--full {
  position: relative;
  overflow: hidden;
}
.stat-card--full::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,168,76,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* ─── SECTION LABEL — animated dash before ─── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.6s ease 0.1s;
  flex-shrink: 0;
}
.visible .section-label::before,
.section-label.label-shown::before {
  width: 20px;
}

/* ─── FOOTER — subtle top glow ─── */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5) 50%, transparent);
}

/* ─── CONTACTS SECTION — card hover ─── */
.contacts__item {
  transition: transform var(--transition);
  padding: 12px 0;
  border-bottom: 1px solid rgba(201,168,76,0.06);
}
.contacts__item:hover {
  transform: translateX(4px);
}
.contacts__item:last-child { border-bottom: none; }

/* ─── INPUT LABEL FLOAT feel ─── */
.form__group {
  position: relative;
}
.form__input,
.form__textarea {
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form__input:focus,
.form__textarea:focus {
  background: rgba(201,168,76,0.02);
}

/* ─── HERO EYEBROW — pulse line ─── */
.hero__eyebrow-line {
  background: linear-gradient(90deg, var(--color-accent), rgba(201,168,76,0.3));
  animation: eyebrowPulse 3s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { width: 40px; opacity: 0.8; }
  50%       { width: 56px; opacity: 1; }
}

/* ─── SVC-ROW — left accent line on hover ─── */
.svc-row {
  border-left: 2px solid transparent;
  transition: background var(--transition), border-color var(--transition), padding-left var(--transition);
}
.svc-row:hover {
  border-left-color: var(--color-accent);
  padding-left: 32px;
}

/* ─── REVIEW CARD — top accent line ─── */
.review-card {
  border-top: 2px solid transparent;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.review-card:hover {
  border-top-color: var(--color-accent);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 0 rgba(201,168,76,0);
}



/* ── Header phone link ──────────────────── */
.header__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color .2s;
}
.header__phone:hover { color: var(--color-accent); }
.header__phone svg { flex-shrink: 0; }
@media (max-width: 900px) { .header__phone { display: none; } }