/* Rasht Neon — premium motion/UI layer
   Keeps the existing visual language, adds depth and micro-interactions only. */
:root{
  --rn-motion-cyan:#55f3ff;
  --rn-motion-pink:#ff58d3;
  --rn-motion-violet:#a875ff;
  --rn-motion-green:#67f2b7;
  --rn-motion-ease:cubic-bezier(.2,.75,.2,1);
  --rn-pointer-x:50vw;
  --rn-pointer-y:28vh;
}

html{scroll-padding-top:92px}
body{position:relative;isolation:isolate;overflow-x:hidden}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(520px circle at var(--rn-pointer-x) var(--rn-pointer-y),rgba(74,238,255,.075),transparent 58%),
    radial-gradient(420px circle at calc(var(--rn-pointer-x) + 18vw) calc(var(--rn-pointer-y) + 18vh),rgba(255,88,211,.045),transparent 62%);
  transition:background .18s linear;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%);
}

/* Scroll progress */
.rn-scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:9999;
  pointer-events:none;
  transform-origin:right center;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--rn-motion-pink),var(--rn-motion-violet),var(--rn-motion-cyan),var(--rn-motion-green));
  box-shadow:0 0 12px rgba(85,243,255,.65),0 0 24px rgba(255,88,211,.28);
}

/* Header glass + moving neon hairline */
.site-header{
  background:linear-gradient(180deg,rgba(6,9,14,.92),rgba(6,9,14,.76));
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  border-bottom-color:rgba(255,255,255,.055);
}
.site-header::after{
  content:"";
  position:absolute;
  inset:auto 8% -1px 8%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--rn-motion-cyan),var(--rn-motion-violet),var(--rn-motion-pink),transparent);
  background-size:220% 100%;
  opacity:.55;
  animation:rn-header-flow 8s linear infinite;
}
@keyframes rn-header-flow{to{background-position:-220% 0}}
.brand{transition:transform .35s var(--rn-motion-ease),filter .35s ease}
.brand:hover{transform:translateY(-1px) scale(1.015);filter:drop-shadow(0 0 12px rgba(85,243,255,.2))}
.brand-logo-crop img,.brand-wordmark{transition:transform .45s var(--rn-motion-ease),filter .45s ease}
.brand:hover .brand-logo-crop img{transform:rotate(-3deg) scale(1.045)}

/* Navigation micro-interactions */
.main-nav>a,.main-nav summary{
  position:relative;
  transition:color .22s ease,transform .22s var(--rn-motion-ease),text-shadow .22s ease;
}
.main-nav>a::after,.main-nav summary::after{
  content:"";
  position:absolute;
  left:14%;right:14%;bottom:-7px;
  height:1px;
  transform:scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--rn-motion-cyan),transparent);
  box-shadow:0 0 9px rgba(85,243,255,.5);
  transition:transform .28s var(--rn-motion-ease);
}
.main-nav>a:hover,.main-nav summary:hover{transform:translateY(-1px);text-shadow:0 0 14px rgba(85,243,255,.25)}
.main-nav>a:hover::after,.main-nav summary:hover::after{transform:scaleX(1)}
.nav-group-menu{
  transform-origin:top center;
  animation:rn-menu-in .22s var(--rn-motion-ease) both;
  box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px rgba(85,243,255,.04),inset 0 1px rgba(255,255,255,.035);
}
@keyframes rn-menu-in{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}

