/*
  Stylesheet for the personal landing page (index.html).

  The palette is drawn from the rose photo:
    - deep rose / magenta from the petals
    - sage and leaf green from the foliage
    - warm gold from the anthers
    - blush and stone tones for the background

  Organization:
    1. Color, font, and size settings (change these to restyle the whole page)
    2. Dark-mode colors (applied automatically if the visitor's device prefers dark)
    3. Page layout and background
    4. Individual elements (title, photo, ornament, quotation)
    5. Gentle fade-in on page load
    6. Small-screen adjustments
*/


/* ---------- 1. Color, font, and size settings ---------- */
:root {
  /* Background: warm cream with a soft blush glow */
  --color-background: #fbf6f1;
  --color-background-glow: #f7dfe3;

  /* Text */
  --color-text: #3b2228;          /* deep plum-brown, softer than black */
  --color-muted: #7d6a64;         /* warm taupe for secondary text */

  /* Accents taken from the photo */
  --color-rose: #c41e4f;          /* petal crimson-magenta */
  --color-leaf: #5f7d4c;          /* foliage green */
  --color-gold: #c8913a;          /* anther gold */

  /* Fonts (loaded in index.html; Georgia is the fallback) */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Italianno", "Cormorant Garamond", Georgia, cursive;

  /* Displayed width and height of the rose photo */
  --photo-size: 280px;
}


/* ---------- 2. Dark-mode colors ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1214;          /* deep wine-black */
    --color-background-glow: #3a1a24;     /* dim rose glow */
    --color-text: #f3e7e4;
    --color-muted: #b9a6a1;
    --color-rose: #f0628a;                /* brighter rose for contrast */
    --color-leaf: #9dbb88;
    --color-gold: #e2b264;
  }
}


/* ---------- 3. Page layout and background ---------- */

/* Remove default browser spacing so layout is predictable */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;                 /* fill the full browser height */
  display: flex;                     /* flexbox does the centering */
  align-items: center;               /* vertical centering */
  justify-content: center;           /* horizontal centering */
  padding: 3rem 1rem;                /* breathing room on small screens */

  /* A soft blush glow behind the photo, fading out to cream at the edges */
  background-color: var(--color-background);
  background-image: radial-gradient(
    circle at 50% 42%,
    var(--color-background-glow) 0%,
    var(--color-background) 60%
  );
  background-attachment: fixed;      /* glow stays put while scrolling */

  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.6;
}

.page-content {
  max-width: 36rem;                  /* keeps text lines a readable length */
  text-align: center;                /* center-align all content */
}


/* ---------- 4. Individual elements ---------- */

/* Name heading: light, widely spaced small capitals */
.site-title {
  font-size: 2.6rem;
  font-weight: 300;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 2.25rem;
}

/* The "aka MxVoid" line sits beneath the name */
.alias {
  display: block;
  margin-top: 0.4rem;
  font-variant: normal;              /* undo small caps from the heading */
  letter-spacing: normal;
}

/* The small word "aka" */
.alias-label {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-muted);
  margin-right: 0.35rem;
}

/* "MxVoid" in rose-colored script */
.alias-name {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--color-rose);
  line-height: 1;
}

/* Rose photo: circular crop with a fine gold ring and a soft rose glow */
.centerpiece {
  display: block;
  width: var(--photo-size);
  height: var(--photo-size);
  margin: 0 auto 1.75rem;
  object-fit: cover;                 /* crops instead of stretching */
  border-radius: 50%;

  /* Thin rose border, a gap of background color, then a thin gold ring */
  border: 2px solid var(--color-rose);
  padding: 6px;
  background-color: var(--color-background);
  outline: 1px solid var(--color-gold);
  outline-offset: 6px;

  /* Diffuse rose-colored glow around the photo */
  box-shadow: 0 0 60px -10px var(--color-rose);
}

/*
  Decorative ornament between the photo and the quote: a leaf-green
  floral heart (❦) flanked by thin lines. It is drawn entirely with CSS
  on the quotation's ::before, so it adds nothing to the HTML.
*/
.quotation::before {
  content: "❦";
  display: block;
  margin: 0 auto 1.5rem;
  width: 10rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-leaf);

  /* Thin gold lines on either side of the ornament */
  background-image: linear-gradient(
    to right,
    transparent 0%,
    var(--color-gold) 30%,
    transparent 40%,
    transparent 60%,
    var(--color-gold) 70%,
    transparent 100%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Quotation block */
.quotation {
  font-size: 1.75rem;
}

.quote-original {
  font-style: italic;
  font-weight: 400;
  color: var(--color-rose);
}

.quote-translation {
  color: var(--color-muted);
  font-size: 1.5rem;
  font-style: italic;
  margin-top: 0.35rem;
}

.quote-attribution {
  margin-top: 1.1rem;
  font-size: 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--color-leaf);
}

/* Book title stays italic but drops the small caps for readability */
.quote-attribution cite {
  font-variant: normal;
  letter-spacing: normal;
}


/* ---------- 5. Gentle fade-in on page load ---------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Each section fades in slightly after the one before it */
.site-title,
.centerpiece,
.quotation {
  animation: fade-up 1.2s ease-out both;
}

.centerpiece { animation-delay: 0.25s; }
.quotation   { animation-delay: 0.5s; }

/* Respect visitors who have asked their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .site-title,
  .centerpiece,
  .quotation {
    animation: none;
  }
}


/* ---------- 6. Small-screen adjustments ---------- */
@media (max-width: 480px) {
  :root {
    --photo-size: 210px;
  }

  .site-title {
    font-size: 2rem;
  }

  .alias-name {
    font-size: 2.2rem;
  }

  .quotation {
    font-size: 1.3rem;
  }
}