/* ============================================================
   GoodLives — Sleep wind-down widget ([gl_sleep] shortcode)
   A single, dim, immersive card for lying awake at night: a slow
   extended-exhale breath, a short body-relaxation pass, and a drift
   close. Deeper and sleepier than box breathing; minimal motion.
   Everything is scoped under .gl-sleep AND every inner class is
   namespaced gls-* so the widget never collides with the blog's own
   .gl-btn / .gl-title / .gl-dot system, nor with gl-breathe (glb-*)
   or gl-reframe. Palette: LOCKED dark-green immersive, always on.
   Quicksand.
   ============================================================ */

.gl-sleep{
  /* LOCKED dark-green immersive palette — always on, does not follow the
     viewer's light/dark. The GoodLives look for interactive blog widgets. */
  --gl-green:#5CC08C;
  --gl-green-dark:#49AF7C;
  --gl-bg:#131D18;
  --gl-card:#1C2A24;
  --gl-stage:#17241E;
  --gl-stage-2:#1F3029;
  --gl-track:#2C4438;
  --gl-text:#EAF5EF;
  --gl-muted:#A6C2B4;
  --gl-border:rgba(234,245,239,.10);
  --gl-shadow:0 20px 50px -24px rgba(0,0,0,.65), 0 2px 12px -6px rgba(0,0,0,.5);
  --gl-shadow-soft:0 12px 32px -20px rgba(0,0,0,.6);
  --gl-orb-core:#6FD3A6;
  --gl-orb-edge:#2F8A5E;
  --gl-orb-glow:rgba(92,192,140,.30);
  color-scheme:dark;

  --gl-radius-lg:24px;
  --gl-radius-sm:12px;
  --gl-font:"Quicksand", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* stage-by-stage dimming knobs (JS flips [data-stage]) */
  --gls-veil:0;
  --gls-orb-op:1;

  position:relative;
  width:100%;
  max-width:720px;
  margin:32px auto;
  background:
    radial-gradient(130% 90% at 50% 8%, var(--gl-stage-2) 0%, var(--gl-stage) 46%, var(--gl-card) 100%);
  color:var(--gl-text);
  font-family:var(--gl-font);
  -webkit-font-smoothing:antialiased;
  border:1px solid var(--gl-border);
  border-radius:var(--gl-radius-lg);
  box-shadow:var(--gl-shadow);
  overflow:hidden;
}
.gl-sleep *{box-sizing:border-box;}

/* a soft vignette that deepens as the reader is guided down */
.gl-sleep::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 80% at 50% 38%, transparent 42%, rgba(0,0,0,.55) 100%);
  opacity:var(--gls-veil);
  transition:opacity 1.6s ease;
}

.gl-sleep .gls-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:48px 40px 40px;
  min-height:520px;
}

.gl-sleep .gls-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gl-green-dark);
  margin-bottom:26px;
  transition:opacity 1s ease;
}
.gl-sleep .gls-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--gl-green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gl-green) 18%, transparent);
}

/* --- the breathing orb (soft glow, dim) --- */
.gl-sleep .gls-stage{
  position:relative;
  width:100%;
  max-width:260px;
  aspect-ratio:1/1;
  margin:4px auto 10px;
  display:grid;
  place-items:center;
  flex:none;
}
.gl-sleep .gls-orb{
  width:72%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,
      color-mix(in srgb, var(--gl-orb-core) 88%, white) 0%,
      var(--gl-orb-core) 36%,
      var(--gl-orb-edge) 100%);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--gl-green) 7%, transparent),
    0 0 60px 10px var(--gl-orb-glow),
    inset 0 -12px 28px -10px rgba(0,0,0,.26),
    inset 0 12px 26px -8px rgba(255,255,255,.42);
  opacity:var(--gls-orb-op);
  transform:scale(.6);
  will-change:transform;
  transition:transform .6s cubic-bezier(.4,0,.2,1), box-shadow .8s ease, opacity 1.4s ease;
}
.gl-sleep .gls-halo{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, var(--gl-orb-glow) 0%, transparent 62%);
  opacity:calc(var(--gls-orb-op) * .5);
  transform:scale(.9);
  transition:opacity 1.4s ease;
}

/* --- live phase readout (breathing stage) --- */
.gl-sleep .gls-phase{
  font-size:19px;font-weight:600;letter-spacing:.01em;
  color:var(--gl-text);
  min-height:26px;
  margin:2px 0 0;
  opacity:.92;
  transition:opacity .6s ease;
}

