/* ========================== GLOBAL VARIABLES ========================== */
:root {--bg-color:#170229;--bg-color1:#fff;--text-color:#eceeff;--accent-color:#c889f0;--accent-color2:#56abff;--bg-black:#000;}

/* ========================== FONTS ========================== */
.bricolage-grotesque {font-family:"Bricolage Grotesque",sans-serif;font-optical-sizing:auto;font-weight:<weight>;font-style:normal;"wdth" 100;}
.roboto-flex {font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-weight:<weight>;font-style:normal;}
body{margin:0;background-color:var(--bg-color);}
body,a,button{cursor:none;}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:400;color:var(--text-color);}

/* ========================== CUSTOM CURSOR ========================== */
.custom-cursor{position:fixed;top:0;left:0;width:20px;height:20px;background-color:var(--accent-color);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9999;transition:width 0.25s ease,height 0.25s ease,background-color 0.25s ease,border 0.25s ease,opacity 0.25s ease;}
.custom-cursor.outline{width:45px;height:45px;background-color:transparent;border:2px solid var(--accent-color);}

/* ========================== HEADER ========================== */
header{position:fixed;top:0;left:0;width:100%;z-index:20;background-color:var(--bg-color);transition:all 0.4s ease;}
.header-inner{max-width:1250px;margin:0 auto;padding:4rem 4rem;display:flex;align-items:center;justify-content:space-between;transition:all 0.3s ease;}
.logo img{padding-left:1.5rem;width:170px;transition:width 0.4s ease;}
.nav-social{display:flex;align-items:center;justify-content:flex-end;gap:2rem;padding-right:2.5rem;}
nav ul{list-style:none;display:flex;gap:2rem;margin:0;padding:0;}
nav a{font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-size:13px;letter-spacing:0.1rem;text-transform:uppercase;font-weight:600;font-style:normal;text-decoration:none;color:var(--text-color);transition:color 0.4s ease;}
nav a:hover{color:var(--accent-color);text-decoration:underline;}
.social-icons{display:flex;align-items:center;gap:1.5rem;}
.icon{width:22px;height:22px;vertical-align:middle;transition:transform 0.2s ease,opacity 0.2s ease;}
.icon:hover{transform:scale(1.1);opacity:0.8;}
header.shrink .header-inner{padding:0.5rem 0.5rem;}
header.shrink .logo img{width:125px;}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:24px;cursor:pointer;z-index:110;}
.burger span{display:block;height:3px;width:100%;background:black;border-radius:2px;transition:all 0.3s ease;}
.burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media (max-width:900px){.nav-social{gap:1rem;}nav ul{display:none;flex-direction:column;background:rgba(255,255,255,0.98);position:absolute;top:70px;right:20px;padding:1rem 2rem;border:1px solid #ddd;border-radius:8px;box-shadow:0 5px 15px #0000001a;}nav ul.active{display:flex;}.burger{display:flex;}.social-icons{display:none;}}

/* ========================== HERO ========================== */
.click-counter {
  position: absolute;
  top: 100%;            /* direkt unter dem Canvas */
  left:59%;            /* horizontal zentrieren */
  transform: translateX(-50%) translateY(-40px); /* mittig + etwas Abstand */
  font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-size:13px;letter-spacing:0.2rem;text-transform:uppercase;font-weight:600;font-style:normal;text-decoration:none;color:var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none; /* damit Klicks auf Canvas gehen */
}
.hidden {
  opacity: 0;
}

.heart-icon {
  width: 20px;
  height: 20px;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.heart-icon.pump {
  transform: scale(1.3);
}

.count-bump {
  animation: bump 0.3s ease;
}

@keyframes bump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


.hero{padding:8rem 0;display:flex;justify-content:space-between;align-items:center;max-width:1250px;margin:0 auto;min-height:500px;position:relative;overflow:visible;}
.hero-left{width:35%;display:flex;justify-content:flex-end;align-items:center;position:relative;z-index:2;}
#riveCanvas{display:block;max-width:100%;height:auto;position:relative;z-index:1;}
.hero-right{width:65%;text-align:left;position:relative;z-index:2;}
.hero-right h1{font-size:3rem;line-height:1.1;}
.highlight{transition:color 0.5s ease-in-out;font-weight:600;text-decoration:underline;color:var(--accent-color);position:relative;z-index:25;}

/* ========================== SHOWREEL ========================== */
.video-wrapper{position:relative;max-width:1250px;margin:0 auto;}
#showreelVideo{border-radius:15px;width:100%;display:block;cursor:none;}
.mute-btn{font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-size:13px;letter-spacing:0.1rem;text-transform:uppercase;font-weight:600;font-style:normal;text-decoration:none;color:var(--text-color);position:absolute;right:20px;bottom:30px;border:none;background-color:var(--accent-color2);border-radius:5rem;padding:1.5rem;font-size:1rem;cursor:none;opacity:0;transform:translateX(4px);transition:all 0.4s ease;z-index:10;}
.mute-btn:hover{transform:scale(2);background-color:var(--accent-color);}
.video-wrapper:hover .mute-btn{opacity:1;transform:translateX(0);}
.play-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:white;font-size:5rem;opacity:0;transition:opacity 0.3s ease;z-index:5;pointer-events:none;}
.progress-container{position:absolute;bottom:0;left:0;width:100%;height:8px;background:rgba(255,255,255,0.2);border-radius:3px;overflow:hidden;opacity:0;transform:translateY(4px);transition:all 0.4s ease;}
.progress-container:hover{height:25px;}
.video-wrapper:hover .progress-container{opacity:1;transform:translateY(0);}
.progress-bar{width:0%;height:100%;background:var(--accent-color, #ff0066);transition:width 0.15s linear;}

/* ========================== WORK GRID ========================== */
.work-section{width:100%;max-width:1250px;margin:0 auto;text-align:center;padding-top:8rem;}
.work-section h1{font-size:2rem;margin-bottom:4rem;text-align:center;}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.work-item{border-radius:12px;position:relative;overflow:hidden;display:block;}
.work-item video{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease,filter 0.5s ease;}
.work-item:hover video{transform:scale(1.1);filter:blur(4px);}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);color:white;display:flex;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;opacity:0;transition:opacity 0.3s ease;}
.overlay span{font-family:"Bricolage Grotesque",sans-serif;font-optical-sizing:auto;color:var(--text-color);font-size:2rem;font-weight:400;}
.work-item:hover .overlay{opacity:1;}
.fade-item{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-item.visible{opacity:1;transform:translateY(0);}
.fade-item:nth-child(1){transition-delay:0.1s;} .fade-item:nth-child(2){transition-delay:0.2s;} .fade-item:nth-child(3){transition-delay:0.3s;} .fade-item:nth-child(4){transition-delay:0.4s;} .fade-item:nth-child(5){transition-delay:0.5s;} .fade-item:nth-child(6){transition-delay:0.6s;}
@media(max-width:900px){.work-grid{grid-template-columns:1fr;}}

/* ========================== INSTAGRAM BUTTON ========================== */
.insta-btn {
  display: inline-block;
  margin-top: 4rem;
  padding: 1.5rem 2.2rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  transition: transform 0.3s ease;
}

.insta-btn:hover {
  transform: scale(1.03);
}

.insta-btn span {
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: 0.5px;
}

/* ========================== CLIENT LOGOS ========================== */
.clients {
  padding: 8rem 0;
  text-align: center;
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  justify-items: center;
  align-items: center;
  max-width: 1250px;
  margin: 0 auto;
  padding: 80px 20px;
  perspective: 1000px; /* wichtig für 3D-Effekt */
}

/* einzelne Karte */
.logo-card {
  width: 150px;
  height: 150px;
  perspective: 1000px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* sichtbare Karten (via JS) */
.logo-card.visible {
  animation: fadeUp 0.6s cubic-bezier(.2,.9,.3,1) forwards;
}

/* Inneres: vorder- & rückseite */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Flip bei Hover */
.logo-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* Frontseite */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-front {
  background:var(--bg-color);
}

.card-front img {
  width: 100%;
  max-width: 150px;
  object-fit: contain;
}

/* Rückseite */
.card-back {
  color: #fff;
  text-align: center;
  padding: 1rem;
  transform: rotateY(180deg);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-back h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card-back p {
  font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;
  font-size: 0.85rem;
  opacity: 0.9;
  line-height: 1.3;
}


/* Fade-Up Animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


.logos-grid img:nth-child(1).visible{animation-delay:0.06s;} .logos-grid img:nth-child(2).visible{animation-delay:0.12s;} .logos-grid img:nth-child(3).visible{animation-delay:0.18s;} .logos-grid img:nth-child(4).visible{animation-delay:0.24s;} .logos-grid img:nth-child(5).visible{animation-delay:0.30s;} .logos-grid img:nth-child(6).visible{animation-delay:0.36s;} .logos-grid img:nth-child(7).visible{animation-delay:0.42s;} .logos-grid img:nth-child(8).visible{animation-delay:0.48s;} .logos-grid img:nth-child(9).visible{animation-delay:0.54s;}
@media(max-width:900px){.logos-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:500px){.logos-grid{grid-template-columns:repeat(2,1fr);}}


/* ========================== SERVICES ========================== */
.services {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 200px;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 4rem;
}

.services-grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
}

.service-card {
  flex: 1 1 calc(33.333% - 2rem);
  background: var(--accent-color);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.service-card.visible {
  animation: fadeUp 0.6s cubic-bezier(.2,.9,.3,1) forwards;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.service-card canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.service-card h3 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
}


@media (max-width: 600px) {
  .service-card { flex: 1 1 100%; }
}


/* ========================== ABOUT ========================== */
.about{max-width:1250px;padding-bottom:10rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:5%;}
.about-left{flex:0 0 40%;}
.about-right{margin:0 auto;flex:0 0 50%;}
.about-right h2{font-size:2rem;margin-bottom:1.5rem;}
.about-right p{font-size:1.1rem;line-height:1.8;color:var(--text-color);}
.about-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.about-img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 1.25s cubic-bezier(.2,.9,.3,1);
  display: block;
}

.about-img-wrapper:hover img {
  transform: scale(1.03);
}
@media(max-width:900px){.about{flex-direction:column;text-align:center;}.about-left,.about-right{flex:1 1 100%;}.about-left img{max-width:300px;margin:0 auto 2rem;}}

/* ========================== CONTACT ========================== */
.contact{width:100%;display:flex;justify-content:center;align-items:center;padding:10rem 0 16rem;background-color:var(--bg-color);}
.contact-inner{width:100%;max-width:1250px;text-align:center;}
.contact h2{font-size:2.5rem;margin-bottom:1rem;}
.contact p{margin-bottom:2rem;}
.email-wrapper{display:inline-flex;align-items:center;gap:0.4rem;}
.copy-btn svg{stroke:var(--accent-color, #8b5cf6);transition:stroke 0.3s ease,transform 0.2s ease;}
.copy-btn{position:relative;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.8;transition:opacity 0.2s ease,transform 0.2s ease;}
.copy-btn:hover{opacity:1;transform:scale(1.15);}
.tooltip{position:absolute;bottom:140%;left:50%;transform:translateX(-50%) scale(0.9);background:var(--accent-color, #8b5cf6);color:white;font-size:0.75rem;padding:0.3rem 0.5rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease;}
.copy-btn.copied svg{stroke:var(--accent-color, #8b5cf6);transform:scale(1.3);}
.copy-btn.copied .tooltip{opacity:1;transform:translateX(-50%) scale(1);}

/* CTA */
.cta{font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-size:13px;letter-spacing:0.1rem;text-transform:uppercase;font-weight:600;font-style:normal;text-decoration:none;color:var(--text-color);background-color:var(--accent-color);border:none;border-radius:50px;padding:1.5rem;transition:all 0.5s ease;position:relative;width: 160px;}
.cta:hover{width: 200px}
.cta2{font-family:"Roboto Flex",sans-serif;font-optical-sizing:auto;font-size:13px;letter-spacing:0.1rem;text-transform:uppercase;font-weight:600;font-style:normal;text-decoration:none;color:var(--text-color);background-color:var(--accent-color2);border:none;border-radius:50px;padding:1.5rem;transition:all 0.5s ease;position:relative;width: 120px;margin-right: 6px;}
.cta2:hover{width: 160px}

/* SCROLL TOP */
.scroll-top{position:fixed;bottom:40px;right:40px;width:50px;height:50px;border-radius:50%;border:none;background:white;cursor:pointer;display:none;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:transform 0.3s ease;}
.scroll-top:hover{transform:translateY(-3px);}
.scroll-top .arrow{display:block;width:12px;height:12px;border-left:1px solid #0E225C;border-bottom:1px solid #0E225C;transform:rotate(135deg) translateY(-2px) translateX(2px);}

/* ========================== RESPONSIVE ========================== */
@media(max-width:900px){.hero{flex-direction:column;}.about{flex-direction:column;text-align:center;}nav ul{display:none;flex-direction:column;background:var(--bg-color);position:absolute;top:60px;right:20px;padding:1rem;border:1px solid #ddd;}nav ul.active{display:flex;}.burger{background-color:aquamarine;display:block;}.hero-left{width: 100%;justify-content:center;}.hero-right h1{font-size: 2.5rem;}.header-inner{padding: 0.75rem;}
.click-counter {left: 50%;}
}


/* PRELOADER */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:var(--bg-color);z-index:9999;opacity:1;transition:opacity 0.5s ease;}
.spinner-circle{stroke-dasharray:125.6;stroke-dashoffset:94.2;transform-origin:50% 50%;animation:spin 1s linear infinite;}
@keyframes spin{100%{transform:rotate(360deg);}}
#preloader.hidden{opacity:0;pointer-events:none;}