/* ============================================================
   CASA ART — PREMIUM 3D UI ANIMATIONS & MICRO-INTERACTIONS
   (effects only — no layout/content changes)
   ============================================================ */

:root {
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gold-edge: #9c7a2f;   /* darker gold for 3D button edge */
  --green-edge: #128a43;  /* darker green edge */
}

/* ------------------------------------------------------------
   1) SCROLL REVEAL — 3D unfold + smooth fade
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: perspective(1200px) rotateX(9deg) translateY(42px);
  transform-origin: 50% 100%;
  transition: opacity .85s var(--ease-lux), transform .85s var(--ease-lux);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }

/* Staggered entrance for grid children */
.grid-3 > .reveal:nth-child(2), .grid-4 > .reveal:nth-child(2),
.services-icon-grid > .reveal:nth-child(2) { transition-delay: .09s; }
.grid-3 > .reveal:nth-child(3), .grid-4 > .reveal:nth-child(3),
.services-icon-grid > .reveal:nth-child(3) { transition-delay: .18s; }
.grid-4 > .reveal:nth-child(4), .services-icon-grid > .reveal:nth-child(4) { transition-delay: .27s; }
.services-icon-grid > .reveal:nth-child(5) { transition-delay: .36s; }
.services-icon-grid > .reveal:nth-child(6) { transition-delay: .45s; }
.services-icon-grid > .reveal:nth-child(7) { transition-delay: .54s; }
.services-icon-grid > .reveal:nth-child(8) { transition-delay: .63s; }

/* ------------------------------------------------------------
   2) HERO — staggered 3D entrance on load
   ------------------------------------------------------------ */
@keyframes luxRise {
  from { opacity: 0; transform: perspective(1000px) rotateX(8deg) translateY(32px); }
  to   { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); }
}
.hero-copy .eyebrow { animation: luxRise .8s var(--ease-lux) both .05s; }
.hero-copy h1       { animation: luxRise .9s var(--ease-lux) both .18s; }
.hero-copy p.lead   { animation: luxRise .9s var(--ease-lux) both .32s; }
.hero-actions       { animation: luxRise .9s var(--ease-lux) both .46s; }
.hero-points        { animation: luxRise .9s var(--ease-lux) both .60s; }
.hero .quote-card   { animation: luxRise 1s var(--ease-lux) both .34s; }

/* gold highlight words gently shimmer */
@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-copy h1 .hl {
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-soft-gold), var(--color-gold), var(--color-soft-gold), var(--color-gold-dark));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: goldShimmer 5s ease-in-out infinite;
}

/* ------------------------------------------------------------
   3) BUTTONS — 3D extruded, tactile press, shine sweep
   ------------------------------------------------------------ */
.btn-gold, .btn-wa-lg, .btn-outline-dark2, .btn-ghost-light, .btn-wa-header,
.btn2, .filter-btn {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .28s var(--ease-lux), box-shadow .28s var(--ease-lux),
              background .3s ease, color .3s ease, border-color .3s ease;
}

/* 3D gold button: solid bottom "edge" + soft glow */
.btn-gold {
  box-shadow: 0 6px 0 var(--gold-edge), 0 14px 24px rgba(201,164,92,.38);
}
.btn-gold:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--gold-edge), 0 24px 40px rgba(201,164,92,.52); }
.btn-gold:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-edge), 0 8px 16px rgba(201,164,92,.4); }

/* 3D green WhatsApp button */
.btn-wa-lg {
  box-shadow: 0 6px 0 var(--green-edge), 0 14px 24px rgba(37,211,102,.34);
}
.btn-wa-lg:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--green-edge), 0 24px 40px rgba(37,211,102,.5); }
.btn-wa-lg:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-edge), 0 8px 16px rgba(37,211,102,.4); }

/* Outline buttons: 3D lift + fill sweep */
.btn-outline-dark2:hover, .btn-ghost-light:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,15,5,.22); }
.btn-outline-dark2:active, .btn-ghost-light:active { transform: translateY(-1px) scale(.985); }

/* moving shine (over gold + green + primary + wa-lg) */
.btn-gold::before, .btn-wa-lg::before, .btn2-primary::before {
  content: '';
  position: absolute; top: 0; left: -140%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-22deg);
  transition: left .7s var(--ease-lux);
  pointer-events: none; z-index: 2;
}
.btn-gold:hover::before, .btn-wa-lg:hover::before, .btn2-primary:hover::before { left: 140%; }

/* header WhatsApp round: 3D pop */
.btn-wa-header { box-shadow: 0 5px 0 var(--green-edge), 0 8px 16px rgba(37,211,102,.35); }
.btn-wa-header:hover { transform: translateY(-3px) scale(1.05); }
.btn-wa-header:active { transform: translateY(2px); }

/* ------------------------------------------------------------
   4) CARDS — 3D tilt, depth lift, glossy sheen
   ------------------------------------------------------------ */
