/* INTRO — butterfly + "Enter the Garden" screen and the gold reveal */

#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1s,visibility 1s}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
#intro .hero{position:absolute;inset:0;background:url(../assets/hero.webp) center/cover no-repeat;transition:transform 2.8s cubic-bezier(.2,.8,.2,1);will-change:transform}
#intro.go .hero{transform:scale(1.15)}
#intro .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,247,240,.28),transparent 32%,transparent 60%,rgba(70,52,30,.36))}
.sun{position:absolute;top:-10%;left:50%;width:60vh;height:60vh;margin-left:-30vh;border-radius:50%;background:radial-gradient(circle,rgba(255,246,220,.7),rgba(255,236,196,.3) 40%,transparent 70%);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06);opacity:.8}}

.intro-top,.intro-bottom{position:absolute;left:0;right:0;text-align:center;padding:0 24px;transition:opacity .8s}
.intro-top{top:7vh}
.intro-bottom{bottom:7vh;color:#fdf6ea;display:flex;flex-direction:column;align-items:center;gap:22px}
#intro.go .intro-top,#intro.go .intro-bottom{opacity:0}
.intro-top .arabic{font-size:clamp(30px,5vw,54px);line-height:1.6;color:#6e4d12;text-shadow:0 0 14px #fff,0 0 28px rgba(255,255,255,.9)}
.intro-top p{margin:12px 0 0;font-style:italic;font-weight:600;color:#4a3a22;font-size:clamp(15px,2vw,19px);text-shadow:0 0 10px #fff,0 0 20px rgba(255,255,255,.9)}
.intro-bottom .script{font:clamp(30px,5vw,52px)/1.15 var(--font-script);color:#ffe3ae;text-shadow:0 2px 6px rgba(40,28,14,.7),0 2px 22px rgba(40,28,14,.6)}
.intro-bottom .script.tamil{font:clamp(20px,3.4vw,34px)/1.4 var(--font-tamil)}
.enter{border:1px solid rgba(214,183,124,.75);border-radius:999px;padding:14px 30px;background:rgba(50,38,23,.9);color:var(--champagne);text-transform:uppercase;letter-spacing:.22em;display:flex;gap:16px;align-items:center}
.hint{font-size:17px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(40,28,14,.8)}

.bfly{position:absolute;left:50%;top:50%;width:168px;height:168px;margin:-84px 0 0 -84px;transition:transform 1.35s cubic-bezier(.2,.75,.2,1),opacity 1.1s;will-change:transform}
.bfly button{display:block;width:100%;height:100%;border:0;background:none;padding:0;animation:float 3.5s ease-in-out infinite}
.bfly img{width:100%;height:100%;object-fit:contain;display:block;animation:flap .9s ease-in-out infinite}
.bfly.enter-go{transform:translateY(-4vh) scale(.58);opacity:.15}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes flap{50%{transform:scaleX(.88) rotate(-2deg)}}

#gold{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity 1.8s;background:radial-gradient(circle at 50% 48%,rgba(255,250,222,.98) 0,rgba(255,225,157,.82) 18%,rgba(214,183,124,.42) 38%,rgba(169,128,63,.12) 58%,transparent 76%)}
#intro.go #gold{opacity:1}
#gold .orn{position:absolute;left:50%;top:48%;width:min(62vw,520px);aspect-ratio:1;border:1px solid rgba(255,236,176,.78);border-radius:50%;box-shadow:0 0 35px rgba(255,224,142,.6);opacity:0;transform:translate(-50%,-50%) scale(.45);transition:transform 2.4s,opacity 1.5s}
#intro.go .orn{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}
.pt{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff0b6;left:50%;top:48%;opacity:0}
#intro.go .pt{animation:swirl 2.6s ease-out forwards}
@keyframes swirl{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));opacity:0}}