/* Tab transitions and the 생명 → 생명 "view the creator" gesture.
   Loaded before the inline <style>, so selectors here are kept specific. */

/* Panes share one grid cell; a leaving pane is pinned (fixed) by app.js. */
.app > .tab-pane { grid-row: 2; grid-column: 1; }
.app > .tab-pane.tab-leaving {
  position: fixed; z-index: 0; margin: 0; pointer-events: none;
}

/* Goddess fades with the 생명 tab instead of popping. */
.goddess { transition: opacity .22s ease, visibility 0s linear 0s; }
.goddess.goddess-away { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }

/* View-the-creator: the stage readouts, 타임킬링 button and stage gradient
   slide down together with the life rows as one drawer, parked so a sliver
   of its top edge peeks above the footer. app.js measures --gv-clip (empty
   stage area above the readouts, clipped away) and --gv-shift (the drop). */
/* The empty stage above the readouts is masked away with a feathered edge
   (GV_FEATHER) rather than clipped: the stage gradient is already
   semi-opaque there, and a hard clip showed as a cut line while sliding. The
   registered property lets the mask edge animate with the drop. */
@property --gv-mask-top { syntax: '<length>'; inherits: false; initial-value: 0px; }
.app .tab-pane .stage,
.app .tab-pane .console {
  transition: transform .4s cubic-bezier(.4,0,.2,1), --gv-mask-top .4s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}
.app .tab-pane .stage {
  --gv-mask-top: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--gv-mask-top) - 56px), #000 var(--gv-mask-top));
  mask-image: linear-gradient(to bottom, transparent calc(var(--gv-mask-top) - 56px), #000 var(--gv-mask-top));
  /* Masks do not affect hit testing: the fully transparent part is also
     clipped so clicks there reach the goddess, not the parked drawer. */
  clip-path: inset(max(0px, calc(var(--gv-mask-top) - 56px)) 0 0 0);
}
.app.goddess-view .tab-pane .stage {
  --gv-mask-top: var(--gv-clip, 0px);
  transform: translateY(var(--gv-shift, 0px)); cursor: pointer;
}
.app.goddess-view .tab-pane .console {
  transform: translateY(var(--gv-shift, 0px)); visibility: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s;
}
.app.goddess-view .tab-pane .warp-button { pointer-events: none; }
/* Parked drawer edge: a hairline and grab handle on the peeking sliver. */
.app .tab-pane .stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--gv-clip, 0px); height: 14px; z-index: 5;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
  border-top: 1px solid rgba(240, 210, 146, .5);
  background: radial-gradient(closest-side, rgba(240, 210, 146, .75) 0 92%, transparent 100%) center 6px / 44px 4px no-repeat;
}
.app.goddess-view .tab-pane .stage::before { opacity: 1; }
.app.gv-instant .tab-pane .console,
.app.gv-instant .tab-pane .stage,
.app.gv-instant .tab-pane .stage::before { transition: none; }
.stage-tab[data-tab="dimensions"][aria-expanded="false"] { box-shadow: 0 0 18px rgba(240, 210, 146, .55); }

@media (max-width: 750px) {
  /* Body scrolls on mobile: the parked drawer must not leave scrollable space. */
  body:has(.app.goddess-gone) { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .goddess, .goddess.goddess-away,
  .app .tab-pane .console, .app.goddess-view .tab-pane .console,
  .app .tab-pane .stage, .app .tab-pane .stage::before { transition: none; }
}