/* ========================
   GRAIN TEXTURE OVERLAY
   ======================== */

.grain::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.grain > * {
  position: relative;
  z-index: 1;
}


/* ========================
   SCROLL REVEAL — refined easing
   ======================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
}

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

/* Staggered children — wider delays for drama */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 600ms; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal — for dramatic elements */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s var(--ease-out),
              transform 0.9s var(--ease-out);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}


/* ========================
   HERO ANIMATIONS — word-by-word rise
   ======================== */

.hero__subtitle {
  opacity: 0;
  animation: hero-slide-up 0.8s var(--ease-out) 0.6s forwards;
}

.hero__actions {
  opacity: 0;
  animation: hero-slide-up 0.8s var(--ease-out) 0.85s forwards;
}

@keyframes hero-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page header animations (About, Services, Contact) */
.page-header .hero__title {
  animation: hero-slide-up 0.8s var(--ease-out) 0.15s forwards;
  opacity: 0;
}

.page-header .hero__subtitle {
  animation-delay: 0.4s;
}


/* ========================
   UNDERLINE GROW
   ======================== */

@keyframes underline-grow {
  from { width: 0; }
  to { width: 60px; }
}

.section__heading-accent {
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--color-terracotta);
  margin-top: var(--space-sm);
}

.visible .section__heading-accent {
  animation: underline-grow 0.8s var(--ease-out) 0.3s both;
}


/* ========================
   STAT — dramatic scale entrance
   ======================== */

@keyframes stat-rise {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reveal-stagger.visible .stat__number {
  animation: stat-rise 0.8s var(--ease-out) both;
}

.reveal-stagger.visible .stat:nth-child(1) .stat__number { animation-delay: 0ms; }
.reveal-stagger.visible .stat:nth-child(2) .stat__number { animation-delay: 150ms; }
.reveal-stagger.visible .stat:nth-child(3) .stat__number { animation-delay: 300ms; }
.reveal-stagger.visible .stat:nth-child(4) .stat__number { animation-delay: 450ms; }


/* ========================
   HOVER TRANSITIONS — elevated
   ======================== */

/* Card — terracotta top border sweep + lift */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(27, 61, 47, 0.1);
  border-color: transparent;
}

.card:hover::before {
  transform: scaleX(1);
}

/* Card icon color shift */
.card__icon {
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.card:hover .card__icon {
  color: var(--color-terracotta);
  transform: scale(1.08);
}

/* Link hover underline — sweep from left to right */
.link-animated {
  position: relative;
  display: inline-block;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.link-animated:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Button hover — shadow lift */
.btn--primary {
  transition: all 0.4s var(--ease-out);
  box-shadow: 0 2px 8px rgba(196, 114, 78, 0);
}

.btn--primary:hover {
  box-shadow: 0 6px 24px rgba(196, 114, 78, 0.3);
  transform: translateY(-2px);
}

.btn--white {
  transition: all 0.4s var(--ease-out);
}

.btn--white:hover {
  box-shadow: 0 6px 24px rgba(245, 240, 232, 0.3);
  transform: translateY(-2px);
}

/* Button arrow — playful bounce on hover */
.btn:hover .btn__arrow {
  animation: arrow-nudge 0.6s var(--ease-out);
}

@keyframes arrow-nudge {
  0% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(3px); }
}

/* Service block metric badge — subtle pulse */
.service-block__metric {
  transition: background-color 0.3s, transform 0.3s var(--ease-out);
}

.service-block:hover .service-block__metric {
  background-color: rgba(196, 114, 78, 0.12);
  transform: translateX(4px);
}

/* Value item — left border reveal on hover */
.value-item {
  transition: padding-left 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-left: 2px solid transparent;
  padding-left: 0;
}

.value-item:hover {
  border-left-color: var(--color-terracotta);
  padding-left: var(--space-sm);
}

/* Nav link — magnetic feel */
.nav__link {
  transition: color 0.3s var(--ease-out), letter-spacing 0.4s var(--ease-out);
}

.nav__link:hover {
  letter-spacing: 0.06em;
}


/* ========================
   SCROLL-LINKED PARALLAX (subtle)
   ======================== */

.parallax-slow {
  will-change: transform;
}


/* ========================
   FORM FOCUS STATES — elevated
   ======================== */

.form__input,
.form__textarea {
  transition: border-color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}

.form__input:focus,
.form__textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(196, 114, 78, 0.08);
}


/* ========================
   MARQUEE / SCROLL TEXT (optional decorative)
   ======================== */

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-sage-light);
  border-bottom: 1px solid var(--color-sage-light);
}

.marquee__inner {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee__item {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-style: italic;
  color: var(--color-sage);
  padding: 0 var(--space-lg);
}

.marquee__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  vertical-align: middle;
}


/* ========================
   CURSOR FOLLOWER (desktop)
   ======================== */

.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--color-terracotta);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  transition: transform 0.15s var(--ease-out), opacity 0.3s;
  opacity: 0;
}

.cursor-dot.active {
  opacity: 1;
}

.cursor-dot.hovering {
  transform: scale(4);
  opacity: 0.3;
}


/* ========================
   PREFERS REDUCED MOTION
   ======================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }

  .hero__title .word-inner {
    transform: none;
  }

  .hero__subtitle,
  .hero__actions,
  .page-header .hero__title {
    opacity: 1;
  }

  .marquee__inner {
    animation: none;
  }

  .cursor-dot {
    display: none;
  }
}