/* ==========================================================================
   Glass Audio Widgets — v1.0
   Cross-platform glassmorphic audio player widgets.
   Works anywhere raw HTML/CSS/JS can be embedded (WordPress, Shopify, Wix,
   Squarespace, Webflow, plain HTML sites, etc).
   ========================================================================== */

.gaw-widget {
  --gaw-accent: #8ec5ff;                 /* per-instance accent, override via style="--gaw-accent:#f4a">*/

  /* Panel opacity — a single 0–1 knob. 1 = fully opaque frosted panel,
     lower = more of the page shows through while staying frosted (blur
     is unaffected). Override per-instance with data-opacity="35" (JS),
     inline style="--gaw-glass-opacity:0.35", or the .gaw-frost-35 class. */
  --gaw-glass-opacity: 0.55;
  --gaw-glass-bg: rgba(255, 255, 255, calc(var(--gaw-glass-opacity) * 0.26));
  --gaw-glass-bg-strong: rgba(255, 255, 255, var(--gaw-glass-opacity));
  --gaw-glass-border: rgba(255, 255, 255, calc(var(--gaw-glass-opacity) * 0.9 + 0.1));
  --gaw-glass-border-dim: rgba(255, 255, 255, calc(var(--gaw-glass-opacity) * 0.22));
  --gaw-glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  --gaw-glass-blur: 30px;
  --gaw-text: #fdfdfd;
  --gaw-text-dim: rgba(255, 255, 255, 0.68);
  --gaw-cover-size: 64px;
  --gaw-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
}
.gaw-widget *, .gaw-widget *::before, .gaw-widget *::after {
  box-sizing: border-box;
}

/* Ready-made 35%-opacity preset — same frost (blur, grain, sheen), a much
   more see-through fill. Add this class alongside a shape class, or use
   data-opacity="35" on the widget div (see JS). */
.gaw-widget.gaw-frost-35 {
  --gaw-glass-opacity: 0.35;
}

/* -------------------------------------------------------------------------
   Glass shell (shared by every shape — the shape classes below only change
   the outer silhouette: border-radius / clip-path / proportions)
   ------------------------------------------------------------------------- */
.gaw-glass {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  width: 340px;

  /* frost tint + grain texture, layered so the panel reads as etched
     glass rather than a flat translucent color chip */
  background-color: var(--gaw-glass-bg);
  background-image:
    linear-gradient(135deg, var(--gaw-glass-bg-strong), transparent 55%),
    linear-gradient(320deg, rgba(255, 255, 255, 0.14), transparent 45%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.05%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%2523n%29%27/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, overlay;

  border: 1px solid var(--gaw-glass-border);
  box-shadow:
    var(--gaw-glass-shadow),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),      /* top edge catching light */
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),              /* bottom edge in shadow */
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(0, 0, 0, 0.10);

  backdrop-filter: blur(var(--gaw-glass-blur)) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--gaw-glass-blur)) saturate(180%) brightness(1.06);
  border-radius: var(--gaw-radius);
  overflow: hidden;
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.gaw-widget.is-playing .gaw-glass {
  border-color: color-mix(in srgb, var(--gaw-accent) 55%, var(--gaw-glass-border));
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--gaw-accent) 45%, transparent) inset,
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* faint accent glow sweep, diffused by the frost like light through
   textured glass */
.gaw-glass::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--gaw-accent) 40%, transparent), transparent 60%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.gaw-widget.is-playing .gaw-glass::after {
  opacity: 0.5;
}

/* soft frosted sheen streak across the top, like light raking a
   sandblasted pane */
.gaw-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 60%;
  height: 46%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 75%);
  filter: blur(2px);
  pointer-events: none;
  opacity: 0.8;
}

/* -------------------------------------------------------------------------
   Album cover — retracts off-canvas to the left when not playing
   ------------------------------------------------------------------------- */
