:root{
  --bg1:#020312;
  --bg2:#202a5a;
  --text:#f7f6ff;
  --gold:#ffd878;
  --panel:rgba(10, 6, 25, 0.92);
  --panelBorder:rgba(255, 220, 150, 0.28);
  --safe: clamp(10px, 2.6vw, 24px);
}

/* White mode */
html[data-theme="light"]{
  --bg1:#f6f7fb;
  --bg2:#ffffff;
  --text:#1e1e2a;
  --gold:#b89a4f;
  --panel:rgba(255,255,255,0.92);
  --panelBorder:rgba(180,180,180,0.35);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  min-height: 100svh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at top, var(--bg2) 0, transparent 60%),
    var(--bg1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  text-align:center;
  padding: var(--safe);

  overflow-x: hidden;
  overflow-y: auto;

  padding-bottom: calc(var(--safe) + 90px);
}

/* Background */
.sky{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.starfield{
  position:absolute;
  inset:-10%;
  animation: drift 55s linear infinite;
  will-change: transform;
}

@keyframes drift{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-3%, 2%, 0); }
}

.star{
  position:absolute;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,1), transparent 70%);
  opacity:0;
  animation: twinkle var(--tw, 7s) linear infinite;
}

@keyframes twinkle{
  0%,100%{ transform: scale(0.6); opacity:0; }
  20%,80%{ opacity:0.55; }
  50%{ transform: scale(1.35); opacity:1; }
}

.glow-orb{
  position:absolute;
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  border-radius:50%;
  background: radial-gradient(circle, rgba(253, 223, 163, 0.62), transparent 65%);
  opacity:0;
  filter: blur(1px);
  animation: glow 13s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes glow{
  0%,100%{ opacity:0; transform: scale(0.78); }
  25%{ opacity:0.42; }
  50%{ opacity:0.88; transform: scale(1); }
  75%{ opacity:0.42; }
}

.glow-orb.big{
  width: clamp(260px, 38vw, 520px);
  height: clamp(260px, 38vw, 520px);
  animation-duration: 28s;
  filter: blur(2px);
}

/* Center content */
.wrapper{
  position:relative;
  z-index:1;
  width: min(640px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-inline: clamp(0px, 2vw, 10px);
}

.logo-area{
  position:relative;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: clamp(10px, 2.5vw, 18px);
  border-radius: 26px;
}

.logo-halo{
  position:absolute;
  inset: calc(clamp(10px, 2.5vw, 18px) * -1);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,220,150,.26),
      rgba(255,220,150,.08) 35%,
      transparent 68%);
  filter: blur(0.4px);
  animation: breathe 6.5s ease-in-out infinite;
  opacity: 0.95;
  pointer-events:none;
}

@keyframes breathe{
  0%,100%{ transform: scale(0.985); opacity: 0.75; }
  50%{ transform: scale(1.02); opacity: 1; }
}

.logo-wrapper{
  position:relative;
  z-index:1;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: clamp(6px, 2vw, 10px);
  border-radius: 22px;
  transform: translateZ(0);
}

.logo-wrapper img{
  display: block;
  width: min(780px, 92vw);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.6s ease, filter 0.6s ease, opacity 0.6s ease;
  will-change: transform, filter, opacity;
}

/* White mode: bez efektiem, tikai pawblack */
body.theme-light .logo-wrapper img{
  filter: none;
  transform: none;
}

/* Dark mode: pawwhite bez “balināšanas” filtra */
body.theme-dark .logo-wrapper img{
  filter: none;
}


.logo-wrapper:hover img{
  transform: scale(1.06);
  filter:
    grayscale(1)
    sepia(1)
    hue-rotate(10deg)
    saturate(3)
    brightness(2.35)
    drop-shadow(0 0 16px rgba(255, 200, 90, 0.85));
}

/* White mode logo must be black */
html[data-theme="light"] .logo-wrapper img{
  filter: brightness(0) saturate(100%);
}

html[data-theme="light"] .logo-wrapper:hover img{
  transform: scale(1.04);
  filter:
    brightness(0)
    saturate(100%)
    drop-shadow(0 0 14px rgba(184,154,79,0.35));
}

