/* ==========================================================================
   Galaxy Infra Developers — Scroll Animation System
   ========================================================================== */

/* ─── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes sa-fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sa-fadeLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sa-fadeRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sa-scaleUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sa-scaleIn {
  from { opacity: 0; transform: scale(0.75) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sa-imgRevealWipe {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

/* ─── Word-Split Text ────────────────────────────────────────────────────── */

.sa-split-word {
  display: inline-block;
  overflow: hidden;
  line-height: 1.2em;
  vertical-align: bottom;
}
.sa-split-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%) rotateX(-20deg);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.sa-split-parent.sa-visible .sa-split-word-inner {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* ─── Image Reveal Wipe ──────────────────────────────────────────────────── */

.sa-img-wrap {
  overflow: hidden;
  position: relative;
  display: block;
}
.sa-img-wrap > img,
.sa-img-wrap > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: center;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.sa-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #F8F4EC;
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 1.1s cubic-bezier(0.77,0,0.175,1);
  z-index: 1;
  pointer-events: none;
}
.sa-img-wrap.dark-reveal::after { background: #0E1622; }
.sa-img-wrap.sa-visible::after  { transform: scaleY(0); }
.sa-img-wrap.sa-visible > img,
.sa-img-wrap.sa-visible > video { transform: scale(1); }

/* ─── Section Header Centered ────────────────────────────────────────────── */

.sectionHeaderCentered .sectionOverline,
.sectionHeaderCentered .sectionSubheading {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.sectionHeaderCentered .sectionHeading {
  opacity: 0;
  transform: scale(0.88) translateY(24px);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
              transform 1.25s cubic-bezier(0.16,1,0.3,1),
              filter 1.1s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity, filter;
}
.sectionHeaderCentered.sa-visible .sectionOverline   { opacity:1; transform:none; transition-delay:0.0s; }
.sectionHeaderCentered.sa-visible .sectionHeading    { opacity:1; transform:scale(1) translateY(0); filter:blur(0); transition-delay:0.14s; }
.sectionHeaderCentered.sa-visible .sectionSubheading { opacity:1; transform:none; transition-delay:0.28s; }

/* ─── Feature Video Content ──────────────────────────────────────────────── */

.featureVideoContent .sectionOverlineLight,
.featureVideoContent .featureVideoSub,
.featureVideoContent .featureVideoCta {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.featureVideoContent .featureVideoHeading {
  opacity: 0;
  transform: scale(0.88) translateY(28px);
  filter: blur(8px);
  transition: opacity 1.15s cubic-bezier(0.16,1,0.3,1),
              transform 1.3s cubic-bezier(0.16,1,0.3,1),
              filter 1.15s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity, filter;
}
.featureVideoContent.sa-visible .sectionOverlineLight { opacity:1; transform:none; transition-delay:0.05s; }
.featureVideoContent.sa-visible .featureVideoHeading  { opacity:1; transform:scale(1) translateY(0); filter:blur(0); transition-delay:0.18s; }
.featureVideoContent.sa-visible .featureVideoSub      { opacity:1; transform:none; transition-delay:0.32s; }
.featureVideoContent.sa-visible .featureVideoCta      { opacity:1; transform:none; transition-delay:0.48s; }

/* ─── Developer Intro Left ───────────────────────────────────────────────── */

.devIntroLeft .sectionOverline,
.devIntroLeft .devIntroBody,
.devIntroLeft .devIntroCta {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.devIntroLeft .devIntroHeading {
  opacity: 0;
  transform: scale(0.88) translateY(26px);
  filter: blur(8px);
  transition: opacity 1.15s cubic-bezier(0.16,1,0.3,1),
              transform 1.3s cubic-bezier(0.16,1,0.3,1),
              filter 1.15s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity, filter;
}
.devIntroLeft.sa-visible .sectionOverline { opacity:1; transform:none; transition-delay:0.0s; }
.devIntroLeft.sa-visible .devIntroHeading { opacity:1; transform:scale(1) translateY(0); filter:blur(0); transition-delay:0.12s; }
.devIntroLeft.sa-visible .devIntroBody    { opacity:1; transform:none; transition-delay:0.26s; }
.devIntroLeft.sa-visible .devIntroCta     { opacity:1; transform:none; transition-delay:0.42s; }

/* ─── Dev Stats ──────────────────────────────────────────────────────────── */

.devStat {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.devStat.sa-visible { opacity:1; transform:none; }

/* ─── Bento Grid Cards ───────────────────────────────────────────────────── */

.bentoDev .bentoCard {
  opacity: 0;
  transform: translateY(45px) scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.bentoDev.sa-visible .bentoCard:nth-child(1) { opacity:1; transform:none; transition-delay:0.0s; }
.bentoDev.sa-visible .bentoCard:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.bentoDev.sa-visible .bentoCard:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.bentoDev.sa-visible .bentoCard:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.bentoDev.sa-visible .bentoCard:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }

/* ─── Portfolio Filters ──────────────────────────────────────────────────── */

.portfolioFilters {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.portfolioFilters.sa-visible { opacity:1; transform:none; }

/* ─── Collection Tabs ────────────────────────────────────────────────────── */

.collectionsNav .collectionTab {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.collectionsNav.sa-visible .collectionTab { opacity:1; transform:none; }
.collectionsNav.sa-visible .collectionTab:nth-child(1)  { transition-delay:0.00s; }
.collectionsNav.sa-visible .collectionTab:nth-child(2)  { transition-delay:0.05s; }
.collectionsNav.sa-visible .collectionTab:nth-child(3)  { transition-delay:0.10s; }
.collectionsNav.sa-visible .collectionTab:nth-child(4)  { transition-delay:0.15s; }
.collectionsNav.sa-visible .collectionTab:nth-child(5)  { transition-delay:0.20s; }
.collectionsNav.sa-visible .collectionTab:nth-child(6)  { transition-delay:0.25s; }
.collectionsNav.sa-visible .collectionTab:nth-child(7)  { transition-delay:0.30s; }
.collectionsNav.sa-visible .collectionTab:nth-child(8)  { transition-delay:0.35s; }
.collectionsNav.sa-visible .collectionTab:nth-child(9)  { transition-delay:0.40s; }
.collectionsNav.sa-visible .collectionTab:nth-child(10) { transition-delay:0.45s; }

/* ─── Collection Panel Split ─────────────────────────────────────────────── */

.collectionPanel .collectionMediaWrap {
  opacity: 0;
  transform: translateX(-40px) scale(0.97);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1),
              transform 1.0s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.collectionPanel .collectionInfoWrap {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1),
              transform 1.0s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.collectionPanel.sa-visible .collectionMediaWrap { opacity:1; transform:none; transition-delay:0.05s; }
.collectionPanel.sa-visible .collectionInfoWrap  { opacity:1; transform:none; transition-delay:0.20s; }

.collectionPanel .collectionOverline,
.collectionPanel .collectionTitle,
.collectionPanel .collectionDesc,
.collectionPanel .collectionSpecsRibbon,
.collectionPanel .collectionActionRow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.collectionPanel.sa-visible .collectionOverline    { opacity:1; transform:none; transition-delay:0.30s; }
.collectionPanel.sa-visible .collectionTitle       { opacity:1; transform:none; transition-delay:0.42s; }
.collectionPanel.sa-visible .collectionDesc        { opacity:1; transform:none; transition-delay:0.54s; }
.collectionPanel.sa-visible .collectionSpecsRibbon { opacity:1; transform:none; transition-delay:0.66s; }
.collectionPanel.sa-visible .collectionActionRow   { opacity:1; transform:none; transition-delay:0.78s; }

.collectionPanel .specTag {
  opacity: 0;
  transform: scale(0.88) translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform, opacity;
  display: inline-block;
}
.collectionPanel.sa-visible .specTag:nth-child(1) { opacity:1; transform:none; transition-delay:0.68s; }
.collectionPanel.sa-visible .specTag:nth-child(2) { opacity:1; transform:none; transition-delay:0.75s; }
.collectionPanel.sa-visible .specTag:nth-child(3) { opacity:1; transform:none; transition-delay:0.82s; }
.collectionPanel.sa-visible .specTag:nth-child(4) { opacity:1; transform:none; transition-delay:0.89s; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */

footer .fullContainer {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1),
              transform 1.0s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
footer .fullContainer.sa-visible { opacity:1; transform:none; }

/* ─── Generic sa-card / sa-stat helpers ─────────────────────────────────── */

.sa-card {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.sa-card.sa-visible { opacity:1; transform:none; }

/* ─── Animating Divider Line ─────────────────────────────────────────────── */

.animDivider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.77,0,0.175,1);
}
.animDivider.sa-visible { transform: scaleX(1); }

/* ─── Reduced Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sa-split-word-inner,
  .sa-img-wrap::after, .sa-img-wrap > img, .sa-img-wrap > video,
  .sectionHeaderCentered .sectionOverline,
  .sectionHeaderCentered .sectionHeading,
  .sectionHeaderCentered .sectionSubheading,
  .featureVideoContent .sectionOverlineLight,
  .featureVideoContent .featureVideoHeading,
  .featureVideoContent .featureVideoSub,
  .featureVideoContent .featureVideoCta,
  .devIntroLeft .sectionOverline,
  .devIntroLeft .devIntroHeading,
  .devIntroLeft .devIntroBody,
  .devIntroLeft .devIntroCta,
  .devStat,
  .bentoDev .bentoCard,
  .portfolioFilters,
  .collectionsNav .collectionTab,
  .collectionPanel .collectionMediaWrap,
  .collectionPanel .collectionInfoWrap,
  .collectionPanel .collectionOverline,
  .collectionPanel .collectionTitle,
  .collectionPanel .collectionDesc,
  .collectionPanel .collectionSpecsRibbon,
  .collectionPanel .collectionActionRow,
  .collectionPanel .specTag,
  footer .fullContainer,
  .sa-card, .animDivider {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .sa-img-wrap::after { display: none; }
}

/* ==========================================================================
   EXTENDED ANIMATIONS — Advanced Effects Pack
   ========================================================================== */

/* ─── Floating Particles / Shimmer on headings ────────────────────────────── */

@keyframes sa-textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes sa-floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes sa-rotateIn {
  from { opacity: 0; transform: rotate(-6deg) translateY(30px) scale(0.9); }
  to   { opacity: 1; transform: rotate(0deg) translateY(0px) scale(1); }
}

@keyframes sa-skewIn {
  from { opacity: 0; transform: skewX(-8deg) translateX(-30px); }
  to   { opacity: 1; transform: skewX(0deg) translateX(0); }
}

@keyframes sa-flipUp {
  from { opacity: 0; transform: rotateX(-90deg) translateY(20px); transform-origin: bottom; }
  to   { opacity: 1; transform: rotateX(0deg) translateY(0); transform-origin: bottom; }
}

@keyframes sa-bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sa-drawLine {
  from { stroke-dashoffset: 600; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes sa-ripple {
  0%   { transform: scale(0.85); opacity: 0; box-shadow: 0 0 0 0 rgba(188,168,147,0.4); }
  50%  { opacity: 1; box-shadow: 0 0 0 20px rgba(188,168,147,0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(188,168,147,0); }
}

@keyframes sa-gradientPan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sa-numberPop {
  0%   { opacity: 0; transform: scale(0.5) translateY(15px); filter: blur(6px); }
  60%  { filter: blur(0); }
  80%  { transform: scale(1.08) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ─── Animated shimmer gradient on CTA buttons ────────────────────────────── */

.devIntroCta,
.featureVideoCta,
.btnPrimaryLuxury {
  position: relative;
  overflow: hidden;
}

.devIntroCta::after,
.featureVideoCta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.devIntroCta:hover::after,
.featureVideoCta:hover::after {
  animation: sa-ctaShimmer 0.7s ease forwards;
}

@keyframes sa-ctaShimmer {
  from { left: -100%; }
  to   { left: 200%; }
}

/* ─── Dev Stat number pop animation ──────────────────────────────────────── */

.devStatValue {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.devStat.sa-visible .devStatValue {
  animation: sa-numberPop 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* ─── Animated underline on section headings ─────────────────────────────── */

.sectionHeading,
.sectionHeadingLeft,
.sectionHeadingLight,
.devIntroHeading {
  position: relative;
}

.sectionHeading::after,
.sectionHeadingLeft::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 1.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-warm-taupe), transparent);
  transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.sa-visible .sectionHeading::after,
.sectionHeaderCentered.sa-visible .sectionHeading::after,
.sectionHeaderCentered.sa-visible .sectionHeadingLeft::after {
  width: 60%;
}

/* ─── Gallery masonry hover tilt effect ──────────────────────────────────── */

.propGalleryItem {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}

.propGalleryItem:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(14, 22, 34, 0.18);
  z-index: 2;
}

/* ─── Bento card glow on hover ───────────────────────────────────────────── */

.bentoCard {
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
              box-shadow 0.45s ease !important;
}

.bentoCard:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 24px 60px rgba(14, 22, 34, 0.22) !important;
}

/* ─── Collection tab pill hover bounce ───────────────────────────────────── */

.collectionTab,
.filterTab {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}

.collectionTab:hover:not(.active),
.filterTab:hover:not(.active) {
  transform: translateY(-3px);
}

.collectionTab.active,
.filterTab.active {
  animation: sa-ripple 0.5s ease both;
}

/* ─── Owner/intro photo — floating subtle animation post-reveal ───────────── */

.devIntroImageWrap.sa-visible img {
  animation: sa-floatY 6s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* ─── Spec tags pop-in with bounce ──────────────────────────────────────────*/

.collectionPanel.sa-visible .specTag {
  animation: sa-bounceIn var(--sa-dur, 0.55s) cubic-bezier(0.34, 1.56, 0.64, 1) var(--sa-delay, 0.68s) both !important;
}

/* ─── Section divider animated gradient line ────────────────────────────── */

.animDivider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-warm-taupe) 30%,
    var(--color-warm-taupe) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: sa-gradientPan 3s ease infinite;
  animation-play-state: paused;
}

.animDivider.sa-visible {
  animation-play-state: running;
}

/* ─── Hero scroll-down button pulsing ring ───────────────────────────────── */

@keyframes sa-ringPulse {
  0%   { transform: scale(1); opacity: 0.8; }
  50%  { transform: scale(1.15); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.8; }
}

#scrollDown.show {
  animation: sa-floatY 3s ease-in-out infinite;
}

/* ─── Staggered hero nav line reveal ─────────────────────────────────────── */

@keyframes sa-navLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

header.show .barButton::after {
  animation: sa-navLine 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* ─── Diagonal reveal for feature video overlay ──────────────────────────── */

.featureVideoStrip {
  clip-path: inset(0 0 0 0);
}

/* ─── Floating tag animation on bento card ───────────────────────────────── */

@keyframes sa-tagFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%       { transform: translateY(-3px) translateX(2px); }
  66%       { transform: translateY(2px) translateX(-1px); }
}

.bentoCard:hover .bentoCardTag {
  animation: sa-tagFloat 2s ease-in-out infinite;
}

/* ─── Smooth count-up flash on stat values ────────────────────────────────── */

.statNumber {
  display: inline-block;
  transition: color 0.3s ease;
}

.devStat.sa-visible .statNumber {
  color: var(--color-warm-taupe-rich);
}

/* ─── Reduced motion: disable all extended animations ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .devIntroImageWrap.sa-visible img,
  #scrollDown.show,
  .animDivider,
  .bentoCard,
  .collectionTab,
  .filterTab,
  .devStat.sa-visible .devStatValue,
  .propGalleryItem,
  .bentoCard:hover .bentoCardTag,
  .devIntroCta::after,
  .featureVideoCta::after {
    animation: none !important;
    transition: none !important;
  }
}