.gaw-cover-wrap {
  flex: 0 0 auto;
  width: var(--gaw-cover-size);
  height: var(--gaw-cover-size);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateX(calc(-1 * var(--gaw-cover-size) - 14px)) scale(0.85);
  opacity: 0;
  margin-left: calc(-1 * var(--gaw-cover-size) - 14px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease, margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.gaw-widget.is-playing .gaw-cover-wrap {
  transform: translateX(0) scale(1);
  opacity: 1;
  margin-left: 0;
}
.gaw-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* spinning record feel while playing (subtle, optional) */
.gaw-widget.is-playing .gaw-cover {
  animation: gaw-cover-spin 8s linear infinite;
}
@keyframes gaw-cover-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Body: title/artist + waveform + controls
   ------------------------------------------------------------------------- */
.gaw-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gaw-meta {
  min-width: 0;
  line-height: 1.2;
}
.gaw-title {
  color: var(--gaw-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.gaw-artist {
  color: var(--gaw-text-dim);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gaw-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Waveform */
.gaw-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  flex: 1 1 auto;
  min-width: 40px;
}
.gaw-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--gaw-accent);
  opacity: 0.55;
  height: 18%;
  animation: none;
  transform-origin: bottom;
}
.gaw-widget.is-playing .gaw-wave span {
  animation: gaw-bounce 1.1s ease-in-out infinite;
  opacity: 0.95;
}
.gaw-wave span:nth-child(1) { animation-delay: -0.9s; }
.gaw-wave span:nth-child(2) { animation-delay: -0.6s; }
.gaw-wave span:nth-child(3) { animation-delay: -1.1s; }
.gaw-wave span:nth-child(4) { animation-delay: -0.3s; }
.gaw-wave span:nth-child(5) { animation-delay: -0.75s; }
.gaw-wave span:nth-child(6) { animation-delay: -0.15s; }
.gaw-wave span:nth-child(7) { animation-delay: -0.5s; }
.gaw-wave span:nth-child(8) { animation-delay: -1.0s; }

@keyframes gaw-bounce {
  0%, 100% { height: 18%; }
  50% { height: 100%; }
}

/* Controls */
.gaw-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.gaw-btn {
  appearance: none;
  border: 1px solid var(--gaw-glass-border);
  background: rgba(255, 255, 255, calc(var(--gaw-glass-opacity) * 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gaw-text);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  padding: 0;
}
.gaw-btn:hover {
  background: color-mix(in srgb, var(--gaw-accent) 45%, rgba(255,255,255,0.18));
  border-color: var(--gaw-accent);
}
.gaw-btn:active {
  transform: scale(0.9);
}
.gaw-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  pointer-events: none;
}
.gaw-play-icon-pause { display: none; }
.gaw-widget.is-playing .gaw-play-icon-play { display: none; }
.gaw-widget.is-playing .gaw-play-icon-pause { display: inline-flex; }

.gaw-btn.gaw-play {
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--gaw-accent) 55%, rgba(255,255,255,0.12));
}

/* progress underline (subtle, minimal chrome) */
.gaw-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--gaw-accent);
  transition: width 0.15s linear;
}

/* =========================================================================
   SHAPE 1 — ORB
   Compact circular badge. Cover + controls only; wave forms a ring feel.
   ========================================================================= */
.gaw-shape-orb .gaw-glass {
  width: 250px;
  border-radius: 999px;
  padding: 8px 20px 8px 8px;
}
.gaw-shape-orb .gaw-cover-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.gaw-shape-orb {
  --gaw-cover-size: 48px;
}
.gaw-shape-orb .gaw-wave {
  height: 16px;
}

/* =========================================================================
   SHAPE 2 — PILL
   Long horizontal capsule. Cover retracts furthest; wave is the hero.
   ========================================================================= */
.gaw-shape-pill .gaw-glass {
  width: 380px;
  border-radius: 999px;
  padding: 9px 22px 9px 9px;
}
.gaw-shape-pill .gaw-cover-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.gaw-shape-pill {
  --gaw-cover-size: 56px;
}
.gaw-shape-pill .gaw-wave {
  height: 26px;
}

/* =========================================================================
   SHAPE 3 — HEX
   Hexagonal card, stacked layout (cover overlaps top corner).
   ========================================================================= */