/* --- copy block (intro / drift share this slot) --- */
.gl-sleep .gls-copy{
  margin:14px auto 0;
  max-width:36ch;
}
.gl-sleep .gls-title{
  margin:0 0 14px;
  font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.01em;
  color:var(--gl-text);
}
.gl-sleep .gls-sub{
  margin:0 auto;
  font-size:15px;font-weight:500;line-height:1.7;color:var(--gl-muted);
}

/* relaxation cue, revealed one at a time */
.gl-sleep .gls-cue{
  font-size:21px;font-weight:600;line-height:1.5;color:var(--gl-text);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 1.4s ease, transform 1.4s ease;
  min-height:1.5em;
}
.gl-sleep .gls-cue.is-in{opacity:1;transform:none;}

/* --- controls, pinned to the foot of the card --- */
.gl-sleep .gls-controls{
  margin-top:auto;
  padding-top:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}
.gl-sleep .gls-btn{
  appearance:none;font-family:inherit;font-weight:600;cursor:pointer;
  border-radius:var(--gl-radius-sm);
  transition:background .2s, color .2s, border-color .2s, transform .08s, opacity .4s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin:0;line-height:1;
}
.gl-sleep .gls-btn:active{transform:scale(.97);}
.gl-sleep .gls-btn:focus-visible{outline:2px solid var(--gl-green);outline-offset:2px;}
.gl-sleep .gls-btn svg{width:19px;height:19px;flex:none;}
.gl-sleep .gls-btn--primary{
  min-width:170px;height:52px;padding:0 26px;font-size:16px;
  background:var(--gl-green);color:#0e1813;border:1px solid transparent;
  box-shadow:var(--gl-shadow-soft);
}
.gl-sleep .gls-btn--primary:hover{background:var(--gl-green-dark);}
.gl-sleep .gls-btn--ghost{
  height:52px;padding:0 22px;font-size:15px;
  background:transparent;color:var(--gl-text);border:1px solid var(--gl-border);
}
.gl-sleep .gls-btn--ghost:hover{background:rgba(234,245,239,.05);}
.gl-sleep .gls-btn--icon{
  width:52px;height:52px;padding:0;
  background:transparent;color:var(--gl-text);border:1px solid var(--gl-border);
}
.gl-sleep .gls-btn--icon:hover{background:rgba(234,245,239,.05);}
.gl-sleep .gls-btn--icon.is-off{color:var(--gl-muted);}
.gl-sleep .gls-btn--icon .ico-off{display:none;}
.gl-sleep .gls-btn--icon.is-off .ico-on{display:none;}
.gl-sleep .gls-btn--icon.is-off .ico-off{display:block;}
.gl-sleep .gls-btn[hidden]{display:none;}

/* hide / show the slots per stage (JS toggles [data-stage]) */
.gl-sleep .gls-phase,.gl-sleep .gls-cue{display:none;}
.gl-sleep[data-stage="breathe"] .gls-phase{display:block;}
.gl-sleep[data-stage="relax"]   .gls-cue{display:block;}
.gl-sleep[data-stage="relax"]   .gls-copy{display:none;}
.gl-sleep[data-stage="breathe"] .gls-copy{display:none;}

/* stage-by-stage dimming — the reader is guided down */
.gl-sleep[data-stage="relax"]{--gls-veil:.5;--gls-orb-op:.74;}
.gl-sleep[data-stage="drift"]{--gls-veil:1;--gls-orb-op:.5;}
.gl-sleep[data-stage="drift"] .gls-eyebrow{opacity:.5;}

@media (max-width:520px){
  .gl-sleep .gls-inner{padding:38px 22px 30px;min-height:480px;}
  .gl-sleep .gls-stage{max-width:220px;}
  .gl-sleep .gls-title{font-size:22px;}
  .gl-sleep .gls-cue{font-size:19px;}
  .gl-sleep .gls-btn--primary{min-width:150px;}
}
@media (max-width:360px){
  .gl-sleep .gls-controls{flex-wrap:wrap;}
  .gl-sleep .gls-btn--primary,.gl-sleep .gls-btn--ghost{flex:1;}
}

/* reduced motion: a still, calm state — no breathing scale, no fades */
@media (prefers-reduced-motion: reduce){
  .gl-sleep,.gl-sleep .gls-orb,.gl-sleep .gls-halo,.gl-sleep .gls-cue,
  .gl-sleep .gls-phase,.gl-sleep::after{transition:none;}
  .gl-sleep .gls-orb{transform:scale(.8);}
}