/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SAISHA INTERIORS — ANIMATIONS SYSTEM
   Keyframes · Reveal States · Motion Tokens · Loading States
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── PAGE TRANSITIONS ── */
.page-wrap {
  animation: pageEnter 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── INNER PAGE HERO ── */
.inner-hero {
  padding: 160px clamp(24px,8vw,120px) clamp(60px,8vw,100px);
  border-bottom: 1px solid var(--gold-line);
  position: relative;
  overflow: hidden;
}
.inner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(184,151,42,0.05) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(184,151,42,0.012) 3px, rgba(184,151,42,0.012) 4px);
  pointer-events: none;
}
.inner-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s cubic-bezier(0.25,1,0.5,1) forwards;
}
.inner-hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--gold); display: block; }
.inner-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 300;
  line-height: 1.05;
  color: #222222;
  opacity: 0;
  animation: fadeUp 1s 0.35s cubic-bezier(0.25,1,0.5,1) forwards;
}
.inner-hero h1 em { font-style: italic; color: var(--gold-pale); }
.inner-hero-sub {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 2;
  color: var(--white-dim);
  max-width: 640px;
  margin-top: 24px;
  opacity: 0;
  animation: fadeUp 0.9s 0.5s cubic-bezier(0.25,1,0.5,1) forwards;
}

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

/* ── INNER PAGE SECTIONS ── */
.inner-section {
  padding: clamp(60px,10vw,120px) clamp(24px,8vw,120px);
}
.inner-section-alt {
  padding: clamp(60px,10vw,120px) clamp(24px,8vw,120px);
  background: var(--charcoal-2);
}

/* ── TIMELINE ── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 800px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.timeline-item {
  padding: 0 0 48px 48px;
  position: relative;
  opacity: 0;
  transform: translateX(-20px);
}
.timeline-item.revealed { opacity: 1; transform: translateX(0); transition: all 0.8s cubic-bezier(0.25,1,0.5,1); }
.timeline-dot {
  position: absolute;
  left: -5px; top: 4px;
  width: 10px; height: 10px;
  border: 1px solid var(--gold);
  background: var(--black);
  border-radius: 50%;
}
.timeline-year {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.timeline-title {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem,2.5vw,1.6rem);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 10px;
}
.timeline-body {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
}

/* ── PROCESS STEPS ── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--gold-line);
}
.process-step {
  background: var(--charcoal-2);
  padding: clamp(28px,4vw,48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--gold-line);
}
.process-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem,5vw,4rem);
  font-weight: 300;
  color: rgba(212,164,55,0.25);
  line-height: 1;
}
.process-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--white);
}
.process-body {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
}

/* ── SERVICE DETAIL HERO ── */
.service-hero-icon {
  width: 72px; height: 72px;
  border: 1px solid var(--gold-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.8rem;
  margin-bottom: 32px;
}

/* ── BENEFIT GRID ── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--gold-line);
}
.benefit-item {
  background: var(--charcoal);
  padding: clamp(28px,4vw,48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.4s;
}
.benefit-item:hover { background: rgba(212,164,55,0.06); }
.benefit-icon { color: var(--gold); font-size: 1.2rem; }
.benefit-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; color: var(--white); }
.benefit-body  { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 300; line-height: 1.9; color: var(--white-dim); }

/* ── TEAM SPOTLIGHT ── */
.founder-spotlight {
  padding: clamp(60px,10vw,120px) clamp(24px,8vw,120px);
  background: var(--charcoal-2);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px,8vw,120px);
  align-items: center;
}
.team-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gold-line);
}
.team-bio {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
  margin-top: 10px;
}

/* ── CONTACT PAGE ── */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  min-height: 80vh;
}
.contact-page-info {
  padding: clamp(60px,10vw,120px) clamp(24px,6vw,80px);
  background: var(--charcoal-2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.contact-page-form {
  padding: clamp(60px,10vw,120px) clamp(24px,6vw,80px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.wa-btn:hover { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.6); transform: translateY(-2px); }

/* ── PACKAGE DETAIL ── */
.pkg-outcome {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 200;
  line-height: 1.9;
  color: var(--white-dim);
  padding: 20px 0;
  border-top: 1px solid var(--gold-line);
  margin-top: 8px;
}
.pkg-badge {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(184,151,42,0.3);
  font-size: 0.5rem;
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* ── RESPONSIVE INNER PAGES ── */
@media (max-width: 768px) {
  .founder-spotlight { grid-template-columns: 1fr; }
  .contact-page      { grid-template-columns: 1fr; }
  .team-full-grid    { grid-template-columns: repeat(2,1fr); }
  .process-grid      { grid-template-columns: 1fr; }
}


/* ── CUSTOM CURSOR ── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
  mix-blend-mode: normal;
}
.cursor-follower {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(184, 151, 42, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
body:hover .cursor { opacity: 1; }

/* ── LOADING SCREEN ── */
#loader {
  position: fixed;
  inset: 0;
  background: #0e0c08;  /* deep warm dark — independent of palette */
  z-index: 99997;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.loader-logo {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 164, 55, 0.70);
  text-transform: uppercase;
  opacity: 0;
}
.loader-bar-wrap {
  width: clamp(180px, 30vw, 320px);
  height: 1px;
  background: rgba(184, 151, 42, 0.15);
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.05s linear;
}
.loader-pct {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--gold);
  opacity: 0.7;
}
.loader-tagline {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.55em;
  color: rgba(212, 164, 55, 0.35);
  text-transform: uppercase;
  margin-top: -16px;
}

/* ── HERO ANIMATION INITIAL STATES ── */
.hero-eyebrow { opacity: 0; }
.hero-h1      { opacity: 0; }
.hero-sub     { opacity: 0; }
.hero-actions { opacity: 0; }
.hero-scroll  { opacity: 0; }

/* ── SCROLL REVEAL INITIAL STATES ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}
.stagger-child {
  opacity: 0;
  transform: translateY(24px);
}

/* ── KEYFRAMES ── */
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-40px) scale(1.08); }
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── ABOUT LOGO ANIMATIONS ── */

/* Slow dignified rotation — 22s full revolution */
@keyframes logoRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Gentle float — logo breathes up and down */
@keyframes logoFloat {
  0%,  100% { transform: rotate(var(--r,0deg)) translateY(0px);   }
  50%        { transform: rotate(var(--r,0deg)) translateY(-10px); }
}

/* Combined — rotation takes priority; float layered via custom property trick */
/* We use two separate animation names so both play simultaneously */
@keyframes logoRotate {
  from { transform: rotate(0deg)   translateY(0px);  }
  25%  { transform: rotate(90deg)  translateY(-8px); }
  50%  { transform: rotate(180deg) translateY(0px);  }
  75%  { transform: rotate(270deg) translateY(-8px); }
  to   { transform: rotate(360deg) translateY(0px);  }
}

/* Spinning conic-gradient ring behind logo */
@keyframes ringRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Pulse the gold halo border */
@keyframes haloPulse {
  0%,  100% { transform: scale(1);    opacity: 0.6; }
  50%        { transform: scale(1.12); opacity: 1;   }
}