/* ============================================================
   Hotel UTES — «премиум»-эффекты (перенос идей React Bits / 21st.dev
   на чистый CSS/JS, без React и сборки).
   ============================================================ */

/* ---------- Aurora: живой свет на Hero (React Bits «Aurora») ---------- */
.hero__aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;opacity:.5}
.hero__aurora::before,.hero__aurora::after{content:"";position:absolute;border-radius:50%;
  width:62vw;height:62vw;filter:blur(90px);will-change:transform}
.hero__aurora::before{background:radial-gradient(circle,rgba(31,134,201,.95),transparent 60%);
  top:-12%;left:-8%;animation:aurora-a 17s ease-in-out infinite alternate}
.hero__aurora::after{background:radial-gradient(circle,rgba(245,197,24,.7),transparent 60%);
  bottom:-18%;right:-12%;animation:aurora-b 21s ease-in-out infinite alternate}
@keyframes aurora-a{from{transform:translate(0,0) scale(1)}to{transform:translate(18vw,12vh) scale(1.35)}}
@keyframes aurora-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-14vw,-9vh) scale(1.45)}}

/* ---------- Split-text: буквы заголовка взлетают (React Bits «SplitText») ---------- */
.hero__title .char{display:inline-block;opacity:0;transform:translateY(48px) rotate(6deg);
  animation:charIn .8s var(--ease) forwards;animation-delay:calc(var(--i)*.05s)}
.hero__title .char--space{width:.32em}
@keyframes charIn{to{opacity:1;transform:none}}

/* ---------- Shiny text: золотой блик по UTES (React Bits «ShinyText») ---------- */
.hero__title .glow{
  display:inline-block;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(110deg,#f5c518 0%,#f5c518 42%,#fffbe6 50%,#f5c518 58%,#f5c518 100%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;
  opacity:0;animation:charIn .9s var(--ease) .4s forwards, shine 5.5s linear 1.4s infinite;
}
@keyframes shine{0%{background-position:130% 0}100%{background-position:-130% 0}}

/* ---------- Shimmer на золотых кнопках (React Bits «StarBorder/Shine») ---------- */
.btn--gold{position:relative;overflow:hidden}
.btn--gold::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease)}
.btn--gold:hover::after{left:140%}

/* ---------- Tilt: 3D-наклон карточек (React Bits «TiltedCard») ---------- */
.room,.gallery__item{transform-style:preserve-3d;will-change:transform}
.tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 45%);
  transition:opacity .3s;z-index:3}
.room .tilt-glare{border-radius:var(--r)}

/* ---------- Click-spark (React Bits «ClickSpark») ---------- */
#spark-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* ---------- Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__aurora::before,.hero__aurora::after{animation:none}
  .hero__title .char,.hero__title .glow{animation:none;opacity:1;transform:none}
}