/*
Theme Name: Glanz Werk NRW
Theme URI: https://glanzwerk-nrw.de
Author: Glanz Werk NRW
Author URI: https://glanzwerk-nrw.de
Description: Premium One-Page WordPress Theme für Gebäudereinigung. Dark-Mode Design mit GSAP Scroll-Animationen, Social-Media-Showcase, WhatsApp-Button und Contact-Form-7-Integration.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glanzwerk
*/

:root { --cursor-size: 20px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: #030303; color: #e2e2e2; overflow-x: hidden;
  font-family: 'Inter', sans-serif; cursor: default;
}
::selection { background: #2dd4bf; color: #030303; }

/* Scroll Progress Bar */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, #2dd4bf, #c9a96e);
  z-index: 9999; width: 0%; transition: width 0.1s;
}

/* Custom Cursor */
.cursor-dot, .cursor-outline {
  position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 10000; pointer-events: none;
}
.cursor-dot { width: 8px; height: 8px; background: #2dd4bf; }
.cursor-outline {
  width: 40px; height: 40px; border: 1px solid rgba(45, 212, 191, 0.5);
  transition: width 0.2s, height 0.2s, background 0.2s;
}
body:hover .cursor-outline.hovered {
  width: 60px; height: 60px; background: rgba(45, 212, 191, 0.1); border-color: #2dd4bf;
}
@media (pointer: coarse) { .cursor-dot, .cursor-outline { display: none; } }

/* Nav Glass */
.nav-glass {
  background: rgba(3, 3, 3, 0.7); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.text-glow { text-shadow: 0 0 40px rgba(45, 212, 191, 0.3); }

.magnetic-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; transition: all 0.3s ease;
}
.magnetic-btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.magnetic-btn:hover::before { left: 100%; }

.marquee-container { overflow: hidden; white-space: nowrap; position: relative; }
.marquee-content {
  display: inline-flex; animation: marquee 25s linear infinite;
  gap: 4rem; padding-right: 4rem;
}
.marquee-slow { animation-duration: 40s; }
.marquee-reverse { animation-direction: reverse; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tilt-card { transform-style: preserve-3d; transition: transform 0.1s; }
.tilt-content { transform: translateZ(20px); }

.reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1); }
.reveal-img.active { clip-path: inset(0 0 0 0); }

.service-item { opacity: 0; transform: translateY(30px); }
.service-item.active { opacity: 1; transform: translateY(0); transition: all 0.6s ease; }

.input-glow {
  background: #111; border: 1px solid #222; color: #e2e2e2;
  transition: all 0.3s;
}
.input-glow:focus {
  outline: none; border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

.orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: 0.4; animation: floatOrb 10s ease-in-out infinite;
}
@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

.line-mask { overflow: hidden; display: block; }
.line-mask span { display: block; transform: translateY(100%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.line-mask.active span { transform: translateY(0); }

#clean-curtain { transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; }
.bubble {
  position: absolute; border-radius: 50%; background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.3); pointer-events: none;
}

/* Dezenter, seitenweiter Bubble-Layer (fixed über dem Content, aber unter Navbar/Menü/Cursor) */
#page-bubbles {
  position: fixed;
  inset: 0;
  z-index: 40;              /* über Sektionen (die haben kein eigenes z), unter Navbar (z-50) & Mobile-Menu (z-9999) */
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;   /* wirkt auf dunklem Theme wie sanftes Leuchten, statt den Text abzudunkeln */
}
#page-bubbles .bubble {
  position: absolute;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.20);
  filter: blur(1px);
}
@media (prefers-reduced-motion: reduce) {
  #page-bubbles { display: none; }
}

