/* Sapient hero intro — hands connect, gold ring forms. Scoped under .si- */

@property --si-sweep { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.si-hero{
  --si-bg:#0A0A0A;
  --si-gold-hot:#FFFBE4;
  --si-gold:#D8C594;
  --si-gold-deep:#A1894F;
  --si-emerge:2.6s;     /* hands travel time */
  --si-touch:2.45s;     /* moment of contact */
  position:relative;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:var(--si-bg);
}
.si-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 90% at 50% 49%, transparent 42%, rgba(10,10,10,.5) 100%)}

.si-stage{position:relative;width:min(92vh,96vw);aspect-ratio:1040/1300}
.si-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:screen;will-change:transform,filter,opacity}

@keyframes si-humanIn{
  0%{transform:translate(-15%,15%);filter:brightness(0)}
  30%{filter:brightness(.45)}
  100%{transform:translate(0,0);filter:brightness(1)}
}
@keyframes si-robotIn{
  0%{transform:translate(15%,-15%);filter:brightness(0)}
  30%{filter:brightness(.45)}
  100%{transform:translate(0,0);filter:brightness(1)}
}
.si-layer.si-human{animation:si-humanIn var(--si-emerge) cubic-bezier(.3,.75,.22,1) both}
.si-layer.si-robot{animation:si-robotIn var(--si-emerge) cubic-bezier(.3,.75,.22,1) both}

/* the ring is born at the touch */
.si-layer.si-ring{
  mask:conic-gradient(from 39deg at 49.74% 49.45%, #fff 0deg, #fff var(--si-sweep), transparent calc(var(--si-sweep) + 16deg));
  -webkit-mask:conic-gradient(from 39deg at 49.74% 49.45%, #fff 0deg, #fff var(--si-sweep), transparent calc(var(--si-sweep) + 16deg));
  animation:
    si-sweep 1.05s cubic-bezier(.45,0,.2,1) var(--si-touch) both,
    si-ringBreathe 5.5s ease-in-out calc(var(--si-touch) + 1.4s) infinite;
}
@keyframes si-sweep{from{--si-sweep:0deg}to{--si-sweep:374deg}}
@keyframes si-ringBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
.si-no-sweep .si-layer.si-ring{mask:none;-webkit-mask:none;opacity:0;
  animation:si-ringFade 1.05s ease var(--si-touch) both, si-ringBreathe 5.5s ease-in-out calc(var(--si-touch) + 1.4s) infinite}
@keyframes si-ringFade{to{opacity:1}}

/* bloom when the circle completes */
@keyframes si-bloom{
  0%,76%{filter:brightness(1) saturate(1)}
  88%{filter:brightness(1.22) saturate(1.16)}
  100%{filter:brightness(1.05) saturate(1.06)}
}
.si-stage{animation:si-bloom calc(var(--si-touch) + 1.5s) ease-out both}

/* spark flash at contact, settling to an ember */
.si-spark{position:absolute;left:53%;top:49%;z-index:3;width:3px;height:3px;border-radius:50%;
  background:var(--si-gold-hot);opacity:0;transform:translate(-50%,-50%) scale(.2);
  box-shadow:0 0 10px 5px rgba(255,251,228,.95),0 0 32px 14px rgba(255,251,228,.85),
    0 0 90px 40px rgba(216,197,148,.55),0 0 200px 90px rgba(216,197,148,.32),
    0 0 360px 160px rgba(161,137,79,.16);
  will-change:transform,opacity;
  animation:si-sparkFlash 1.9s ease-out var(--si-touch) both,
    si-ember 3.4s ease-in-out calc(var(--si-touch) + 1.9s) infinite}
.si-spark::before,.si-spark::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.si-spark::before{width:2.5px;height:340px;background:linear-gradient(180deg,transparent,rgba(255,251,228,.9),transparent)}
.si-spark::after{width:340px;height:2.5px;background:linear-gradient(90deg,transparent,rgba(255,251,228,.9),transparent)}
@keyframes si-sparkFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(2.1)}
  45%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:.5;transform:translate(-50%,-50%) scale(.6)}
}
@keyframes si-ember{0%,100%{opacity:.45}50%{opacity:.62}}

/* full-stage burst of light when the ring completes */
.si-stage::before{content:"";position:absolute;inset:-20%;z-index:2;pointer-events:none;
  border-radius:50%;opacity:0;
  background:radial-gradient(circle at 53% 49%, rgba(255,251,228,.9) 0%, rgba(216,197,148,.4) 22%, transparent 60%);
  animation:si-burst 1.3s ease-out var(--si-touch) both}
@keyframes si-burst{
  0%{opacity:0;transform:scale(.3)}
  30%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.6)}
}

/* wordless scroll cue: a thin breathing line of gold */
.si-cue{position:absolute;z-index:6;left:50%;bottom:4.5%;transform:translateX(-50%);opacity:0;
  animation:si-cueIn 1s ease calc(var(--si-touch) + 1.8s) both}
