/* AngieRainey.com — shared styles ("Candlelight" design language, see docs/DESIGN.md)
   This is the stylesheet every page links. It restores the fonts, cursor, film
   grain, and animations that the old dead ./src/index.css link was meant to provide. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@400;500&display=swap');

/* ---- Type voices ------------------------------------------------------- */
.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-body    { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-ui      { font-family: 'Montserrat', system-ui, sans-serif; }

/* ---- Film grain overlay ------------------------------------------------ */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- Custom cursor (desktop only; JS adds the dot + ring) --------------- */
#cursor-dot, #cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  will-change: transform;
}
#cursor-dot {
  width: 6px; height: 6px;
  background: #c9a96e;
}
#cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(201,169,110,0.7);
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
#cursor-ring.hovered {
  width: 46px; height: 46px;
  background: rgba(201,169,110,0.12);
  border-color: #c9a96e;
}
@media (min-width: 769px) {
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button, body.cursor-ready .interactive { cursor: none; }
}

/* ---- Page fade transitions --------------------------------------------- */
body { transition: opacity 0.6s ease; }
body.fade-out { opacity: 0; }

/* ---- Reveal animations ------------------------------------------------- */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes expandLine{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shake     { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
@keyframes petalFall {
  0%   { transform: translateY(-30px) rotate(0) translateX(0); opacity: 0; }
  5%   { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}

.animate-fade-up    { opacity: 0; animation: fadeUp 0.8s ease forwards; }
.animate-expand-line{ transform-origin: left; animation: expandLine 0.9s cubic-bezier(0.77,0,0.18,1) forwards; }
.animate-shake      { animation: shake 0.4s ease; }

.petal {
  position: absolute;
  top: -30px;
  font-size: 1.2rem;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  animation: petalFall linear infinite;
}

/* ---- Utilities --------------------------------------------------------- */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-expand-line, .animate-shake, .petal { animation: none !important; opacity: 1 !important; transform: none !important; }
  body { transition: none; }
}