/* Glass diamond silver P logo — matches glass-diamond-logo-preview.html */

/* SVG viewBox 120×130 — gem only (override diamond-logo.css square glass tile) */
.glass-logo-scene,
.diamond-logo-scene.glass-logo-scene,
.diamond-logo-scene[data-glass-logo] {
  all: unset;
  box-sizing: border-box;
  --logo-size: 48px;
  width: 48px;
  height: 52px;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Hex gem silhouette (not 45° square lozenge from diamond-logo.css) */
  -webkit-clip-path: polygon(50% 4.6%, 88.3% 24.6%, 88.3% 56.9%, 50% 95.4%, 11.7% 56.9%, 11.7% 24.6%);
  clip-path: polygon(50% 4.6%, 88.3% 24.6%, 88.3% 56.9%, 50% 95.4%, 11.7% 56.9%, 11.7% 24.6%);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.glass-logo-scene--sm,
.diamond-logo-scene--sm.glass-logo-scene,
.diamond-logo-scene--sm[data-glass-logo] {
  --logo-size: 40px;
  width: 40px;
  height: 43px;
}

body:not(.dark-mode) .diamond-logo-scene.glass-logo-scene,
body:not(.dark-mode) .diamond-logo-scene[data-glass-logo],
body.dark-mode .diamond-logo-scene.glass-logo-scene,
body.dark-mode .diamond-logo-scene[data-glass-logo],
body:not(.dark-mode) .diamond-logo-link:hover .diamond-logo-scene.glass-logo-scene,
body:not(.dark-mode) .diamond-logo-link:hover .diamond-logo-scene[data-glass-logo],
body.dark-mode .diamond-logo-link:hover .diamond-logo-scene.glass-logo-scene,
body.dark-mode .diamond-logo-link:hover .diamond-logo-scene[data-glass-logo],
.diamond-logo-link:hover .diamond-logo-scene.glass-logo-scene,
.diamond-logo-link:hover .diamond-logo-scene[data-glass-logo] {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#logo.diamond-logo-scene,
#logo-host.diamond-logo-scene {
  width: 48px;
  height: 52px;
}

.glass-diamond-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  /* Tight glow — wide blur reads as a square halo in the navbar */
  filter: drop-shadow(0 2px 6px rgba(180, 200, 255, 0.35));
  transition: filter 0.3s ease;
}

.diamond-logo-link:hover .glass-diamond-svg,
.glass-logo-scene:hover .glass-diamond-svg {
  filter: drop-shadow(0 2px 10px rgba(200, 220, 255, 0.55));
}

