/* ==========================================================================
   G&H PACK — Animation System
   
   1. Scroll Reveal (IntersectionObserver adds .is-visible)
   2. Hero entrance sequence
   3. Keyframe animations (particles, scroll, dock)
   4. Stagger patterns for repeating elements
   5. Hover micro-interactions
   ========================================================================== */

/* ================================================================
   1. SCROLL REVEAL — Base
      JS: reveal.js adds .is-visible on intersection
   ================================================================ */

/* Default: fade-up */
.gh-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
	            transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

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

/* Variant: fade only (no movement) */
.gh-reveal--fade {
	opacity: 0;
	transform: none;
	transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1);
}

.gh-reveal--fade.is-visible {
	opacity: 1;
}

/* Variant: scale-in */
.gh-reveal--scale {
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1),
	            transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

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

/* Variant: slide from left */
.gh-reveal--left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
	            transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

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

/* Variant: slide from right */
.gh-reveal--right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
	            transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

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


/* ================================================================
   1b. STAGGER CHILDREN
       Parent: .gh-reveal-stagger
       Children auto-stagger with 0.08s increments
   ================================================================ */
.gh-reveal-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.gh-reveal-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.gh-reveal-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.gh-reveal-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.gh-reveal-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.gh-reveal-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.gh-reveal-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
.gh-reveal-stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 0.48s; }
.gh-reveal-stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 0.56s; }
.gh-reveal-stagger.is-visible > *:nth-child(9)  { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }
.gh-reveal-stagger.is-visible > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 0.72s; }
.gh-reveal-stagger.is-visible > *:nth-child(11) { opacity: 1; transform: translateY(0); transition-delay: 0.80s; }
.gh-reveal-stagger.is-visible > *:nth-child(12) { opacity: 1; transform: translateY(0); transition-delay: 0.88s; }


/* ================================================================
   2. HERO ENTRANCE SEQUENCE
      Pin content fades in staged on page load
   ================================================================ */
.gh-hero__pin-content .gh-overline {
	opacity: 0;
	transform: translateY(16px);
	animation: heroIn 0.7s cubic-bezier(.16, 1, .3, 1) 0.3s forwards;
}

.gh-hero__pin-content h1 {
	opacity: 0;
	transform: translateY(24px);
	animation: heroIn 0.8s cubic-bezier(.16, 1, .3, 1) 0.5s forwards;
}

.gh-hero__pin-content .gh-hero__desc {
	opacity: 0;
	transform: translateY(20px);
	animation: heroIn 0.7s cubic-bezier(.16, 1, .3, 1) 0.7s forwards;
}

.gh-hero__pin-content .gh-hero__buttons {
	opacity: 0;
	transform: translateY(16px);
	animation: heroIn 0.6s cubic-bezier(.16, 1, .3, 1) 0.9s forwards;
}

/* 3D container fades in separately */
.gh-hero__pin .gh-hero__3d {
	opacity: 0;
	transform: scale(0.92);
	animation: heroModel 1s cubic-bezier(.16, 1, .3, 1) 0.6s forwards;
}

@keyframes heroIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroModel {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Scroll indicator fades in last */
.gh-hero__scroll {
	opacity: 0;
	animation: heroIn 0.5s cubic-bezier(.16, 1, .3, 1) 1.2s forwards;
}


/* ================================================================
   3. KEYFRAME ANIMATIONS
   ================================================================ */

/* Particle float (used on .gh-ptcl elements) */
@keyframes ptclFloat {
	0%, 100% { transform: translate(0, 0); }
	33%      { transform: translate(8px, -18px); }
	66%      { transform: translate(-6px, 12px); }
}

.gh-ptcl {
	animation: ptclFloat 20s ease-in-out infinite;
}

.gh-ptcl-2 { animation-delay: -7s; animation-duration: 25s; }
.gh-ptcl-3 { animation-delay: -13s; animation-duration: 18s; }

/* Scroll indicator line pulse */
@keyframes scrollPulse {
	0%  { top: -50%; }
	100% { top: 150%; }
}

.gh-hero__scroll-line::after {
	animation: scrollPulse 2.5s ease-in-out infinite;
}

/* Capsule dock-in — simple fade */
.gh-topbar__nav-dock .gh-capsule,
.gh-topbar__nav-dock .wp-block-navigation {
	opacity: 1;
}


/* ================================================================
   4. SECTION-SPECIFIC STAGGER PATTERNS
   ================================================================ */

/* Service items — stagger on parent reveal */
.gh-svc-list.gh-reveal .gh-svc-item {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.gh-svc-list.gh-reveal.is-visible .gh-svc-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.gh-svc-list.gh-reveal.is-visible .gh-svc-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.gh-svc-list.gh-reveal.is-visible .gh-svc-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.19s; }
.gh-svc-list.gh-reveal.is-visible .gh-svc-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }

