/* ============================================
   MERY STYLIQUE — Premium Animations & Effects
   ============================================ */

/* ── Custom Cursor ──────────────────────────────────────────── */
.cursor {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); position: fixed;
  top: 0; left: 0; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(198,169,98,0.6);
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease, transform 0.08s linear;
}
.cursor-ring.hovered {
  width: 64px; height: 64px;
  border-color: var(--gold);
}
@media (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}

/* ── Hero text reveal animation ─────────────────────────────── */
@keyframes heroReveal {
  0%   { opacity: 0; transform: translateY(40px) skewY(2deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes heroBadgeIn {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroSubIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.hero-anim .hero-badge {
  animation: heroBadgeIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s both;
}
.hero-anim .hero-title {
  animation: heroReveal 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.45s both;
}
.hero-anim .hero-subtitle {
  animation: heroSubIn 0.9s ease 0.8s both;
}
.hero-anim .hero-actions {
  animation: heroSubIn 0.9s ease 1.0s both;
}
.hero-anim .hero-stats {
  animation: heroSubIn 0.9s ease 1.2s both;
}

/* ── Word-by-word reveal ─────────────────────────────────────── */
.word-reveal .word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  margin-right: 0.25em;
}
.word-reveal .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-reveal.visible .word-inner {
  transform: translateY(0);
}
.word-reveal .word:nth-child(1) .word-inner { transition-delay: 0s; }
.word-reveal .word:nth-child(2) .word-inner { transition-delay: 0.07s; }
.word-reveal .word:nth-child(3) .word-inner { transition-delay: 0.14s; }
.word-reveal .word:nth-child(4) .word-inner { transition-delay: 0.21s; }
.word-reveal .word:nth-child(5) .word-inner { transition-delay: 0.28s; }
.word-reveal .word:nth-child(6) .word-inner { transition-delay: 0.35s; }
.word-reveal .word:nth-child(7) .word-inner { transition-delay: 0.42s; }
.word-reveal .word:nth-child(8) .word-inner { transition-delay: 0.49s; }

/* ── Gold shimmer on labels ─────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.section-label.shimmer {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 45%, #fff6c0 50%, var(--gold-light) 55%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
.section-label.shimmer::before { background: var(--gold); }

/* ── Stagger cards ───────────────────────────────────────────── */
.stagger-child {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
.stagger-parent.visible .stagger-child:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.stagger-parent.visible .stagger-child:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.stagger-parent.visible .stagger-child:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.stagger-parent.visible .stagger-child:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.stagger-parent.visible .stagger-child:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.stagger-parent.visible .stagger-child:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

/* ── Parallax containers ─────────────────────────────────────── */
.parallax-el { will-change: transform; }

/* ── Image reveal wipe ───────────────────────────────────────── */
.img-reveal-wrap {
  position: relative; overflow: hidden;
}
.img-reveal-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gold);
  transform: translateX(-101%);
  transition: transform 0.7s cubic-bezier(0.77,0,0.18,1);
}
.img-reveal-wrap.reveal-start::after { transform: translateX(0); }
.img-reveal-wrap.reveal-done::after  { transform: translateX(101%); }
.img-reveal-wrap img {
  opacity: 0; transition: opacity 0.01s 0.35s;
}
.img-reveal-wrap.reveal-done img { opacity: 1; }

/* ── Gold line draw ──────────────────────────────────────────── */
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.gold-line {
  display: block; width: 60px; height: 1px;
  background: var(--gold); transform-origin: left;
  animation: lineDraw 0.8s cubic-bezier(0.77,0,0.18,1) forwards;
}

/* ── Enhanced project card ───────────────────────────────────── */
.project-card::before {
  content: ''; position: absolute;
  inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.1) 40%,
    transparent 65%);
  transition: opacity 0.4s ease;
}
.project-card:hover::before {
  background: linear-gradient(to top,
    rgba(10,10,10,0.92) 0%,
    rgba(10,10,10,0.4) 50%,
    rgba(198,169,98,0.05) 100%);
}
.project-card-overlay { z-index: 2; }

/* ── Gold border-bottom reveal on cards ──────────────────────── */
.service-card {
  position: relative;
}
.service-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.service-card:hover::after { width: 100%; }

