/*
 * The landing pages' stylesheet: every "open this in the app" page — a shared
 * profile, Building, Moment or post, a ticket, a check-in, an emailed link, a
 * refused one, and the Preview handoff.
 *
 * THE FIGMA SECTION "External Screens" (Improvements, node 481:6126): one frame per
 * kind of link — open-profile, open-building, open-moment-road-trip / -party /
 * -stream, open-post. All share the black canvas, the white VIBREZ! wordmark 48px
 * from the top and the lime-to-amber pill; each draws its subject its own way.
 * Measurements are the frames' with their 52px status bar taken off. The tokens are
 * vibrez-mobile's `authColors` / `primaryGradient` / `glassSurface`
 * (src/auth/tokens.ts); the rings are drawn inline by app/api/frames.py from
 * AvatarFrameRing.tsx's tables; the Moment card mirrors src/universe/MomentCard.tsx.
 *
 * SEPARATE FROM site.css, which the front page keeps. A FILE RATHER THAN A <style>
 * BLOCK, and that is load-bearing: these pages send
 * `default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self'`, which
 * permits this sheet, the faces below and same-origin pictures, and forbids an
 * inline style — so the policy stays strict enough to be worth sending. No rule
 * here may need a `style=` attribute.
 */

/* Lato 2.015 and Barlow Semi Condensed 1.408 (both SIL OFL), subset to Latin,
   Cyrillic (Lato only) and punctuation. The version in the file name is what makes
   `immutable` safe: change the bytes, change the name. */
@font-face {
  font-display: swap;
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/lato-400.v1.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Lato;
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/lato-700.v1.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Lato;
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/lato-900.v1.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/barlow-semi-condensed-900.v1.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --canvas: #090909;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.6);
  --amber: #ffbf00;
  --lime: #d6ff00;
  --watermelon: #eb2d4e;
  --brand-ramp: linear-gradient(93.9deg, #d6ff00 -3.24%, #ffbf00 138.63%);
  --glass-ring: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  /* The frames' 21px side margin: the Moment card is 370 wide on 412. */
  --gutter: clamp(16px, 5.1vw, 21px);
  --headline: "Barlow Semi Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  display: flex;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/21px Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

.landing {
  display: flex;
  width: 100%;
  max-width: 412px;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 48px var(--gutter);
}

.logo {
  display: block;
  width: 120px;
  height: 21px;
  color: var(--ink);
}

.logo svg {
  display: block;
  width: 120px;
  height: 21px;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 156px from the wordmark to the picture at the frames' 917px height, less on a
   shorter screen so the button still lands above the fold. */
.hero {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(56px, 17svh, 156px);
  isolation: isolate;
}

/* The Moment card starts 64 under the wordmark; the post's photograph 32. */
.hero--moment {
  margin-top: clamp(32px, 7svh, 64px);
}

.hero--post {
  margin-top: 32px;
}

/* THE GLOW: 150px, blurred by 75, half strength. Behind everything in the hero. */
.glow {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: var(--amber);
  filter: blur(75px);
  opacity: 0.5;
  pointer-events: none;
}

.glow[data-frame="purple"] {
  background: #8e29ff;
}

.glow[data-frame="blue"] {
  background: #4aa5ff;
}

.glow[data-frame="red"] {
  background: #ff4a3d;
}

.glow[data-frame="green"] {
  background: #3fd95a;
}

.glow[data-frame="pink"] {
  background: #ff5cb0;
}

.glow[data-frame="silver"] {
  background: #c9ced6;
}

.glow[data-frame="orange"] {
  background: #ff8a1f;
}

/* A page with no picture: the glow sits behind the heading instead. */
.hero--plain .glow {
  top: 16px;
}

/* open-profile: a 120px photo inside a 140px frame, so inset 10 all round —
   `avatar` in profile/tokens.ts. open-building: the icon bare in the same 140 box. */
.visual {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 12px;
}

.photo {
  position: absolute;
  inset: 10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #1b1b1b;
  object-fit: cover;
}

.visual--icon .photo {
  inset: 0;
  width: 140px;
  height: 140px;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1 {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 24px;
  font-weight: 900;
  line-height: 32px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

p {
  margin: 0;
}

.subject {
  max-width: 100%;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--muted);
}

/*
 * open-moment-*: the app's MomentCard. A 370-wide glass card at radius 16 with a 2px
 * ring — the ring is a transparent border showing the last background layer, the
 * fill is the frost over the canvas — a 370x232 hero, and a body 16 in.
 */
.moment {
  width: 100%;
  max-width: 370px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) padding-box,
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    var(--glass-ring) border-box;
  box-shadow: 0 10px 20px 10px rgba(18, 18, 18, 0.25);
  text-align: left;
}

.moment-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 370 / 232;
  background: #000;
}

.moment-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The frame's `bottom-tint`: 50 up from the hero's foot. */
.moment-tint {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0), var(--canvas));
}

