/* “AS-IS” Ventures
   One card. The card is XeLaTeX output, placed as SVG. */

@font-face {
  font-family: "ASIS Movie";
  src: url(/fonts/asis-movie-garamond.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url(/fonts/eb-garamond-medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bone: #f3f0e8;
  --ink: #1b1a18;
  --chalk: #d9d5cb;
  --chalk-dim: #8a877f;
  --night: #0b0b0c;
  --oxblood: #7b1113;

  --card-w: min(86vw, 36rem);
  --card-h: calc(var(--card-w) * 4 / 7);
  --u: calc(var(--card-w) / 252);

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --caps: "ASIS Movie", "EB Garamond", Garamond, serif;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  color: var(--chalk);
  font: 500 1rem / 1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* The table: suit wool under a single light. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background: url(/textures/wool.webp) 0 0 / 320px;
}
body::after {
  z-index: -1;
  background:
    radial-gradient(62% 58% at 50% 42%, rgba(255, 244, 222, 0.08), transparent 72%),
    radial-gradient(125% 105% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

::selection { background: var(--oxblood); color: var(--bone); }

:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

img { display: block; max-width: 100%; height: auto; }

h1, p { margin: 0; font-weight: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8vh, 5rem) 1.25rem 1.5rem;
}

/* ---- The card ---- */

.card {
  position: relative;
  flex: none;
  width: var(--card-w);
  height: var(--card-h);
  perspective: calc(var(--card-w) * 2.4);
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.card__tilt,
.card__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.card__tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card__flip { transition: transform 1.1s cubic-bezier(0.3, 0.05, 0.15, 1); }
.card.is-flipped .card__flip { transform: rotateY(180deg); }
html:not(.js) .card.is-flipped .card__flip { transform: none; }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--bone) url(/textures/paper.webp) 0 0 / 420px;
  background-blend-mode: multiply;
  box-shadow:
    0 calc(var(--u) * 0.4) 0 #c3bfb2,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 14px 26px rgba(0, 0, 0, 0.4),
    0 40px 80px -12px rgba(0, 0, 0, 0.7);
}
.face--back { transform: rotateY(180deg); }
.face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Raised lettering: a lit lower edge and the faintest shadow above. */
  filter:
    drop-shadow(0 calc(var(--u) * 0.075) 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 calc(var(--u) * -0.03) 0 rgba(0, 0, 0, 0.16));
}

/* Held to the light, the paper shows its watermark near the pointer. */
.light {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(circle calc(var(--u) * 58) at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.65), transparent 75%);
}
.card.is-lit .light { opacity: 1; }
.light__mark {
  position: absolute;
  inset: 0;
  background: #8d8166;
  opacity: 0.3;
  -webkit-mask-image:
    radial-gradient(circle calc(var(--u) * 56) at var(--lx, 50%) var(--ly, 50%), #000 35%, transparent 100%),
    url(/cards/watermark.svg);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle calc(var(--u) * 56) at var(--lx, 50%) var(--ly, 50%), #000 35%, transparent 100%),
    url(/cards/watermark.svg);
  mask-size: 100% 100%, 100% 100%;
  mask-composite: intersect;
}

/* ---- Words ---- */

.contact {
  margin-top: clamp(2.25rem, 6vh, 3.5rem);
  text-align: center;
  font: 1.2rem / 1.4 var(--caps);
  letter-spacing: 0.012em;
}
.contact p + p { margin-top: 0.8rem; }
.contact a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 240, 232, 0.4);
  overflow-wrap: anywhere;
}
.contact a:hover { border-bottom-color: var(--bone); }

.legal {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--chalk-dim);
}

@media (prefers-reduced-motion: reduce) {
  .card__flip,
  .card__tilt { transition: none; }
}