/* Rive page (/rive/) — layered on top of style.css for the header,
   theme tokens and fonts. */

.rive-page{
  max-width:1200px;
  margin:0 auto;
  padding:48px 24px 96px;
}
.rive-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px, 5vw, 52px);
  margin:0 0 8px;
}
.rive-subtitle{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-dim);
  margin:0 0 40px;
}

/* Two big squares per row; one per row on phones so each stays large
   enough to interact with. */
.rive-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
}
.rive-card{margin:0;}
.rive-frame{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
}
.rive-frame canvas{
  display:block;
  width:100%;height:100%;
}
.rive-frame.is-loading{
  background:linear-gradient(100deg, var(--shimmer-a) 30%, var(--shimmer-b) 50%, var(--shimmer-a) 70%);
  background-size:200% 100%;
  animation:rive-shimmer 1.4s linear infinite;
}
@keyframes rive-shimmer{to{background-position:-200% 0;}}
/* Full screen toggle, top-right of each card. */
.rive-expand{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg-card) 80%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--text);
  cursor:pointer;
  opacity:.75;
  transition:opacity .2s ease, transform .2s ease;
}
.rive-expand:hover,.rive-expand:focus-visible{opacity:1;transform:scale(1.06);}
.rive-expand svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* Full screen view: the card's own frame covers the whole screen, with no
   border or corners. Its background is set from JS to the artboard's own
   color, so the square animation (kept centered by Fit.Contain) blends
   into the edges like a native app screen. */
.rive-placeholder{aspect-ratio:1/1;}
.rive-frame.is-expanded{
  position:fixed;inset:0;z-index:1001;
  aspect-ratio:auto;
  border:0;border-radius:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation:rive-fade-in .25s ease;
}
.rive-frame.is-expanded .rive-expand{
  top:calc(16px + env(safe-area-inset-top));
  right:calc(16px + env(safe-area-inset-right));
}
.rive-lock,.rive-lock body{overflow:hidden;}
@keyframes rive-fade-in{from{opacity:0;}}

.rive-card figcaption{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-dim);
  margin-top:12px;
  padding-left:4px;
}
.rive-empty{
  grid-column:1/-1;
  font-family:var(--font-mono);
  color:var(--text-dim);
}

@media (max-width:700px){
  .rive-page{padding:32px 16px 64px;}
  .rive-grid{grid-template-columns:1fr;gap:24px;}
  .rive-subtitle{margin-bottom:28px;}
  .rive-expand{width:40px;height:40px;opacity:.9;}
}