/* Meta Prompt Studio homepage PREVIEW — values traced in ../homepage_inventory.md.
   1 SwiftUI point = 1 CSS px. */
@font-face {
  font-family: 'RammettoOne';
  src: url('assets/RammettoOne-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #000; }
body { font-family: 'RammettoOne', sans-serif; }

#display { position: fixed; inset: 0; overflow: hidden; }
/* load sequence: nothing is painted before the first layout (pane, frost, rim), and the title, buttons, badge and
   icons stay hidden until their entrance animations exist; otherwise they flash in their final place first */
html:not(.laid) #display { visibility: hidden; }
html:not(.started) #content, html:not(.started) #appstore, html:not(.started) #social { visibility: hidden; }
/* SessionPhotoBackdrop: sharp, stationary, scaledToFill the whole display */
#photo { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* InsetInterfacePane: frame + clip are set from JS (squircle path) */
#pane { position: absolute; overflow: hidden; }
#frost { position: absolute; display: block; }
/* light only: Color.white.opacity(0.045) + .glassEffect(.clear). Liquid Glass has no CSS equivalent;
   its measured net effect on IMG_9774 is a ~25% screen-lift of the frosted photo (calibrated, see inventory). */
#lightGlass { position: absolute; inset: 0; background: rgb(64,64,64); mix-blend-mode: screen; display: none; }
html.light #lightGlass { display: block; }

#rim { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }

/* GlassDemoView: VStack(spacing 28) { title VStack(spacing 4); buttons VStack(spacing 14).padding(.horizontal 30) } */
#content { position: absolute; left: 0; right: 0; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
#title { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: normal; pointer-events: none; }
.tline { display: flex; flex-direction: row; gap: 0; }
.glyph { position: relative; flex: none; transform-origin: 50% 100%; } /* no will-change: it disables the glass backdrop-filter in Chrome */
.glyph svg { position: absolute; left: 0; top: 0; overflow: visible; }
.blend-plus { mix-blend-mode: plus-lighter; }
.blend-mul { mix-blend-mode: multiply; }

#buttons { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 0 30px; }
/* WIDE layout (adaptation, inventory §13): one-line title + horizontal button row, each scaled separately */
#content.wide #title { position: absolute; transform-origin: 0 0; }   /* stacked 3 lines, as the app */
#content.wide #buttons { position: absolute; flex-direction: row; width: auto; padding: 0; gap: var(--rowGap); transform-origin: 0 0; }
#content.wide .gbtn { flex: none; }

/* GlassButton + GlassPanelModifier(isTitleButton: true), always rendered in dark scheme */
.gbtn {
  position: relative; display: block; height: 66px; /* 34 label + 16 + 16 */
  border-radius: 33px; text-decoration: none; outline: none;
  will-change: transform; isolation: isolate;
  /* dark-scheme outer reflection glow, up-right (radius 5 / 9 -> CSS blur 10 / 18) */
  box-shadow: 8px -8px 10px var(--glow16), 11px -11px 18px var(--glow08);
  -webkit-user-select: none; user-select: none; cursor: pointer;
}
.gbtn .clip { position: absolute; inset: 0; border-radius: 33px; overflow: hidden; }
.gbtn .refract { position: absolute; inset: 0; filter: grayscale(1);
  /* LegacyReferenceBackdrop (dark), drawn at pane size and offset to this button's frame */
  background-image:
    radial-gradient(circle 360px at 50% 30%, rgba(153,168,255,0.5), rgba(153,168,255,0)),
    linear-gradient(to bottom, #0D3040, #0F1C52, #301757, #521742);
  background-repeat: no-repeat; }
.gbtn svg.surface { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gbtn .label {
  position: absolute; left: 24px; right: 24px; top: 16px; height: 34px;
  white-space: nowrap; text-align: center; font-family: 'RammettoOne', sans-serif;
  color: var(--text); text-shadow: var(--labelShadow);
}
.gbtn .label span { position: absolute; left: 0; right: 0; }
.gbtn .lit { position: absolute; inset: 0; border-radius: 33px; background: rgb(46,46,46); mix-blend-mode: plus-lighter; opacity: 0; pointer-events: none; }
.gbtn.is-lit .lit { opacity: 1; }
.gbtn.is-lit { box-shadow: 8px -8px 10px var(--glow16), 11px -11px 18px var(--glow08), 0 0 28px var(--glow70); }

/* App Store badge: official artwork shown unmodified via <img>; size/position from app.js */
#appstore { position: absolute; display: block; outline: none; }
#appstore img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
/* dark-mode photo dim (user-approved deviation, see inventory §11) */
html.dark.tweak #photo { filter: brightness(var(--darkPhoto)); }

/* Social row: small glass discs reusing the title-button glass stack (adaptation, not from source) */
#social { position: absolute; display: flex; flex-direction: row; }
.sicon { position: relative; display: block; flex: none; border-radius: 50%; isolation: isolate; outline: none;
  box-shadow: calc(var(--k) * 4px) calc(var(--k) * -4px) calc(var(--k) * 6px) var(--glow16), calc(var(--k) * 6px) calc(var(--k) * -6px) calc(var(--k) * 10px) var(--glow08); }
.sicon .clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.sicon .refract { position: absolute; inset: 0; filter: grayscale(1);
  background-image: radial-gradient(circle 360px at 50% 30%, rgba(153,168,255,0.5), rgba(153,168,255,0)), linear-gradient(to bottom, #0D3040, #0F1C52, #301757, #521742);
  background-repeat: no-repeat; }
.sicon svg.surface { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* logo file is black-on-transparent; invert() renders it white without touching its geometry */
.sicon img.logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: invert(1); opacity: 0.92; -webkit-user-drag: none; pointer-events: none; }
.sicon .lit { position: absolute; inset: 0; border-radius: 50%; background: rgb(46,46,46); mix-blend-mode: plus-lighter; opacity: 0; pointer-events: none; }
.sicon.is-lit .lit { opacity: 1; }
.sicon:focus-visible .clip, #appstore:focus-visible img { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; }
.gbtn:focus-visible .clip { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; border-radius: 33px; }