/* ── Why card hover glow ─────────────────────────────────────── */
.why-card {
  position: relative; overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.why-card::before {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 120%, rgba(198,169,98,0.08) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s ease;
}
.why-card:hover::before { opacity: 1; }
.why-card:hover { box-shadow: 0 8px 40px rgba(198,169,98,0.08), 0 1px 0 rgba(198,169,98,0.15); }

/* ── Testimonial card hover accent ───────────────────────────── */
.testimonial-card {
  position: relative; overflow: hidden;
}
.testimonial-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; width: 2px; height: 0;
  background: var(--gold);
  transition: height 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.testimonial-card:hover::after { height: 100%; }

/* ── Number counter animation ─────────────────────────────────── */
.count-up { display: inline-block; }

/* ── Magnetic button effect ───────────────────────────────────── */
.btn-magnetic { display: inline-flex; position: relative; }

/* ── CTA section animated gold orbs ──────────────────────────── */
.cta-section .orb-1, .cta-section .orb-2 {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-section .orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(198,169,98,0.06) 0%, transparent 70%);
  top: -200px; right: -200px;
  animation: orbFloat 8s ease-in-out infinite;
}
.cta-section .orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(198,169,98,0.04) 0%, transparent 70%);
  bottom: -150px; left: -100px;
  animation: orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.97); }
}

/* ── Hero orb ambient glow ────────────────────────────────────── */
.hero-orb {
  position: absolute; pointer-events: none;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,169,98,0.12) 0%, transparent 65%);
  top: 50%; right: -10%; transform: translateY(-50%);
  animation: orbFloat 12s ease-in-out infinite;
}

/* ── Page transition fade ─────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-transition {
  animation: pageFadeIn 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
}

/* ── Navbar logo hover ────────────────────────────────────────── */
.navbar-brand {
  position: relative; display: inline-block;
}
.navbar-brand::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0; width: 0; height: 1px;
  background: var(--gold); transition: width 0.4s ease;
}
.navbar-brand:hover::after { width: 100%; }

/* ── Scroll-triggered number counters ─────────────────────────── */
.stat-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Section divider ornament ─────────────────────────────────── */
.ornament {
  display: flex; align-items: center; gap: 16px;
  justify-content: center; margin: 0 auto 40px;
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; max-width: 80px;
  height: 1px; background: var(--border);
}
.ornament-diamond {
  width: 8px; height: 8px;
  background: var(--gold); transform: rotate(45deg);
}

/* ── Hover image zoom tweak ───────────────────────────────────── */
.project-card,
.service-card,
.gallery-thumb {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── Smooth text gradient animate ─────────────────────────────── */
@keyframes gradientText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.text-gradient {
  background: linear-gradient(135deg, var(--gold) 0%, #e8d59a 40%, var(--gold) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 4s linear infinite;
}

/* ── Footer link hover underline ─────────────────────────────── */
.footer-links a {
  position: relative; display: inline-block;
}
.footer-links a::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 1px;
  background: var(--gold); transition: width 0.3s ease;
}
.footer-links a:hover::after { width: 100%; }

/* ── Nav link enhanced underline ─────────────────────────────── */
.nav-link::after {
  transform-origin: left center;
}

/* ── Input focus gold glow ────────────────────────────────────── */
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(198,169,98,0.1), 0 1px 4px rgba(198,169,98,0.15);
}

/* ── Smooth image load ────────────────────────────────────────── */
img { transition: opacity 0.4s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* ── Card entrance from left/right ───────────────────────────── */
.fade-from-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.fade-from-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.fade-from-left.visible,
.fade-from-right.visible {
  opacity: 1; transform: translateX(0);
}

/* ── Enhanced scroll-to-top ──────────────────────────────────── */
.scroll-top {
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.scroll-top.visible { transform: translateY(0); }
.scroll-top:not(.visible) { transform: translateY(20px); }

/* ── Ripple on button click ───────────────────────────────────── */
.btn { overflow: hidden; position: relative; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  transform: scale(0); animation: rippleAnim 0.6s linear;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Floating label animation on contact form ─────────────────── */
.form-group { position: relative; }

/* ── Glowing WhatsApp pulse ───────────────────────────────────── */
.whatsapp-btn {
  position: relative;
  animation: waPop 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2s both;
}
@keyframes waPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Gold divider line animate ────────────────────────────────── */
hr.gold-hr {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 48px 0; opacity: 0.4;
}

/* ── Image parallax layer ─────────────────────────────────────── */
.hero-bg { transition: transform 0.05s linear; will-change: transform; }

/* ── Testimonial quote mark animate ──────────────────────────── */
.testimonial-card:hover .testimonial-quote {
  opacity: 0.25;
  transition: opacity 0.4s ease;
}