/* Light mode: silver gem is near-invisible on white — add a dark edge so it shows */
body:not(.dark-mode) .glass-diamond-svg,
body[data-theme="light"] .glass-diamond-svg {
  filter: drop-shadow(0 0 1px rgba(0, 90, 105, 0.85))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

body:not(.dark-mode) .diamond-logo-link:hover .glass-diamond-svg,
body:not(.dark-mode) .glass-logo-scene:hover .glass-diamond-svg,
body[data-theme="light"] .diamond-logo-link:hover .glass-diamond-svg {
  filter: drop-shadow(0 0 2px rgba(0, 110, 125, 0.95))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Show only the gem logo — hide wordmark text next to it on every page */
.diamond-logo-link .name-reveal,
.diamond-mini-bar .diamond-mini-name,
.diamond-logo-link .diamond-mini-name {
  display: none !important;
}

/* Spinning-top hover — ONLY the gem group spins; the P stays put and readable */
.glass-logo-scene,
.diamond-logo-scene[data-glass-logo] {
  perspective: 200px;
  -webkit-perspective: 200px;
  perspective-origin: 50% 42%;
}

.glass-diamond-svg {
  perspective: 220px;
  -webkit-perspective: 220px;
}

.glass-diamond-svg .d-spin {
  transform-box: fill-box;
  transform-origin: 50% 96%;
  will-change: transform;
}

.glass-logo-spin-body {
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .glass-logo-scene:hover,
  .diamond-logo-scene[data-glass-logo]:hover {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .glass-logo-scene:hover .glass-diamond-svg .d-spin,
  .diamond-logo-scene[data-glass-logo]:hover .glass-diamond-svg .d-spin {
    animation: glassLogoSpinTop 10s linear infinite;
  }

  .glass-logo-scene:hover .glass-diamond-svg,
  .diamond-logo-scene[data-glass-logo]:hover .glass-diamond-svg {
    filter: drop-shadow(0 3px 12px rgba(200, 220, 255, 0.55));
  }
}

/* 3D top: rotateY + tilt/wobble; scaleX at edge so flat SVG never vanishes */
@keyframes glassLogoSpinTop {
  0% {
    transform: rotateX(12deg) rotateY(0deg) rotateZ(0deg) scaleX(1);
  }
  12.5% {
    transform: rotateX(20deg) rotateY(45deg) rotateZ(2deg) scaleX(0.9);
  }
  25% {
    transform: rotateX(15deg) rotateY(90deg) rotateZ(0deg) scaleX(0.52);
  }
  37.5% {
    transform: rotateX(22deg) rotateY(135deg) rotateZ(-2deg) scaleX(0.9);
  }
  50% {
    transform: rotateX(12deg) rotateY(180deg) rotateZ(0deg) scaleX(1);
  }
  62.5% {
    transform: rotateX(20deg) rotateY(225deg) rotateZ(2deg) scaleX(0.9);
  }
  75% {
    transform: rotateX(15deg) rotateY(270deg) rotateZ(0deg) scaleX(0.52);
  }
  87.5% {
    transform: rotateX(22deg) rotateY(315deg) rotateZ(-2deg) scaleX(0.9);
  }
  100% {
    transform: rotateX(12deg) rotateY(360deg) rotateZ(0deg) scaleX(1);
  }
}

/* Facet fills stay inside gem; keep subtle so the outline reads as the shape */
.glass-diamond-svg .d-face-top,
.glass-diamond-svg .d-face-l,
.glass-diamond-svg .d-face-r,
.glass-diamond-svg .d-face-bot {
  opacity: 0.55;
}

/* Animated draw sequence */
.glass-diamond-svg.is-animating .d-outline {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: glassLogoDraw 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.glass-diamond-svg.is-animating .d-facet {
  fill: none;
  stroke: rgba(220, 235, 255, 0.3);
  stroke-width: 0.8;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: glassLogoDraw 0.8s ease 1.1s forwards;
}

.glass-diamond-svg.is-animating .d-facet2 {
  animation-delay: 1.15s;
}
.glass-diamond-svg.is-animating .d-facet3 {
  animation-delay: 1.2s;
}
.glass-diamond-svg.is-animating .d-facet4 {
  animation-delay: 1.25s;
}

.glass-diamond-svg.is-animating .d-face-top {
  opacity: 0;
  animation: glassLogoFadeIn 0.5s ease 1.1s forwards;
}
.glass-diamond-svg.is-animating .d-face-l {
  opacity: 0;
  animation: glassLogoFadeIn 0.5s ease 1.2s forwards;
}
.glass-diamond-svg.is-animating .d-face-r {
  opacity: 0;
  animation: glassLogoFadeIn 0.5s ease 1.25s forwards;
}
.glass-diamond-svg.is-animating .d-face-bot {
  opacity: 0;
  animation: glassLogoFadeIn 0.4s ease 1.3s forwards;
}

.glass-diamond-svg.is-animating .d-rim {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.3;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: glassLogoDraw 0.7s ease 1.45s forwards;
}

.glass-diamond-svg.is-animating .d-rim-edge {
  animation-delay: 1.5s;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.8;
}

/* Calligraphic P: outline draws first, fill fades in, dot pops last */
.glass-diamond-svg .d-letter-fill {
  opacity: 0;
}

.glass-diamond-svg.is-animating .d-letter-fill {
  opacity: 0;
  animation: glassLogoLetterFill 0.6s ease 2.55s forwards;
}

.glass-diamond-svg.is-animating .d-letter {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(220, 235, 255, 0.8));
  animation: glassLogoDrawP 1.4s cubic-bezier(0.45, 0, 0.25, 1) 1.65s forwards;
}

.glass-diamond-svg .d-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.glass-diamond-svg.is-animating .d-dot {
  opacity: 0;
  transform: scale(0);
  filter: drop-shadow(0 0 6px rgba(220, 235, 255, 0.9));
  animation: glassLogoDotPopT 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s forwards;
}

.glass-diamond-svg.is-animating .d-glint {
  opacity: 0;
  animation: glassLogoGlintIn 0.3s ease 2s forwards, glassLogoGlintLoop 3.5s ease 2.3s infinite;
}

.glass-diamond-svg.is-animating .d-glint2 {
  animation-delay: 2.1s, 2.4s;
}

/* Reduced motion: show finished logo */
.glass-diamond-svg.is-static .d-outline,
.glass-diamond-svg.is-static .d-facet,
.glass-diamond-svg.is-static .d-rim {
  stroke-dashoffset: 0;
}

.glass-diamond-svg.is-static .d-face-top,
.glass-diamond-svg.is-static .d-face-l,
.glass-diamond-svg.is-static .d-face-r,
.glass-diamond-svg.is-static .d-face-bot {
  opacity: 0.55;
}

.glass-diamond-svg.is-static .d-glint {
  opacity: 1;
}

.glass-diamond-svg.is-static .d-letter {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.glass-diamond-svg.is-static .d-letter-fill {
  opacity: 1;
}

.glass-diamond-svg.is-static .d-dot {
  opacity: 1;
  transform: scale(1);
}

.glass-diamond-svg.is-static .d-origin-flash {
  opacity: 0;
}

@keyframes glassLogoDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glassLogoDrawP {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glassLogoLetterFill {
  to {
    opacity: 1;
  }
}

@keyframes glassLogoFadeIn {
  to {
    opacity: 0.55;
  }
}

@keyframes glassLogoDotPopT {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glassLogoGlintIn {
  to {
    opacity: 1;
  }
}

@keyframes glassLogoGlintLoop {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-diamond-svg.is-animating * {
    animation: none !important;
  }

  .glass-logo-scene:hover .glass-diamond-svg .d-spin,
  .diamond-logo-scene[data-glass-logo]:hover .glass-diamond-svg .d-spin,
  .glass-logo-scene:hover .glass-diamond-svg,
  .diamond-logo-scene[data-glass-logo]:hover .glass-diamond-svg {
    animation: none !important;
  }
}