/* Custom Styles for Deliberate Work Book Website */

/* ===================================
   Base Styles & Utilities
   =================================== */

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: #D3AF37;
  color: #3e4676;
}

/* ===================================
   Navigation Link Styles
   =================================== */

.nav-link {
  @apply text-orchestra-navy/70 hover:text-orchestra-navy transition-colors font-medium relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-hero-gold transition-all duration-300;
}

.nav-link:hover::after {
  @apply w-full;
}

.nav-link-active {
  @apply text-orchestra-navy;
}

.nav-link-active::after {
  @apply w-full;
}

/* ===================================
   Button Styles
   =================================== */

.btn-primary {
  @apply px-6 py-3 bg-orchestra-navy text-clean-white font-semibold rounded-lg 
         hover:bg-deep-navy transition-all duration-300 
         hover:shadow-lg hover:-translate-y-0.5;
}

.btn-secondary {
  @apply px-6 py-3 border-2 border-orchestra-navy text-orchestra-navy font-semibold rounded-lg 
         hover:bg-orchestra-navy hover:text-clean-white transition-all duration-300;
}

/* ===================================
   Animations
   =================================== */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-down {
  animation: fade-in-down 0.6s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

/* Start hidden for animation */
.animate-fade-in,
.animate-fade-in-up,
.animate-fade-in-down {
  opacity: 0;
}

/* ===================================
   Book 3D Effect
   =================================== */

.book-3d {
  perspective: 1000px;
}

.book-cover {
  transform: rotateY(-5deg);
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.book-3d:hover .book-cover {
  transform: rotateY(-10deg) translateX(-5px);
}

/* Book spine shadow effect */
.book-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 100%);
  border-radius: 2px 0 0 2px;
}

/* Page edges effect */
.book-cover::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  background: repeating-linear-gradient(
    to bottom,
    #f5f5f5 0px,
    #e0e0e0 1px,
    #f5f5f5 2px
  );
  border-radius: 0 1px 1px 0;
}

/* ===================================
   Form Styles
   =================================== */

input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(211, 175, 55, 0.2);
}

/* ===================================
   Quote Styles
   =================================== */

blockquote {
  position: relative;
}

/* ===================================
   Card Hover Effects
   =================================== */

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* ===================================
   Scroll Reveal (for future JS enhancement)
   =================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

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

/* ===================================
   Timeline Styles
   =================================== */

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #D3AF37;
  border-radius: 50%;
}

/* ===================================
   Responsive Adjustments
   =================================== */

@media (max-width: 768px) {
  .book-cover {
    transform: rotateY(0);
  }
  
  .book-3d:hover .book-cover {
    transform: rotateY(0);
  }
}

/* ===================================
   Custom Scrollbar
   =================================== */

::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #CBCBCB;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3e4676;
}

/* ===================================
   Focus Styles (Accessibility)
   =================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #D3AF37;
  outline-offset: 2px;
}

/* ===================================
   Print Styles
   =================================== */

@media print {
  nav,
  .btn-primary,
  .btn-secondary,
  footer {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
}