/* ==========================================================================
   home.css  -  Welcome page only
   ========================================================================== */

/* Free songs band */
.ny-free {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background:
    linear-gradient(180deg, rgba(6, 22, 30, .86), rgba(6, 22, 30, .78)),
    url("../../images/dark-1600.jpg") center / cover no-repeat;
  border-bottom: 1px solid var(--ny-line);
}
.ny-free .ny-title { max-width: 52rem; margin-left: auto; margin-right: auto; }

.ny-cover { max-width: 380px; margin: 0 auto; }

/* Community band */
.ny-enchant { padding: clamp(5rem, 14vw, 10rem) 0; }
.ny-enchant-sub { max-width: 34rem; margin: 1.4rem auto 0; font-family: var(--ny-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--ny-text); text-shadow: 0 2px 18px rgba(0, 0, 0, .8); text-wrap: balance; }
.ny-enchant .ny-title { text-shadow: var(--ny-3d), 0 6px 34px rgba(0, 0, 0, .7); }
/* Bottom free CD banner: button sits near the top so it does not cover her face */
.ny-claim { padding-top: clamp(3.5rem, 8.6vw, 6.5rem); padding-bottom: clamp(7.25rem, 17.5vw, 13.2rem); }

/* Quote slider dots */
.ny-quotes .carousel-item { transition: opacity .8s ease; }
.ny-dots { display: flex; gap: .5rem; margin-top: 1rem; }
.ny-dots button {
  width: .7rem; height: .7rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .35); cursor: pointer; transition: background-color .25s, transform .25s;
}
.ny-dots button.active { background: var(--ny-pink); transform: scale(1.3); }

/* Merchandise */
.ny-merch { background: linear-gradient(180deg, transparent, rgba(3, 12, 17, .55)); }
@media (min-width: 1200px) { .ny-merch .col-xl { flex: 0 0 20%; max-width: 20%; } }

/* Merchandise: each picture sits in a soft glow taken from the picture itself, like the Gallery */
.ny-glow {
  border-color: color-mix(in srgb, var(--g, #d1a097) 55%, transparent);
  box-shadow: 0 0 1rem -.1rem color-mix(in srgb, var(--g, #d1a097) 45%, transparent), 0 0 3rem 0 color-mix(in srgb, var(--g, #d1a097) 16%, transparent);
  animation: gl-breathe 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -9);
}
.ny-glow:hover, .ny-glow:focus {
  border-color: color-mix(in srgb, var(--g, #d1a097) 90%, #fff);
  box-shadow: 0 0 1.6rem .1rem color-mix(in srgb, var(--g, #d1a097) 70%, transparent), 0 0 4.5rem .5rem color-mix(in srgb, var(--g, #d1a097) 32%, transparent);
}
/* a slow sweep of light across the picture on hover */
.ny-glow .ny-product-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform 1s var(--ny-ease);
}
.ny-glow:hover .ny-product-img::after, .ny-glow:focus .ny-product-img::after { transform: translateX(120%); }
@keyframes gl-breathe {
  0%, 100% { box-shadow: 0 0 .8rem -.1rem color-mix(in srgb, var(--g, #d1a097) 35%, transparent), 0 0 2.4rem 0 color-mix(in srgb, var(--g, #d1a097) 10%, transparent); }
  50%      { box-shadow: 0 0 1.4rem 0 color-mix(in srgb, var(--g, #d1a097) 55%, transparent), 0 0 3.6rem .2rem color-mix(in srgb, var(--g, #d1a097) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ny-glow { animation: none; } }

/* Dreamery concert block: keep the headline and copy large on tablets and small laptops */
.ny-concert .ny-title { font-size: clamp(2.4rem, 6.4vw, 3.4rem); line-height: 1.15; }
.ny-concert .ny-lead { font-size: clamp(1.2rem, 2.2vw, 1.3rem); line-height: 1.7; }

/* Hanging vines and worn root edge under the Welcome video */
.ny-vines { --roots-h: clamp(70px, 9.5vw, 140px); position: relative; z-index: 3; height: 0; pointer-events: none; }
.ny-roots { position: absolute; left: 0; top: -1px; width: 100%; height: var(--roots-h); display: block; overflow: visible; clip-path: inset(-200px 0 -200px 0); }
.ny-limbs { position: absolute; left: 0; top: -1px; width: clamp(240px, 38vw, 560px); height: auto; aspect-ratio: 400 / 260; display: block; overflow: visible; }
@media (max-width: 575.98px) { .ny-limbs { width: 62vw; } }
.ny-limbs-r { left: 62%; width: clamp(220px, 30vw, 440px); }
@media (max-width: 575.98px) { .ny-limbs-r { left: 48%; width: 50vw; } }