.gaw-shape-hex .gaw-glass {
  width: 300px;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 20px 18px;
  border-radius: 22px;
  clip-path: polygon(8% 0%, 92% 0%, 100% 15%, 100% 85%, 92% 100%, 8% 100%, 0% 85%, 0% 15%);
}
.gaw-shape-hex .gaw-cover-wrap {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin-left: 0;
  transform: translateY(-70px) rotate(-8deg) scale(0.85);
  opacity: 0;
}
.gaw-shape-hex.is-playing .gaw-cover-wrap {
  transform: translateY(0) rotate(0deg) scale(1);
  opacity: 1;
}
.gaw-shape-hex {
  --gaw-cover-size: 46px;
}
.gaw-shape-hex .gaw-body {
  padding-right: 56px;
}
.gaw-shape-hex .gaw-row {
  margin-top: 10px;
}
.gaw-shape-hex .gaw-wave {
  height: 20px;
}

/* =========================================================================
   SHAPE 4 — BLOB
   Soft organic asymmetric shape, animated between two states.
   ========================================================================= */
.gaw-shape-blob .gaw-glass {
  width: 320px;
  padding: 16px 20px;
  border-radius: 38px 46px 40px 30px / 30px 40px 34px 44px;
  transition: border-radius 6s ease-in-out, box-shadow 0.4s ease, background 0.4s ease;
}
.gaw-shape-blob.is-playing .gaw-glass {
  animation: gaw-blob-morph 9s ease-in-out infinite;
}
@keyframes gaw-blob-morph {
  0%   { border-radius: 38px 46px 40px 30px / 30px 40px 34px 44px; }
  33%  { border-radius: 46px 30px 44px 38px / 40px 34px 46px 30px; }
  66%  { border-radius: 30px 44px 30px 46px / 44px 30px 40px 34px; }
  100% { border-radius: 38px 46px 40px 30px / 30px 40px 34px 44px; }
}
.gaw-shape-blob .gaw-cover-wrap {
  width: 58px;
  height: 58px;
  border-radius: 44% 56% 60% 40% / 46% 40% 60% 54%;
}
.gaw-shape-blob {
  --gaw-cover-size: 58px;
}
.gaw-shape-blob .gaw-wave {
  height: 22px;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .gaw-glass,
  .gaw-shape-pill .gaw-glass,
  .gaw-shape-hex .gaw-glass,
  .gaw-shape-blob .gaw-glass {
    width: 100%;
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gaw-widget * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.gaw-btn:focus-visible {
  outline: 2px solid var(--gaw-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   WordPress sidebar compatibility — v1.2
   Keep the player inside narrow widget areas and keep cover art visible.
   ========================================================================== */
.gaw-widget {
  display: block;
  width: 100%;
  max-width: 100%;
}

.gaw-widget .gaw-glass,
.gaw-widget.gaw-shape-pill .gaw-glass,
.gaw-widget.gaw-shape-orb .gaw-glass,
.gaw-widget.gaw-shape-hex .gaw-glass,
.gaw-widget.gaw-shape-blob .gaw-glass {
  width: 100%;
  max-width: 100%;
}

/* Pill/orb/blob cover art stays visible even while paused. */
.gaw-widget:not(.gaw-shape-hex) .gaw-cover-wrap,
.gaw-widget:not(.gaw-shape-hex).is-playing .gaw-cover-wrap {
  transform: none;
  opacity: 1;
  margin-left: 0;
}

/* Make narrow sidebars more forgiving. */
@media (max-width: 360px) {
  .gaw-widget .gaw-glass,
  .gaw-widget.gaw-shape-pill .gaw-glass,
  .gaw-widget.gaw-shape-orb .gaw-glass,
  .gaw-widget.gaw-shape-blob .gaw-glass {
    gap: 8px;
    padding-left: 8px;
    padding-right: 10px;
  }
  .gaw-widget.gaw-shape-pill,
  .gaw-widget.gaw-shape-orb,
  .gaw-widget.gaw-shape-blob {
    --gaw-cover-size: 46px;
  }
  .gaw-wave {
    min-width: 24px;
    gap: 2px;
  }
  .gaw-controls {
    gap: 4px;
  }
}