/* ============================================================
   saendru — landing page · brand tokens + shared styles
   Pulled from the SAENDRU design system. lowercase everywhere,
   courier typewriter, cream matte, warm→cool dusk arc.
   ============================================================ */

@font-face {
  font-family: "basis33";
  src: url("fonts/basis33.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;1,400&display=swap");

:root {
  --matte:        #F2EFE9;
  --matte-warm:   #EDE7DA;
  --ink:          #1A1A2E;
  --ink-soft:     #2A2A40;
  --ink-mute:     #6B6B7A;
  --hairline:     rgba(26,26,46,0.12);
  --hairline-2:   rgba(26,26,46,0.20);

  /* nunca hue preset */
  --heat:         #E04A4A;
  --magenta:      #9C3E8A;
  --indigo:       #3D2A6E;
  --indigo-night: #0A0E27;
  --rose:         #D8588A;
  --amber:        #FFB347;
  --grad-nunca:   linear-gradient(135deg, #E04A4A 0%, #9C3E8A 50%, #3D2A6E 100%);
  --grad-dusk-sky: linear-gradient(180deg,#0A0E27 0%,#14172E 12%,#1F1F3E 24%,#2E2452 37%,#4B2F7A 50%,#6A40A8 62%,#9658D4 72%,#C667B8 81%,#E37AA8 88%,#FF8C8C 94%,#FFB347 100%);

  --font-lockup: "basis33","VT323",ui-monospace,monospace;
  --font-body:   "Courier Prime","IBM Plex Mono",ui-monospace,Menlo,monospace;

  --tr-lockup:    0.16em;
  --tr-lockup-sm: 0.10em;
  --tr-caption:   0.04em;

  --ease-out-soft: cubic-bezier(0.22,1,0.36,1);
  --ease-breath:   cubic-bezier(0.45,0.05,0.55,0.95);
  --dur-quick: 160ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-breath: 1800ms;

  --shadow-paper: 0 1px 0 rgba(26,26,46,0.04), 0 18px 44px -20px rgba(26,26,46,0.30);
  --glow-warm:   0 0 90px -8px rgba(255,107,157,0.55);
}

/* ---- per-artboard reset (scoped so canvas chrome is untouched) ---- */
.saendru-page * { box-sizing: border-box; margin: 0; padding: 0; }
.saendru-page {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--matte);
  width: 100%; height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
}
.saendru-page a { color: inherit; text-decoration: none; }

/* the lockup mark */
.lockup {
  font-family: var(--font-lockup);
  font-weight: 400;
  letter-spacing: var(--tr-lockup);
  text-transform: lowercase;
  line-height: 0.9;
}

/* film grain overlay */
.grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background-image:
    radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.05;
}

/* shared platform link row */
.plink {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 15px; letter-spacing: 0.02em;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  transition: opacity var(--dur-quick) var(--ease-out-soft), padding-left var(--dur-base) var(--ease-out-soft);
}
.plink:hover { opacity: 0.55; }
.plink .pnum { color: var(--ink-mute); font-size: 12px; min-width: 26px; }
.plink .parrow { margin-left: auto; transition: transform var(--dur-base) var(--ease-out-soft); }
.plink:hover .parrow { transform: translateX(4px); }

/* primary CTA — spotify save/follow */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0.02em;
  text-transform: lowercase;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink); background: transparent;
  cursor: pointer;
  transition: opacity var(--dur-quick) var(--ease-out-soft);
}
.cta:hover { opacity: 0.55; }
.cta--solid { background: var(--ink); color: var(--matte); border-color: var(--ink); }
.cta .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.9; }

/* ghost / secondary button */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: 0.03em; text-transform: lowercase;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--hairline-2); color: var(--ink-soft);
  transition: opacity var(--dur-quick) var(--ease-out-soft);
}
.btn-ghost:hover { opacity: 0.55; }

/* embed framing — kill the iframe's default border, sit flush on cream */
.embed-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.embed-wrap iframe { display: block; border: 0; width: 100%; }

/* monospace meta slip */
.meta { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-mute); }
.sep { color: var(--ink-mute); padding: 0 8px; }

/* breathing glow used behind Mode-B forms */
@keyframes saendru-breath {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%     { opacity: 0.85; transform: scale(1.05); }
}
@keyframes saendru-drift {
  0%   { transform: translate3d(0,0,0) scale(1.06); }
  100% { transform: translate3d(-1.5%,1%,0) scale(1.12); }
}
/* entrance: slide-up only, content stays fully visible the whole time so
   static captures / print / reduced-motion never show a blank frame. */
@keyframes saendru-rise {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
.rise { animation: saendru-rise var(--dur-slow) var(--ease-out-soft) both; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }
.rise-4 { animation-delay: 0.36s; }
.rise-5 { animation-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .rise, [class*="saendru-"] { animation: none !important; }
}