/* fan-portal.css  -  Fan Portal page only */
/* Free-floating wisp bubbles: no grid. Each orb has its own spin, bounce, drift and reflection. */

/* ---- the field ---- */
.ny-field { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 1rem; padding: 1rem 0 2rem; }
.ny-orb { position: relative; flex: 0 0 min(16rem, 74vw); pointer-events: none; animation: ny-bob-a 3.2s ease-in-out infinite; }
.ny-orb:nth-child(even) { margin-top: 2.5rem; }
@media (min-width: 1200px) {
  .ny-field { display: block; height: 56rem; padding: 0; }
  .ny-orb { position: absolute; width: 17rem; margin: 0 !important; }
  .ny-orb:nth-child(1) { left: 4%;  top: 1rem; }
  .ny-orb:nth-child(2) { left: 27%; top: 9rem; }
  .ny-orb:nth-child(3) { left: 51%; top: 0; }
  .ny-orb:nth-child(4) { left: 74%; top: 10rem; }
  .ny-orb:nth-child(5) { left: 7%;  top: 27rem; }
  .ny-orb:nth-child(6) { left: 30%; top: 33rem; }
  .ny-orb:nth-child(7) { left: 53%; top: 27rem; }
  .ny-orb:nth-child(8) { left: 79%; top: 36rem; }
}
.ny-orb:hover { z-index: 5; }

/* per-orb randomness: spin speed and direction, bounce rhythm, reflection angle and size */
.ny-orb:nth-child(1) { --spin: 21s; --dir: normal;  --rot: -38deg; --rw: 26%; --rh: 13%; --drift: 13s; animation-duration: 3.1s;  animation-delay: -.4s; }
.ny-orb:nth-child(2) { --spin: 33s; --dir: reverse; --rot: 24deg;  --rw: 22%; --rh: 15%; --drift: 17s; animation-name: ny-bob-b; animation-duration: 2.6s; animation-delay: -1.3s; }
.ny-orb:nth-child(3) { --spin: 26s; --dir: reverse; --rot: -12deg; --rw: 29%; --rh: 12%; --drift: 11s; animation-duration: 3.7s;  animation-delay: -2.2s; }
.ny-orb:nth-child(4) { --spin: 19s; --dir: normal;  --rot: 41deg;  --rw: 24%; --rh: 16%; --drift: 15s; animation-name: ny-bob-b; animation-duration: 3.3s; animation-delay: -.9s; }
.ny-orb:nth-child(5) { --spin: 30s; --dir: normal;  --rot: -52deg; --rw: 27%; --rh: 14%; --drift: 19s; animation-duration: 2.9s;  animation-delay: -1.8s; }
.ny-orb:nth-child(6) { --spin: 23s; --dir: reverse; --rot: 8deg;   --rw: 21%; --rh: 12%; --drift: 12s; animation-name: ny-bob-b; animation-duration: 3.8s; animation-delay: -2.9s; }
.ny-orb:nth-child(7) { --spin: 36s; --dir: reverse; --rot: -27deg; --rw: 28%; --rh: 15%; --drift: 16s; animation-duration: 2.7s;  animation-delay: -.2s; }
.ny-orb:nth-child(8) { --spin: 17s; --dir: normal;  --rot: 33deg;  --rw: 23%; --rh: 13%; --drift: 14s; animation-name: ny-bob-b; animation-duration: 3.5s; animation-delay: -3.1s; }