h1{
  margin-top: clamp(14px, 2.5vw, 18px);
  font-size: clamp(1.15rem, 3.4vw, 1.9rem);
  letter-spacing: clamp(0.03em, 0.7vw, 0.06em);
  text-transform: uppercase;
  opacity: 0.95;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.coming-soon{
  margin-top: 8px;
  font-size: clamp(0.82rem, 2.5vw, 0.98rem);
  letter-spacing: clamp(0.12em, 0.9vw, 0.16em);
  text-transform: uppercase;
  opacity: 0.72;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  max-width: 100%;
}

.coming-soon::before,
.coming-soon::after{
  content:"";
  height:1px;
  width: clamp(16px, 7vw, 28px);
  background: rgba(255,255,255,.22);
  flex: 0 0 auto;
}

html[data-theme="light"] .coming-soon::before,
html[data-theme="light"] .coming-soon::after{
  background: rgba(0,0,0,.14);
}

.description{
  margin-top: 14px;
  font-size: clamp(0.92rem, 2.7vw, 1.02rem);
  line-height: 1.65;
  max-width: min(520px, 100%);
  opacity: 0.86;
  padding-inline: clamp(0px, 2vw, 8px);
  overflow-wrap: anywhere;
}

.microcopy{
  margin-top: 10px;
  font-size: clamp(0.88rem, 2.6vw, 0.96rem);
  opacity: 0.72;
  font-style: italic;
  max-width: min(520px, 100%);
  padding-inline: clamp(0px, 2vw, 10px);
  overflow-wrap: anywhere;
}

.contact{
  margin-top: 18px;
  font-size: clamp(0.9rem, 2.7vw, 0.98rem);
  opacity: 0.85;
  max-width: min(520px, 100%);
  padding-inline: clamp(0px, 2vw, 10px);
  overflow-wrap: anywhere;
}

.contact a{
  color: var(--gold);
  text-decoration:none;
  font-weight: 650;
  word-break: break-word;
}
.contact a:hover{ text-decoration:underline; }

.footer{
  margin-top: 22px;
  font-size: clamp(0.74rem, 2.4vw, 0.84rem);
  opacity: 0.45;
  max-width: 100%;
  padding-bottom: clamp(8px, 2vw, 24px);
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom: var(--safe);
  transform: translateX(-50%) translateY(10px);
  background: rgba(10, 6, 25, 0.9);
  border: 1px solid rgba(255,220,150,.25);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: clamp(0.76rem, 2.4vw, 0.88rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
  z-index: 20;
  pointer-events:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  max-width: calc(100vw - (var(--safe) * 2));
  white-space: normal;
  text-wrap: balance;
  color: var(--text);
}
.toast.show{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

html[data-theme="light"] .toast{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  color: var(--text);
}

.audio-hint{
  position:fixed;
  right: var(--safe);
  bottom: calc(var(--safe) + 58px);
  font-size: clamp(0.7rem, 2.2vw, 0.8rem);
  color: #e4dcff;
  opacity: 0.82;
  text-align:right;
  z-index: 9;
  pointer-events:none;
  max-width: min(240px, calc(100vw - (var(--safe) * 2)));
  overflow-wrap: anywhere;
}

html[data-theme="light"] .audio-hint{
  color: rgba(30,30,42,0.78);
}

.audio-controls{
  position:fixed;
  right: var(--safe);
  bottom: var(--safe);
  display:flex;
  gap: 10px;
  z-index: 21;
}

.btn{
  width: clamp(42px, 10vw, 48px);
  height: clamp(42px, 10vw, 48px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.4), transparent 55%),
    radial-gradient(circle at 70% 100%, rgba(255,220,150,0.4), transparent 60%),
    rgba(10, 6, 25, 0.9);
  box-shadow:
    0 0 10px rgba(0,0,0,0.8),
    0 0 16px rgba(255, 220, 150, 0.6);
  color: #ffe9b5;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  outline: none;
  position: relative;
  touch-action: manipulation;
}

.btn:hover{
  transform: scale(1.06);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(circle at 70% 100%, rgba(255,220,150,0.6), transparent 60%),
    rgba(10, 6, 25, 1);
  box-shadow:
    0 0 14px rgba(0,0,0,0.9),
    0 0 22px rgba(255, 220, 150, 0.9);
}

.btn:focus-visible{
  outline: 2px solid rgba(255,220,150,.9);
  outline-offset: 3px;
}

/* White mode buttons */
html[data-theme="light"] .btn{
  background:
    radial-gradient(circle at 30% 0%, rgba(0,0,0,0.06), transparent 55%),
    radial-gradient(circle at 70% 100%, rgba(184,154,79,0.22), transparent 60%),
    rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  color: rgba(30,30,42,0.9);
}

html[data-theme="light"] .btn:hover{
  transform: scale(1.06);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.14),
    0 0 18px rgba(184,154,79,0.22);
}

.btn .icon{
  font-size: clamp(16px, 3.8vw, 20px);
  line-height: 1;
}

.audio-toggle .icon::before{ content:"♪"; }
.info-toggle .icon::before{ content:"i"; font-weight: 800; }
.mode-toggle .icon::before{ content:"☀"; }
html[data-theme="light"] .mode-toggle .icon::before{ content:"🌙"; }

.audio-toggle.muted{
  color: rgba(220,220,220,.9);
  box-shadow:
    0 0 8px rgba(0,0,0,0.9),
    0 0 12px rgba(180,180,180,0.35);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 55%),
    rgba(8, 6, 18, 0.95);
}

