/* ======================================================================
   Rihayesh.com — Premium Motion System
   White luxury theme: cinematic entrances, silky micro-interactions
   ====================================================================== */

/* ---- Keyframes ------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

@keyframes scrollCue {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: .22; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: .55; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInZoom {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUp {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Shimmer for loading placeholders — warm light */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Warm orange ambient glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(201,101,0,.10); }
  50%       { box-shadow: 0 0 48px rgba(201,101,0,.22); }
}

/* Subtle float for decorative elements */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Gold shimmer sweep — orange-to-champagne-to-orange */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Soft border glow for focus states */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201,101,0,.10); }
  50%       { box-shadow: 0 0 0 4px rgba(201,101,0,.20); }
}

/* ---- Hero section load animations ----------------------------------- */
.hero__eyebrow { animation: fadeInUp  .70s cubic-bezier(0,.55,.45,1)  .18s both; }
.hero__title   { animation: fadeInUp  .95s cubic-bezier(0,.55,.45,1)  .34s both; }
.hero__sub     { animation: fadeInUp  .75s cubic-bezier(0,.55,.45,1)  .52s both; }
.hero__cta     { animation: fadeInUp  .72s cubic-bezier(0,.55,.45,1)  .68s both; }
.hero__stats   { animation: fadeInUp  .72s cubic-bezier(0,.55,.45,1)  .84s both; }
.hero__visual  { animation: fadeInRight 1.1s cubic-bezier(0,.55,.45,1) .78s both; }
.scroll-cue    { animation: scrollCue 2.4s ease-in-out  .5s infinite; }

/* ---- Scroll Reveal --------------------------------------------------- */
.reveal,
.reveal--left,
.reveal--right,
.reveal--zoom,
.reveal--up {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0,.55,.45,1);
  transition-duration: .85s;
  will-change: opacity, transform;
}
.reveal        { transform: translateY(28px) scale(.99); }
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--zoom  { transform: scale(.93); }
.reveal--up    { transform: translateY(44px) scale(.99); }

/* Delay via CSS custom property --d */
.reveal[style*="--d"],
.reveal--left[style*="--d"],
.reveal--right[style*="--d"],
.reveal--zoom[style*="--d"],
.reveal--up[style*="--d"] {
  transition-delay: var(--d, 0ms);
}

/* Visible state */
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible,
.reveal--up.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Stagger utility ------------------------------------------------- */
.stagger-children > *:nth-child(1)  { --d:   0ms; }
.stagger-children > *:nth-child(2)  { --d:  90ms; }
.stagger-children > *:nth-child(3)  { --d: 180ms; }
.stagger-children > *:nth-child(4)  { --d: 270ms; }
.stagger-children > *:nth-child(5)  { --d: 360ms; }
.stagger-children > *:nth-child(6)  { --d: 450ms; }
.stagger-children > *:nth-child(7)  { --d: 540ms; }
.stagger-children > *:nth-child(8)  { --d: 630ms; }
.stagger-children > *:nth-child(9)  { --d: 720ms; }
.stagger-children > *:nth-child(10) { --d: 810ms; }

/* ---- Micro-interactions --------------------------------------------- */
.btn { transition: all 260ms cubic-bezier(.22,.68,0,1.2); }
.btn:active { transform: scale(.95) translateY(1px) !important; }

/* Button internal shimmer sweep on hover */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.btn--primary:hover::before { transform: translateX(100%); }

/* ---- Icon bounce on card hover ---- */
@media (hover: hover) {
  .why-card:hover .why-card__icon,
  .mv-card:hover .mv-card__icon {
    transform: scale(1.10) rotate(-4deg);
    transition: transform 300ms cubic-bezier(.22,.68,0,1.2);
  }
}

/* ---- Underline grow on hover ---- */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms cubic-bezier(.22,.68,0,1.2);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Shimmer for loading placeholders — warm light theme ---- */
.img-loading {
  background: linear-gradient(
    90deg,
    #F0EDE6 25%,
    #E8E3DC 50%,
    #F0EDE6 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}

/* ---- Gold eyebrow shimmer ---- */
.eyebrow {
  background: linear-gradient(
    90deg,
    var(--clr-primary) 0%,
    #F0A840 40%,
    var(--clr-primary) 60%,
    var(--clr-primary-hover) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s linear infinite;
}
/* Keep the ::before accent line solid orange */
.eyebrow::before {
  -webkit-text-fill-color: initial;
  background: var(--clr-primary) !important;
  background-clip: initial !important;
  animation: none !important;
}

/* ---- Mobile nav entrance ---- */
.nav__links.is-open { animation: slideDown .30s cubic-bezier(0,.55,.45,1) forwards; }

/* ---- Hero visual panel — hover glow ---- */
.hero__visual {
  transition: box-shadow var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth);
}
.hero__visual:hover {
  box-shadow:
    0 0 0 1px rgba(201,101,0,.22),
    0 48px 90px rgba(0,0,0,.16),
    0 0 80px rgba(201,101,0,.10) !important;
}

/* ---- Card 3D hover (desktop only) ---- */
@media (hover: hover) {
  .mv-card, .why-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
      transform 280ms cubic-bezier(.22,.68,0,1.2),
      box-shadow 280ms cubic-bezier(0,.55,.45,1),
      background 280ms ease,
      border-color 280ms ease;
  }
}

/* ---- Parallax depth hint ---- */
.parallax-layer { will-change: transform; }

/* ---- Focus visible ring ---- */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Logo slider — infinite scroll ---------------------------------- */
@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Hero fullbleed — eyebrow / cta entrance ----------------------- */
.hero--fullbleed .hero__eyebrow { animation: fadeInUp  .72s cubic-bezier(0,.55,.45,1) .22s both; }
.hero--fullbleed .hero__cta     { animation: fadeInUp  .72s cubic-bezier(0,.55,.45,1) .44s both; }
.hero--fullbleed .hero__stats   { animation: fadeInUp  .72s cubic-bezier(0,.55,.45,1) .62s both; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal--left, .reveal--right, .reveal--zoom, .reveal--up {
    opacity: 1;
    transform: none;
  }
  .eyebrow {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--clr-primary) !important;
  }
  img[loading="lazy"] { opacity: 1; }
  .ls-inner { animation: none !important; }
}