/* ---- the orb ---- */
.ny-portal {
  position: relative; overflow: hidden; isolation: isolate; border: 0; opacity: 1; height: auto; width: 100%; aspect-ratio: 1 / 1; pointer-events: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--b, #9ab) 8%, #0a1a1e) 0 46%,
      color-mix(in srgb, var(--b, #9ab) 30%, #12302f) 70%,
      color-mix(in srgb, var(--b2, #cde) 40%, #1c4a46) 88%,
      transparent 100%);
  box-shadow:
    0 0 1.6rem .2rem color-mix(in srgb, var(--b, #9ab) 32%, transparent),
    0 0 4.5rem 1.2rem color-mix(in srgb, var(--b2, #cde) 16%, transparent);
  animation: ny-wander var(--drift, 13s) ease-in-out infinite, ny-flicker 4.7s ease-in-out infinite, ny-sway 9s ease-in-out infinite;
  transition: box-shadow .6s, transform .6s var(--ny-ease);
}
.ny-portal:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 2.4rem .5rem color-mix(in srgb, var(--b, #9ab) 48%, transparent),
    0 0 6rem 2rem color-mix(in srgb, var(--b2, #cde) 26%, transparent);
}
/* swirling mist (turns at its own speed and direction) */
.ny-portal::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0, var(--b2, #fff) 10%, transparent 26%, var(--b, #9ab) 40%, transparent 58%, var(--b3, #567) 72%, transparent 88%, var(--b2, #fff) 96%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 70%, transparent 98%);
          mask: radial-gradient(circle, transparent 38%, #000 70%, transparent 98%);
  opacity: .6;
  animation: ny-spin var(--spin, 26s) linear infinite var(--dir, normal);
}
/* heart-glow, pulsing like a flame */
.ny-portal::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--b2, #fff) 34%, transparent), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 55%, color-mix(in srgb, var(--b2, #fff) 22%, transparent) 82%, transparent 100%);
  animation: ny-pulse 5.2s ease-in-out infinite;
}
.ny-portal:hover::before { animation-duration: calc(var(--spin, 26s) / 3); opacity: .85; }
.ny-portal .ny-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 1.6rem 2.2rem 2rem; }
/* bubble reflection: a window-light highlight with a thin curved arc, set at a different angle on every orb */
.ny-portal .ny-card-body::before, .ny-portal .ny-card-body::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; transform: rotate(var(--rot, -30deg)); }
.ny-portal .ny-card-body::after {
  background:
    radial-gradient(ellipse var(--rw, 25%) var(--rh, 13%) at 50% 11%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 93%, rgba(255, 255, 255, .42) 0 2%, rgba(255, 255, 255, 0) 6%);
}
.ny-portal .ny-card-body::before {
  inset: 5%; border: 3px solid transparent; border-top-color: rgba(255, 255, 255, .34); border-left-color: rgba(255, 255, 255, .12);
  filter: blur(1.2px);
}
.ny-portal h2 {
  flex: 0 0 auto; margin-bottom: 1rem; font-family: var(--ny-font-serif); font-style: italic; font-weight: 500; font-size: 1.2rem; letter-spacing: .01em;
  color: #f4f8f4; text-shadow: 0 0 .6rem color-mix(in srgb, var(--b, #9ab) 55%, transparent), 0 1px 3px rgba(0, 0, 0, .7);
}
.ny-portal-ico {
  position: relative; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; margin-bottom: .8rem;
  font-size: 2rem; color: #f4f8f4; background: none; border: 0; border-radius: 50%; box-shadow: none;
  filter: drop-shadow(0 0 .6rem color-mix(in srgb, var(--b2, #fff) 65%, transparent));
  transition: transform .5s var(--ny-ease);
}
.ny-portal-ico::after {
  content: "\2726"; position: absolute; top: -.1rem; right: -.4rem; font-size: .8rem; line-height: 1;
  color: #fff; text-shadow: 0 0 .5rem var(--b2, #fff); animation: ny-twinkle 3.4s ease-in-out infinite;
}
.ny-portal:hover .ny-portal-ico { transform: scale(1.12); }

@keyframes ny-spin { to { transform: rotate(360deg); } }
@keyframes ny-wander {
  0%, 100% { translate: 0 0; }
  14% { translate: 1.1rem -.7rem; }
  29% { translate: 1.9rem -1.8rem; }
  43% { translate: .6rem -2.4rem; }
  57% { translate: -1rem -1.8rem; }
  71% { translate: -1.9rem -.8rem; }
  86% { translate: -.8rem .3rem; }
}
/* light breeze bounces on the orb's wrapper (two different shapes, irregular on purpose) */
@keyframes ny-bob-a { 0%, 100% { translate: 0 0; } 12% { translate: .12rem -.55rem; } 25% { translate: 0 -.08rem; } 41% { translate: -.1rem -.4rem; } 54% { translate: 0 0; } 72% { translate: .1rem -.25rem; } 86% { translate: 0 0; } }
@keyframes ny-bob-b { 0%, 100% { translate: 0 0; } 16% { translate: -.1rem -.35rem; } 30% { translate: 0 -.05rem; } 47% { translate: .12rem -.6rem; } 60% { translate: 0 -.1rem; } 78% { translate: -.08rem -.3rem; } 90% { translate: 0 0; } }
@keyframes ny-sway { 0%, 100% { rotate: -1.2deg; } 33% { rotate: .9deg; } 66% { rotate: -.5deg; } }
@keyframes ny-flicker { 0%, 100% { filter: brightness(1); } 18% { filter: brightness(1.12); } 34% { filter: brightness(.95); } 61% { filter: brightness(1.08); } 80% { filter: brightness(.98); } }
@keyframes ny-pulse { 0%, 100% { opacity: .65; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes ny-twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ny-orb, .ny-portal, .ny-portal::before, .ny-portal::after, .ny-portal-ico::after { animation: none; }
  .ny-portal:hover { transform: none; }
}

/* Brand colours, softened: --b main, --b2 highlight, --b3 shade */
.ny-b-cd        { --b: #cdb67a; --b2: #efe4bf; --b3: #8a6a30; }
.ny-b-spotify   { --b: #6fbf8a; --b2: #cfead8; --b3: #2f6a48; }
.ny-b-facebook  { --b: #7a9fd6; --b2: #cddcf2; --b3: #2f4a86; }
.ny-b-instagram { --b: #c9788a; --b2: #ecd2a0; --b3: #7a5a9a; }
.ny-b-x         { --b: #aab3c2; --b2: #e8ecf2; --b3: #56627a; }
.ny-b-youtube   { --b: #cf7a7a; --b2: #f0cccc; --b3: #7a3a3a; }
.ny-b-apple     { --b: #b9bfca; --b2: #eceff4; --b3: #5a6475; }
.ny-b-shop      { --b: #d889a0; --b2: #f2d3dc; --b3: #86506a; }