/* ==========================================================================
   Built by Gfunk Digital 
   Gfunk Group | Global Stylesheet
   ========================================================================== */

/* 
 * Brand Color Palette 
 */
:root {
  --brand-data: #00e5ff;
  --brand-digital: #9d4edd;
  --brand-home: #27ae60;
  --brand-food: #ff7a00;
  --brand-film: #d4af37;
}

body, html {
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100vh; 
  overflow: hidden; 
  background: #000; 
  font-family: 'Outfit', sans-serif;
}

/* Centered Brand Header */
.overlay-brand {
  position: absolute; 
  top: 40px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 100; 
  pointer-events: none; 
  text-align: center;
}

.overlay-brand h1 {
  font-family: 'Cormorant Garamond', serif; 
  font-size: 2.4rem; 
  color: #fff; 
  margin: 0; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  font-weight: 500;
}

.overlay-brand h1 span { 
  color: #777; 
}

.overlay-brand .slogan {
  font-size: 0.75rem; 
  letter-spacing: 0.35em; 
  text-transform: uppercase; 
  color: #888; 
  margin-top: 8px; 
  font-weight: 400;
}

/* Language Switcher - Top Right */
.lang-switcher {
  position: absolute; 
  top: 50px; 
  right: 50px; 
  z-index: 100;
  display: flex; 
  gap: 12px; 
  font-size: 0.75rem; 
  letter-spacing: 0.15em;
}

.lang-switcher a {
  color: #666; 
  text-decoration: none; 
  transition: color 0.3s ease;
}

.lang-switcher a:hover, 
.lang-switcher a.active {
  color: #fff;
}

.lang-separator {
  color: #333;
}

/* Accordion Layout */
.accordion-container {
  display: flex; 
  width: 100vw; 
  height: 100vh;
}

.panel {
  flex: 1; 
  position: relative; 
  border-right: 1px solid rgba(255, 255, 255, 0.05); 
  background: #050505; 
  cursor: pointer; 
  transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  padding: 50px 30px; 
  text-decoration: none; 
  overflow: hidden;
}

.panel:last-child { 
  border-right: none; 
}

/* Background Images */
.panel-bg {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-size: cover; 
  background-position: center;
  opacity: 0.05; 
  filter: grayscale(100%);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 0;
}

/* Content Typography */
.panel-content { 
  position: relative; 
  z-index: 2; 
  white-space: nowrap; 
}

.panel-title {
  font-family: 'Cormorant Garamond', serif; 
  font-size: 2.8rem; 
  color: #444; 
  margin: 0; 
  transition: color 0.5s ease, transform 0.5s ease; 
  font-weight: 500;
}

.panel-category {
  font-size: 0.8rem; 
  letter-spacing: 0.3em; 
  color: #555; 
  opacity: 0; 
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease; 
  transform: translateY(20px); 
  margin-top: 10px;
}

/* Hover Glow Effects */
.glow {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 70%; 
  opacity: 0; 
  transition: opacity 0.7s ease; 
  z-index: 1;
}

.data .glow { background: linear-gradient(to top, rgba(0,229,255,0.8), transparent); }
.digital .glow { background: linear-gradient(to top, rgba(157,78,221,0.8), transparent); }
.home .glow { background: linear-gradient(to top, rgba(39,174,96,0.8), transparent); }
.food .glow { background: linear-gradient(to top, rgba(255,122,0,0.8), transparent); }
.film .glow { background: linear-gradient(to top, rgba(212,175,55,0.8), transparent); }

/* Interaction States */
.panel:hover { 
  flex: 3.5; 
}

.panel:hover .panel-bg { 
  opacity: 0.4; 
  filter: grayscale(20%); 
  transform: scale(1.05); 
}

.panel:hover .glow { 
  opacity: 1; 
}

.panel:hover .panel-category { 
  opacity: 1; 
  transform: translateY(0); 
  color: #fff; 
}

.panel:hover .panel-title { 
  transform: translateY(-5px); 
}

/* Brand Specific Title Colors on Hover */
.panel.data:hover .panel-title { color: var(--brand-data); }
.panel.digital:hover .panel-title { color: var(--brand-digital); }
.panel.home:hover .panel-title { color: var(--brand-home); }
.panel.food:hover .panel-title { color: var(--brand-food); }
.panel.film:hover .panel-title { color: var(--brand-film); }

/* Responsive Design (Mobile & Tablet) */
@media (max-width: 992px) {
  .accordion-container { 
    flex-direction: column; 
  }
  
  .panel { 
    border-right: none; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    justify-content: center; 
    padding: 0 40px;
  }
  
  .overlay-brand { 
    position: relative; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 25px 0; 
    background: transparent; 
    text-align: center; 
  }
  
  .lang-switcher { 
    top: 20px; 
    right: 20px; 
  }
  
  .glow { 
    height: 100%; 
    background: rgba(0,0,0,0.5) !important; 
  }
  
  .panel:hover .panel-title { 
    transform: none; 
  }
  
  .panel:hover .panel-category { 
    transform: none; 
  }
}