/* V15 — Five Elements: fixed, non-layout ambient energy for the 480px homepage. */
:root {
  --v15-ink: #030403;
  --v15-gold: #d0a64f;
  --v15-gold-bright: #f3d98d;
  --v15-gold-line: rgba(231, 195, 108, .62);
}

body.home-v15 {
  position: relative;
  isolation: isolate;
  background: #040504;
}

/* Five quiet fields: wood, fire, earth, metal and water. */
body.home-v15::before,
body.home-v15::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(480px, 100vw);
  height: 100vh;
  transform: translateX(-50%);
  pointer-events: none;
}

body.home-v15::before {
  display: block;
  opacity: .7;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(86, 111, 70, .17) 0, rgba(86, 111, 70, .065) 17%, transparent 39%),
    radial-gradient(circle at 86% 29%, rgba(145, 54, 33, .14) 0, rgba(145, 54, 33, .05) 16%, transparent 38%),
    radial-gradient(circle at 43% 52%, rgba(180, 128, 45, .14) 0, rgba(180, 128, 45, .045) 18%, transparent 42%),
    radial-gradient(circle at 78% 73%, rgba(235, 214, 158, .105) 0, rgba(235, 214, 158, .035) 16%, transparent 38%),
    radial-gradient(circle at 17% 88%, rgba(55, 80, 108, .16) 0, rgba(55, 80, 108, .05) 19%, transparent 42%);
  background-repeat: no-repeat;
  background-size: 145% 145%, 150% 150%, 158% 158%, 148% 148%, 154% 154%;
  background-position: -30% -22%, 128% 8%, 42% 55%, 112% 100%, -25% 118%;
  animation: v15FiveElementsFlow 38s ease-in-out infinite alternate;
}

body.home-v15::after {
  display: block;
  opacity: .32;
  background-image:
    repeating-radial-gradient(ellipse at 50% 105%, transparent 0 54px, rgba(224, 187, 96, .055) 55px 56px, transparent 57px 108px),
    linear-gradient(116deg, transparent 12%, rgba(212, 169, 75, .035) 36%, rgba(243, 217, 141, .075) 48%, rgba(212, 169, 75, .025) 60%, transparent 84%);
  background-repeat: repeat-y, no-repeat;
  background-size: 122% 360px, 230% 100%;
  background-position: 50% 0, 125% 0;
  animation: v15MeridianFlow 27s linear infinite;
}

body.home-v15 > main,
body.home-v15 > .v11-footer {
  position: relative;
  z-index: 1;
}

.home-v15 .v11-section.alt { background: rgba(8, 10, 13, .86); }
.home-v15 .v11-preview { background: rgba(7, 7, 8, .9); }
.home-v15 .v11-products-section { background: linear-gradient(135deg, rgba(17, 18, 22, .93), rgba(7, 7, 8, .91) 64%); }
.home-v15 .v11-final { background: rgba(5, 5, 6, .91); }
.home-v15 .v11-footer { background: rgba(2, 3, 4, .95); }

/* Black-gold CTA seal. Five gold pulses circulate under the label. */
.home-v15 .v11-header-cta,
.home-v15 .v11-button,
.home-v15 .v11-button.primary,
.home-v15 .v11-bottom-bar a.start {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--v15-gold-line);
  color: var(--v15-gold-bright);
  background: linear-gradient(180deg, #090b09, var(--v15-ink));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 185, .06),
    inset 0 -12px 24px rgba(0, 0, 0, .26),
    0 0 0 1px rgba(84, 57, 14, .22),
    0 7px 22px rgba(0, 0, 0, .24);
  text-shadow: 0 0 15px rgba(237, 198, 102, .24);
}

.home-v15 .v11-header-cta::before,
.home-v15 .v11-button::before,
.home-v15 .v11-bottom-bar a.start::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% -22%;
  opacity: .72;
  background-image:
    radial-gradient(circle at 8% 52%, rgba(157, 118, 43, .26) 0 4%, transparent 15%),
    radial-gradient(circle at 29% 48%, rgba(229, 179, 73, .25) 0 4%, transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(246, 219, 139, .28) 0 4%, transparent 15%),
    radial-gradient(circle at 71% 47%, rgba(197, 144, 40, .24) 0 4%, transparent 16%),
    radial-gradient(circle at 92% 53%, rgba(241, 204, 105, .27) 0 4%, transparent 15%);
  background-size: 170% 100%;
  background-position: 110% 50%;
  filter: blur(5px);
  animation: v15ButtonFivePulse 7.5s ease-in-out infinite alternate;
}

.home-v15 .v11-header-cta::after,
.home-v15 .v11-button::after,
.home-v15 .v11-bottom-bar a.start::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  opacity: .42;
  background: linear-gradient(108deg, transparent 23%, rgba(210, 158, 51, .05) 39%, rgba(255, 229, 158, .24) 49%, rgba(210, 158, 51, .05) 60%, transparent 77%);
  background-size: 240% 100%;
  background-position: 130% 0;
  animation: v15GoldBreath 5.8s ease-in-out infinite;
}

.home-v15 .v11-header-cta:hover,
.home-v15 .v11-header-cta:focus-visible,
.home-v15 .v11-button:hover,
.home-v15 .v11-button:focus-visible,
.home-v15 .v11-button.primary:hover,
.home-v15 .v11-button.primary:focus-visible,
.home-v15 .v11-bottom-bar a.start:hover,
.home-v15 .v11-bottom-bar a.start:focus-visible {
  border-color: var(--v15-gold-bright);
  color: #ffe9aa;
  background: linear-gradient(180deg, #0c0d0b, #040504);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 185, .1),
    inset 0 -12px 24px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(163, 116, 30, .3),
    0 0 22px rgba(208, 166, 79, .16),
    0 8px 24px rgba(0, 0, 0, .3);
  outline: none;
}

.home-v15 .v11-header-cta:focus-visible,
.home-v15 .v11-button:focus-visible,
.home-v15 .v11-bottom-bar a.start:focus-visible {
  outline: 2px solid rgba(243, 217, 141, .92);
  outline-offset: 3px;
}

.home-v15 .v11-bottom-bar a.start img {
  position: relative;
  z-index: 1;
  filter: sepia(.8) saturate(1.15) brightness(.86);
}

@keyframes v15FiveElementsFlow {
  0% { background-position: -30% -22%, 128% 8%, 42% 55%, 112% 100%, -25% 118%; opacity: .58; }
  48% { background-position: 18% 7%, 84% 31%, 65% 45%, 68% 80%, 8% 89%; opacity: .78; }
  100% { background-position: 45% 22%, 56% 55%, 30% 68%, 34% 56%, 54% 72%; opacity: .62; }
}

@keyframes v15MeridianFlow {
  0% { background-position: 50% 0, 130% 0; }
  50% { background-position: 48% 180px, 35% 0; }
  100% { background-position: 52% 360px, -80% 0; }
}

@keyframes v15ButtonFivePulse {
  0% { background-position: 112% 50%; opacity: .48; }
  55% { opacity: .8; }
  100% { background-position: -20% 50%; opacity: .56; }
}

@keyframes v15GoldBreath {
  0%, 16% { background-position: 130% 0; opacity: .14; }
  58% { opacity: .52; }
  100% { background-position: -120% 0; opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-v15::before,
  body.home-v15::after,
  .home-v15 .v11-header-cta::before,
  .home-v15 .v11-header-cta::after,
  .home-v15 .v11-button::before,
  .home-v15 .v11-button::after,
  .home-v15 .v11-bottom-bar a.start::before,
  .home-v15 .v11-bottom-bar a.start::after {
    animation: none !important;
  }
}