/* ══════════════════════════════════════════════════════
   VISUALAURA — Homepage 2.0 motion layer
   Additive enhancement only — no layout/brand changes. Elevates
   interaction: premium cursor, hovers, scroll storytelling,
   shimmer accents, and page transitions. transform/opacity-led.
   ══════════════════════════════════════════════════════ */

/* ── Premium cursor (gold ring + contextual label) ── */
@media (pointer: fine) {
  .cursor-ring { border-color: var(--accent) !important; border-width: 1.4px; }
  body.cursor-hover .cursor-ring { border-color: var(--accent); }
  .vx-clabel {
    position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
    transform: translate(-50%, -50%) scale(.5); opacity: 0;
    font-family: var(--font-body); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); background: #251c18; padding: 8px 15px; border-radius: 40px; white-space: nowrap;
    box-shadow: 0 10px 30px rgba(40,22,26,.28);
    transition: opacity .3s var(--ease), transform .35s var(--ease);
  }
  .vx-clabel.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Service cards — luxe hover ── */
.svc-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.svc-card .svc-icon, .svc-card .svc-arrow { transition: transform .5s var(--ease), color .4s var(--ease); }
.svc-card .svc-tags span { transition: transform .45s var(--ease), background .4s var(--ease); }
.svc-card:hover { border-color: rgba(201,169,110,.5); box-shadow: 0 26px 60px rgba(110,20,35,.16), 0 0 0 1px rgba(201,169,110,.35); }
.svc-card:hover .svc-icon { transform: rotate(5deg) translateY(-3px); }
.svc-card:hover .svc-arrow { transform: translateX(6px); }
.svc-card:hover .svc-tags span { transform: translateY(-3px); }
.svc-card:hover .svc-tags span:nth-child(2) { transition-delay: .04s; }
.svc-card:hover .svc-tags span:nth-child(3) { transition-delay: .08s; }

/* ── Portfolio — subtle zoom on hover ── */
.pf-item .pf-visual, .pf-item .pf-sim { transition: transform 1.1s var(--ease); will-change: transform; }
.pf-item:hover .pf-sim { transform: scale(1.05); }

/* ── Pricing — featured shimmer + hover ── */
.price-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.price-card:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(110,20,35,.18); }
.price-featured { position: relative; overflow: hidden; }
.price-featured::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(201,169,110,.22), transparent);
  transform: skewX(-18deg); animation: vxShimmer 6s var(--ease) infinite; animation-delay: 2s;
}
@keyframes vxShimmer { 0% { left: -60%; } 22%, 100% { left: 140%; } }
.price-featured { box-shadow: 0 22px 56px rgba(110,20,35,.18); animation: vxFeatGlow 4.5s ease-in-out infinite; }
@keyframes vxFeatGlow { 0%, 100% { box-shadow: 0 22px 56px rgba(110,20,35,.16); } 50% { box-shadow: 0 22px 60px rgba(201,169,110,.3); } }

/* ── CTA band — occasional gold sweep ── */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(201,169,110,.14), transparent);
  transform: skewX(-16deg); animation: vxCtaSweep 9s linear infinite; animation-delay: 3s;
}
@keyframes vxCtaSweep { 0% { left: -30%; } 30%, 100% { left: 130%; } }
.cta-band .cta-content { position: relative; z-index: 2; }

/* ── Hero "Premium" — elegant underline draw + glow ── */
.hero-title-em { position: relative; display: inline-block; }
.hero-title-em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.04em; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transform: scaleX(0); transform-origin: left; border-radius: 2px;
  animation: vxUnderline 1.1s var(--ease) 1.5s forwards;
}
@keyframes vxUnderline { to { transform: scaleX(1); } }

/* ── Process — scroll-driven step activation ── */
.ps-item .psi-num, .ps-item .psi-icon { transition: color .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); }
.ps-item.vx-active .psi-num { color: var(--primary); transform: scale(1.06); }
.ps-item.vx-active .psi-icon { color: var(--primary); transform: translateY(-3px); }
.psi-connector { position: relative; }
.psi-connector::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.ps-item.vx-active .psi-connector::after { transform: scaleX(1); }

/* ── Contact — focus glow + floating label feel ── */
.cf-input, .cf-select, .cf-textarea { transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,169,110,.18); }
.cf-group { position: relative; }
.cf-label { transition: color .3s var(--ease); }
.cf-group:focus-within .cf-label { color: var(--primary); }
.contact-form .btn[type="submit"] { will-change: transform; }

/* ── Page transition overlay ── */
.vx-transition {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120% 80% at 50% 40%, #FBF6EE 0%, #F3EADB 100%);
  transform: translateY(100%); transition: transform .6s cubic-bezier(.7,0,.3,1);
}
.vx-transition.in { transform: translateY(0); }
.vx-transition.out { transform: translateY(-100%); }
.vx-transition img { width: clamp(120px, 22vw, 180px); height: auto; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.vx-transition.in img { opacity: 1; transform: translateY(0); transition-delay: .25s; }
.vx-transition .vx-line { width: 0; height: 1.5px; max-width: 280px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transition: width .6s var(--ease) .4s; }
.vx-transition.in .vx-line { width: 60vw; }

@media (prefers-reduced-motion: reduce) {
  .price-featured, .price-featured::after, .cta-band::after, .hero-title-em::after { animation: none !important; }
  .vx-transition { display: none !important; }
}