/* styles/layouts.css */
.bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background: var(--bg);
}
.bg-glow{
  display:none;
}
.bg-noise{
  display:none;
}
.bg-grid{
  position:absolute;
  inset:0;
  opacity:0.0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px;
}
.app[data-effect="grid"] .bg-grid{opacity:0.14}
.app[data-theme="print"] .bg-grid{
  background:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
}
.card{
  position:relative;
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 56px);
  border: none;
  background: rgba(255,255,255,0.00);
  display:grid;
  place-items:center;
  width: 96vw;
  max-width: 1200px;
  min-height: min(520px, 72vh);
  backdrop-filter: blur(0px);
  transform-style:preserve-3d;
}
.app[data-effect="glass"] .card{
  background: var(--card);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.shine{
  position:absolute;
  inset:-12% -8%;
  pointer-events:none;
  opacity:0.9;
  background:
    radial-gradient(900px 420px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,0.14),
      transparent 65%);
  mix-blend-mode: soft-light;
}
.monogram{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size: clamp(110px, 22vw, 320px);
  letter-spacing:.08em;
  opacity:0.0;
  transform: translate3d(var(--px,0px), var(--py,0px), 0px) scale(1.02);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  pointer-events:none;
}
.app[data-effect="monogram"] .monogram{opacity:0.055}
.app[data-theme="print"][data-effect="monogram"] .monogram{opacity:0.035}

.underline-wrap{
  position:absolute;
  left:50%;
  top: calc(50% + clamp(44px, 6vw, 76px));
  transform: translateX(-50%);
  width: min(860px, 88vw);
  height: 90px;
  opacity:0;
  transition: opacity 700ms var(--ease);
  pointer-events:none;
}
.app[data-effect="signal"] .underline-wrap{opacity:0.95}

.app[data-layout="center"] .card{background: transparent}