/* Intro-Curtain Titel: sicher umbrechen auf sehr kleinen Screens (iPhone SE etc.) */
.curtain-title {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.curtain-title span { display: inline-block; }

/* Sicherheitsnetz Mobile-Menu: immer über der Navbar (z-50) liegen,
   damit Hintergrund komplett schwarz erscheint und der X-Button nicht
   von der Navbar überdeckt wird. */
#mobile-menu { z-index: 9999; }
#mobile-menu:not(.translate-x-full) ~ #navbar,
body:has(#mobile-menu:not(.translate-x-full)) #navbar { z-index: 40; }

.ref-box {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 32px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  background: rgba(255,255,255,0.03);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem;
  color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap;
}
.ref-box:hover { border-color: rgba(45, 212, 191, 0.4); color: #2dd4bf; background: rgba(45, 212, 191, 0.05); transition: all 0.3s; }

/* ============================================
   Social Media Showcase – reiner CSS-Marquee
   (identisches Prinzip wie der Referenzen-Slider oben auf der Seite)
   Läuft AUTOMATISCH per CSS-Animation. Nichts scroll-gebunden.
   ============================================ */
#social-showcase { position: relative; overflow: hidden; }

#social-pin-wrap {
  position: relative;
  overflow: hidden;
}

.social-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: socialMarquee 40s linear infinite;
}

@keyframes socialMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.social-card {
  position: relative; flex: 0 0 320px; height: 380px; border-radius: 24px;
  padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
  background: #111111; isolation: isolate;
}
.social-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0.15;
  transition: opacity 0.4s ease; z-index: 0;
}
.social-card:hover::before { opacity: 0.35; }
.social-card:hover { transform: translateY(-6px); transition: transform 0.4s ease; }
.social-card .social-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem; margin-bottom: 1.25rem; position: relative; z-index: 1;
  transition: transform 0.4s ease;
}
.social-card:hover .social-icon { transform: scale(1.1) rotate(-6deg); }
.social-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; margin-bottom: 0.4rem; position: relative; z-index: 1; }
.social-card p { color: #888888; font-size: 0.875rem; position: relative; z-index: 1; margin-bottom: 1rem; }
.social-card .social-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; position: relative; z-index: 1; width: fit-content;
}

.card-facebook::before { background: radial-gradient(circle at 30% 100%, #1877F2, transparent 70%); }
.card-facebook .social-icon { background: rgba(24,119,242,0.15); color: #1877F2; }
.card-facebook .social-cta { color: #1877F2; }

.card-instagram::before { background: radial-gradient(circle at 30% 100%, #E1306C, transparent 70%); }
.card-instagram .social-icon { background: linear-gradient(135deg, rgba(247,119,55,0.2), rgba(225,48,108,0.2), rgba(129,52,175,0.2)); color: #E1306C; }
.card-instagram .social-cta { color: #E1306C; }

.card-tiktok::before { background: radial-gradient(circle at 30% 100%, #25F4EE, transparent 70%); }
.card-tiktok .social-icon { background: rgba(37,244,238,0.12); color: #ffffff; }
.card-tiktok .social-cta { color: #25F4EE; }

.card-linkedin::before { background: radial-gradient(circle at 30% 100%, #0A66C2, transparent 70%); }
.card-linkedin .social-icon { background: rgba(10,102,194,0.15); color: #0A66C2; }
.card-linkedin .social-cta { color: #0A66C2; }

.card-pinterest::before { background: radial-gradient(circle at 30% 100%, #E60023, transparent 70%); }
.card-pinterest .social-icon { background: rgba(230,0,35,0.15); color: #E60023; }
.card-pinterest .social-cta { color: #E60023; }

.card-whatsapp::before { background: radial-gradient(circle at 30% 100%, #25D366, transparent 70%); }
.card-whatsapp .social-icon { background: rgba(37,211,102,0.15); color: #25D366; }
.card-whatsapp .social-cta { color: #25D366; }

/* Floating WhatsApp Button */
#wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 9997;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #030303; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  transition: transform 0.3s ease;
}
#wa-float:hover { transform: scale(1.08); }
#wa-float::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (min-width: 768px) {
  #wa-float { width: 56px; height: 56px; font-size: 1.4rem; }
}

/* Stats / Trust bar cool underline animation */
.gw-underline { position: relative; display: inline-block; }
.gw-underline::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0%;
  background: #2dd4bf; transition: width 0.6s ease;
}
.gw-underline.active::after { width: 100%; }

/* Contact Form 7 styling override to match design */
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-form label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888888; margin-bottom: 0.5rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%; padding: 0.75rem 1rem; border-radius: 12px;
  background: #111; border: 1px solid #222; color: #e2e2e2; font-family: 'Inter', sans-serif;
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  outline: none; border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}
.wpcf7-form .wpcf7-submit {
  width: 100%; background: #2dd4bf; color: #030303; padding: 1rem; border: none; border-radius: 12px;
  font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: transform 0.3s ease;
}
.wpcf7-form .wpcf7-submit:hover { transform: scale(1.02); }
.wpcf7-form .wpcf7-spinner { display: none; }
.wpcf7-response-output { border-radius: 12px !important; margin-top: 1rem !important; font-size: 0.85rem; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2dd4bf !important; color: #2dd4bf; }

/* Fallback native form success state */
#gw-fallback-form .form-success { display: none; }
#gw-fallback-form.was-sent .form-success { display: block; }