.svc-icon-card, .pkg-card, .why-card, .project-card, .partner-cat-card,
.testi-card, .service-card, .tp-card, .stat-card, .step-card {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .3s ease;
  will-change: transform;
}
.svc-icon-card:hover, .service-card:hover {
  transform: perspective(1100px) rotateX(6deg) translateY(-10px);
  box-shadow: 0 28px 52px rgba(20,15,5,.20);
}
.why-card:hover, .testi-card:hover, .partner-cat-card:hover, .tp-card:hover {
  transform: perspective(1100px) rotateX(5deg) translateY(-8px);
  box-shadow: 0 24px 46px rgba(20,15,5,.16);
}
.pkg-card:hover { transform: perspective(1100px) rotateX(4deg) translateY(-12px); box-shadow: 0 30px 58px rgba(20,15,5,.20); }
.pkg-card.popular:hover { transform: perspective(1100px) rotateX(3deg) translateY(-16px) scale(1.015); }
.project-card:hover { transform: perspective(1100px) rotateX(6deg) translateY(-10px); box-shadow: 0 28px 56px rgba(14,13,11,.5); }

/* glossy sheen that sweeps across cards on hover */
.svc-icon-card, .why-card, .project-card, .pkg-card, .testi-card { position: relative; }
.svc-icon-card::after, .why-card::after, .project-card::after,
.pkg-card::after, .testi-card::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(130deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 150% 150%;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, background-position .7s var(--ease-lux);
}
.svc-icon-card:hover::after, .why-card:hover::after, .project-card:hover::after,
.pkg-card:hover::after, .testi-card:hover::after { opacity: 1; background-position: -50% -50%; }

/* icons pop in 3D */
.svc-ico, .why-ico, .project-ico, .partner-cat-ico, .hiw-ico, .step-ico, .fi-ico {
  transition: transform .45s var(--ease-soft), background .3s ease, color .3s ease, box-shadow .35s ease;
  transform: translateZ(0);
}
.svc-icon-card:hover .svc-ico { transform: translateY(-6px) translateZ(30px) rotate(-8deg) scale(1.12); }
.why-card:hover .why-ico { transform: translateY(-5px) translateZ(24px) scale(1.12); box-shadow: 0 12px 28px rgba(201,164,92,.4); }
.project-card:hover .project-ico { transform: translateZ(24px) scale(1.14) rotate(8deg); }
.hiw-step:hover .hiw-ico { transform: translateY(-5px) scale(1.1); box-shadow: 0 14px 30px rgba(201,164,92,.5); }

/* portfolio + service image zoom */
.portfolio-item img, .service-card .thumb img { transition: transform .85s var(--ease-lux); }
.portfolio-item:hover img { transform: scale(1.1); }

/* ------------------------------------------------------------
   5) SECTION HEADINGS — animated gold underline
   ------------------------------------------------------------ */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: '';
  position: absolute; left: 50%; bottom: -14px;
  width: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-soft-gold), var(--color-gold));
  transform: translateX(-50%);
  transition: width .7s var(--ease-lux) .25s;
}
.section-head.in h2::after { width: 66px; }

/* ------------------------------------------------------------
   6) FLOATING WHATSAPP — attention pulse + 3D hover
   ------------------------------------------------------------ */
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.floater.wa { animation: waPulse 2.4s ease-out infinite; }
.floater { transition: transform .3s var(--ease-soft); }
.floater:hover { transform: translateY(-3px) scale(1.14) rotate(6deg); }

.mobile-bar-item { transition: background .2s ease, transform .18s ease; }
.mobile-bar-item:active { transform: scale(.94); }

/* ------------------------------------------------------------
   7) HEADER — refined shrink on scroll
   ------------------------------------------------------------ */
.site-header { transition: box-shadow .35s ease, background .35s ease; }
.site-header.scrolled { box-shadow: 0 8px 30px rgba(20,15,5,.10); }
.site-header.scrolled .header-inner { height: 66px; }
.header-inner { transition: height .35s var(--ease-lux); }
.brand-logo-img, .brand .logo-mark { transition: transform .35s var(--ease-lux); }
.brand:hover .brand-logo-img { transform: translateY(-1px) scale(1.03); }

.main-nav a { transition: color .25s ease, transform .25s ease; }
.main-nav a:hover { transform: translateY(-2px); }

.footer-social a { transition: transform .3s var(--ease-soft), background .3s ease, color .3s ease; }
.footer-social a:hover { transform: translateY(-4px) rotate(-8deg) scale(1.08); }

/* ------------------------------------------------------------
   8) FORM FIELDS + misc
   ------------------------------------------------------------ */
.quote-card .form-control, .quote-card .form-select {
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.quote-card .form-control:focus, .quote-card .form-select:focus { transform: translateY(-1px); }

.trust-item i { transition: transform .4s var(--ease-soft); }
.trust-item:hover i { transform: translateY(-5px) scale(1.15) rotate(-6deg); }

.filter-btn:hover { transform: translateY(-2px); }
.faq-q i { transition: transform .35s var(--ease-lux); }

/* ------------------------------------------------------------
   9) ACCESSIBILITY — respect reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-copy h1 .hl { -webkit-text-fill-color: var(--color-gold); color: var(--color-gold); }
}