/* Cinemint · shared tokens, background and cursor */
:root {
  --black: #0a0a0a;
  --char: #1a1a1a;
  --deep: #2d3a35;
  --mint: #52e6b0;
  --bone: #edebe6;
  --dim: rgba(237, 235, 230, .52);
  --hair: rgba(237, 235, 230, .14);
  --pad: clamp(20px, 3.4vw, 44px);
  --sans: "Satoshi", system-ui, sans-serif;
  --display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: var(--black); color: var(--bone);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--mint); color: var(--black); }

.label { font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); line-height: 2; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* background */
#silk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; opacity: 0; transition: opacity 2.4s ease; pointer-events: none; }
#silk.on { opacity: 1; }
.fallback { position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 60% at 30% 20%, rgba(150, 190, 170, .2), transparent 60%),
    radial-gradient(80% 50% at 80% 90%, rgba(160, 140, 125, .12), transparent 60%),
    var(--black); }
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, 5%); } 100% { transform: translate(4%, -2%); }
}

/* custom cursor (mouse only; added by fx.js) */
.cursor, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; border-radius: 50%; }
.cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(237, 235, 230, .45);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--mint); }
.cursor.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(82, 230, 176, .08); border-color: var(--mint); }
.cursor.text { width: 2px; height: 26px; margin: -13px 0 0 -1px; border-radius: 1px; background: var(--mint); border-color: transparent; }
.cursor.down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
body.has-cursor, body.has-cursor * { cursor: none !important; }

/* pill button */
.cta { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px 15px 24px; border-radius: 999px;
  background: var(--bone); color: var(--black); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; transition: background .4s, box-shadow .4s, opacity .3s; }
.cta:hover { background: var(--mint); box-shadow: 0 10px 40px rgba(82, 230, 176, .25); }
.cta i { font-style: normal; transition: transform .4s; }
.cta:hover i { transform: translateX(4px); }

/* entrance */
.in { opacity: 0; transform: translateY(12px); animation: in 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .grain { display: none; }
}