/* Tharu logo presentation. The logo image is NEVER rotated, filtered, cropped or redrawn:
   only the decorative ring (a sibling element) rotates. All motion is pure CSS.
   Structure: .tharu-logo-wrapper > .tharu-logo-glow + .tharu-logo-ring + img.tharu-logo-image
   Everything (rings, glow) lives INSIDE the wrapper's box, so nothing overflows or shifts layout. */
:root{
  --logo-gold:#c9962d;--logo-gold-l:#ecd08a;--logo-red:#8e2a1c;--logo-brown:#3a1d12;
}
.tharu-logo-wrapper{
  --s:120px;          /* total size incl. rings */
  --pad:9%;           /* space between wrapper edge and the artwork */
  --ring:3px;         /* ring thickness */
  --glow-a:.30;       /* glow strength (animated) */
  position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);aspect-ratio:1/1;
  border-radius:50%;contain:layout style;
  transition:scale .4s cubic-bezier(.2,.7,.2,1),--glow-a .4s ease;
}
.tharu-logo-image{
  position:absolute;inset:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - 2 * var(--pad));
  border-radius:50%;object-fit:contain;display:block;background:#fff;
  box-shadow:0 8px 22px rgba(58,29,18,.28),0 0 0 1px rgba(201,150,45,.55);
  transition:box-shadow .4s ease;
}
/* soft golden glow behind everything */
.tharu-logo-glow{
  position:absolute;inset:2%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 calc(var(--s) * .16) calc(var(--s) * .015) rgba(236,208,138,var(--glow-a)),0 0 calc(var(--s) * .34) rgba(201,150,45,calc(var(--glow-a) * .55));
  transition:box-shadow .4s ease;
}
/* rotating thin ring: gold / deep red / dark brown (conic gradient, masked to a thin band) */
.tharu-logo-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,var(--logo-gold) 0deg,var(--logo-red) 55deg,var(--logo-brown) 100deg,var(--logo-gold-l) 150deg,var(--logo-gold) 200deg,var(--logo-red) 255deg,var(--logo-brown) 300deg,var(--logo-gold-l) 335deg,var(--logo-gold) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring) - 1px),#000 calc(100% - var(--ring)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring) - 1px),#000 calc(100% - var(--ring)));
  animation:tharu-border-rotate 28s linear infinite;
  will-change:transform;
}
/* second decorative ring: static beaded gold band, evokes the traditional border (pure gradients) */
.tharu-logo-wrapper::before{
  content:"";position:absolute;inset:calc(var(--ring) + 3%);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(var(--logo-gold) 0deg 1.6deg,transparent 1.6deg 6deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  opacity:.75;
}
/* thin solid gold hairline just outside the artwork */
.tharu-logo-wrapper::after{
  content:"";position:absolute;inset:calc(var(--pad) - 2.5%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(201,150,45,.8);
}
.tharu-logo-glow{animation:tharu-border-glow 4s ease-in-out infinite}

/* hover: gentle enlarge + stronger glow (no layout shift: `scale` does not affect flow) */
@media (hover:hover){
  .tharu-logo-wrapper:hover{scale:1.03}
  .tharu-logo-wrapper:hover{--glow-a:.6}
  .tharu-logo-wrapper:hover .tharu-logo-image{box-shadow:0 12px 30px rgba(58,29,18,.34),0 0 0 1px rgba(201,150,45,.85)}
}

/* sizes / variants */
.tharu-logo-wrapper[data-variant=hero]{--s:min(440px,78vw);--ring:4px;animation:tharu-logo-float 5s ease-in-out infinite}
.tharu-logo-wrapper[data-variant=about]{--s:min(280px,70vw);--ring:3px}
.tharu-logo-wrapper[data-variant=login]{--s:104px;--ring:2px}

/* navbar: compact, simple gold outline, no rings, no float, subtle hover */
.tharu-logo-wrapper[data-variant=nav]{--s:52px;--pad:0%}
.tharu-logo-wrapper[data-variant=nav] .tharu-logo-ring,
.tharu-logo-wrapper[data-variant=nav] .tharu-logo-glow,
.tharu-logo-wrapper[data-variant=nav]::before,
.tharu-logo-wrapper[data-variant=nav]::after{display:none}
.tharu-logo-wrapper[data-variant=nav] .tharu-logo-image{box-shadow:0 0 0 2px var(--logo-gold),0 2px 8px rgba(58,29,18,.25)}
@media (hover:hover){.tharu-logo-wrapper[data-variant=nav]:hover{scale:1.05}}

/* footer / sidebar: static ring, minimal constant glow, no animation */
.tharu-logo-wrapper[data-variant=footer],.tharu-logo-wrapper[data-variant=side]{--s:56px;--pad:11%;--ring:2px;--glow-a:.18}
.tharu-logo-wrapper[data-variant=footer] .tharu-logo-ring,.tharu-logo-wrapper[data-variant=footer] .tharu-logo-glow,
.tharu-logo-wrapper[data-variant=side] .tharu-logo-ring,.tharu-logo-wrapper[data-variant=side] .tharu-logo-glow{animation:none}
.tharu-logo-wrapper[data-variant=footer]::before,.tharu-logo-wrapper[data-variant=side]::before{display:none}
.tharu-logo-wrapper[data-variant=side]{--s:44px}

/* tablet: reduced glow, scaled logo */
@media (max-width:1000px){
  .tharu-logo-wrapper{--glow-a:.2}
  .tharu-logo-wrapper[data-variant=hero]{--s:min(340px,72vw)}
}
/* mobile: smaller, thinner ring, lighter animation (slower rotation, no float) */
@media (max-width:560px){
  .tharu-logo-wrapper[data-variant=hero]{--s:min(260px,74vw);--ring:2px;animation:none}
  .tharu-logo-wrapper[data-variant=hero] .tharu-logo-ring{animation-duration:36s}
  .tharu-logo-wrapper[data-variant=about]{--s:200px;--ring:2px}
  .tharu-logo-wrapper[data-variant=nav]{--s:44px}
}

/* admin-controlled intensity (Website Settings → Logo effect) */
html[data-logo-effect=simple] .tharu-logo-ring,
html[data-logo-effect=simple] .tharu-logo-glow,
html[data-logo-effect=simple] .tharu-logo-wrapper{animation:none}
html[data-logo-effect=off] .tharu-logo-ring,html[data-logo-effect=off] .tharu-logo-glow,
html[data-logo-effect=off] .tharu-logo-wrapper::before,html[data-logo-effect=off] .tharu-logo-wrapper::after{display:none}
html[data-logo-effect=off] .tharu-logo-wrapper{animation:none}
html[data-logo-effect=off] .tharu-logo-wrapper .tharu-logo-image{box-shadow:0 0 0 2px var(--logo-gold),0 4px 14px rgba(58,29,18,.25)}
html[data-logo-effect=off] .tharu-logo-wrapper{--pad:3%}

@keyframes tharu-border-rotate{to{transform:rotate(360deg)}}
@keyframes tharu-border-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes tharu-logo-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
/* registered so the hover change of --glow-a transitions smoothly */
@property --glow-a{syntax:"<number>";inherits:true;initial-value:.3}

@media (prefers-reduced-motion:reduce){
  .tharu-logo-ring,.tharu-logo-glow,.tharu-logo-wrapper{animation:none!important;transition:none!important}
  .tharu-logo-wrapper:hover{scale:1}
}