/* ─────────────────────────────────────────────────────────────
   Rudra Style Studio · Animated Logo
   Usage:
     <div class="rss-logo" style="--size:min(78vw,440px)">
       <div class="rss-halo"></div>
       <img class="rss-p rss-p1" src="assets/rudra-logo.webp" alt="Rudra Style Studio">
       <img class="rss-p rss-p2" src="assets/rudra-logo.webp" alt="" aria-hidden="true">
       <img class="rss-p rss-p3" src="assets/rudra-logo.webp" alt="" aria-hidden="true">
       <img class="rss-p rss-p4" src="assets/rudra-logo.webp" alt="" aria-hidden="true">
       <div class="rss-shine"></div>
       <span class="rss-star"></span>
       <span class="rss-dust d1"></span> … d6
     </div>
   The one transparent logo is layered 4×, each copy clipped to one band:
     p1 crown + monogram · p2 "RUDRA" · p3 "Style Studio" · p4 tagline
   Each band enters on its own beat, then a gold shine sweeps and the
   star twinkles forever. Bands share the same image, so seams are invisible.
   ───────────────────────────────────────────────────────────── */

.rss-logo {
  --size: 420px;
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  animation: rssFloat 7s ease-in-out 4.2s infinite;
}
.rss-p {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  will-change: clip-path, transform, opacity, filter;
}

/* Band 1 · crown, monogram, figure's head — rises out of a soft blur */
.rss-p1 {
  clip-path: inset(0 0 62% 0);
  opacity: 0; transform: scale(.86) translateY(12px); filter: blur(10px) brightness(1.6);
  animation: rssBloom 1.4s cubic-bezier(.22,1,.36,1) .25s forwards;
}
/* Band 2 · RUDRA — gilded wipe left → right */
.rss-p2 {
  clip-path: inset(38% 100% 42% 0);
  animation: rssWipe2 1.2s cubic-bezier(.65,0,.35,1) 1.15s forwards;
}
/* Band 3 · Style Studio — written in, slower, like a pen stroke */
.rss-p3 {
  clip-path: inset(58% 100% 26% 0);
  animation: rssWipe3 1.6s cubic-bezier(.45,.05,.3,1) 1.95s forwards;
}
/* Band 4 · tagline + dress hem — fades up */
.rss-p4 {
  clip-path: inset(74% 0 0 0);
  opacity: 0; transform: translateY(14px);
  animation: rssRise 1s ease-out 3s forwards;
}

@keyframes rssBloom { to { opacity: 1; transform: none; filter: blur(0) brightness(1); } }
@keyframes rssWipe2 { to { clip-path: inset(38% 0 42% 0); } }
@keyframes rssWipe3 { to { clip-path: inset(58% 0 26% 0); } }
@keyframes rssRise  { to { opacity: 1; transform: none; } }
@keyframes rssFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Gold shine — masked by the logo's own alpha so it only lights the gilt */
.rss-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,246,214,.95) 49%, rgba(255,214,120,.55) 52%, transparent 62%);
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-mask: url("rudra-logo.webp") center / contain no-repeat;
          mask: url("rudra-logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: rssShine 5.5s ease-in-out 3.6s infinite;
}
@keyframes rssShine {
  0%   { background-position: 150% 0; opacity: 1; }
  35%  { background-position: -50% 0; opacity: 1; }
  36%,100% { background-position: -50% 0; opacity: 0; }
}

/* Soft halo pulsing behind the monogram */
.rss-halo {
  position: absolute; left: 50%; top: 22%;
  width: 62%; aspect-ratio: 1; transform: translate(-36%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.32) 0%, rgba(232,160,180,.12) 45%, transparent 70%);
  filter: blur(18px);
  opacity: 0;
  animation: rssHaloIn 1.6s ease .4s forwards, rssHalo 4.5s ease-in-out 2s infinite;
}
@keyframes rssHaloIn { to { opacity: 1; } }
@keyframes rssHalo { 0%,100% { transform: translate(-36%,-50%) scale(1); } 50% { transform: translate(-36%,-50%) scale(1.12); } }

/* The star beside the monogram (sits at ~66.5% / 17.3% of the art) */
.rss-star {
  position: absolute; left: 66.4%; top: 17.1%;
  width: 9%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(0);
  background:
    radial-gradient(circle, #fff 0 8%, rgba(255,236,170,.9) 14%, transparent 40%),
    conic-gradient(from 0deg, transparent 0 40deg, rgba(255,240,190,.95) 45deg, transparent 50deg 130deg, rgba(255,240,190,.95) 135deg, transparent 140deg 220deg, rgba(255,240,190,.95) 225deg, transparent 230deg 310deg, rgba(255,240,190,.95) 315deg, transparent 320deg);
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: rssTwinkle 2.6s ease-in-out 1.6s infinite;
}
@keyframes rssTwinkle {
  0%,100% { transform: translate(-50%,-50%) scale(.35) rotate(0deg); opacity: .5; }
  45%     { transform: translate(-50%,-50%) scale(1.15) rotate(45deg); opacity: 1; }
}

/* Gold dust drifting off the dress hem */
.rss-dust {
  position: absolute; width: .6%; aspect-ratio: 1; border-radius: 50%;
  background: #f3d98a; box-shadow: 0 0 6px 2px rgba(212,175,55,.7);
  left: 22%; top: 88%; opacity: 0;
  animation: rssDust 4.8s linear infinite;
}
.rss-dust.d1 { left: 14%; animation-delay: 3.2s; }
.rss-dust.d2 { left: 21%; animation-delay: 3.9s; width: .45%; }
.rss-dust.d3 { left: 28%; animation-delay: 4.6s; }
.rss-dust.d4 { left: 35%; animation-delay: 5.3s; width: .4%; }
.rss-dust.d5 { left: 18%; animation-delay: 6.1s; width: .5%; }
.rss-dust.d6 { left: 31%; animation-delay: 6.8s; }
@keyframes rssDust {
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(40px,-120px) scale(.2); opacity: 0; }
}

/* Header-size monogram: subtle shimmer on hover */
.rss-mono { position: relative; display: inline-block; }
.rss-mono img { display: block; transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s; }
.rss-mono:hover img { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(212,175,55,.55)); }

@media (prefers-reduced-motion: reduce) {
  .rss-logo, .rss-p, .rss-shine, .rss-halo, .rss-star, .rss-dust { animation: none !important; }
  .rss-p { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rss-p1 { clip-path: inset(0 0 62% 0); } .rss-p2 { clip-path: inset(38% 0 42% 0); }
  .rss-p3 { clip-path: inset(58% 0 26% 0); } .rss-p4 { clip-path: inset(74% 0 0 0); }
}