html[data-theme="light"] .audio-toggle.muted{
  color: rgba(30,30,42,0.55);
  background:
    radial-gradient(circle at 30% 0%, rgba(0,0,0,0.04), transparent 55%),
    rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.audio-toggle.muted::after{
  content:"";
  position:absolute;
  width: 2px;
  height: 30px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.1),
    rgba(255,220,150,0.95),
    rgba(255,255,255,0.1)
  );
  transform: rotate(-35deg);
  pointer-events:none;
}

html[data-theme="light"] .audio-toggle.muted::after{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    rgba(184,154,79,0.85),
    rgba(0,0,0,0.06)
  );
}

/* Subtle pulse when sound is on */
.audio-toggle:not(.muted){
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 14px rgba(255,220,150,0.6); }
  50%{ box-shadow: 0 0 24px rgba(255,220,150,0.95); }
}

html[data-theme="light"] .audio-toggle:not(.muted){
  animation: none;
}

/* Attribution panel */
.attrib{
  position: fixed;
  right: var(--safe);
  bottom: calc(var(--safe) + 58px);
  width: min(420px, calc(100vw - (var(--safe) * 2)));
  background: var(--panel);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  font-size: clamp(0.76rem, 2.4vw, 0.86rem);
  line-height: 1.5;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    0 0 20px rgba(255, 220, 150, 0.25);
  border: 1px solid var(--panelBorder);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 22;
  overflow-wrap: anywhere;
}

.attrib.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

html[data-theme="light"] .attrib{
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.attrib-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.track-art{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 220, 150, 0.22);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}

