/* =====================================================================
   OPTIONAL DESIGN LAYER
   ---------------------------------------------------------------------
   Everything in this file is decoration only. Nothing here is needed for
   the website to work.

   TO REMOVE IT ALL: open index.html and delete this one line —
       <link rel="stylesheet" href="extras.css">
   The site keeps working exactly the same, just plainer.
   ===================================================================== */

/* ---------- 1. gentle entrance for each page ---------- */
main > *, .figure-band, .post {
  animation: exFade .55s ease both;
}
.section-title { animation: exRise .6s ease both .05s }
.section-sub   { animation: exRise .6s ease both .12s }
.gold-rule     { animation: exWidth .7s ease both .18s }
@keyframes exFade { from { opacity:0 } to { opacity:1 } }
@keyframes exRise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes exWidth{ from { width:0 } to { width:56px } }

/* ---------- 2. ornament under every section title ---------- */
.gold-rule {
  position: relative;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  height: 1px;
  width: 120px;
}
.gold-rule::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-dark);
}

/* ---------- 3. product & news cards ---------- */
.card-img, .news-thumb {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card-img, .news-card:hover .news-thumb {
  transform: scale(1.04);
}
.card-img, .card-ph, .news-thumb-wrap { overflow: hidden }
.card:hover { transform: translateY(-6px) }
.card-name { transition: color .25s }
.card:hover .card-name { color: var(--gold-dark) }

/* thin rule that draws itself under a product name on hover */
.card-body { position: relative }
.card-body::after {
  content: '';
  position: absolute; left: 50%; bottom: -4px;
  width: 0; height: 1px; background: var(--gold-dark);
  transition: width .35s ease, left .35s ease;
}
.card:hover .card-body::after { width: 40px; left: calc(50% - 20px) }

/* ---------- 4. first letter of a news post ---------- */
.post-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.1rem;
  line-height: .85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--gold-dark);
}

/* ---------- 5. quieter, more expensive-looking shadows ---------- */
.svc-card, .news-card, .modal-card, .drawer {
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
.svc-card:hover, .news-card:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.11);
}
.figure-wrap img { box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.16) }

/* ---------- 6. buttons ---------- */
.btn { position: relative; overflow: hidden }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1) }
.btn { z-index: 0 }

/* ---------- 7. navigation ---------- */
.navbar { backdrop-filter: saturate(1.15) }
.nav-center a { position: relative; border-bottom-color: transparent !important }
.nav-center a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.nav-center a:hover::after, .nav-center a.active::after { transform: scaleX(1) }
.logo-chip { transition: transform .4s ease }
.nav-logo:hover .logo-chip { transform: rotate(-8deg) }

/* ---------- 8. hero ---------- */
.hero-brand { animation: exHero 1.4s cubic-bezier(.2,.7,.2,1) both }
.hero-tag   { animation: exRise 1s ease both .5s }
.hero-cta   { animation: exRise 1s ease both .7s }
@keyframes exHero { from { opacity:0; transform:scale(.97) } to { opacity:1; transform:none } }

/* ---------- 9. section headings in the post page ---------- */
.post-head h1 { position: relative; display: inline-block }
.post-head h1::after {
  content: '';
  display: block; width: 46px; height: 1px;
  background: var(--gold-dark);
  margin: 18px auto 0;
}

/* ---------- 10. footer ---------- */
.site-footer { position: relative }
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--on-green) 45%, transparent), transparent);
}

/* ---------- 11. respect reduced-motion settings ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}