/* ══════════════════════════════════════════
   WebEstate — Shared Animation Styles
   ══════════════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.from-left { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.scale-in { transform: scale(0.92); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.5s; }

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--gold-dark, #8C6D1F), var(--gold-light, #D4AE3B)); z-index: 1100; }

/* ── PAGE LOAD ── */
body.anim-ready { opacity: 0; animation: pageLoad 0.6s ease forwards; }
@keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }

/* ── NAV SHRINK ── */
nav { transition: height 0.3s, box-shadow 0.3s, background 0.3s; }
nav.scrolled { height: 60px; box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); background: rgba(255,255,255,0.98); }
nav.scrolled .nav-logo img { height: 88px; transition: height 0.3s; }

/* ── BUTTON SHIMMER ── */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); }
.btn-shimmer:hover::after { animation: shimmer 0.6s ease forwards; }
@keyframes shimmer { from { left: -100%; } to { left: 150%; } }

/* ── GRAIN TEXTURE ── */
.grain-bg { position: relative; }
.grain-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.28; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; }
.grain-bg > * { position: relative; z-index: 1; }

/* ── SECTION DIVIDERS ── */
.section-divider { display: flex; justify-content: center; padding: 0; }
.section-divider::after { content: ''; width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold, #B8952E), transparent); }

/* ── SVG ICON DRAW ── */
.icon-draw path, .icon-draw rect, .icon-draw circle, .icon-draw polyline, .icon-draw line {
  stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1) 0.2s;
}
.visible .icon-draw path, .visible .icon-draw rect, .visible .icon-draw circle, .visible .icon-draw polyline, .visible .icon-draw line {
  stroke-dashoffset: 0;
}

/* ── ENHANCED HOVERS ── */
.service-card, .paket-card, .feature-card, .benefit-card, .testimonial-card, .faq-item, .blog-card {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.service-card:hover, .paket-card:hover, .feature-card:hover, .benefit-card:hover, .blog-card:hover {
  transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}