/* ================================================
   BUCKLEBRIDGE FARM — ANIMATIONS
   "Make it breathe"
   ================================================ */

/* ------------------------------------------------
   PAGE LOAD + AMBIENT BACKGROUND DRIFT
------------------------------------------------ */
body {
  animation:
    pageFadeIn 0.55s ease forwards,
    bgDrift 90s linear infinite;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bgDrift {
  from { background-position: 0 0; }
  to   { background-position: 88px 88px; }
}


/* ------------------------------------------------
   SCROLL REVEAL — base state
------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.reveal-fade.visible { opacity: 1; }

.stagger-1 { transition-delay: 0ms;   }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }
.stagger-5 { transition-delay: 400ms; }


/* ------------------------------------------------
   HERO — ATMOSPHERIC MIST (breathing overlay)
------------------------------------------------ */
.hero-overlay {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-overlay::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(180,150,90,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(100,110,80,0.12) 0%, transparent 60%);
  animation: mistDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mistDrift {
  0%   { transform: translate(0,   0)    scale(1);    opacity: 0.55; }
  50%  { transform: translate(2%, -2%)  scale(1.06); opacity: 0.85; }
  100% { transform: translate(-2%, 2%)  scale(1.02); opacity: 0.6;  }
}


/* ------------------------------------------------
   HERO — HOME PAGE LOAD SEQUENCE
------------------------------------------------ */
.hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* Entrance fade only — the idle "breathing" opacity/scale pulse was removed
   (Round 3): on desktop it read as a flicker / technical glitch. */
.hero-logo {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.hero-line {
  display: block;
  overflow: hidden;
  /* pad-bottom so the reveal mask doesn't clip glyph descenders (g, y, p) */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero-line-inner {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: lineReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-line:nth-child(1) .hero-line-inner { animation-delay: 0.45s; }
.hero-line:nth-child(2) .hero-line-inner { animation-delay: 0.60s; }
@keyframes lineReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-rule {
  opacity: 0;
  animation: fadeIn 0.6s ease 0.85s forwards;
}
/* Entrance fade only — the letter-spacing "breathing" pulse was removed
   (Round 3): the growing text read as a glitch on desktop. */
.hero-sub {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

.hero-scroll {
  opacity: 0;
  animation: fadeIn 0.8s ease 1.4s forwards;
}


/* ------------------------------------------------
   TENT DETAIL HERO — load stagger
------------------------------------------------ */
.tent-hero-label {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.tent-hero-h1 {
  opacity: 0;
  animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
.tent-hero-rule {
  opacity: 0;
  animation: fadeIn 0.6s ease 0.75s forwards;
}
.tent-hero-sub {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}


/* ------------------------------------------------
   ORNAMENT DIAMONDS — gently float + rotate
------------------------------------------------ */
.hero-rule i,
.ornament-rule i,
.section-rule i {
  display: inline-block;
  animation: diamondFloat 5s ease-in-out infinite;
}
.ornament-rule i { animation-duration: 6s; }
@keyframes diamondFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg);  opacity: 1; }
  50%      { transform: translateY(-4px) rotate(180deg); opacity: 0.6; }
}


/* ------------------------------------------------
   HORIZONTAL RULES — shimmer sweep
------------------------------------------------ */
.hero-rule span,
.ornament-rule span {
  position: relative;
  overflow: hidden;
}
.hero-rule span::after,
.ornament-rule span::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.6), transparent);
  animation: ruleShimmer 6s ease-in-out infinite;
}
@keyframes ruleShimmer {
  0%   { transform: translateX(-150%); }
  50%  { transform: translateX(350%); }
  100% { transform: translateX(350%); }
}


/* ------------------------------------------------
   CTA BUTTONS — subtle breathing glow
------------------------------------------------ */
.btn-gold {
  position: relative;
  animation: goldGlow 3.5s ease-in-out infinite;
}
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67, 0); }
  50%      { box-shadow: 0 6px 28px -4px rgba(212,168,67, 0.55); }
}

.nav-cta {
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: navCtaShine 5s ease-in-out infinite;
}
@keyframes navCtaShine {
  0%, 60%, 100% { left: -100%; }
  80%           { left: 120%;  }
}


/* ------------------------------------------------
   TENT CARDS — floating at rest (very subtle)
   Hover is handled in global.css and overrides float
------------------------------------------------ */
/* Tent card ambient float and Ken Burns removed —
   they fought the hover transition (animation → static snaps).
   Hover lift + image zoom handled in global.css. */


