/*
Theme Name: Sushil Aryal
Theme URI: http://example.com
Author: Sushil Aryal
Description: Custom Sushil Aryal theme.
Version: 1.0
Text Domain: sushil aryal
*/

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: "Space Grotesk", sans-serif;
  background-color: #ffffff;
  color: #111111;
  -webkit-font-smoothing: antialiased;
}

/* Clear, Editorial Navigation Links */
.nav-link {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.15);
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
}

.mobile-nav-link:hover {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
}

/* Mobile Hamburger Menu Fixes */
.menu-open .line-1 {
  transform: translateY(7px) rotate(45deg);
}

.menu-open .line-2 {
  opacity: 0;
}

.menu-open .line-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* hero section animations and designs */

/* Large background typography */
.hero-marquee {
  animation: heroMarquee 28s linear infinite;
}

/* Image hover */
.hero-image-card img {
  transition:
    transform 0.7s ease,
    filter 0.7s ease;
}

.hero-image-card:hover img {
  transform: scale(1.035);
  filter: none;
}

/* Social icons */
.social-icon {
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-6px);
  box-shadow: 7px 7px 0 rgba(17, 17, 17);
}

/* Animations */
@keyframes editorialLines {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 320px 320px;
  }
}

@keyframes dotsMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -180px 120px;
  }
}

@keyframes heroMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-premium::before,
  .hero-dots,
  .hero-marquee {
    animation: none;
  }
}

/* photography p[art css */

.photo-marquee {
  animation: photoMarquee 30s linear infinite;
}

.photo-card {
  cursor: pointer;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.photo-card img {
  transition:
    transform 0.8s ease,
    filter 0.8s ease;
}

.photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 12px 12px 0 rgba(204, 1, 0, 0.85);
}

.photo-card:hover img {
  transform: scale(1.08);
  filter: grayscale(0) contrast(1.1);
}

.photo-overlay {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82),
      rgba(0, 0, 0, 0.12),
      transparent
    ),
    linear-gradient(135deg, rgba(204, 1, 0, 0.22), transparent 45%);
}

@keyframes photoMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-marquee {
    animation: none;
  }

  .photo-card,
  .photo-card img {
    transition: none;
  }
}

/* about section css */

.about-pattern {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px);
  background-size: 44px 44px;
}

.about-text {
  font-size: clamp(13.5px, 2vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.about-text span {
  color: #cc0100;
  font-weight: 700;
}

.about-stat {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.about-stat h3 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

.about-stat p {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .about-stat {
    padding: 2.5rem 2rem;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-stat:first-child {
    padding-left: 0;
  }

  .about-stat:last-child {
    border-right: 0;
    padding-right: 0;
  }
}