/* === [DB-HOME] DigitBoost Homepage CSS === */
/*
=== SNIPPET CROSS-REFERENCE TABLE ===
| #   | Name/Feature                                 | CSS | JS |
|-----|----------------------------------------------|-----|----|
| 001 | Support/Wartung Hover Text (custom overlay)  |  X  | X  |
| 002 | Blinking Arrow                               |  X  |    |
| 003 | Homepage Hero Video                          |  X  | X  |
| 004 | Homepage Hero Spheres                        |  X  | X  |
| 005 | Homepage Unfinished Project Accordion        |  X  | X  |
| 006 | Homepage Lottie Contact Button               |  X  | X  |
| NEW | Homepage Hero Scroll Effect (GSAP)           |  X  | X  |
| EX  | Footer Z-Index Fix                          |  X  |    |
*/

/* === [DB-HOME-EX] Footer Z-Index Fix === */
.site-footer {
  z-index: 3;
  position: relative;
}

/* === [DB-HOME-001] Support/Wartung Hover Text (custom overlay) === */
.ex1, .ex2, .ex3, .x4 {
	position: relative;
	overflow: hidden;
}
.custom-overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
	z-index: 999;
	border-radius: 5px;
}
.ex1:hover .custom-overlay,
.ex2:hover .custom-overlay,
.ex3:hover .custom-overlay,
.x4:hover .custom-overlay {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.custom-overlay h3,
.custom-overlay p,
.custom-overlay a {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.ex1:hover .custom-overlay h3,
.ex1:hover .custom-overlay p,
.ex1:hover .custom-overlay a,
.ex2:hover .custom-overlay h3,
.ex2:hover .custom-overlay p,
.ex2:hover .custom-overlay a,
.ex3:hover .custom-overlay h3,
.ex3:hover .custom-overlay p,
.ex3:hover .custom-overlay a,
.x4:hover .custom-overlay h3,
.x4:hover .custom-overlay p,
.x4:hover .custom-overlay a {
	opacity: 1;
	transform: translateY(0);
}
.custom-overlay h3 {
	display: none;
}
.custom-overlay p {
	margin: 0 0 1em;
	font-size: 1em;
	line-height: 1.4;
}
.custom-overlay a {
	color: #D99F6C;
	text-decoration: underline;
	font-weight: bold;
}

/* === [DB-HOME-002] Blinking Arrow === */
.arrow {
	animation: blinkSequence 8s infinite;
}
@keyframes blinkSequence {
	0%      { opacity: 1; }
	6.25%   { opacity: 0; }
	12.5%   { opacity: 1; }
	18.75%  { opacity: 0; }
	25%     { opacity: 1; }
	31.25%  { opacity: 0; }
	37.5%   { opacity: 1; }
	100%    { opacity: 1; }
}

/* === [DB-HOME-003] Homepage Hero Video === */
#dbs-hero-inline-video {
    opacity: 0.8;
    border-radius: 10px;
}

/* === [DB-HOME-004] Homepage Hero Spheres === */
.dbs_sphere {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 30% 30%, #fff, var(--color));
	box-shadow:
		inset -5px -5px 10px rgba(255, 255, 255, 0.5),
		inset 5px 5px 15px rgba(0, 0, 0, 0.1),
		0 8px 15px rgba(0, 0, 0, 0.3);
	filter: blur(0.5px);
	transform-style: preserve-3d;
	transition: transform 0.2s ease-out;
	z-index: 4 !important;
}
.dbs_sphere1 { --color: #315057; }
.dbs_sphere2 { --color: #AC8658; }
.dbs_sphere3 { --color: #D99F6C; }

/* === [DB-HOME-005] Homepage Unfinished Project Accordion === */
:root{
  --acc-text:#111827;
  --acc-muted:#6b7280;
  --acc-border:#e5e7eb;
  --acc-accent:#D99F6C;
  --acc-radius:12px;
  --acc-pad:16px 20px;
  --acc-shadow:0 10px 24px rgba(2,8,23,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --acc-bg:#0b0f14;
    --acc-text:#e5e7eb;
    --acc-muted:#9ca3af;
    --acc-border:#1f2937;
    --acc-accent:#38bdf8;
    --acc-shadow:0 14px 28px rgba(2,8,23,.25);
  }
}
.accordion{
  border:1px solid var(--acc-border);
  border-radius:var(--acc-radius);
  background:#121212;
  color:#D99F6C;
  max-width:800px;
  margin:12px 0;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition: box-shadow .25s ease, border-color .25s ease;
  overflow:clip;
  padding: 10px 20px;
}
.accordion:hover{ border-color: color-mix(in oklab, var(--acc-border) 70%, var(--acc-accent)); }
.accordion[open]{ box-shadow: var(--acc-shadow); border-color: color-mix(in oklab, var(--acc-border) 40%, var(--acc-accent)); }
.accordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:var(--acc-pad);
  outline:none;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:focus-visible{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--acc-accent) 35%, transparent);
}
.accordion .title{
    color:#D99F6C;
  margin:0;
  font-size:1.55rem;
  letter-spacing:.2px;
}
.chev{
  margin-left:auto; width:18px; height:18px; flex:0 0 18px;
  transition: transform .25s ease;
}
.accordion[open] .chev{ transform: rotate(180deg); }
.acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
  padding:0 var(--acc-pad);
}
.accordion[open] .acc-panel{ grid-template-rows:1fr; }
.acc-inner{
  overflow:hidden;
  padding:0 0 16px;
  opacity:0; transform: translateY(-4px);
  transition: opacity .28s ease, transform .28s ease;
}
.accordion[open] .acc-inner{ opacity:1; transform: translateY(0); }
.project-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 .75rem; padding:0; }
.project-tags a{
  color:var(--acc-accent); text-decoration:none; font-size:.85rem;
  background: color-mix(in oklab, var(--acc-accent) 14%, transparent);
  padding:.2rem .6rem; border-radius:999px;
}
.acc-inner h5{ margin:.75rem 0 .35rem; font-size:.95rem; color:#ffffff; }
.acc-inner p{ margin:.25rem 0 .75rem; line-height:1.7; }
.acc-inner ul{ margin:.25rem 0 .75rem 1.2rem; line-height:1.7; }
@media (prefers-reduced-motion: reduce){
  .chev, .acc-panel, .acc-inner, .accordion{ transition:none !important; }
}

/* === [DB-HOME-006] Homepage Lottie Contact Button === */
.lottie-button {
  position: relative;
  width: clamp(250px, 20vw, 260px);
  height: clamp(200px, 18vw, 180px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color:rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
              0 0 30px rgba(0, 255, 200, 0.15);
  text-decoration: none;
  transition: all 1.6s ease;
  overflow: hidden;
  font-family: 'playfair', sans-serif;
}
.lottie-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 36px rgba(0, 255, 200, 0.25);
}
.button-content,
.lottie-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.icon-row {
  display: flex;
  gap: 50px;
  margin-bottom: 14px;
}
.button-icon {
  stroke: #D99F6C;
  width: 30px;
  height: 30px;
}
.button-label {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color:#D99F6C;
  font-family: playfair display;
}
.lottie-container {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
.lottie-container svg {
  width: 100% !important;
  height: 100% !important;
}
.lottie-button:hover .button-content {
  opacity: 0;
}
.lottie-button:hover .lottie-container {
  opacity: 1;
}

/* === [DB-HOME-NEW] Homepage Hero Scroll Effect (GSAP/ScrollTrigger) === */
.hero_box ~ section,
.hero_box ~ .elementor-section {
  background: #FAF8F5 !important;
}
.sec_after {
  position: relative !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero_box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw;
  min-height: 60vh;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: filter 0.3s, opacity 0.3s;
  z-index: 1000;
}
.hero_box[aria-hidden="true"] {
  pointer-events: none;
}
.hero_box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 768px) {
  .hero_box {
    min-height: 40vh;
    filter: blur(4px);
  }
}