/* 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;
}

/* ---- 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; }

/* Arrive-glow: a deep-linked item briefly ringed in gold (see site.js arriveGlow).
   box-shadow respects the element's own border-radius, so it hugs rounded tiles. */
.arrived { animation: arriveGlow 1.5s ease-out forwards; }
@keyframes arriveGlow {
  0%   { box-shadow: 0 0 0 1px #c9a96e, 0 0 20px 2px rgba(201, 169, 110, 0.55); }
  100% { box-shadow: 0 0 0 1px rgba(201, 169, 110, 0), 0 0 20px 2px rgba(201, 169, 110, 0); }
}

@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; }
  /* Static gold ring instead of the fade; JS removes .arrived after 2s. */
  .arrived { animation: none; box-shadow: 0 0 0 1px #c9a96e; }
}