/* ------------------------------------------------
   FIELD-GUIDE STAMP — rotate on hover
------------------------------------------------ */
.field-stamp {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tent-card:hover .field-stamp {
  transform: rotate(-6deg) scale(1.08);
}


/* Gallery + other-tent-card ambient drift removed —
   the keyframe animation fought hover transforms (CSS can't
   transition out of a running animation). Hover zoom handled
   in global.css for smooth, symmetrical easing. */


/* ------------------------------------------------
   HERO SCROLL INDICATOR — breathing pulse
------------------------------------------------ */
.hero-scroll-line {
  transform-origin: top center;
  animation: scrollLinePulse 2.4s ease-in-out infinite;
}
@keyframes scrollLinePulse {
  0%, 100% { transform: scaleY(1);   opacity: 0.4; }
  50%       { transform: scaleY(0.5); opacity: 0.85; }
}


/* ------------------------------------------------
   MARQUEE — (in global.css) pause on hover handled there
------------------------------------------------ */


/* ------------------------------------------------
   AMBIENT FLOATING PARTICLES (decorative)
   Used as .ambient-dot spans inside hero-content area
------------------------------------------------ */
.ambient-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.ambient-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(242, 237, 224, 0.45);
  animation: dotFloat 16s ease-in-out infinite;
  opacity: 0;
}
.ambient-dot:nth-child(1) {
  left: 12%; bottom: -10%; width: 3px; height: 3px;
  animation-duration: 18s; animation-delay: 0s;
  background: rgba(242,237,224,0.4);
}
.ambient-dot:nth-child(2) {
  left: 28%; bottom: -10%; width: 2px; height: 2px;
  animation-duration: 22s; animation-delay: -4s;
  background: rgba(242,237,224,0.3);
}
.ambient-dot:nth-child(3) {
  left: 52%; bottom: -10%; width: 4px; height: 4px;
  animation-duration: 20s; animation-delay: -8s;
  background: rgba(212,168,67,0.35);
}
.ambient-dot:nth-child(4) {
  left: 68%; bottom: -10%; width: 2px; height: 2px;
  animation-duration: 26s; animation-delay: -2s;
  background: rgba(242,237,224,0.4);
}
.ambient-dot:nth-child(5) {
  left: 82%; bottom: -10%; width: 3px; height: 3px;
  animation-duration: 24s; animation-delay: -12s;
  background: rgba(212,168,67,0.3);
}
.ambient-dot:nth-child(6) {
  left: 42%; bottom: -10%; width: 2px; height: 2px;
  animation-duration: 19s; animation-delay: -6s;
  background: rgba(242,237,224,0.35);
}

@keyframes dotFloat {
  0%   { transform: translateY(0)     translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-55vh) translateX(20px); }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(-10px); opacity: 0; }
}


/* ------------------------------------------------
   MARQUEE — subtle vertical breath
------------------------------------------------ */
.marquee-band {
  position: relative;
}
.marquee-band::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.08), transparent);
  animation: marqueeShine 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes marqueeShine {
  0%, 100% { opacity: 0.3; transform: translateX(-30%); }
  50%       { opacity: 0.9; transform: translateX(30%);  }
}


/* ------------------------------------------------
   DETAILS STRIP — subtle breathing values
------------------------------------------------ */
.detail-value {
  animation: detailBreath 6s ease-in-out infinite;
}
.detail-item:nth-child(2) .detail-value { animation-delay: -1.2s; }
.detail-item:nth-child(3) .detail-value { animation-delay: -2.4s; }
.detail-item:nth-child(4) .detail-value { animation-delay: -3.6s; }
.detail-item:nth-child(5) .detail-value { animation-delay: -4.8s; }
@keyframes detailBreath {
  0%, 100% { opacity: 0.92; }
  50%       { opacity: 0.7; }
}


/* ------------------------------------------------
   SECTION HEADINGS — hairline underline sweep
------------------------------------------------ */
.eyebrow {
  position: relative;
}


/* ------------------------------------------------
   HIGH WEALD BAND — slow color pulse on background
------------------------------------------------ */
.highweald-band {
  position: relative;
  overflow: hidden;
}
.highweald-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(180,200,150,0.18) 0%, transparent 70%);
  animation: weavedGlow 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes weavedGlow {
  0%   { transform: scale(1)    translate(0, 0);  opacity: 0.4; }
  100% { transform: scale(1.15) translate(3%, -2%); opacity: 0.9; }
}
.highweald-band > * { position: relative; z-index: 1; }


/* ------------------------------------------------
   KEYFRAMES — shared
------------------------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------
   REDUCED MOTION
------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tent-card-img-wrap img,
  .gallery-item img,
  .other-tent-card img {
    transform: none !important;
  }
}