html[data-theme="light"] .track-art{
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

.attrib.open .track-art{
  opacity: 1;
  transform: translateY(0);
}

.attrib-text{
  text-align:left;
  flex: 1 1 auto;
  min-width: 0;
}

.track-link{
  color: var(--gold);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.attrib-actions{
  margin-top: 6px;
  opacity: 0.92;
}

.attrib a{
  color: var(--gold);
  text-decoration:none;
  font-weight: 650;
  word-break: break-word;
}
.attrib a:hover{ text-decoration:underline; }

.attrib .small{
  display:block;
  margin-top: 6px;
  opacity: 0.78;
  font-size: clamp(0.68rem, 2.2vw, 0.78rem);
}

@media (max-width: 360px){
  .attrib-row{
    flex-direction: column;
    align-items:flex-start;
  }
  .track-art{
    width: 72px;
    height: 72px;
  }
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine){
  #infoToggle:hover ~ #attribPanel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #infoToggle:hover ~ #attribPanel .track-art{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .starfield, .star, .glow-orb, .logo-halo{ animation: none !important; }
  .logo-wrapper img{ transition: none !important; }
  .btn{ transition: none !important; }
  .track-art{ transition: none !important; transform: none !important; }
  .audio-toggle:not(.muted){ animation: none !important; }
}

/* Strong mobile layout */
@media (max-width: 520px){
  body{ align-items:flex-start; }
  .wrapper{ margin-top: 22px; }

  .logo-wrapper img{ width: min(780px, 96vw); }

  .audio-controls{
    bottom: auto;
    top: var(--safe);
  }

  .attrib{
    bottom: auto;
    top: calc(var(--safe) + 54px);
  }

  .audio-hint{
    bottom: auto;
    top: calc(var(--safe) + 54px);
    right: var(--safe);
    text-align: right;
  }

  .toast{
    bottom: auto;
    top: calc(var(--safe) + 54px);
  }
}

/* Light mode remove background effects completely */
html[data-theme="light"] body{ background:#ffffff; }
html[data-theme="light"] .sky{ display:none !important; }
html[data-theme="light"] .starfield,
html[data-theme="light"] .star,
html[data-theme="light"] .glow-orb,
html[data-theme="light"] .logo-halo{
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* ========================= */
/* FIX drošās zonas un logo mobilajā un rotējot */
/* ========================= */

:root{
  --safe-top: max(var(--safe), env(safe-area-inset-top));
  --safe-right: max(var(--safe), env(safe-area-inset-right));
  --safe-bottom: max(var(--safe), env(safe-area-inset-bottom));
  --safe-left: max(var(--safe), env(safe-area-inset-left));
}

/* iOS vecāks fallback */
@supports (padding: constant(safe-area-inset-top)){
  :root{
    --safe-top: max(var(--safe), constant(safe-area-inset-top));
    --safe-right: max(var(--safe), constant(safe-area-inset-right));
    --safe-bottom: max(var(--safe), constant(safe-area-inset-bottom));
    --safe-left: max(var(--safe), constant(safe-area-inset-left));
  }
}

/* Overwrite mobile rules so logo nav zem status joslas */
@media (max-width: 520px){
  body{
    align-items:flex-start;
    padding-top: calc(var(--safe-top) + 10px);
    padding-right: var(--safe-right);
    padding-left: var(--safe-left);
    padding-bottom: calc(var(--safe-bottom) + 90px);
  }

  .wrapper{
    margin-top: 0;
  }

  .logo-wrapper img{
    width: min(420px, 82vw);
    max-height: 28svh;
    height: auto;
  }

  .audio-controls{
    top: var(--safe-top);
    right: var(--safe-right);
  }

  .attrib,
  .audio-hint,
  .toast{
    top: calc(var(--safe-top) + 54px);
    right: var(--safe-right);
  }
}

/* Landscape rotate: samazinām logo, lai viss ielien */
@media (max-width: 920px) and (orientation: landscape){
  body{
    padding-top: calc(var(--safe-top) + 6px);
    padding-right: var(--safe-right);
    padding-left: var(--safe-left);
    padding-bottom: calc(var(--safe-bottom) + 70px);
  }

  .wrapper{
    margin-top: 0;
  }

  .logo-wrapper img{
    width: min(360px, 60vw);
    max-height: 18svh;
    height: auto;
  }

  .audio-controls{
    top: var(--safe-top);
    right: var(--safe-right);
  }

  .attrib,
  .audio-hint,
  .toast{
    top: calc(var(--safe-top) + 54px);
    right: var(--safe-right);
  }
}

/* Tabletes (un lielāki ekrāni) landscape: arī te logo nedrīkst pazust */
@media (orientation: landscape) and (max-height: 820px){
  body{
    align-items: flex-start;
    padding-top: calc(var(--safe-top) + 6px);
    padding-right: var(--safe-right);
    padding-left: var(--safe-left);
    padding-bottom: calc(var(--safe-bottom) + 70px);
  }

  .wrapper{
    margin-top: 0;
  }

  /* Ne pārāk mazs, lai uz planšetes izskatās labi, bet vienmēr ielien */
  .logo-wrapper img{
    width: min(520px, 62vw);
    max-height: 26svh;
    height: auto;
  }

  .audio-controls{
    top: var(--safe-top);
    right: var(--safe-right);
  }

  .attrib,
  .audio-hint,
  .toast{
    top: calc(var(--safe-top) + 54px);
    right: var(--safe-right);
  }
}

/* Ļoti mazi telefoni */
@media (max-width: 360px){
  .logo-wrapper img{
    width: 78vw;
    max-height: 24svh;
  }
}

/* ===== Logo AVIF/WEBP hover effect =====
   Light mode: only pawblack (no hover effect)
   Dark mode: pawwhite + hover to pawgold
*/
.logo-wrapper .logo-pulse{
  position: relative;
  display: grid;
  place-items: center;
  width: min(780px, 92vw);
  max-width: 100%;
  transform: translateZ(0);
}

/* Ensure logo images scale correctly on all screens */
.logo-pulse .layer{
  width: 100%;
}
.logo-pulse img{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Better behavior on small-height landscape (logo no longer "disappears" when rotating) */
@media (orientation: landscape) and (max-height: 520px){
  body{
    align-items: flex-start;
  }
  .logo-pulse{
    width: min(520px, 72vw);
  }
  h1{
    margin-top: 10px;
  }
  .coming-soon{
    margin-top: 6px;
  }
  .description{
    margin-top: 12px;
    font-size: 0.98rem;
  }
  .microcopy{
    margin-top: 10px;
  }

  /* Make the floating buttons smaller and keep them visible in landscape */
  .audio-controls{
    top: var(--safe);
    bottom: auto;
    gap: 8px;
  }
  .btn{
    width: 38px;
    height: 38px;
  }
  .btn .icon{
    font-size: 16px;
  }
  .audio-hint{
    top: calc(var(--safe) + 54px);
    bottom: auto;
    max-width: min(320px, calc(100vw - (var(--safe) * 2)));
  }
  .attrib{
    top: calc(var(--safe) + 54px);
    bottom: auto;
  }
}

/* Tablet landscape: same idea (short height, wider screen) */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 760px){
  .audio-controls{
    top: var(--safe);
    bottom: auto;
    gap: 10px;
  }
  .btn{
    width: 44px;
    height: 44px;
  }
  .btn .icon{
    font-size: 18px;
  }
  .audio-hint{
    top: calc(var(--safe) + 60px);
    bottom: auto;
  }
  .attrib{
    top: calc(var(--safe) + 60px);
    bottom: auto;
  }
}


.logo-wrapper .logo-pulse::before{
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 232, 163, 0.22), transparent 45%),
    radial-gradient(circle at 30% 75%, rgba(255, 211, 106, 0.16), transparent 50%);
  filter: blur(22px);
  animation: drift 6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Disable the halo drift in light mode (clean look) */
html[data-theme="light"] .logo-wrapper .logo-pulse::before{
  opacity: 0;
  animation: none;
}

.logo-wrapper .logo-pulse .layer{
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.logo-wrapper .logo-pulse img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(1) brightness(3);
  transition: transform 0.6s ease;
  will-change: transform, opacity;
}

/* Scale on hover only in dark mode */
html:not([data-theme="light"]) .logo-wrapper:hover .logo-pulse img{
  transform: scale(1.06);
}

/* Base logo selection by theme */
.logo-wrapper .layer-base{
  opacity: 1;
}

html[data-theme="light"] .logo-wrapper .layer-base-white{ display: none; }
html:not([data-theme="light"]) .logo-wrapper .layer-base-black{ display: none; }

/* Subtle shadow for the dark mode base */
html:not([data-theme="light"]) .logo-wrapper .layer-base-white{
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.25));
}

/* Gold layer: hover-only in dark mode */
.logo-wrapper .layer-gold{
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 2;
  filter:
    drop-shadow(0 0 6px rgba(230, 201, 122, 0.55))
    drop-shadow(0 0 14px rgba(255, 241, 184, 0.35));
}

html:not([data-theme="light"]) .logo-pulse:hover .layer-gold{
  opacity: 1;
  transform: scale(1);
}

/* Never show gold in light mode */
html[data-theme="light"] .logo-wrapper .layer-gold{ display: none !important; }

@keyframes drift{
  0%{ transform: translate(0,0) scale(1); opacity: 0.7; }
  50%{ transform: translate(10px,14px) scale(1.05); opacity: 1; }
  100%{ transform: translate(0,0) scale(1); opacity: 0.7; }
}