@keyframes si-cueIn{to{opacity:1}}
.si-cue span{display:block;width:1px;height:42px;background:linear-gradient(var(--si-gold),transparent);
  animation:si-driftCue 2.2s ease-in-out infinite}
@keyframes si-driftCue{0%,100%{transform:translateY(-5px);opacity:.35}50%{transform:translateY(5px);opacity:1}}

/* welcome message, left side — appears once the ring has formed */
.si-welcome{position:absolute;z-index:6;left:6%;top:50%;max-width:360px;
  transform:translateY(-50%) translateX(-14px);opacity:0;
  animation:si-welcomeIn 1.1s ease calc(var(--si-touch) + 1.5s) both}
@keyframes si-welcomeIn{to{opacity:1;transform:translateY(-50%) translateX(0)}}
.si-welcome-title{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(2.1rem,3.8vw,2.9rem);line-height:1.15;letter-spacing:-0.01em;
  color:#FFFFFF;margin-bottom:.7rem;text-shadow:0 1px 24px rgba(0,0,0,.35)}
.si-welcome-title em{font-style:italic;font-weight:400;position:relative;
  background:linear-gradient(100deg,var(--si-gold-deep) 30%,var(--si-gold-hot) 50%,var(--si-gold-deep) 70%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(216,197,148,.55),0 0 40px rgba(216,197,148,.25);
  animation:si-shine 3.2s ease-in-out calc(var(--si-touch) + 2.6s) infinite}
@keyframes si-shine{
  0%,40%{background-position:100% 0}
  70%{background-position:0% 0}
  100%{background-position:-100% 0}
}
.si-welcome-sub{font-family:'DM Sans',sans-serif;font-weight:400;font-size:1.05rem;
  line-height:1.8;color:#D8D4CE;max-width:300px;text-shadow:0 1px 16px rgba(0,0,0,.35)}

/* binary digits that bloom near the cursor and fade away */
.si-binary-wrap{position:relative;cursor:default}
.si-binary-particle{position:absolute;z-index:-1;pointer-events:none;
  transform:translate(-50%,-50%);font-family:'SF Mono','Courier New',monospace;
  font-style:normal;color:var(--si-gold,#D8C594);
  text-shadow:0 0 8px rgba(216,197,148,.6);opacity:0;
  animation:si-binary-fade .9s ease-out forwards}
@keyframes si-binary-fade{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  20%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}
}

/* fingerprints that press in near the cursor in the left negative space */
.si-fingerprint-particle{position:absolute;z-index:-1;pointer-events:none;
  --si-fp-rot:0deg;--si-fp-peak:.7;
  opacity:0;will-change:transform,opacity;
  animation:si-fingerprint-press 1.6s cubic-bezier(.22,.61,.36,1) forwards}
.si-fingerprint-particle img{display:block;width:100%;height:100%;
  filter:drop-shadow(0 0 6px rgba(216,197,148,.45))}
@keyframes si-fingerprint-press{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--si-fp-rot)) scale(.72)}
  22%{opacity:var(--si-fp-peak);transform:translate(-50%,-50%) rotate(var(--si-fp-rot)) scale(1.02)}
  40%{transform:translate(-50%,-50%) rotate(var(--si-fp-rot)) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--si-fp-rot)) scale(1.06)}
}

/* negative space on either side of the centered hero stage */
.si-binary-side{position:absolute;top:0;bottom:0;width:50%;z-index:0;pointer-events:auto;
  background:var(--si-bg,#0A0A0A)}
.si-binary-side-left{left:0}
.si-binary-side-right{right:0}

@media (max-width: 760px){
  .si-binary-side{display:none}
}

@media (max-width: 760px){
  .si-hero{height:auto;min-height:100svh;overflow-x:hidden;overflow-y:visible;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:6.5rem 0 3rem;gap:1.25rem}
  .si-stage{width:80vw;flex:none}
  .si-welcome{position:static;left:auto;top:auto;bottom:auto;max-width:88vw;
    transform:none;text-align:center;
    animation:si-welcomeIn 1.1s ease calc(var(--si-touch) + 1.5s) both}
  @keyframes si-welcomeIn{to{opacity:1}}
  .si-welcome-title{font-size:clamp(1.6rem,7vw,2rem);margin-bottom:.4rem}
  .si-welcome-sub{margin:0 auto;max-width:34ch;font-size:.9rem;line-height:1.6}
  .si-cue{display:none}
}

@media (prefers-reduced-motion: reduce){
  .si-layer,.si-stage,.si-stage::before,.si-spark,.si-cue,.si-welcome{animation:none!important}
  .si-layer{transform:none!important;filter:none!important}
  .si-layer.si-ring{mask:none!important;-webkit-mask:none!important;opacity:1!important}
  .si-spark{opacity:.5!important;transform:translate(-50%,-50%) scale(.55)!important}
  .si-stage::before{opacity:0!important}
  .si-cue{opacity:1!important}
  .si-welcome{opacity:1!important;transform:translateY(-50%) translateX(0)!important}
}