/* ==========================================================================
   COMPONENTS — reusable pieces used across sections
   ========================================================================== */

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 38px;
  border-radius:var(--radius-full);
  font-family:var(--font-body);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-luxury),
             box-shadow var(--dur-fast) var(--ease-luxury),
             background var(--dur-fast) var(--ease-luxury),
             color var(--dur-fast) var(--ease-luxury);
}
.btn:active{ transform:scale(0.97); }
.btn:disabled,
.btn.is-sent{
  opacity:0.55;
  cursor:default;
  pointer-events:none;
}

.btn-primary{
  background:var(--color-maroon);
  color:var(--color-gold-light);
  box-shadow:var(--shadow-maroon);
}
.btn-primary:hover{
  box-shadow:0 0 40px rgba(122,31,53,0.35);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent;
  color:var(--color-maroon);
  border:1px solid var(--color-gold);
}
.btn-ghost:hover{
  background:var(--color-maroon);
  color:var(--color-gold-light);
  border-color:var(--color-maroon);
  transform:translateY(-2px);
}

/* ---- Blurred ambient blobs (replaces the old ember canvas) ---- */
.blob-field{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
  will-change:transform;
}
.blob--rose{ background:var(--color-rose); }
.blob--sage{ background:var(--color-sage); }
.blob--gold{ background:var(--color-gold-light); }

/* ---- Glassmorphism panel ---- */
.glass-panel{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:var(--shadow-soft);
}

/* ---- Floral / ornamental line-art (inline SVGs use currentColor) ---- */
.floral{
  color:var(--color-gold);
  opacity:0.7;
  pointer-events:none;
}

/* ---- Portrait frame ---- */

.portrait-frame{
  position:relative;
  width:min(58vw, 280px);
  height:min(58vw, 280px);
  border-radius:50%;
  overflow:visible;
  animation:portraitFloat 6s ease-in-out infinite;
  will-change:transform;
}
.portrait-frame__ring{
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid var(--color-gold);
  opacity:0.5;
}
.portrait-frame__ring::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid transparent;
  background:conic-gradient(from 0deg, transparent, rgba(200,169,126,0.6), transparent 30%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ringSpin 10s linear infinite;
}
.portrait-frame__inner{
  position:relative;              /* NEW — anchors the shimmer + img below */
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(160deg, var(--color-cream), var(--color-rose));
  box-shadow:var(--shadow-lift);
  display:flex;
  align-items:center;
  justify-content:center;
}
.portrait-frame__inner::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
  transition:opacity var(--dur-med) ease;
  z-index:1;
}
.portrait-frame__inner.is-loaded::before{ opacity:0; }

.portrait-frame__inner img{
  position:absolute; inset:0;     /* CHANGED — was flow-positioned, now overlays the monogram */
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--dur-med) ease;
}
.portrait-frame__inner img.is-loaded{ opacity:1; }

.portrait-monogram{
  position:relative;              /* NEW — keeps it under the img once one loads */
  font-family:var(--font-script);
  font-size:3.2rem;
  color:var(--color-gold-deep);
  opacity:0.75;
}
/* ---- Music toggle ---- */
.music-toggle{
  position:fixed;
  top:20px; right:20px;
  z-index:90;
  width:44px; height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:var(--shadow-soft);
  color:var(--color-maroon);
  transition:transform var(--dur-fast) var(--ease-luxury), box-shadow var(--dur-fast) var(--ease-luxury);
}
.music-toggle:hover{ transform:scale(1.08); }
.music-toggle svg{ width:18px; height:18px; }
.music-toggle__note{
  animation:bob 2.4s ease-in-out infinite;
  transform-origin:center;
}
.music-toggle.is-muted .music-toggle__note{ animation:none; }
.music-toggle__slash{
  position:absolute;
  width:26px; height:1.5px;
  background:var(--color-maroon);
  transform:rotate(45deg);
  opacity:0;
  transition:opacity var(--dur-fast) ease;
}
.music-toggle.is-muted .music-toggle__slash{ opacity:1; }

/* ---- Touch-magic particles (see touch-magic.js) ---- */
.touch-particle{
  position:fixed;
  left:0; top:0;
  pointer-events:none;
  z-index:80;
  will-change:transform, opacity;
  line-height:1;
}

/* ---- Scroll indicator ---- */
.scroll-indicator{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:none;
  color:var(--color-gold-deep);
  font-size:0.62rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  cursor:pointer;
}
.scroll-indicator__stem{
  width:1px;
  height:34px;
  background:linear-gradient(var(--color-gold), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-indicator__stem::after{
  content:'';
  position:absolute;
  top:-34px; left:0;
  width:100%; height:34px;
  background:linear-gradient(var(--color-gold-deep), transparent);
  animation:scrollTravel 1.8s ease-in-out infinite;
}