/* sunpreetkanda.com — signature effects, ported from Atelier Nara.
   Ceremony in transitions, restraint in content, tactility in details. */

:root{
  --nara-gold:#D4AF37;
  --nara-brown:#713105;
  --nara-choc:#341100;
  --nara-cream:#F9F6ED;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ═══ faint film grain across every page ═══ */
.grain-veil{
  position:fixed;inset:-100px;z-index:2000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover:hover) and (pointer:fine){
  .grain-veil{animation:grain-shift 1.2s steps(4) infinite}
}
@keyframes grain-shift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}
  100%{transform:translate(2%,2%)}
}

/* ═══ film-grain preloader ═══ */
.preloader{
  position:fixed;inset:0;z-index:9998;background:var(--nara-cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;transition:opacity .6s var(--ease-out),visibility .6s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader .pl-grain{
  position:absolute;inset:-60px;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover:hover) and (pointer:fine){
  .preloader .pl-grain{animation:grain-shift .9s steps(3) infinite}
}
.preloader .pl-word{
  font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:#5B4030;
  animation:pl-breathe 2.2s ease-in-out infinite;
}
@keyframes pl-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.preloader .pl-bar{width:148px;height:1px;background:rgba(91,64,48,.18);overflow:hidden}
.preloader .pl-bar i{
  display:block;height:100%;width:100%;background:var(--nara-gold);
  transform:scaleX(0);transform-origin:left;animation:pl-fill 1.6s var(--ease-out) forwards;
}
@keyframes pl-fill{to{transform:scaleX(1)}}

/* ═══ transition 1: diagonal gold/brown streak sweep ═══ */
.sweep{
  position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0;
}
.sweep.run{opacity:1}
.sweep .sw-streak{
  position:absolute;top:-12%;height:124%;
  transform:translateX(-110vw) skewX(-8deg);will-change:transform;
}
.sweep.run .sw-streak{animation:sw-pass 1.9s var(--ease-out) forwards}
.sweep.run .sw-streak:nth-child(2){animation-delay:.16s}
@keyframes sw-pass{
  0%{transform:translateX(-110vw) skewX(-8deg)}
  100%{transform:translateX(110vw) skewX(-8deg)}
}

/* ═══ transition 2: layered curtain wipe with gold line ═══ */
.curtain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0}
.curtain.run{opacity:1}
.curtain .ct-layer{position:absolute;inset:0;transform:scaleX(0);transform-origin:left}
.curtain.run .ct-layer{animation:ct-wipe 2.1s var(--ease-out) forwards}
.curtain.run .ct-back{animation-delay:.12s}
.curtain .ct-line{
  position:absolute;top:0;bottom:0;width:2px;background:var(--nara-gold);
  transform:scaleY(0);transform-origin:top;
}
.curtain.run .ct-line{animation:ct-wipe 2.1s var(--ease-out) forwards}
@keyframes ct-wipe{
  0%{transform:scaleX(0);transform-origin:left}
  42%{transform:scaleX(1);transform-origin:left}
  58%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
.curtain .ct-line{animation-name:ct-line-wipe!important}
@keyframes ct-line-wipe{
  0%{transform:scaleY(0);transform-origin:top}
  42%{transform:scaleY(1);transform-origin:top}
  58%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ═══ transition 3: soft fade (page enter) ═══ */
.page-enter{animation:page-in .8s var(--ease-out) both}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ═══ inverted custom cursor ═══ */
.nara-cursor{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  width:12px;height:12px;border-radius:50%;
  background:var(--nara-gold);mix-blend-mode:difference;
  border:1px solid rgba(212,175,55,.95);
  opacity:0;transition:opacity .25s,background-color .25s,border .25s,width .25s,height .25s;
  will-change:transform;
}
.nara-cursor.on{opacity:1}
.nara-cursor.text{
  background:rgba(212,175,55,.32);border:1px solid rgba(212,175,55,.9);
  width:34px;height:34px;
}
html.custom-cursor-active, html.custom-cursor-active a, html.custom-cursor-active button{
  cursor:none;
}
@media (hover:none),(pointer:coarse){.nara-cursor{display:none}}

/* ═══ image magnifier lens ═══ */
.lens-wrap{position:relative;overflow:hidden;display:block}
.lens-disc{
  position:absolute;width:150px;height:150px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(212,175,55,.85);
  box-shadow:0 8px 30px rgba(52,17,0,.25), inset 0 0 0 1px rgba(249,246,237,.35);
  background-repeat:no-repeat;opacity:0;transform:scale(.85);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);
  z-index:5;
}
.lens-wrap:hover .lens-disc{opacity:1;transform:scale(1)}
@media (hover:none),(pointer:coarse){.lens-disc{display:none}}

/* ═══ lightweight scroll reveals ═══ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .preloader,.sweep,.curtain,.nara-cursor,.lens-disc{display:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .page-enter{animation:none}
}