/* Buttons: crisp light sweep without heavy glow */
.btn,.rn-hero-cta,.pricing-link,.rn-quick-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before,.rn-hero-cta::before,.pricing-link::before{
  content:"";
  position:absolute;
  top:-60%;bottom:-60%;left:-42%;
  width:30%;
  z-index:-1;
  transform:skewX(-20deg) translateX(-260%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:transform .7s var(--rn-motion-ease);
}
.btn:hover::before,.rn-hero-cta:hover::before,.pricing-link:hover::before{transform:skewX(-20deg) translateX(560%)}
.btn,.rn-hero-cta,.pricing-link{transition:transform .22s var(--rn-motion-ease),box-shadow .25s ease,border-color .25s ease,filter .25s ease}
.btn:hover,.rn-hero-cta:hover,.pricing-link:hover{transform:translateY(-2px)}
.btn:active,.rn-hero-cta:active,.pricing-link:active{transform:translateY(0) scale(.985)}
.btn.primary:hover{box-shadow:0 14px 38px rgba(52,229,255,.22),0 0 28px rgba(52,229,255,.12);filter:saturate(1.08)}

/* Premium card depth. JS feeds the tiny rotate values through CSS variables. */
.rn-motion-card{
  --rn-rx:0deg;
  --rn-ry:0deg;
  --rn-card-x:50%;
  --rn-card-y:50%;
  transform:perspective(900px) rotateX(var(--rn-rx)) rotateY(var(--rn-ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .38s var(--rn-motion-ease),border-color .28s ease,box-shadow .3s ease;
  will-change:transform;
}
.rn-motion-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(340px circle at var(--rn-card-x) var(--rn-card-y),rgba(98,238,255,.115),transparent 62%);
  transition:opacity .25s ease;
}
.rn-motion-card:hover::after{opacity:1}
.rn-motion-card>*{position:relative;z-index:1}
.rn-service-card.rn-motion-card:hover,.design-card.rn-motion-card:hover,.portfolio-card.rn-motion-card:hover,.rn-quick-card.rn-motion-card:hover{
  border-color:rgba(95,238,255,.34);
  box-shadow:0 26px 70px rgba(0,0,0,.3),0 0 30px rgba(61,223,255,.055),inset 0 1px rgba(255,255,255,.035);
}

/* Image cards feel more physical */
.rn-motion-card img{transition:transform .65s var(--rn-motion-ease),filter .45s ease}
.rn-service-card:hover img,.rn-photo-design:hover img,.portfolio-card:hover img,.rn-quick-card:hover img{transform:scale(1.035);filter:saturate(1.06) contrast(1.03)}

/* Hero ambient motion */
.rn-home-hero,.page-hero{position:relative;isolation:isolate}
.rn-home-hero::before,.page-hero::before{
  content:"";
  position:absolute;
  width:min(58vw,760px);aspect-ratio:1;
  top:-42%;left:-12%;
  z-index:-1;
  border-radius:50%;
  background:conic-gradient(from 90deg,rgba(85,243,255,.12),rgba(168,117,255,.06),rgba(255,88,211,.10),rgba(85,243,255,.12));
  filter:blur(70px);
  animation:rn-ambient-orbit 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes rn-ambient-orbit{0%{transform:translate3d(-2%,0,0) rotate(-8deg) scale(.92)}100%{transform:translate3d(16%,10%,0) rotate(24deg) scale(1.08)}}
.rn-home-photo{transition:transform .6s var(--rn-motion-ease),box-shadow .6s ease}
.rn-home-photo:hover{transform:translateY(-5px) rotate(.35deg);box-shadow:0 32px 90px rgba(0,0,0,.42),0 0 40px rgba(255,88,211,.08)}
.rn-mini-signature,.eyebrow{transition:letter-spacing .35s ease,text-shadow .35s ease}
.rn-home-copy:hover .rn-mini-signature{letter-spacing:.04em;text-shadow:0 0 18px rgba(255,88,211,.22)}

/* Cinematic home hero boot sequence */
.rn-home-hero.rn-cinematic-hero{overflow:hidden;--rn-hero-px:0px;--rn-hero-py:0px}
.rn-home-hero.rn-cinematic-hero .rn-home-copy>*{animation:rn-hero-copy-in .78s var(--rn-motion-ease) both}
.rn-home-hero.rn-cinematic-hero .rn-mini-signature{animation-delay:.08s}
.rn-home-hero.rn-cinematic-hero .eyebrow{animation-delay:.16s}
.rn-home-hero.rn-cinematic-hero h1{animation-delay:.24s}
.rn-home-hero.rn-cinematic-hero .rn-home-copy>p{animation-delay:.36s}
.rn-home-hero.rn-cinematic-hero .rn-hero-cta{animation-delay:.48s}
@keyframes rn-hero-copy-in{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
.rn-home-hero.rn-cinematic-hero .rn-persian-wordmark-live{animation:rn-neon-ignite 1.45s .35s both}
@keyframes rn-neon-ignite{
  0%{opacity:.16;filter:brightness(.35);text-shadow:none}
  12%{opacity:.72;filter:brightness(1.5)}
  18%{opacity:.25;filter:brightness(.55)}
  29%{opacity:1;filter:brightness(1.18);text-shadow:0 0 7px rgba(255,255,255,.58),0 0 22px rgba(85,243,255,.52),0 0 45px rgba(255,88,211,.18)}
  35%{opacity:.6}
  43%,100%{opacity:1;filter:brightness(1);text-shadow:0 0 6px rgba(255,255,255,.28),0 0 18px rgba(85,243,255,.32)}
}
.rn-home-hero.rn-cinematic-hero .rn-home-photo{
  transform:translate3d(var(--rn-hero-px),var(--rn-hero-py),0) rotate(.25deg);
  transition:transform .22s linear,box-shadow .5s ease;
}
.rn-home-hero.rn-cinematic-hero .rn-home-photo::before{
  content:"";position:absolute;inset:-22%;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.14) 48%,transparent 60%);
  transform:translateX(-65%) rotate(4deg);
  animation:rn-photo-scan 6.8s 1.1s ease-in-out infinite;
}
@keyframes rn-photo-scan{0%,58%{transform:translateX(-68%) rotate(4deg)}78%,100%{transform:translateX(68%) rotate(4deg)}}
.rn-hero-energy{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.rn-hero-energy>i{position:absolute;display:block;height:1px;width:34vw;min-width:260px;opacity:.16;filter:drop-shadow(0 0 8px currentColor);background:linear-gradient(90deg,transparent,currentColor,transparent);transform:rotate(-18deg);animation:rn-energy-drift 9s ease-in-out infinite alternate}
.rn-hero-energy>i:nth-child(1){color:var(--rn-motion-cyan);top:26%;left:-8%;animation-delay:-2s}
.rn-hero-energy>i:nth-child(2){color:var(--rn-motion-pink);top:58%;right:-8%;transform:rotate(17deg);animation-delay:-5s}
.rn-hero-energy>i:nth-child(3){color:var(--rn-motion-violet);top:76%;left:18%;width:26vw;animation-delay:-7s}
@keyframes rn-energy-drift{from{translate:-4% 0;opacity:.08}to{translate:9% -10px;opacity:.24}}
.rn-hero-energy>span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--rn-motion-cyan);box-shadow:0 0 12px currentColor;opacity:.28;animation:rn-dust-float 7s ease-in-out infinite alternate}
@keyframes rn-dust-float{from{transform:translate3d(0,0,0) scale(.7);opacity:.12}to{transform:translate3d(14px,-24px,0) scale(1.2);opacity:.5}}
.rn-magnetic{will-change:transform}
.rn-magnetic.rn-magnetic-live{transition:transform .14s linear,box-shadow .25s ease}

/* Form focus = neon precision, not generic browser glow */
.field input,.field select,.field textarea,.rn-design-search input{
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}
.field input:focus,.field select:focus,.field textarea:focus,.rn-design-search input:focus{
  outline:none;
  border-color:rgba(85,243,255,.58);
  background:#090d13;
  box-shadow:0 0 0 3px rgba(85,243,255,.07),0 8px 24px rgba(0,0,0,.14);
}

/* Scroll reveal. Applied only after JS adds .rn-motion-ready, preventing no-JS invisibility. */
.rn-motion-ready .rn-reveal{
  opacity:0;
  transform:translateY(22px) scale(.988);
  filter:blur(4px);
  transition:opacity .72s var(--rn-motion-ease),transform .72s var(--rn-motion-ease),filter .72s ease;
  transition-delay:var(--rn-reveal-delay,0ms);
}
.rn-motion-ready .rn-reveal.rn-visible{opacity:1;transform:none;filter:none}
.rn-motion-ready .rn-reveal-side{transform:translateX(22px) scale(.988)}
.rn-motion-ready .rn-reveal-side.rn-visible{transform:none}

/* Tiny press ripple injected by external JS */
.rn-ripple-dot{
  position:absolute;
  z-index:5;
  width:12px;height:12px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);
  animation:rn-ripple .58s ease-out forwards;
}
@keyframes rn-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(12)}}

/* Mobile: retain polish, drop expensive effects. */
@media (max-width:760px){
  body::after{opacity:.08;background-size:34px 34px}
  .site-header::after{inset-inline:4%}
  .rn-home-hero::before,.page-hero::before{width:90vw;filter:blur(85px);opacity:.7}
  .rn-motion-card{transform:none!important}
  .rn-motion-card::after{display:none}
  .main-nav>a::after,.main-nav summary::after{display:none}
  .rn-home-hero.rn-cinematic-hero .rn-home-photo{transform:none!important;transition:none}
  .rn-home-hero.rn-cinematic-hero .rn-home-photo::before,.rn-hero-energy>span{display:none}
  .rn-hero-energy>i{opacity:.08;width:70vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  body::before{display:none}
  .rn-motion-ready .rn-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .rn-motion-card{transform:none!important}
  .rn-scroll-progress{display:none}
  .rn-hero-energy{display:none}
}