/* ===== First-load intro: two gold elephants rise facing apart, the names sweep
   in, then the overlay fades into the homepage. Injected + sequenced by
   /assets/intro.js; palette mirrors site.css so it works standalone. ===== */

#ap-intro{
  --g:#c9a24e; --g-lt:#e6c877; --g-hi:#f7ecc9; --g-deep:#a8843b; --cream:#efe6d3;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 42%, #171106 0%, #0b0a08 60%, #060504 100%);
  opacity:1; transition:opacity .9s ease;
  -webkit-font-smoothing:antialiased;
}
#ap-intro.ap-hide{opacity:0}
#ap-intro *{box-sizing:border-box}

/* soft top + bottom vignette for depth */
#ap-intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,5,4,.5),transparent 22%,transparent 74%,rgba(6,5,4,.72))}

.ap-skip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(239,230,211,.5);background:none;border:0;cursor:pointer;padding:8px 14px;z-index:5;
  opacity:0;animation:apFade .6s ease 1.6s forwards;transition:color .2s}
.ap-skip:hover{color:var(--g-lt)}

/* ---- stage: names stacked ABOVE the elephants so nothing overlaps ---- */
.ap-stage{position:relative;width:min(94vw,900px);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(4px,2vw,18px);text-align:center}
/* definite width (min of px + vw) — robust inside the flex column, no overflow */
.ap-eles{display:block;margin:0 auto;width:min(600px,92vw);max-width:100%;height:auto;overflow:visible}

/* ---- names (HTML, so we get the real font + a continuous gold sheen) ---- */
.ap-words{position:static;width:auto;max-width:100%;z-index:3;pointer-events:none}
.ap-eyebrow{font-family:var(--sans);font-weight:300;letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(10px,1.5vw,13px);color:var(--g-lt);margin:0 0 12px;
  opacity:0;animation:apFade .9s ease .35s forwards}
.ap-couple{margin:0;font-family:var(--serif);font-weight:700;line-height:.98;
  font-size:clamp(30px,7.6vw,84px);letter-spacing:.02em;white-space:nowrap;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.55))}
/* each glyph carries its own gilt gradient (robust with the inline-block reveal),
   materializing left-to-right — the per-letter delay is set in intro.js */
.ap-couple .ap-ltr{display:inline-block;
  background:linear-gradient(180deg,var(--g-hi) 0%,var(--g-lt) 34%,var(--g) 68%,var(--g-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transform:translateY(.26em);filter:blur(7px);
  animation:apLetter .62s cubic-bezier(.2,.7,.2,1) forwards}
.ap-couple .ap-amp{-webkit-text-fill-color:var(--g);color:var(--g);font-weight:500;
  padding:0 .1em;font-size:.86em;vertical-align:.02em}
.ap-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:min(3.4vw,30px) auto 0;
  max-width:min(74%,360px);color:var(--g)}
.ap-rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--g-deep),transparent);
  transform:scaleX(0);transform-origin:center;animation:apRule .9s ease 2.5s forwards}
.ap-rule span{font-size:15px;opacity:0;animation:apFade .7s ease 2.8s forwards}

/* ---- elephants: elegant staggered entrance (rise + fade) ---- */
.ap-ele{opacity:0;animation:apEleIn 1s cubic-bezier(.2,.8,.2,1) forwards}
.ap-ele--l{animation-delay:.45s}
.ap-ele--r{animation-delay:.6s}
/* the traced silhouette (reference-matched elephant), with a gilt rim */
.ap-sil{fill:url(#apBody);stroke:#f2df9f;stroke-width:1.1;stroke-linejoin:round}
/* Indian caparison (jhool) draped over the back — deep red with gold trim */
.ap-blk{fill:#9e2b34;stroke:#e6c877;stroke-width:2;stroke-linejoin:round}
.ap-blkb{fill:none;stroke:#f0d98a;stroke-width:1.4}
.ap-gdot circle{fill:#f0d98a}
.ap-gtas{fill:none;stroke:#e6c877;stroke-width:1.6}

/* ---- keyframes ---- */
@keyframes apFade{to{opacity:1}}
@keyframes apEleIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes apLetter{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes apRule{to{transform:scaleX(1)}}

/* ---- reduced motion: no big movement, just a graceful gold fade ---- */
@media (prefers-reduced-motion: reduce){
  #ap-intro .ap-ele,#ap-intro .ap-couple,#ap-intro .ap-couple .ap-ltr,
  #ap-intro .ap-rule i,#ap-intro .ap-rule span,#ap-intro .ap-eyebrow,#ap-intro .ap-skip{
    animation:apFade .6s ease forwards!important;transform:none!important;filter:none!important;opacity:1}
}