/* =====================================================
   THE DOMUS — Animations v3 (White Luxury Edition)
   ===================================================== */

/* =====================================================
   CORE KEYFRAMES
   ===================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blurFadeIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(18px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

/* Mask reveal — clip path wipe from bottom */
@keyframes maskReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

/* Line expand */
@keyframes lineExpand {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Gold shimmer sweep */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(220%)  skewX(-15deg); }
}

/* Film grain */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 2%); }
  30%       { transform: translate(-1%, 4%); }
  40%       { transform: translate(4%, -1%); }
  50%       { transform: translate(-3%, 3%); }
  60%       { transform: translate(2%, -4%); }
  70%       { transform: translate(-4%, 1%); }
  80%       { transform: translate(1%, 3%); }
  90%       { transform: translate(3%, -2%); }
}

/* Float — subtle for philosophy / hero elements */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(0.3deg); }
  66%       { transform: translateY(-5px) rotate(-0.25deg); }
}

/* Scroll rail indicator */
@keyframes railMove {
  from { top: -100%; }
  to   { top:  100%; }
}

/* Loader */
@keyframes loaderWordUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@keyframes loaderLineGrow {
  from { width: 0; }
  to   { width: 180px; }
}
@keyframes loaderFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ripple click */
@keyframes rippleAnim {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0; }
}

/* Marquee */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Count odometer */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =====================================================
   STAGGER DELAY UTILITIES (16 children)
   ===================================================== */
[data-stagger] > * { transition-delay: 0s; }
[data-stagger].in-view > *:nth-child(1)  { transition-delay: 0.00s; }
[data-stagger].in-view > *:nth-child(2)  { transition-delay: 0.07s; }
[data-stagger].in-view > *:nth-child(3)  { transition-delay: 0.14s; }
[data-stagger].in-view > *:nth-child(4)  { transition-delay: 0.21s; }
[data-stagger].in-view > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].in-view > *:nth-child(6)  { transition-delay: 0.35s; }
[data-stagger].in-view > *:nth-child(7)  { transition-delay: 0.42s; }
[data-stagger].in-view > *:nth-child(8)  { transition-delay: 0.49s; }
[data-stagger].in-view > *:nth-child(9)  { transition-delay: 0.56s; }
[data-stagger].in-view > *:nth-child(10) { transition-delay: 0.63s; }
[data-stagger].in-view > *:nth-child(11) { transition-delay: 0.70s; }
[data-stagger].in-view > *:nth-child(12) { transition-delay: 0.77s; }
[data-stagger].in-view > *:nth-child(13) { transition-delay: 0.84s; }
[data-stagger].in-view > *:nth-child(14) { transition-delay: 0.91s; }
[data-stagger].in-view > *:nth-child(15) { transition-delay: 0.98s; }
[data-stagger].in-view > *:nth-child(16) { transition-delay: 1.05s; }

/* =====================================================
   TEXT REVEAL UTILITY
   ===================================================== */
.text-reveal {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.text-reveal span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.text-reveal.in-view span { transform: translateY(0); }

/* Clip-path line reveal */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.clip-reveal.in-view { clip-path: inset(0% 0 0 0); }

/* Blur reveal */
.blur-reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition: opacity 1s var(--ease-out), filter 1s var(--ease-out), transform 1s var(--ease-out);
}
.blur-reveal.in-view { opacity: 1; filter: blur(0); transform: translateY(0); }

/* =====================================================
   FLOATING ELEMENTS
   ===================================================== */
.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-med  { animation: floatSlow 9s ease-in-out infinite 1.5s; }

/* =====================================================
   HERO LINE DELAYS
   ===================================================== */
.hero-line-1 span { transition-delay: 0.2s !important; }
.hero-line-2 span { transition-delay: 0.36s !important; }
.hero-line-3 span { transition-delay: 0.50s !important; }

/* =====================================================
   LOADER & PAGE TRANSITION — Logo only, clean white luxury
   ===================================================== */
.loader {
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s !important;
}
.loader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.loader-brand {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.loader-logo-img {
  height: clamp(32px, 4vw, 42px) !important;
  width: auto !important;
  filter: invert(1) !important;
  display: block !important;
  animation: loaderLogoFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.loader-line,
.loader-sub {
  display: none !important;
}
@keyframes loaderLogoFade {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.page-transition {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
}
.page-transition.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.page-transition .loader-logo-img {
  height: clamp(32px, 4vw, 42px) !important;
  width: auto !important;
  filter: invert(1) !important;
  display: block !important;
  animation: loaderLogoFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* =====================================================
   HOVER UNDERLINE (animated gold underline)
   ===================================================== */
.underline-hover {
  position: relative;
  display: inline-block;
}
.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold, #B89A5C);
  transition: width 0.4s var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.underline-hover:hover::after { width: 100%; }

/* =====================================================
   GRAIN CANVAS
   ===================================================== */
#grain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.018;
  mix-blend-mode: multiply;
}