/* `secondary-pill`: 28 tall at radius 12 on the canvas with a faint ring, the label
   in the brand ramp. The running variant is the design's red with white type. */
.chip {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    var(--glass-ring) border-box;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chip:not(.chip--live) .chip-label {
    background: var(--brand-ramp);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.chip--live {
  border-color: var(--watermelon);
  background: var(--watermelon);
  color: var(--ink);
}

/* The route across the hero's foot: Barlow Semi Condensed Black, upright. */
.moment-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  overflow: hidden;
  font-family: var(--headline);
  font-size: 16px;
  font-weight: 900;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moment-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.moment-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moment-title {
  font-family: var(--headline);
  font-size: 24px;
  line-height: 28px;
}

.moment-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 16px;
}

.moment-rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.moment-people {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
}

/* Four 34px faces on a 24px pitch, then the count of the rest. */
.stack {
  display: flex;
  flex-shrink: 0;
}

.face,
.more {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.stack > * + * {
  margin-left: -10px;
}

.face-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1b1b1b;
  object-fit: cover;
}

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: var(--canvas);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  line-height: 16px;
}

.people {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ink);
}

/*
 * open-post: the feed's post, full-bleed — the photograph at 412x540 with its
 * author across the top under a 56px tint, fading into the canvas under a
 * progressive blur where the frame hides the rest of the post.
 */
.post {
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin: 0 calc(-1 * var(--gutter));
}

.post-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 412 / 540;
  background: #000;
}

.post-media::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  background: linear-gradient(180deg, var(--canvas), rgba(9, 9, 9, 0));
  content: "";
}

.post-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-head {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gutter);
  text-align: left;
  text-shadow: 1px 1px 2px rgba(18, 18, 18, 0.25);
}

.post-avatar {
  flex-shrink: 0;
}

.post-avatar .face {
  width: 38px;
  height: 38px;
}

.post-avatar .face-photo {
  position: absolute;
  inset: 3px;
  width: 32px;
  height: 32px;
}

.post-author {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.post-name,
.post-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-name {
  font-weight: 900;
}

.post-handle {
  font-size: 12px;
  line-height: 16px;
}

.post-fade {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0), var(--canvas));
  -webkit-backdrop-filter: blur(37.5px);
  backdrop-filter: blur(37.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}

/*
 * THE BUTTON: 300x48, radius 24, 48px under the words above it (47 under a Moment
 * card, 18 under a post's photograph). Fill is the brand ramp. The 2px ring sits
 * OUTSIDE the box — a transparent border showing the second background layer — and
 * negative margins take it back out of layout, so it overhangs rather than moving
 * anything. The inner rim is the design's "glass effect": a 4px white band at about
 * half strength, blurred.
 */
.open {
  display: flex;
  width: calc(100% + 4px);
  max-width: 304px;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin: 46px -2px -2px;
  border: 2px solid transparent;
  border-radius: 26px;
  background: var(--brand-ramp) padding-box, var(--glass-ring) border-box;
  box-shadow: inset 0 0 12px 1px rgba(255, 255, 255, 0.54);
  color: var(--canvas);
  font-size: 14px;
  font-weight: 900;
  line-height: 21px;
  text-decoration: none;
  text-transform: uppercase;
}

.hero--post .open {
  position: relative;
  z-index: 2;
  margin-top: 16px;
}

.open:active {
  transform: scale(0.98);
}

.open:focus-visible,
.install a:focus-visible,
.logo:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* One quiet line under the button. */
.install {
  margin-top: 16px;
  color: var(--muted);
}

.install a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
}

.note {
  margin-top: 24px;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .open {
    transition: transform 0.1s ease-out;
  }
}