@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap);

:root {
  --ang-cream: #ffffff;
  --ang-forest: #07112A;
  --ang-forest-2: #090D3A;
  --ang-lime: #4A9FF5;
  --ang-lime-2: #3A8FE5;
  --ang-ink: #081736;
  --ang-muted: #e8edf5;
  --ang-line: #07112A1f;
  --radius: 1rem;
}

body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  background-color: var(--ang-cream);
  color: var(--ang-ink);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  margin: 0;
}

body { overflow-x: clip; }

.font-serif { font-family: Playfair Display, Georgia, serif; }
.font-sans { font-family: Manrope, system-ui, -apple-system, sans-serif; }

::selection {
  background: var(--ang-lime);
  color: var(--ang-forest);
}

:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--ang-forest);
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }

.App {
  background: var(--ang-cream);
  color: var(--ang-ink);
  min-height: 100vh;
}

.ang-marquee { animation: ang-marquee 35s linear infinite; }
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

@keyframes ang-marquee {
  0%   { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse-dot {
  0%, to { opacity: 1; transform: scale(1); }
  50%    { opacity: .6; transform: scale(1.4); }
}

.grain:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .06;
  pointer-events: none;
  position: absolute;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

.toast-container { position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 10000; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--ang-forest); color: #fff; padding: 1rem 1.5rem; border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: .75rem; max-width: 360px; animation: toastIn .3s ease forwards; font-family: Manrope, sans-serif; }
.toast.success { border-left: 3px solid var(--ang-lime); }
.toast.error { border-left: 3px solid #dc2626; }
.toast.removing { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }