/* ==========================================================================
   Glass panel engine — visuals for js/glass.js
   States (data-state on each panel): intact · exploding · collapsed · rebuilding
   There is NO shatter button. Panels crack on taps 1–2 and break on tap 3. While broken,
   one small "Rebuild" pill is shown (and the debris itself is tappable).
   The real content stays in the DOM the whole time (hidden + inert); fragments are
   throwaway copies. Nothing here changes layout, so the page never jumps.
   ========================================================================== */
.gp{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gp :is(p,h1,h2,h3,h4,dd,dt,li,time){-webkit-user-select:text;user-select:text}
.gp-busy{transform:none!important;transition:none!important}

/* tap 1 & 2: crack lines grow from where you tapped */
.gp-crack{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible;border-radius:inherit}
.gp-crack path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gp-crack-line{stroke:rgba(255,255,255,.95);stroke-width:1.1}
.gp-crack-glow{stroke:var(--a2);stroke-width:3.2;opacity:.45;filter:blur(2px)}
.gp-crack.is-in path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:crack .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes crack{to{stroke-dashoffset:0}}
.gp-crack.is-out{opacity:0;transition:opacity .45s}

/* the only visible control, present only while the panel is broken */
.gp-toggle{
  position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px 0 16px;
  border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-strong);color:var(--fg);
  font:700 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 30px -12px rgba(30,20,120,.55),0 0 0 4px color-mix(in srgb,var(--a1) 18%,transparent);
  animation:pill-in .5s .25s var(--ease) both;transition:background-color .2s,color .2s
}
.gp-toggle svg{width:16px;height:16px}
.gp-toggle:hover{background:var(--a1);color:#fff;border-color:var(--a1)}
.gp-toggle[aria-disabled=true]{pointer-events:none;opacity:.6}
@keyframes pill-in{from{opacity:0;transform:translate(-50%,-30%) scale(.9)}}

/* while broken, the panel's own surface and content vanish — only the fragments remain */
.gp:not([data-state=intact])>:not(.gp-keep){visibility:hidden}
.gp:not([data-state=intact]){
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.gp:not([data-state=intact])::before,.gp:not([data-state=intact])::after{opacity:0!important}

.gp-shards{position:absolute;inset:0;z-index:6;pointer-events:auto;cursor:pointer}
.gp-shard{position:absolute;contain:layout paint;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gp-shard-in{position:absolute}
/* fragments are fully static copies: no blur, no shadow, no hover/transition effects */
.gp-clone,.gp-clone *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:none!important;animation:none!important;pointer-events:none!important}
.gp-clone{transform:none!important;margin:0!important;box-shadow:none}
.gp-clone .reveal{opacity:1!important;transform:none!important;filter:none!important}
.gp-clone::before{opacity:1!important}
.gp-clone{background:var(--glass-strong)}
/* glass body + edge light on every fragment */
.gp-shard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.38),rgba(255,255,255,.04) 46%,color-mix(in srgb,var(--a1) 22%,transparent))}
:root[data-theme=dark] .gp-shard::after{background:linear-gradient(125deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 46%,color-mix(in srgb,var(--a1) 28%,transparent))}
.gp-edge{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--a2) 80%,transparent))}
.gp-glint{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.95) 50%,transparent 72%)}

/* "suit-up" finish: a reflective sweep clipped to the panel, plus a short rim flash */
.gp-sheen{position:absolute;inset:0;z-index:8;overflow:hidden;border-radius:inherit;pointer-events:none}
.gp-sheen i{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent)}
.gp-flash{animation:gp-flash .8s ease-out}
@keyframes gp-flash{0%{box-shadow:0 0 0 2px var(--a2),0 0 44px var(--a1)}100%{box-shadow:var(--glass-shadow)}}

/* reduced motion: a clear, static "shattered" state instead of fragments */
.gp.gp-reduced[data-state=collapsed]{
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--a1) 16%,transparent) 0 10px,transparent 10px 22px)!important;
  border:1px dashed var(--line-strong)!important;border-radius:var(--r-lg);min-height:84px
}
.gp.gp-reduced[data-state=collapsed] .gp-toggle{animation:none}