/*
 * Application styles — loaded via Propshaft alongside tailwind.css
 */

body:not([data-theme="dark"]) {
  background-color: #FAFAF8;
  color: #1a1a1a;
}

.font-cormorant {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-playfair {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-inter {
  font-family: 'Inter', system-ui, sans-serif;
}

.masthead-rule {
  border-top: 3px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}

.article-body p {
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Page slide transitions */
@keyframes slideInFromRight {
  from { transform: translateX(48px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-48px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

[data-slide-direction="forward"] main {
  animation: slideInFromRight 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-slide-direction="backward"] main {
  animation: slideInFromLeft 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Flip cards (e.g. Fantasy Portfolio summary panels) */
.flip-card-perspective {
  perspective: 1200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}