/* assets/hero.css — optional decorative ambient layer for the hero.
   Loaded from index.html via <link rel="stylesheet" href="assets/hero.css">.
   Safe to delete: index.html hides .hero-decor by default, so the page
   renders cleanly (no decorations, no layout shift) without this file. */

/* Soft Tiffany glow behind the hero (static ambient effect) */
.hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 80vw);
  height: min(500px, 80vw);
  background: radial-gradient(ellipse, rgba(0,201,183,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

  /* Full-viewport decorative layer — sits in the side gutters; centered hero column stays clear */
  .hero .hero-decor {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero > *:not(.hero-decor) { position: relative; z-index: 1; }

.decor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: heroFadeIn 0.9s ease-out var(--fd, 0s) both;
}
.decor__el {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* unified Tiffany system: crisp rings + soft circular glows + one rotating gradient ring */
.decor--ring .decor__el {
  border: 1.5px solid rgba(0,201,183,0.40);
  filter: drop-shadow(0 8px 30px rgba(10,186,181,0.15));
  animation: heroFloatA 16s ease-in-out infinite alternate;
}
.decor--ring2 .decor__el {
  border: 1px solid rgba(12,126,115,0.50);
  filter: drop-shadow(0 6px 24px rgba(10,186,181,0.12));
  animation: heroFloatB 13s ease-in-out infinite alternate;
}
.decor--ring-spin .decor__el {
  background: conic-gradient(from 0deg, #5ff7ea, #0ABAB5, #00e6d4, #0ABAB5, #5ff7ea, #0ABAB5, #00e6d4);
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 75%);
  mask: radial-gradient(circle, transparent 70%, #000 75%);
  filter: drop-shadow(0 0 20px rgba(10,186,181,0.7));
  animation: heroSpin 24s linear infinite;
}
.decor--glow .decor__el {
  background: radial-gradient(circle at 50% 50%, rgba(10,157,143,0.20), rgba(10,157,143,0) 70%);
  animation: heroFloatC 19s ease-in-out infinite alternate;
}

.pulse-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 10px);
  height: var(--s, 10px);
  will-change: transform;
  animation: heroFadeIn 0.9s ease-out var(--fd, 0s) both;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0,201,183,0.55);
  animation: heroPulse var(--pd, 3.4s) ease-in-out infinite;
}

@keyframes heroFloatA {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .5; }
  50%  { transform: translate3d(10px,-14px,0) scale(1.05); opacity: .7; }
  100% { transform: translate3d(-12px,10px,0) scale(0.97); opacity: .45; }
}
@keyframes heroFloatB {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .45; }
  50%  { transform: translate3d(-12px,12px,0) scale(1.06); opacity: .65; }
  100% { transform: translate3d(10px,-10px,0) scale(0.96); opacity: .4; }
}
@keyframes heroFloatC {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .5; }
  50%  { transform: translate3d(12px,12px,0) scale(1.05); opacity: .62; }
  100% { transform: translate3d(-10px,-12px,0) scale(0.97); opacity: .48; }
}
@keyframes heroPulse {
  0%, 100% { transform: scale(0.75); opacity: .4; }
  50%      { transform: scale(1.2); opacity: 1; }
}
@keyframes heroSpin {
  to { transform: rotate(360deg); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .decor, .pulse-dot { animation: none !important; }
  .decor__el, .pulse-dot::before { animation: none !important; }
}
@media (max-width: 768px) {
  .hero-decor { display: none; }
}