/* Timeline cards stagger */
.gh-timeline.gh-reveal .gh-timeline__card {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s cubic-bezier(.16, 1, .3, 1),
	            transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.gh-timeline.gh-reveal.is-visible .gh-timeline__card:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

/* Stats stagger */
.gh-legacy__stats.gh-reveal > div {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.gh-legacy__stats.gh-reveal.is-visible > div:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.gh-legacy__stats.gh-reveal.is-visible > div:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.gh-legacy__stats.gh-reveal.is-visible > div:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.gh-legacy__stats.gh-reveal.is-visible > div:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

/* Gallery items — stagger from shortcode inline style transition-delay */
.gh-gallery__item.gh-reveal {
	opacity: 0;
	transform: translateY(20px) scale(0.96);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.gh-gallery__item.gh-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Spec cards stagger */
.gh-specs-grid .gh-spec-card {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s cubic-bezier(.16, 1, .3, 1),
	            transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.gh-facility__content.gh-reveal.is-visible .gh-spec-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.gh-facility__content.gh-reveal.is-visible .gh-spec-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.gh-facility__content.gh-reveal.is-visible .gh-spec-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
.gh-facility__content.gh-reveal.is-visible .gh-spec-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }

/* Facility split spec cards stagger */
.gh-facility-split__content.gh-reveal.is-visible .gh-spec-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.gh-facility-split__content.gh-reveal.is-visible .gh-spec-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.gh-facility-split__content.gh-reveal.is-visible .gh-spec-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
.gh-facility-split__content.gh-reveal.is-visible .gh-spec-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }

/* Service detail cards — scale-up stagger */
.gh-svc-detail__grid.gh-reveal-stagger > .gh-svc-detail-card {
	opacity: 0;
	transform: translateY(32px) scale(0.96);
	transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1),
	            transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

.gh-svc-detail__grid.gh-reveal-stagger.is-visible > .gh-svc-detail-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.gh-svc-detail__grid.gh-reveal-stagger.is-visible > .gh-svc-detail-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.gh-svc-detail__grid.gh-reveal-stagger.is-visible > .gh-svc-detail-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.gh-svc-detail__grid.gh-reveal-stagger.is-visible > .gh-svc-detail-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }

/* Process steps — slide-in stagger */
.gh-process__grid.gh-reveal-stagger > .gh-process__step {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

[dir="rtl"] .gh-process__grid.gh-reveal-stagger > .gh-process__step {
	transform: translateX(24px);
}

.gh-process__grid.gh-reveal-stagger.is-visible > .gh-process__step:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.gh-process__grid.gh-reveal-stagger.is-visible > .gh-process__step:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.gh-process__grid.gh-reveal-stagger.is-visible > .gh-process__step:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.24s; }
.gh-process__grid.gh-reveal-stagger.is-visible > .gh-process__step:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.36s; }

/* About timeline items — slide-in stagger */
.gh-about-timeline__track.gh-reveal-stagger > .gh-about-timeline__item {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

[dir="rtl"] .gh-about-timeline__track.gh-reveal-stagger > .gh-about-timeline__item {
	transform: translateX(20px);
}

.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.gh-about-timeline__track.gh-reveal-stagger.is-visible > .gh-about-timeline__item:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.5s; }

/* Value cards — scale-up stagger */
.gh-values__grid.gh-reveal-stagger > .gh-value-card {
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1),
	            transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

.gh-values__grid.gh-reveal-stagger.is-visible > .gh-value-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.gh-values__grid.gh-reveal-stagger.is-visible > .gh-value-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.gh-values__grid.gh-reveal-stagger.is-visible > .gh-value-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.24s; }

/* Portfolio cards stagger */
.gh-portfolio__grid.gh-reveal-stagger > .gh-portfolio__item {
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1),
	            transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.06s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.12s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.18s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.24s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.30s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.36s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.42s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(9)  { opacity: 1; transform: none; transition-delay: 0.48s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.54s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(11) { opacity: 1; transform: none; transition-delay: 0.60s; }
.gh-portfolio__grid.gh-reveal-stagger.is-visible > .gh-portfolio__item:nth-child(12) { opacity: 1; transform: none; transition-delay: 0.66s; }


/* ================================================================
   5. HOVER MICRO-INTERACTIONS
   ================================================================ */

/* Links — subtle lift */
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Button press effect */
.gh-btn:active {
	transform: translateY(0) scale(0.98);
}

/* Card hover glow */
.gh-timeline__card:hover,
.gh-spec-card:hover {
	box-shadow: 0 12px 40px rgba(44, 62, 107, 0.06);
}

/* Service arrow nudge (reinforcement of custom.css) */
.gh-svc-item:hover .gh-svc-arrow {
	transform: translateX(4px);
}

/* Trust logo scale on hover */
.gh-trust-logo:hover {
	transform: scale(1.05);
}

.gh-trust-logo {
	transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}


/* ================================================================
   6. REDUCED MOTION — Accessibility
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
	.gh-reveal,
	.gh-reveal--fade,
	.gh-reveal--scale,
	.gh-reveal--left,
	.gh-reveal--right,
	.gh-reveal-stagger > *,
	.gh-svc-list.gh-reveal .gh-svc-item,
	.gh-timeline.gh-reveal .gh-timeline__card,
	.gh-legacy__stats.gh-reveal > div,
	.gh-gallery__item.gh-reveal,
	.gh-specs-grid .gh-spec-card,
	.gh-hero__pin-content .gh-overline,
	.gh-hero__pin-content h1,
	.gh-hero__pin-content .gh-hero__desc,
	.gh-hero__pin-content .gh-hero__buttons,
	.gh-hero__pin .gh-hero__3d,
	.gh-hero__scroll,
	.gh-svc-detail__grid.gh-reveal-stagger > .gh-svc-detail-card,
	.gh-process__grid.gh-reveal-stagger > .gh-process__step,
	.gh-about-timeline__track.gh-reveal-stagger > .gh-about-timeline__item,
	.gh-values__grid.gh-reveal-stagger > .gh-value-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	.gh-ptcl { animation: none !important; }
	.gh-hero__scroll-line::after { animation: none !important; }
}