/* Rekha's Kitchen - opening intro */
.rk-intro{
  --rk-cream:#FBF5EC;--rk-brown:#5A2E14;--rk-tan:#C9A97A;--rk-green:#4CA362;
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.rk-intro.is-hidden{display:none}
html.rk-intro-lock,html.rk-intro-lock body{overflow:hidden}

.rk-intro__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 50% 48%,#FFFDF9 0%,rgba(255,253,249,0) 70%),
    radial-gradient(90% 70% at 100% 0%,rgba(201,169,122,.22),transparent 60%),
    radial-gradient(80% 70% at 0% 100%,rgba(76,163,98,.14),transparent 60%),
    var(--rk-cream);
}
.rk-intro__bg::after{ /* soft paper grain */
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(90,46,20,.08) 1px,transparent 1px);
  background-size:22px 22px;
}

.rk-intro__stage{position:relative;width:min(92vw,980px);height:min(86vh,720px)}

/* centre: logo */
.rk-intro__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64vw,400px);text-align:center}
.rk-intro__logo{
  display:block;width:100%;height:auto;margin:0 auto;
  -webkit-mask:conic-gradient(from -90deg at 47% 52%,#000 var(--sweep),transparent calc(var(--sweep) + .1deg));
          mask:conic-gradient(from -90deg at 47% 52%,#000 var(--sweep),transparent calc(var(--sweep) + .1deg));
  --sweep:0deg;
  animation:rk-sweep 1.15s cubic-bezier(.65,0,.35,1) .45s forwards,rk-pop 1.3s cubic-bezier(.2,.9,.25,1) .35s both;
}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rk-sweep{to{--sweep:360deg}}
@keyframes rk-pop{from{transform:scale(.86) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}

.rk-intro__mark{position:relative}

/* steam above the chef hat */
.rk-intro__steam{position:absolute;right:13%;top:-14%;width:60px;height:70px;pointer-events:none}
.rk-intro__steam i{
  position:absolute;bottom:0;width:6px;height:46px;border-radius:6px;
  background:linear-gradient(to top,rgba(90,46,20,.28),rgba(90,46,20,0));
  filter:blur(1.5px);opacity:0;animation:rk-steam 2.2s ease-in-out 1.3s infinite;
}
.rk-intro__steam i:nth-child(1){left:8px}
.rk-intro__steam i:nth-child(2){left:26px;animation-delay:1.6s}
.rk-intro__steam i:nth-child(3){left:44px;animation-delay:1.9s}
@keyframes rk-steam{
  0%{opacity:0;transform:translateY(10px) scaleY(.6) skewX(0)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(-30px) scaleY(1.1) skewX(12deg)}
}

/* tagline */
.rk-intro__tag{margin:18px 0 0;color:var(--rk-brown);font-size:clamp(15px,1.9vw,19px);font-weight:500;letter-spacing:.02em}
.rk-intro__tag span{display:inline-block;opacity:0;transform:translateY(12px);animation:rk-word .5s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:calc(1.45s + var(--i) * 70ms)}
@keyframes rk-word{to{opacity:1;transform:none}}

/* food photos orbiting in */
.rk-intro__dish{
  position:absolute;margin:0;width:clamp(86px,13vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:5px solid #fff;box-shadow:0 18px 40px rgba(90,46,20,.22);
  opacity:0;animation:rk-dish-in .9s cubic-bezier(.2,.9,.25,1.15) forwards,rk-float 4s ease-in-out infinite alternate;
}
.rk-intro__dish img{width:100%;height:100%;object-fit:cover;display:block}
.rk-intro__dish--1{left:4%;top:8%;--fx:-160px;--fy:-120px;--r:-14deg;animation-delay:.1s,1.1s}
.rk-intro__dish--2{right:5%;top:6%;--fx:160px;--fy:-130px;--r:12deg;animation-delay:.22s,1.3s}
.rk-intro__dish--3{right:0%;top:44%;--fx:200px;--fy:0px;--r:10deg;animation-delay:.34s,1.2s}
.rk-intro__dish--4{right:9%;bottom:4%;--fx:150px;--fy:140px;--r:-8deg;animation-delay:.46s,1.4s}
.rk-intro__dish--5{left:8%;bottom:5%;--fx:-150px;--fy:150px;--r:9deg;animation-delay:.58s,1.25s}
.rk-intro__dish--6{left:0%;top:44%;--fx:-200px;--fy:0px;--r:-10deg;animation-delay:.7s,1.35s}
@keyframes rk-dish-in{
  from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(calc(var(--r) * 3)) scale(.5)}
  to{opacity:1;transform:rotate(var(--r))}
}
@keyframes rk-float{from{translate:0 0}to{translate:0 -10px}}

/* skip */
.rk-intro__skip{
  position:absolute;right:22px;bottom:22px;z-index:2;cursor:pointer;
  font:600 14px/1 inherit;color:var(--rk-brown);background:rgba(255,255,255,.7);
  border:1px solid rgba(90,46,20,.25);border-radius:99px;padding:10px 18px;
  opacity:0;animation:rk-word .4s ease .8s forwards;
}
.rk-intro__skip:hover{background:#fff}

/* exit: dishes scatter, logo lifts, curtain slides up */
.rk-intro.is-leaving .rk-intro__dish{animation:rk-dish-out .6s cubic-bezier(.5,0,.75,0) forwards}
.rk-intro.is-leaving .rk-intro__center{animation:rk-center-out .7s cubic-bezier(.5,0,.75,0) forwards}
.rk-intro.is-leaving .rk-intro__skip{opacity:0;transition:opacity .2s}
.rk-intro.is-leaving{animation:rk-curtain .85s cubic-bezier(.76,0,.24,1) .35s forwards}
@keyframes rk-dish-out{to{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(calc(var(--r) * -2)) scale(.6)}}
@keyframes rk-center-out{to{opacity:0;transform:translate(-50%,-62%) scale(1.06)}}
@keyframes rk-curtain{
  0%{clip-path:inset(0 0 0 0 round 0 0 0 0)}
  100%{clip-path:inset(0 0 100% 0 round 0 0 50% 50%)}
}

@media (max-width:640px){
  .rk-intro__stage{height:78vh}
  .rk-intro__dish--3,.rk-intro__dish--6{display:none}
  .rk-intro__dish--1{left:2%;top:4%}.rk-intro__dish--2{right:2%;top:6%}
  .rk-intro__dish--4{right:4%;bottom:2%}.rk-intro__dish--5{left:4%;bottom:4%}
}
@media (prefers-reduced-motion:reduce){.rk-intro{display:none!important}}