/* ==========================================================================
   devOSING - Custom Styles (supplements Tailwind CSS loaded via CDN)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Smooth Scrolling
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
   2. Custom Scrollbar
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* ---------------------------------------------------------------------------
   3. Custom Animations — Keyframes
   --------------------------------------------------------------------------- */

/* Cycling word animation (hero) */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Blink animation for "Transparan" text */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Typewriter cursor blink */
@keyframes cursorBlink {
  0%, 100% {
    border-color: currentColor;
  }
  50% {
    border-color: transparent;
  }
}

/* Pulse ring for chat button */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Gradient slide animation for CTA text */
@keyframes gradientSlide {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Fade in from various directions */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Bounce dots for typing indicator */
@keyframes bounceDot {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

/* Banner slide transition */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

/* Fade out (for toast dismiss) */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ---------------------------------------------------------------------------
   4. Scroll Reveal (triggered via JS adding .revealed class)
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}

/* ---------------------------------------------------------------------------
   5a. Themes Typewriter Cursor
   --------------------------------------------------------------------------- */
.themes-cursor {
  animation: cursorBlink 1s step-end infinite;
  font-weight: 300;
  opacity: 0.7;
}

.services-cursor {
  animation: cursorBlink 1s step-end infinite;
  font-weight: 300;
  color: rgba(5, 150, 105, 0.5);
}

/* ---------------------------------------------------------------------------
   5. Gradient Text Utility
   --------------------------------------------------------------------------- */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gradient-slide {
  background-size: 200% 200%;
  animation: gradientSlide 3s ease infinite;
}

/* ---------------------------------------------------------------------------
   6. Chat Box Pulse Ring
   --------------------------------------------------------------------------- */
.chat-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #10b981;
  animation: pulseRing 2s ease-out infinite;
  z-index: -1;
}

/* ---------------------------------------------------------------------------
   7. Typing Indicator (bouncing dots)
   --------------------------------------------------------------------------- */
.typing-dot {
  animation: bounceDot 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* ---------------------------------------------------------------------------
   8. Card Hover Effects
   --------------------------------------------------------------------------- */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------------------------------------
   9. Cycling Word Container (hero section)
   --------------------------------------------------------------------------- */
.cycling-word-container {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  vertical-align: bottom;
  position: relative;
}

.cycling-word {
  position: absolute;
  width: 100%;
  left: 0;
}

.cycling-word.active {
  animation: slideUp 0.5s ease forwards;
}

.cycling-word.exit {
  animation: slideDown 0.5s ease forwards;
}

/* ---------------------------------------------------------------------------
   10. FAQ Accordion
   --------------------------------------------------------------------------- */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-content.open {
  max-height: 500px;
}

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

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

/* ---------------------------------------------------------------------------
   11. Modal Overlay
   --------------------------------------------------------------------------- */
.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.modal-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-overlay.hidden .modal-content {
  transform: scale(0.95) translateY(10px);
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   12. Banner Carousel
   --------------------------------------------------------------------------- */
.banner-slide {
  transition: transform 0.5s ease-in-out;
}

.banner-dot {
  transition: all 0.3s ease;
}

.banner-dot.active {
  width: 24px;
  background: #10b981;
}

/* ---------------------------------------------------------------------------
   13. Testimonial Card
   --------------------------------------------------------------------------- */
.testimonial-card {
  transition: all 0.3s ease;
}

/* ---------------------------------------------------------------------------
   14. Custom Aspect Ratio Utility
   --------------------------------------------------------------------------- */
.aspect-2-1 {
  aspect-ratio: 2 / 1;
}

/* ---------------------------------------------------------------------------
   15. Boarding Pass Dashed Border (Travel Section)
   --------------------------------------------------------------------------- */
.boarding-pass {
  border-top: 2px dashed #d1d5db;
  position: relative;
}

.boarding-pass::before,
.boarding-pass::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
}

.boarding-pass::before {
  left: -12px;
}

.boarding-pass::after {
  right: -12px;
}

/* ---------------------------------------------------------------------------
   16. Star Rating
   --------------------------------------------------------------------------- */
.star-rating {
  color: #fbbf24;
}

/* ---------------------------------------------------------------------------
   17. Toast Notifications
   --------------------------------------------------------------------------- */
.toast {
  animation: fadeInUp 0.3s ease;
}

.toast.hiding {
  animation: fadeOut 0.3s ease forwards;
}

/* ---------------------------------------------------------------------------
   18. Scroll-to-Top Button
   --------------------------------------------------------------------------- */
.scroll-top-btn {
  transition: all 0.3s ease;
}

.scroll-top-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* ---------------------------------------------------------------------------
   19. Filter Tabs (Themes / Portfolio)
   --------------------------------------------------------------------------- */
.filter-tab {
  transition: all 0.2s ease;
}

.filter-tab.active {
  background-color: #10b981;
  color: white;
}

/* ---------------------------------------------------------------------------
   20. Checkout Step Indicator
   --------------------------------------------------------------------------- */
.step-indicator {
  transition: all 0.3s ease;
}

.step-indicator.active {
  background-color: #10b981;
  color: white;
}

.step-indicator.completed {
  background-color: #10b981;
  color: white;
}

/* ---------------------------------------------------------------------------
   21. Cart Drawer
   --------------------------------------------------------------------------- */
.cart-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-overlay {
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}