/* ============================================================
   SINDH SWEETS — CinematicPreloader
   "Opening a premium box of mithai": material → SINDH →
   THE INDIAN TASTE → curtain reveal into the sweet-counter intro.
   GPU-friendly only: transform / opacity / clip-path.
   ============================================================ */
.preloader{position:fixed;inset:0;z-index:110;overflow:hidden;background:var(--ivory)}
.preloader[hidden]{display:none}

/* --- Transition panels (the "wrapper" that splits open) --- */
.pl-panel{position:absolute;top:0;bottom:0;width:51%;background:var(--ivory);z-index:1}
.pl-panel::after{content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(rgba(43,26,18,.055) 1px,transparent 1px);background-size:22px 22px}
.pl-left{left:0;border-right:1px solid transparent}
.pl-right{right:0}

/* --- Center composition --- */
.pl-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.pl-kicker{font-size:10px;letter-spacing:.42em;font-weight:800;color:var(--saffron-deep);margin:0 0 18px;opacity:0}

/* thin ornamental rule that draws itself, then births the word */
.pl-rule{width:min(320px,58vw);height:14px;position:relative;margin-bottom:10px}
.pl-rule span{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--muted);
  transform:scaleX(0);transform-origin:center}
.pl-rule i{position:absolute;left:50%;top:2px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg) scale(0);
  border:1px solid var(--maroon);background:var(--ivory);font-style:normal}

.pl-word{font-family:var(--serif);font-weight:560;line-height:.92;letter-spacing:.01em;
  font-size:clamp(64px,14vw,168px);margin:0;color:var(--cocoa);
  clip-path:inset(0 0 100% 0);opacity:0}
.pl-word .ch{display:inline-block;transform:translateY(60%);opacity:0}
.pl-tag{margin:14px 0 0;font-size:11px;letter-spacing:.5em;font-weight:800;color:var(--maroon);
  text-indent:.5em;opacity:0}

/* textile band sweep — one restrained cultural gesture */
.pl-band{position:absolute;left:0;right:0;top:50%;height:54px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,rgba(201,106,31,.16) 30%,rgba(201,106,31,.16) 70%,transparent);
  border-top:1px solid rgba(201,106,31,.4);border-bottom:1px solid rgba(201,106,31,.4);
  transform:scaleX(0);opacity:0;pointer-events:none}

/* seal medallion — real mithai photo inside a packaging-stamp ring */
.pl-seal{position:relative;width:104px;height:104px;margin-top:26px;opacity:0}
.pl-seal svg.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.pl-seal svg.ring circle{fill:none;stroke:var(--maroon);stroke-width:1}
.pl-seal svg.ring .txt{fill:var(--maroon);font-size:8.2px;letter-spacing:.24em;font-weight:800;font-family:var(--sans)}
.pl-medal{position:absolute;inset:16px;border-radius:50%;overflow:hidden;background:var(--pista);
  clip-path:circle(0% at 50% 50%);box-shadow:var(--shadow)}
.pl-medal .art{position:absolute;inset:0}
.pl-medal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-medal b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:34px;color:var(--ivory)}

/* --- Packaging-frame ornament (subtle sweet-box linework) --- */
.pl-frame{position:absolute;inset:18px;z-index:2;pointer-events:none;opacity:0}
.pl-frame rect{fill:none;stroke:var(--muted);stroke-width:1;opacity:.7}
.pl-corner{fill:none;stroke:var(--maroon);stroke-width:1.4}
.pl-dot{fill:var(--saffron)}
.pl-foot{position:absolute;bottom:26px;left:0;right:0;z-index:2;text-align:center;
  font-size:10px;letter-spacing:.34em;font-weight:800;color:var(--muted);opacity:0}
.pl-skip{position:absolute;bottom:22px;right:26px;z-index:3;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:10px;letter-spacing:.24em;font-weight:800;color:var(--muted);opacity:0}

/* no-JS / no-GSAP safety: gentle CSS fade so nobody is ever trapped */
@keyframes plSafetyIn{to{opacity:1}}
@keyframes plSafetyOut{to{opacity:0;visibility:hidden}}

/* --- Mobile art direction: quieter ornament, same hierarchy --- */
@media (max-width:640px){
  .pl-frame{inset:10px}
  .pl-frame .pl-corner,.pl-frame .pl-dot{display:none}
  .pl-seal{width:84px;height:84px;margin-top:20px}
  .pl-rule{width:min(220px,60vw)}
  .pl-foot{display:none}
}

/* --- Reduced motion: branding preserved, movement removed --- */
@media (prefers-reduced-motion:reduce){
  .preloader *{animation-duration:.01ms!important}
  .pl-kicker,.pl-tag,.pl-seal,.pl-foot{opacity:1!important}
  .pl-word{clip-path:none!important;opacity:1!important}
  .pl-word .ch{transform:none!important;opacity:1!important}
  .pl-rule span{transform:none!important}
  .pl-rule i{transform:translateX(-50%) rotate(45deg)!important}
  .pl-frame{opacity:.6!important}
  .pl-band,.pl-skip{display:none!important}
}