/* ─────────────────────────────────────────
   Alfa 01 Digital — Custom Styles
   ───────────────────────────────────────── */

/* Material Symbols default settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism header */
.glass-header {
  background: rgba(13, 13, 13, 0.7);
  backdrop-filter: blur(20px);
}

/* Hero title depth shadow */
.hero-title-shadow {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ── Skew titles (replaces Tailwind `italic`) ──
   Geometric skew instead of font-style italic    */
.skew-title {
  transform: skewX(12deg);
  font-style: normal;
}

/* ── FAQ accordion ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  padding-top: 0;
}

.faq-answer.open {
  max-height: 300px;
  opacity: 1;
  padding-top: 1.5rem;
}

.faq-item {
  cursor: pointer;
}

.faq-item .faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-item.open {
  border-left-color: #4DDBB1;
}

/* ── Mobile nav hidden fix ── */
@media (max-width: 768px) {
  nav div.hidden {
    display: none;
  }
}

/* ─────────────────────────────────────────
   Scroll Reveal Animations
   ───────────────────────────────────────── */

/* Base state — hidden before reveal */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.75s;
  will-change: opacity, transform;
}

/* Variants */
[data-reveal="fade-up"] {
  transform: translateY(40px);
}

[data-reveal="fade-down"] {
  transform: translateY(-40px);
}

[data-reveal="fade-left"] {
  transform: translateX(50px);
}

[data-reveal="fade-right"] {
  transform: translateX(-50px);
}

[data-reveal="zoom-in"] {
  transform: scale(0.88);
  filter: blur(4px);
}

[data-reveal="flip-up"] {
  transform: perspective(600px) rotateX(20deg) translateY(30px);
}

/* Revealed state */
[data-reveal].revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }