/* ═══════════════════════════════════════════════
   HOME — Raffaella's World
   Stili specifici della homepage (index.html)
   ═══════════════════════════════════════════════ */

body {
  overflow-x: hidden;
}

/* ── Hero header ── */
header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 64px 24px 48px;
  overflow: hidden;
}

.header-deco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
.header-deco svg { position: absolute; opacity: 0.55; }

.deco-tl { top: -10px; left: -20px;  width: 280px; transform: rotate(-15deg); }
.deco-tr { top: -20px; right: -30px; width: 260px; transform: rotate(20deg) scaleX(-1); }
.deco-bl { bottom: -30px; left: 10px;  width: 160px; transform: rotate(10deg);   opacity: 0.3 !important; }
.deco-br { bottom: -20px; right: 20px; width: 150px; transform: rotate(-12deg) scaleX(-1); opacity: 0.3 !important; }

.header-inner { position: relative; z-index: 2; }

/* ── Titolo home ── */
.site-label {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s 0.1s ease forwards;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bark);
  opacity: 0;
  animation: fadeUp 0.9s 0.25s ease forwards;
}
h1 em { font-style: italic; color: var(--rose); }

.tagline {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  color: var(--text-light);
  opacity: 0;
  animation: fadeUp 0.9s 0.4s ease forwards;
}

.divider {
  margin: 32px auto 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  animation: fadeIn 1s 0.55s ease forwards;
}

/* ── Main ── */
main {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ── Section header ── */
.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.8s 0.65s ease forwards;
}
.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bark);
  white-space: nowrap;
}
.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--petal), transparent);
}

/* ── Griglia progetti ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
  opacity: 0;
  animation: fadeUp 0.9s 0.8s ease forwards;
}

/* ── Project card ── */
.project-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(242, 196, 184, 0.55);
  border-radius: 18px;
  padding: 28px 26px 24px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.project-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 196, 184, 0.35), transparent 70%);
  transition: transform 0.4s ease;
}
.project-card:hover              { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(110, 60, 45, 0.12); border-color: var(--petal); }
.project-card:hover::before      { transform: scale(1.4); }

.card-icon  { font-size: 2rem;    margin-bottom: 14px; }
.card-title { font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--bark); margin-bottom: 6px; }
.card-desc  { font-size: 0.88rem; color: var(--text-light); line-height: 1.6; margin-bottom: 16px; }
.card-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(242, 196, 184, 0.3);
  color: var(--rose);
  border: 1px solid var(--petal);
}