/* ================================
   Eternal Frames — Custom Styles
   ================================ */

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

/* Scroll Reveal Animations */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-left] {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate-left].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate-right] {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate-right].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate-scale] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate-scale].animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger animation delays for grid children */
[data-animate]:nth-child(2),
[data-animate-scale]:nth-child(2) { transition-delay: 0.15s; }
[data-animate]:nth-child(3),
[data-animate-scale]:nth-child(3) { transition-delay: 0.3s; }
[data-animate]:nth-child(4),
[data-animate-scale]:nth-child(4) { transition-delay: 0.45s; }

/* Hero animated gradient */
@keyframes heroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-gradient {
  background: linear-gradient(135deg, #2C2C2C 0%, #3d3229 25%, #4a3d30 50%, #2C2C2C 75%, #1A1A1A 100%);
  background-size: 400% 400%;
  animation: heroGradient 12s ease infinite;
}

/* Hero text reveal */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-text-reveal {
  animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-text-reveal-delay-1 {
  opacity: 0;
  animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.hero-text-reveal-delay-2 {
  opacity: 0;
  animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.hero-text-reveal-delay-3 {
  opacity: 0;
  animation: fadeSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

/* Elegant line reveal */
@keyframes lineExpand {
  from { width: 0; }
  to   { width: 80px; }
}

.line-reveal {
  animation: lineExpand 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  width: 0;
}

/* Gallery Photo Frame */
.photo-frame {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}

.photo-frame:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

.photo-frame img {
  transition: transform 0.6s ease;
}

/* Base crop scales */
.photo-frame:nth-child(2) img { transform: scale(1.1); }
.photo-frame:nth-child(3) img { transform: scale(1.25); }
.photo-frame:nth-child(4) img { transform: scale(1.35); }

/* Hover: each image zooms an additional ~5% */
.photo-frame:nth-child(1):hover img { transform: scale(1.05); }
.photo-frame:nth-child(2):hover img { transform: scale(1.15); }
.photo-frame:nth-child(3):hover img { transform: scale(1.30); }
.photo-frame:nth-child(4):hover img { transform: scale(1.40); }

/* Video Card Hover Effects */
.video-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.video-card .card-overlay {
  transition: opacity 0.5s ease;
}

.video-card:hover .card-overlay {
  opacity: 1 !important;
}

/* Parallax-like section dividers */
.section-divider {
  height: 200px;
  background: linear-gradient(180deg, #FDFBF7 0%, #F5F0E8 100%);
  clip-path: ellipse(80% 100% at 50% 0%);
}

/* Testimonial card */
.testimonial-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

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

/* Form Focus Glow */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 4px rgba(196, 168, 130, 0.15);
}

/* Selection Color */
::selection {
  background-color: rgba(196, 168, 130, 0.3);
  color: #2C2C2C;
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
  width: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #C4A882;
}

/* Nav link underline animation */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #C4A882;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Marquee / scrolling text for portfolio */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 20s linear infinite;
}

/* Button magnetic hover effect */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

/* Cursor dot for play button */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.play-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(250, 248, 245, 0.6);
  animation: pulse-ring 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}