/* ========================================================
   v3 additions — nav pills, page mark, video placeholder,
   event-card bg, staff divisions, footer copy
   ======================================================== */

/* --- Page indicator: WOAH! gradient pill ---------------- */
.nav__woah-pill {
  display: inline-flex;
  font-family: 'Bebas Neue', 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #FF2E97 0%, #00F0FF 50%, #8B5CF6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(0,240,255,.35);
  animation: woahShimmer 4s linear infinite;
  position: relative;
  padding-top: 2px;
  filter: drop-shadow(0 0 6px rgba(255,46,151,.4));
}
.nav__woah-pill span { color: inherit; }
@keyframes woahShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* --- Nav pill buttons (BINGO / STAFF ACCESS) — premium gacha ------------ */
.nav__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 36px;
  padding: 0 .95rem;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: #fff;
  text-decoration: none;
  background: rgba(8,4,18,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Animated conic-gradient ring rotating around the pill (same language as clock / DJ cards) */
.nav__pill::before {
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ang, 0deg),
    #FF2E97,
    #8B5CF6,
    #00F0FF,
    #FFD700,
    #FF2E97
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: nav-pill-ring-spin 5s linear infinite;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes nav-pill-ring-spin { to { --ang: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .nav__pill::before { background: var(--cyan); }
}

/* Light sweep across the pill (the "premium WOW") */
.nav__pill-sweep {
  position: absolute;
  top: -50%; bottom: -50%;
  left: -40%;
  width: 35%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: nav-pill-sweep 4s ease-in-out infinite;
}
@keyframes nav-pill-sweep {
  0% { transform: translateX(0); }
  60%, 100% { transform: translateX(450%); }
}

/* === BINGO variant — pink/rose glow + icon === */
.nav__pill--bingo {
  box-shadow:
    0 0 14px rgba(255,46,151,.25),
    0 0 28px rgba(255,46,151,.12);
}
.nav__pill--bingo:hover {
  box-shadow:
    0 0 22px rgba(255,46,151,.5),
    0 0 44px rgba(255,46,151,.25);
}
.nav__pill--bingo .nav__pill-icon {
  color: #FF6BCB;
  filter: drop-shadow(0 0 6px rgba(255,46,151,.7));
}
.nav__pill--bingo .nav__pill-text {
  text-shadow: 0 0 8px rgba(255,46,151,.55);
}

/* === STAFF ACCESS variant — cyan/blue glow + icon === */
.nav__pill--staff {
  box-shadow:
    0 0 14px rgba(0,240,255,.25),
    0 0 28px rgba(0,240,255,.12);
}
.nav__pill--staff:hover {
  box-shadow:
    0 0 22px rgba(0,240,255,.5),
    0 0 44px rgba(0,240,255,.25);
}
.nav__pill--staff .nav__pill-icon {
  color: #00F0FF;
  filter: drop-shadow(0 0 6px rgba(0,240,255,.7));
}
.nav__pill--staff .nav__pill-text {
  text-shadow: 0 0 8px rgba(0,240,255,.55);
}

/* Hover — slight lift + ring accelerates */
.nav__pill:hover {
  transform: translateY(-2px) scale(1.03);
}
.nav__pill:hover::before {
  animation-duration: 2s;
}

/* Tooltip (already had it) */
.nav__pill[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em;
  background: rgba(5,2,12,.95); color: #00F0FF; padding: 4px 8px; border-radius: 4px;
  border: 1px solid rgba(0,240,255,.35); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.nav__pill:hover[data-tip]::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Icons, text, dots — all above ring & sweep */
.nav__pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  transition: transform .3s ease;
}
.nav__pill:hover .nav__pill-icon { transform: rotate(15deg) scale(1.1); }

.nav__pill-text { position: relative; z-index: 2; }

.nav__pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF3B3B;
  box-shadow: 0 0 8px #FF3B3B;
  animation: pillDot 1.4s ease-in-out infinite;
  position: relative; z-index: 2;
}
@keyframes pillDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.nav__pill-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  color: #FF6BCB; text-shadow: 0 0 6px rgba(255,46,151,.6);
  position: relative; z-index: 2;
}
.nav__pill-live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #FF2E97;
  box-shadow: 0 0 6px #FF2E97, 0 0 12px rgba(255,46,151,.5);
  animation: pillDot 1s ease-in-out infinite;
}

/* --- Video placeholder ---------------------------------- */
.vplayer__empty {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#05030a; gap:.8rem; overflow:hidden;
}
.vplayer__scan {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.06) 0 1px, transparent 1px 4px);
  animation: vScan 6s linear infinite;
}
@keyframes vScan { from{background-position:0 0} to{background-position:0 200px} }
.vplayer__grid {
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(0,240,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.vplayer__nosig {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; color:#00F0FF; letter-spacing:.3em;
  text-shadow: 0 0 14px rgba(0,240,255,.7), 0 0 30px rgba(0,240,255,.3);
  position: relative; z-index:2;
}
.vplayer__await {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color:rgba(0,240,255,.7); letter-spacing:.25em;
  position: relative; z-index:2;
}
.vplayer__await .blink { animation: vBlink 1s step-end infinite; }
@keyframes vBlink { 50% { opacity: 0; } }

/* --- Events: banner background + auto bi-weekly --------- */
.events-grid {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; padding: 0 2.5rem;
}
@media (max-width: 1100px) { .events-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .events-grid { grid-template-columns: 1fr; padding: 0 1rem; } }

.event-card--bg {
  position:relative; overflow:hidden;
  border-radius: 18px;
  border: 1.5px solid rgba(0,240,255,.25);
  min-height: 460px;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .35s ease, box-shadow .35s ease;
}
.event-card--bg .event-card__bg {
  position:absolute; inset:0; z-index:0;
  background: url('assets/gaia-bg.jpg') center/cover no-repeat;
  transition: transform 3s ease;
  filter: saturate(1.05);
}
.event-card--bg:hover .event-card__bg { transform: scale(1.05); }
.event-card--bg .event-card__overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,5,20,.4) 0%, rgba(10,5,20,.85) 70%, rgba(10,5,20,.95) 100%),
    linear-gradient(135deg, oklch(0.5 0.25 var(--hue) / .35) 0%, transparent 60%);
  mix-blend-mode: normal;
  transition: opacity .35s ease;
}
.event-card--bg:hover .event-card__overlay { opacity: .85; }
.event-card--bg .event-card__bignum {
  position:absolute; right:1rem; top:.6rem; z-index:2;
  font-family:'Bebas Neue', sans-serif; font-size: 180px; line-height: .8;
  color: rgba(255,255,255,.05); letter-spacing:-6px; pointer-events:none;
}
.event-card--bg .event-card__body {
  position:relative; z-index:3; padding: 1.6rem 1.6rem 1.4rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.event-card--bg .event-card__tag {
  font-family:'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .25em; color: rgba(0,240,255,.85);
}
.event-card--bg .event-card__name {
  font-family: 'Bebas Neue', sans-serif; font-size: 44px; line-height: 1;
  color:#fff; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: 0 0 18px oklch(0.55 0.25 var(--hue) / .55);
}
.event-card--bg .event-card__jp {
  font-family:'Noto Sans JP', sans-serif; font-size: 14px;
  color: rgba(0,240,255,.85); letter-spacing: .12em;
}
.event-card--bg .event-card__date {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono', monospace; font-size: 12px;
  color:#fff; letter-spacing: .12em;
  margin-top: .35rem;
}
.event-card--bg .event-card__date svg { color: oklch(0.7 0.2 var(--hue)); }
.event-card--bg .event-card__genres {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; margin-top: .15rem;
}
.event-card--bg .event-card__genres span { color: rgba(0,240,255,.95); }
.event-card--bg .event-card__genres i {
  color: rgba(255,46,151,.5); font-style:normal; font-size: 11px;
}
.event-card--bg .event-card__genres svg { color:#FF6BCB; }
.event-card--bg .event-card__cta {
  align-self:flex-start; margin-top: .8rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Orbitron', sans-serif; font-size: 12px; font-weight:700;
  color:#00F0FF; letter-spacing: .25em;
  text-decoration:none; padding-bottom: 2px;
  border-bottom: 1px solid rgba(0,240,255,.35);
  transition: color .2s, border-color .2s;
}
.event-card--bg .event-card__cta:hover { color:#fff; border-color:#fff; }
.event-card--bg .event-card__cta svg { transition: transform .2s; }
.event-card--bg .event-card__cta:hover svg { transform: translateX(4px); }

.event-card--next {
  transform: scale(1.02);
  border-color: rgba(255,215,0,.55);
  box-shadow:
    0 0 0 1px rgba(255,215,0,.25),
    0 0 40px rgba(255,46,151,.35),
    0 0 80px rgba(0,240,255,.2);
}
.event-card--next::before {
  content:''; position:absolute; inset:-2px; z-index:0; border-radius: 20px;
  background: conic-gradient(from 0deg, #FF2E97, #00F0FF, #FFD700, #8B5CF6, #FF2E97);
  filter: blur(14px); opacity:.55;
  animation: nextHalo 6s linear infinite;
}
@keyframes nextHalo { to { transform: rotate(360deg); } }
.event-card--next .event-card__bg { z-index:0; }
.event-card__nextbadge {
  position:absolute; top: 1rem; left: 1rem; z-index: 4;
  font-family:'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .25em; color:#FFD700;
  background: rgba(40,20,5,.85); border: 1px solid rgba(255,215,0,.5);
  padding: 5px 10px; border-radius: 4px;
  text-shadow: 0 0 8px rgba(255,215,0,.6);
  animation: nextBadgePulse 2s ease-in-out infinite;
}
@keyframes nextBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,.45); }
  50%     { box-shadow: 0 0 18px 2px rgba(255,46,151,.6); }
}
.event-card__cd {
  position:absolute; bottom: 1rem; right: 1rem; z-index: 4;
  font-family:'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(0,240,255,.95); letter-spacing: .15em;
  background: rgba(5,2,12,.7); border:1px solid rgba(0,240,255,.3);
  padding: 4px 8px; border-radius: 4px;
}

/* --- Memories grid pattern ------------------------------ */
.galv2__grid {
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(rgba(0,240,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.4) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* --- Staff command-center page -------------------------- */
.section--staff {
  position: relative;
}
.staff__bg {
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.6;
}
.staff__bg .blueprint { width:100%; height:100%; }
.staff-divs {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3.5rem;
  padding: 1rem 2.5rem 3rem;
}
@media (max-width: 720px) { .staff-divs { padding: 1rem 1rem 2rem; gap: 2.5rem; } }

.staff-div {
  position: relative;
  padding: 1.4rem 1.2rem;
  border-radius: 14px;
  background: rgba(8,4,18,.45);
  border: 1px solid oklch(0.5 0.18 var(--hue) / .25);
  backdrop-filter: blur(6px);
  animation: divIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes divIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.staff-div__bracketL, .staff-div__bracketR {
  position: absolute; top: -10px;
  font-family: 'JetBrains Mono', monospace; font-size: 24px;
  color: oklch(0.7 0.2 var(--hue)); letter-spacing: 0;
  text-shadow: 0 0 8px oklch(0.6 0.25 var(--hue) / .8);
}
.staff-div__bracketL { left: -6px; }
.staff-div__bracketR { right: -6px; transform: scaleX(-1); }

.staff-div__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(0,240,255,.18);
}
.staff-div__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 88px; line-height: .8;
  background: linear-gradient(180deg, #00F0FF, oklch(0.6 0.22 var(--hue)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -3px;
  text-shadow: 0 0 20px rgba(0,240,255,.4);
  filter: drop-shadow(0 0 8px oklch(0.55 0.22 var(--hue) / .5));
}
.staff-div__rule { display:none; }
.staff-div__title {
  display: flex; align-items: center; gap: .9rem;
  flex-wrap: wrap;
}
.staff-div__icon {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(0,240,255,.08);
  border: 1px solid rgba(0,240,255,.3);
  color: oklch(0.75 0.2 var(--hue));
  filter: drop-shadow(0 0 6px oklch(0.6 0.22 var(--hue) / .6));
}
.staff-div__name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: .15em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 0 12px oklch(0.5 0.22 var(--hue) / .6);
}
.staff-div__jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; color: rgba(0,240,255,.7); letter-spacing: .15em;
}
.staff-div__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .25em;
  color: rgba(0,240,255,.85);
  padding: 5px 10px; border-radius: 4px;
  background: rgba(0,240,255,.06);
  border: 1px solid rgba(0,240,255,.25);
}

.staff-div__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) { .staff-div__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .staff-div__grid { grid-template-columns: 1fr; } }

.staff-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem;
  padding: 1.2rem 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(5,2,12,.6);
  border: 1px solid rgba(0,240,255,.22);
  backdrop-filter: blur(8px);
  isolation: isolate; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
  animation: divIn .45s cubic-bezier(.2,.8,.2,1) both;
  cursor: pointer;
}
.staff-card:focus-visible {
  outline: 2px solid oklch(0.7 0.22 var(--hue, 200) / .8);
  outline-offset: 4px;
}
.staff-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 250% 0;
  transition: background-position .8s ease;
  mix-blend-mode: overlay;
}
.staff-card:hover {
  transform: translateY(-6px) scale(1.12);
  z-index: 10;
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 0 40px oklch(0.65 0.22 var(--hue, 200) / .45),
    0 0 80px oklch(0.65 0.22 var(--hue, 200) / .22);
  border-color: oklch(0.7 0.22 var(--hue, 200) / .7);
}
.staff-card:hover::after { background-position: -50% 0; }

.staff-card--head {
  border-color: rgba(255,215,0,.55);
  background: rgba(20,12,4,.7);
  box-shadow: 0 0 24px rgba(255,215,0,.18) inset;
}
.staff-card--head:hover {
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 0 40px rgba(255,215,0,.55),
    0 0 80px rgba(255,215,0,.3);
  border-color: rgba(255,215,0,.95);
}
.staff-card__headbadge {
  position: absolute; top: .55rem; right: .55rem;
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 9px;
  letter-spacing: .2em; color: #FFD700;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(40,28,5,.9); border: 1px solid rgba(255,215,0,.6);
  text-shadow: 0 0 6px rgba(255,215,0,.7);
  z-index: 3;
}

.staff-card__portrait {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(0,240,255,.22), rgba(8,4,18,.95) 70%);
  border: 1px solid rgba(0,240,255,.4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.staff-card--head .staff-card__portrait {
  border-color: rgba(255,215,0,.7);
  background: radial-gradient(circle at 35% 30%, rgba(255,215,0,.25), rgba(20,10,2,.95) 70%);
}
.staff-card__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.18) 0 1px, transparent 1px 3px);
  animation: vScan 4s linear infinite;
}
.staff-card__nophoto {
  position: relative; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  color: rgba(0,240,255,.75); letter-spacing: .15em; text-align: center;
}
.staff-card--head .staff-card__nophoto { color: rgba(255,215,0,.85); }

/* --- Staff card portrait photo (when available) ---
 * When a member has a photo, the entire card becomes a cinematic portrait:
 * - The photo fills the whole card as background
 * - The portrait circle is hidden
 * - Name + role + socials sit on top of a gradient overlay at the bottom
 * - Effects (vignette, scanlines, hover zoom, head tint) apply to the full card
 */

/* Hide the round portrait when card has a photo */
.staff-card--has-photo .staff-card__portrait {
  display: none;
}

/* Card becomes a portrait container */
.staff-card--has-photo {
  padding: 0;
  aspect-ratio: 3 / 4;        /* tall cinematic portrait */
  min-height: 280px;
  justify-content: flex-end;  /* push text content to bottom */
  align-items: stretch;
  gap: 0;
}

/* Photo fills the entire card */
.staff-card--has-photo .staff-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Center on the face area: shift up so the face dominates */
  object-position: 50% 15%;
  z-index: 0;
  filter: contrast(1.06) saturate(1.12);
  transition: transform .6s cubic-bezier(.4,0,.2,1), filter .4s ease;
}

/* HEAD members get extra warmth */
.staff-card--has-photo.staff-card--head .staff-card__photo {
  filter: contrast(1.06) saturate(1.18) brightness(1.04);
}

/* Cyberpunk vignette + bottom gradient for text legibility */
.staff-card--has-photo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, transparent 40%, rgba(5,2,12,.55) 65%, rgba(5,2,12,.95) 100%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

/* HEAD: gold-tinted vignette */
.staff-card--has-photo.staff-card--head::before {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(20,12,2,.55) 100%),
    linear-gradient(180deg, transparent 40%, rgba(20,12,2,.55) 65%, rgba(20,12,2,.95) 100%);
}

/* Animated scanlines across the whole card */
.staff-card--has-photo > .staff-card__scan-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.10) 0 1px, transparent 1px 4px);
  animation: vScan 6s linear infinite;
  mix-blend-mode: screen;
  border-radius: inherit;
}
.staff-card--has-photo.staff-card--head > .staff-card__scan-overlay {
  background: repeating-linear-gradient(0deg, rgba(255,215,0,.10) 0 1px, transparent 1px 4px);
}

/* Text content (name + role + socials) sits on top, bottom-anchored */
.staff-card--has-photo .staff-card__name,
.staff-card--has-photo .staff-card__role,
.staff-card--has-photo .staff-card__socials {
  position: relative;
  z-index: 3;
  padding-left: 1rem;
  padding-right: 1rem;
}
.staff-card--has-photo .staff-card__name {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 20px rgba(0,240,255,.25);
}
.staff-card--has-photo.staff-card--head .staff-card__name {
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 20px rgba(255,215,0,.5);
}
.staff-card--has-photo .staff-card__role {
  padding-top: .15rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
.staff-card--has-photo .staff-card__socials {
  padding-top: .55rem;
  padding-bottom: 1rem;
  display: flex;
  gap: .4rem;
  justify-content: center;
}
.staff-card--has-photo .staff-card__headbadge {
  z-index: 4;  /* on top of overlay */
}

/* Hover: zoom + boost glow */
.staff-card--has-photo:hover .staff-card__photo {
  transform: scale(1.05);
  filter: contrast(1.12) saturate(1.25) brightness(1.06);
}
.staff-card--has-photo:hover {
  transform: translateY(-8px) scale(1.14);
  z-index: 10;
  box-shadow:
    0 24px 60px rgba(0,0,0,.65),
    0 0 50px oklch(0.65 0.22 var(--hue, 200) / .5),
    0 0 100px oklch(0.65 0.22 var(--hue, 200) / .25);
}
.staff-card--has-photo.staff-card--head:hover {
  box-shadow:
    0 24px 60px rgba(0,0,0,.65),
    0 0 50px rgba(255,215,0,.6),
    0 0 100px rgba(255,215,0,.35);
}

.staff-card__name {
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-align: center;
}
.staff-card--head .staff-card__name {
  color: #FFE680;
  text-shadow: 0 0 10px rgba(255,215,0,.5);
}
.staff-card__role {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .25em; color: rgba(0,240,255,.6); text-transform: uppercase;
}
.staff-card__edge {
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(0,240,255,.05);
}

/* --- Footer copyright styling --------------------------- */
.footer__strip-copy {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
}
.fs-cy { color: rgba(0,240,255,.85); }
.fs-tm { color: #00F0FF; text-shadow: 0 0 6px rgba(0,240,255,.7); font-style: normal; padding: 0 1px; }

/* ---------- DJ GAIA WORLD pill ---------- */
.nav__pill--gaia::before {
  background: linear-gradient(270deg, #8B5CF6, #FF2E97, #8B5CF6);
  background-size: 200% 100%;
  animation: pillGaia 3.4s linear infinite, pillGaiaPulse 3s ease-in-out infinite;
}
.nav__pill--gaia .nav__pill-icon { color:#FF6BCB; filter: drop-shadow(0 0 6px #FF2E9788); }
.nav__pill--gaia .nav__pill-text { text-shadow: 0 0 8px rgba(139,92,246,.55), 0 0 12px rgba(255,46,151,.35); color:#fff; }
.nav__pill--gaia .nav__pill-spark { position:absolute; right:8px; top:50%; width:5px; height:5px; border-radius:50%; background:#FF6BCB; box-shadow: 0 0 8px #FF2E97, 0 0 14px #FF2E97; transform:translateY(-50%); animation: gaiaSpark 1.4s ease-in-out infinite; }
@keyframes pillGaia { 0%{background-position:200% 50%} 100%{background-position:0% 50%} }
@keyframes pillGaiaPulse { 0%,100%{filter:drop-shadow(0 0 0 transparent)} 50%{filter:drop-shadow(0 0 10px rgba(139,92,246,.65))} }
@keyframes gaiaSpark { 0%,100%{opacity:.4;transform:translateY(-50%) scale(.8)} 50%{opacity:1;transform:translateY(-50%) scale(1.2)} }
.nav__pill--gaia:hover .nav__pill-text { animation: gaiaGlitch .08s steps(2) 3; }
@keyframes gaiaGlitch { 0%{transform:translate(0,0)} 33%{transform:translate(-1px,0);text-shadow: 1px 0 #FF2E97, -1px 0 #00F0FF} 66%{transform:translate(1px,0);text-shadow: -1px 0 #FF2E97, 1px 0 #00F0FF} 100%{transform:translate(0,0)} }

/* Bingo link in main nav menu (replaces 07. MEMORIES) */
.nav__links .nav__link--bingo {
  color: var(--pink);
  position: relative;
}
.nav__links .nav__link--bingo::before {
  content: attr(data-num); margin-right: .4rem; font-family:'JetBrains Mono',monospace;
  font-size:.7rem; opacity:.55; color: var(--pink);
}
.nav__links .nav__link--bingo:hover { text-shadow: 0 0 10px rgba(255,46,151,.7), -1px 0 #00F0FF, 1px 0 #FF2E97; }
.mobile-menu__bingo { color: var(--pink) !important; }
.mobile-menu__bingo::after { content:' \2197'; font-size:.7em; opacity:.6; }

/* ---------- Combined HUD stack (Eorzea Time + Countdown) ---------- */
.hud-stack {
  background: rgba(15,14,26,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,240,255,.3);
  border-radius: 6px;
  padding: .7rem .9rem .85rem;
  min-width: 280px;
  box-shadow: 0 0 24px rgba(0,240,255,.08), inset 0 0 0 1px rgba(0,240,255,.06);
}
.hud-stack__sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,.3), transparent);
  margin: .55rem 0;
}
.hud-stack .next-night {
  background: transparent;
  border: none;
  padding: 0;
  min-width: 0;
  box-shadow: none;
}
.hud-stack .next-night::before { display: none; }

/* ---------- Eorzea Time widget ---------- */
.eorzea-time { display:inline-flex; align-items:center; gap:.4rem; }
.eorzea-time__dot { width:6px; height:6px; border-radius:50%; background:#5DD3FF; box-shadow: 0 0 6px #5DD3FF, 0 0 10px #5DD3FF55; animation: eorzeaPulse 2s ease-in-out infinite; }
@keyframes eorzeaPulse { 0%,100%{opacity:.55;transform:scale(.85)} 50%{opacity:1;transform:scale(1.1)} }

/* ---------- Next Night Countdown ---------- */
.next-night {
  background: rgba(15,14,26,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,240,255,.3);
  padding: .85rem 1.1rem .9rem;
  border-radius: 6px;
  min-width: 280px;
  position: relative;
  box-shadow: 0 0 24px rgba(0,240,255,.08), inset 0 0 0 1px rgba(0,240,255,.08);
}
.next-night::before { content:''; position:absolute; inset:-1px; border-radius:6px; pointer-events:none; box-shadow: 0 0 0 1px rgba(0,240,255,.2); animation: nnPulse 4s ease-in-out infinite; }
@keyframes nnPulse { 0%,100%{box-shadow: 0 0 0 1px rgba(0,240,255,.15)} 50%{box-shadow: 0 0 0 1px rgba(0,240,255,.45), 0 0 12px rgba(0,240,255,.2)} }
.next-night__label { font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.22em; color:#5DD3FF; opacity:.85; margin-bottom:.45rem; }
.next-night__name { font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; background: linear-gradient(90deg, #FF2E97, #5DD3FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.next-night__jp { font-family:'Noto Sans JP',sans-serif; font-size:.7rem; color:#5DD3FF; opacity:.75; margin-top:.1rem; margin-bottom:.55rem; }
.next-night__cd { display:flex; align-items:center; gap:.3rem; }
.next-night .cd-seg { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:36px; padding:.25rem .35rem .15rem; border:1px solid rgba(0,240,255,.35); border-radius:3px; background: rgba(0,240,255,.04); }
.next-night .cd-seg b { font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; color:#fff; line-height:1; text-shadow: 0 0 6px rgba(0,240,255,.75); }
.next-night .cd-seg i { font-style:normal; font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.15em; color:#5DD3FF; opacity:.6; margin-top:.15rem; }
.next-night .cd-seg--s { animation: secFlick .9s ease-out; }
@keyframes secFlick { 0%{box-shadow: inset 0 0 0 1px rgba(0,240,255,.6); background: rgba(0,240,255,.12)} 100%{box-shadow: none; background: rgba(0,240,255,.04)} }
.next-night .cd-sep { font-family:'JetBrains Mono',monospace; color:#5DD3FF; opacity:.55; font-weight:700; }
.next-night__when { margin-top:.55rem; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.15em; color:#5DD3FF; opacity:.6; }
.next-night__live { font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.1rem; text-align:center; padding:.6rem 0; color:#FFD700; text-shadow: 0 0 10px rgba(255,46,151,.7), 0 0 18px rgba(255,215,0,.5); animation: liveBlink 1s steps(2) infinite; }
@keyframes liveBlink { 0%,49%{opacity:1} 50%,100%{opacity:.4} }

/* ---------- Staff card socials ---------- */
.staff-card__socials { display:flex; gap:.4rem; justify-content:center; margin-top:.55rem; }
.staff-soc {
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  cursor: pointer;
}
.staff-soc--instagram:not(.is-disabled) { border-color: rgba(255,46,151,.5); }
.staff-soc--instagram:not(.is-disabled):hover { background: linear-gradient(135deg, #FF6B3D, #FF2E97 55%, #8B5CF6); border-color: transparent; transform: translateY(-1px) scale(1.08); box-shadow: 0 0 14px rgba(255,46,151,.55); }
.staff-soc--twitter:not(.is-disabled) { border-color: rgba(255,255,255,.45); }
.staff-soc--twitter:not(.is-disabled):hover { background: #fff; color:#000; transform: translateY(-1px) scale(1.08); box-shadow: 0 0 14px rgba(0,240,255,.4); }
.staff-soc.is-disabled { filter: grayscale(100%) opacity(.4); pointer-events: none; cursor: not-allowed; }

/* ---------- Compact Footer ---------- */
.footer.footer--compact { padding-top: 2.6rem; padding-bottom: 0; }
.footer.footer--compact .footer__inner { padding-bottom: 1.6rem; gap: 2.5rem; }
.footer.footer--compact .footer__col { gap: .75rem; }
.footer.footer--compact .footer__tag { margin: .35rem 0 .15rem; font-size: .82rem; opacity: .8; }
.footer.footer--compact .footer__server { gap: .35rem; font-size: .72rem; }
.footer.footer--compact .footer__big { padding: .6rem .85rem; font-size: .78rem; }
.footer.footer--compact .footer__small { font-size: .7rem; }
.footer.footer--compact .footer__strip { padding: .75rem 1.6rem; font-size: .68rem; }

.footer__nav-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: .35rem 1.2rem;
  margin-top: .55rem;
  align-items: start;
}
.footer__nav-grid::before {
  content: '';
  grid-column: 2;
  grid-row: 1 / -1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,240,255,.2) 20%, rgba(0,240,255,.2) 80%, transparent);
  align-self: stretch;
}
.footer__nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: .25rem 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .18s ease, transform .18s ease;
  position: relative;
}
.footer__nav-link:nth-of-type(1), .footer__nav-link:nth-of-type(2), .footer__nav-link:nth-of-type(3) { grid-column: 1; }
.footer__nav-link:nth-of-type(4), .footer__nav-link:nth-of-type(5), .footer__nav-link:nth-of-type(6) { grid-column: 3; }
.footer__nav-link:nth-of-type(1) { grid-row: 1; }
.footer__nav-link:nth-of-type(2) { grid-row: 2; }
.footer__nav-link:nth-of-type(3) { grid-row: 3; }
.footer__nav-link:nth-of-type(4) { grid-row: 1; }
.footer__nav-link:nth-of-type(5) { grid-row: 2; }
.footer__nav-link:nth-of-type(6) { grid-row: 3; }
.footer__nav-tri {
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
  font-size: .65rem;
}
.footer__nav-link:hover { color: var(--cyan); transform: translateX(2px); text-shadow: 0 0 8px rgba(0,240,255,.5); }
.footer__nav-link:hover .footer__nav-tri { opacity: 1; transform: translateX(0); }

.fs-sep { color: rgba(0,240,255,.4); }
.fs-pk { color: rgba(255,107,203,.85); }
.fs-emo { filter: drop-shadow(0 0 6px rgba(255,46,151,.7)); }

/* =========================================================
   STAFF MOSAIC — todo el staff en primera plana, un único grid
   con dividers de división inline. Sustituye al layout antiguo
   .staff-divs / .staff-div / .staff-div__grid (que se queda en el
   código pero no se renderiza desde Staff component).
   ========================================================= */
.staff-mosaic {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  padding: 1rem 2.5rem 3rem;
}
@media (max-width: 1400px) { .staff-mosaic { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .staff-mosaic { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .staff-mosaic { grid-template-columns: repeat(3, 1fr); padding: 1rem 1.5rem 2rem; } }
@media (max-width: 540px)  { .staff-mosaic { grid-template-columns: repeat(2, 1fr); padding: 1rem 1rem 2rem; gap: .75rem; } }

/* Divider de división — ocupa toda la fila del grid */
.staff-divider {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 .25rem;
  padding: .55rem .25rem;
  animation: divIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.staff-divider:first-child { margin-top: 0; }

.staff-divider__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px; line-height: .85;
  background: linear-gradient(180deg, #00F0FF, oklch(0.6 0.22 var(--hue)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -1px;
  filter: drop-shadow(0 0 6px oklch(0.55 0.22 var(--hue) / .5));
}
.staff-divider__rule {
  height: 1px;
  width: 28px;
  background: linear-gradient(90deg, oklch(0.7 0.2 var(--hue) / .8), transparent);
}
.staff-divider__title {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
}
.staff-divider__icon {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border-radius: 6px;
  background: oklch(0.5 0.2 var(--hue) / .12);
  border: 1px solid oklch(0.65 0.22 var(--hue) / .4);
  color: oklch(0.78 0.18 var(--hue));
  filter: drop-shadow(0 0 4px oklch(0.6 0.22 var(--hue) / .5));
}
.staff-divider__name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .18em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 0 8px oklch(0.55 0.22 var(--hue) / .55);
}
.staff-divider__jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; color: rgba(0,240,255,.6); letter-spacing: .15em;
}
.staff-divider__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em;
  color: oklch(0.78 0.16 var(--hue));
  padding: 3px 8px; border-radius: 3px;
  background: oklch(0.5 0.2 var(--hue) / .08);
  border: 1px solid oklch(0.65 0.22 var(--hue) / .25);
}

@media (max-width: 540px) {
  .staff-divider { gap: .5rem; padding: .4rem .15rem; margin: .8rem 0 .15rem; }
  .staff-divider__num { font-size: 28px; }
  .staff-divider__name { font-size: 12px; letter-spacing: .12em; }
  .staff-divider__jp { display: none; }
  .staff-divider__icon { width: 24px; height: 24px; }
}

/* Mini tag de rol sobre cada card — solo visible cuando hay foto */
.staff-card__roletag {
  position: absolute; top: .55rem; left: .55rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 3px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: .18em;
  color: oklch(0.85 0.15 var(--hue, 200));
  background: rgba(5,2,12,.7);
  border: 1px solid oklch(0.65 0.2 var(--hue, 200) / .45);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  z-index: 3;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.staff-card:hover .staff-card__roletag {
  opacity: 1;
  transform: translateY(0);
}
.staff-card--head .staff-card__roletag {
  color: rgba(255,215,0,.9);
  border-color: rgba(255,215,0,.5);
  background: rgba(20,12,4,.8);
}
/* En cards sin foto el role ya se muestra abajo, ocultamos el tag */
.staff-card:not(.staff-card--has-photo) .staff-card__roletag { display: none; }

/* ============================================================
   VIP MEMBERSHIP — interactive tier-switcher card
   ============================================================ */

.vip-stage{
  max-width: 1200px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "top top"
    "tabs tabs"
    "card perks";
  gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 1024px){
  .vip-stage{
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "tabs"
      "card"
      "perks";
    gap: 1.2rem;
  }
}

.vip-stage__top-tag{
  grid-area: top;
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap;
}
.vip-stage__tag-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .18em;
  color: var(--text2); opacity: .7;
}

/* === TIER TABS === */
.vip-tabs{
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
@media (max-width: 600px){
  .vip-tabs{ grid-template-columns: 1fr 1fr; }
}

.vip-tab{
  position: relative;
  padding: .9rem 1rem;
  background: rgba(8,4,16,.55);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  text-align: left;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  isolation: isolate;
  overflow: hidden;
}
.vip-tab::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.vip-tab:hover{
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 24px color-mix(in srgb, var(--c) 25%, transparent);
}
.vip-tab:hover::before{ opacity: 1; }

.vip-tab.is-active{
  border-color: var(--c);
  background: rgba(8,4,16,.85);
  box-shadow:
    0 8px 28px rgba(0,0,0,.5),
    0 0 36px color-mix(in srgb, var(--c) 45%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--c) 10%, transparent);
  transform: translateY(-2px);
}
.vip-tab.is-active::before{ opacity: 1; }

.vip-tab__ribbon{
  position: absolute;
  top: 6px; right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem; letter-spacing: .15em;
  padding: .15rem .4rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c) 18%, rgba(0,0,0,.6));
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  text-transform: uppercase;
}
.vip-tab__ribbon--life{
  background: rgba(255,215,0,.18);
  color: #FFD700;
  border-color: rgba(255,215,0,.6);
  text-shadow: 0 0 6px rgba(255,215,0,.6);
}

.vip-tab__name{
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
  margin-bottom: .35rem;
}
.vip-tab.is-active .vip-tab__name{ color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.vip-tab__price{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .12em;
  color: rgba(255,255,255,.7);
}
.vip-tab__price em{
  font-style: normal;
  color: var(--c); opacity: .8;
  margin-left: .25rem;
}

/* === THE CARD === */
.vip-card-wrap{
  grid-area: card;
  display: flex;
  align-items: stretch;
  perspective: 1400px;
}

.vip-card{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--c);
  background: #06060C;
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    0 0 50px color-mix(in srgb, var(--c) 45%, transparent),
    0 0 100px color-mix(in srgb, var(--c) 20%, transparent),
    inset 0 0 50px color-mix(in srgb, var(--c) 8%, transparent);
  isolation: isolate;
  animation: vipCardIn .55s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
  cursor: grab;
}
.vip-card:hover{
  transform: translateY(-12px) rotateX(4deg) rotateY(-4deg) scale(1.02);
  box-shadow:
    0 50px 80px rgba(0,0,0,.85),
    0 0 80px color-mix(in srgb, var(--c) 65%, transparent),
    0 0 160px color-mix(in srgb, var(--c) 35%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--c) 14%, transparent);
}
.vip-card:active{
  cursor: grabbing;
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.01);
}
@keyframes vipCardIn{
  from{ opacity: 0; transform: rotateY(-12deg) translateZ(-40px) scale(.96); }
  to{ opacity: 1; transform: rotateY(0deg) translateZ(0) scale(1); }
}

.vip-card__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: vipCardBgZoom 30s ease-in-out infinite alternate;
}
@keyframes vipCardBgZoom{
  from{ transform: scale(1) translate(0,0); }
  to{ transform: scale(1.08) translate(-1%, -1%); }
}

/* === ORBITAL RINGS — rotate slowly over the focal element === */
.vip-card__orbit{
  position: absolute;
  top: 50%; right: 12%;
  width: 65%;
  aspect-ratio: 1/1;
  transform: translate(50%, -50%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.vip-card__orbit-ring{
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--c) 50%, transparent);
  border-radius: 50%;
  opacity: .55;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 35%, transparent));
}
.vip-card__orbit-ring--1{
  inset: 0%;
  animation: vipOrbitSpin 38s linear infinite;
}
.vip-card__orbit-ring--2{
  inset: 12%;
  border-style: dotted;
  border-width: 1px;
  opacity: .4;
  animation: vipOrbitSpin 26s linear infinite reverse;
}
.vip-card__orbit-ring--3{
  inset: 24%;
  border-style: dashed;
  opacity: .35;
  animation: vipOrbitSpin 18s linear infinite;
}
@keyframes vipOrbitSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* === FLOATING PARTICLES — rise from bottom in tier color === */
.vip-card__particles{
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.vip-card__particles span{
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    0 0 8px var(--c),
    0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
  animation: vipParticleRise linear infinite;
  opacity: 0;
}
@keyframes vipParticleRise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  15%{ opacity: .9; }
  85%{ opacity: .8; }
  100%{ transform: translateY(-100%) translateX(20px); opacity: 0; }
}

/* === DRIFTING SAKURA PETALS === */
.vip-card__petals{
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.vip-card__petals span{
  position: absolute;
  top: -20px;
  font-size: 14px;
  color: color-mix(in srgb, var(--c) 70%, white);
  text-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent);
  opacity: .35;
  animation: vipPetalDrift linear infinite;
}
@keyframes vipPetalDrift{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%{ opacity: .4; }
  90%{ opacity: .35; }
  100%{ transform: translateY(120%) translateX(40px) rotate(360deg); opacity: 0; }
}

/* === DIAGONAL LIGHT STREAK — slow shimmer === */
.vip-card__streak{
  position: absolute;
  top: -50%; bottom: -50%;
  left: -30%;
  width: 40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    color-mix(in srgb, var(--c) 18%, transparent) 48%,
    color-mix(in srgb, var(--c) 25%, white) 50%,
    color-mix(in srgb, var(--c) 18%, transparent) 52%,
    transparent 60%,
    transparent 100%
  );
  animation: vipStreakSweep 7s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .35;
}
@keyframes vipStreakSweep{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(400%); }
  100%{ transform: translateX(0); }
}

.vip-card__overlay{
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(105deg, rgba(6,4,12,.92) 0%, rgba(6,4,12,.7) 35%, rgba(6,4,12,.15) 75%, transparent 100%);
  pointer-events: none;
}

/* HUD corner brackets */
.vip-card__corner{
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--c);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent));
  opacity: .85;
}
.vip-card__corner--tl{ top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.vip-card__corner--tr{ top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.vip-card__corner--bl{ bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.vip-card__corner--br{ bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* Content on the card (left side) */
.vip-card__content{
  position: relative; z-index: 4;
  height: 100%;
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 65%;
  min-width: 0;
}

.vip-card__header{
  display: flex; align-items: center; gap: .9rem;
}

.vip-card__chip{
  width: 44px; height: 34px;
  border-radius: 5px;
  background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.3);
}
.vip-card__chip::before,
.vip-card__chip::after{
  content:'';
  position: absolute;
  background: rgba(0,0,0,.4);
}
.vip-card__chip::before{
  top: 5px; bottom: 5px; left: 50%;
  width: 1px;
}
.vip-card__chip::after{
  left: 5px; right: 5px; top: 50%;
  height: 1px;
}
.vip-card__chip-inner{
  position: absolute; inset: 4px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 3px;
}

.vip-card__brand-name{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: .05em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent);
}
.vip-card__brand-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; letter-spacing: .25em;
  color: var(--c);
  margin-top: .2rem;
  opacity: .9;
}

.vip-card__center{
  margin-bottom: 1rem;
}
.vip-card__tier-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .25em;
  color: color-mix(in srgb, var(--c) 80%, white);
  margin-bottom: .3rem;
  opacity: .9;
}
.vip-card__tier-name{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: .25rem;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 2px 12px rgba(0,0,0,.85),
    0 0 28px color-mix(in srgb, var(--c) 55%, transparent);
}
.vip-card__tier-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .15em;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
}

.vip-card__footer{
  display: flex; flex-direction: column; gap: .25rem;
}
.vip-card__num{
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; letter-spacing: .2em;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.vip-card__cadence{
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .25em;
  color: color-mix(in srgb, var(--c) 70%, white);
  opacity: .8;
}

/* Lifetime sparkles overlay */
.vip-card__sparkles{ position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.vip-card__sparkles span{
  position: absolute;
  font-size: 14px;
  color: #FFD700;
  text-shadow: 0 0 8px #FFD700, 0 0 16px rgba(255,215,0,.6);
  animation: vipSparkle 4s ease-in-out infinite;
  opacity: 0;
}
@keyframes vipSparkle{
  0%, 100%{ opacity: 0; transform: scale(.5); }
  50%{ opacity: .95; transform: scale(1.15); }
}

@media (max-width: 600px){
  .vip-card{ aspect-ratio: 5/4; }
  .vip-card__content{ width: 100%; padding: 1.4rem; }
  .vip-card__overlay{
    background: linear-gradient(180deg, rgba(6,4,12,.55) 0%, rgba(6,4,12,.85) 50%, rgba(6,4,12,.95) 100%);
  }
}

/* === PERKS PANEL === */
.vip-perks-panel{
  grid-area: perks;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.2rem;
  background: rgba(8,4,16,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.vip-perks-panel__head{
  display: flex; align-items: baseline; gap: .8rem;
  flex-wrap: wrap;
}
.vip-perks-panel__tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .85;
}

.vip-perks-list{
  list-style: none;
  display: flex; flex-direction: column;
  gap: .5rem;
  margin: 0; padding: 0;
}
.vip-perk-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: start;
  padding: .7rem .85rem;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
  transition: all .25s ease;
}
.vip-perk-row:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.vip-perk-row--extra{
  background: rgba(255,215,0,.04);
  border-color: rgba(255,215,0,.18);
}
.vip-perk-row__icon{
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.vip-perk-row__title{
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .15em;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.vip-perk-row__desc{
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.5;
}

.vip-perks-panel__cta{
  margin-top: .5rem;
  display: flex; flex-direction: column; gap: .6rem;
  align-items: center;
}
.vip-cta{
  width: 100%;
  background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 60%, white) 100%);
  color: #0a0612;
  border: none;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--c) 45%, transparent),
    0 0 30px color-mix(in srgb, var(--c) 30%, transparent);
  transition: all .3s ease;
}
.vip-cta:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--c) 60%, transparent),
    0 0 50px color-mix(in srgb, var(--c) 45%, transparent);
}
.vip-perks-panel__contact{
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
   MERCH — Coming Soon state
   ============================================================ */
.section--merch-soon{ position: relative; }

.merch-soon{
  max-width: 720px;
  margin: 3rem auto 2rem;
  padding: 3.5rem 2.4rem 3rem;
  position: relative;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,240,255,.06) 0%, transparent 70%),
    rgba(8,4,16,.55);
  border: 1px solid rgba(0,240,255,.22);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.merch-soon::before{
  content:'';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,240,255,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .6;
}

.merch-soon__hud{
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .25em;
  color: var(--cyan);
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}
.merch-soon__hud-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: merch-dot-pulse 1.6s ease-in-out infinite;
}
.merch-soon__hud-line{
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
@keyframes merch-dot-pulse{
  0%, 100%{ opacity: .4; transform: scale(.9); }
  50%{ opacity: 1; transform: scale(1.2); }
}

.merch-soon__icon{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 110px; height: 110px;
  margin: 0 auto 1.4rem;
  border-radius: 99px;
  background: rgba(0,240,255,.06);
  border: 1px solid rgba(0,240,255,.35);
  color: var(--cyan);
  box-shadow:
    0 0 30px rgba(0,240,255,.25),
    inset 0 0 30px rgba(0,240,255,.08);
  animation: merch-icon-float 4s ease-in-out infinite;
}
@keyframes merch-icon-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.merch-soon__title{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: .08em;
  line-height: 1;
  margin: 0 0 .3rem;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 50%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(0,240,255,.25);
}
.merch-soon__jp{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem; letter-spacing: .35em;
  color: var(--cyan); opacity: .8;
  margin-bottom: 1.4rem;
}
.merch-soon__copy{
  font-size: .98rem;
  line-height: 1.7;
  color: var(--text2);
  max-width: 540px;
  margin: 0 auto 2rem;
  text-wrap: pretty;
}

.merch-soon__stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.merch-soon__stat-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .25em;
  color: var(--muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.merch-soon__stat-value{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem; letter-spacing: .06em;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0,240,255,.35);
}

.merch-soon__cta{
  position: relative;
  z-index: 1;
}

@media (max-width: 600px){
  .merch-soon{ padding: 2.4rem 1.4rem 2rem; }
  .merch-soon__stats{ grid-template-columns: 1fr; gap: .8rem; padding: 1rem 0; }
}

/* ============================================================
   EORZEA CLOCK — gacha-style premium HUD widget
   ============================================================ */
.eorzea-clock{
  position: relative;
  width: 280px;
  height: 110px;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  background: rgba(8,4,20,.78);
  border-radius: 10px;
  box-shadow:
    0 4px 20px rgba(0,0,0,.4),
    0 0 18px rgba(0,240,255,.18),
    0 0 30px rgba(139,92,246,.12),
    inset 0 0 25px rgba(0,240,255,.05);
  backdrop-filter: blur(10px);
  isolation: isolate;
  overflow: hidden;
  animation: eorzea-clock-hue 12s linear infinite;
}
@keyframes eorzea-clock-hue{
  0%   { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(0,240,255,.35),  0 0 32px rgba(0,240,255,.18),  inset 0 0 25px rgba(0,240,255,.06); }
  25%  { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(255,46,151,.35), 0 0 32px rgba(255,46,151,.18), inset 0 0 25px rgba(255,46,151,.06); }
  50%  { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(139,92,246,.4),  0 0 32px rgba(139,92,246,.2),  inset 0 0 25px rgba(139,92,246,.07); }
  75%  { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(255,215,0,.35),  0 0 32px rgba(255,215,0,.18),  inset 0 0 25px rgba(255,215,0,.06); }
  100% { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(0,240,255,.35),  0 0 32px rgba(0,240,255,.18),  inset 0 0 25px rgba(0,240,255,.06); }
}
/* Animated conic-gradient ring — the premium WOW effect */
.eorzea-clock::after{
  content:'';
  position: absolute; inset: 0;
  border-radius: 10px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ang, 0deg),
    #00F0FF,
    #FF2E97,
    #8B5CF6,
    #FFD700,
    #00F0FF
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: eorzea-clock-ring-spin 8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@property --ang{ syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes eorzea-clock-ring-spin{ to{ --ang: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .eorzea-clock::after{ background: var(--cyan); }
}
.eorzea-clock::before{
  content:''; position:absolute; inset:0; border-radius:10px;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* HUD corner brackets — subtle, sit inside the rotating ring */
.eorzea-clock__corner{
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid rgba(255,255,255,.6);
  z-index: 2;
  filter: drop-shadow(0 0 3px rgba(0,240,255,.5));
  opacity: .7;
}
.eorzea-clock__corner--tl{ top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.eorzea-clock__corner--tr{ top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.eorzea-clock__corner--bl{ bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.eorzea-clock__corner--br{ bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* Left side orbital rune */
.eorzea-clock__orb{
  position: absolute;
  left: 12px; top: 50%;
  width: 72px; height: 72px;
  transform: translateY(-50%);
  z-index: 2;
}
.eorzea-clock__orb-ring{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,240,255,.5);
}
.eorzea-clock__orb-ring--1{
  animation: eorzea-orb-spin 26s linear infinite;
  border-style: solid;
  border-color: rgba(0,240,255,.7);
  opacity: .8;
  filter: drop-shadow(0 0 4px rgba(0,240,255,.5));
}
.eorzea-clock__orb-ring--2{
  inset: 8px;
  border-style: dashed;
  border-color: rgba(255,46,151,.75);
  opacity: .7;
  filter: drop-shadow(0 0 3px rgba(255,46,151,.5));
  animation: eorzea-orb-spin 18s linear infinite reverse;
}
.eorzea-clock__orb-ring--3{
  inset: 18px;
  border-style: dotted;
  border-color: rgba(255,215,0,.8);
  opacity: .9;
  filter: drop-shadow(0 0 3px rgba(255,215,0,.5));
}
@keyframes eorzea-orb-spin{ to{ transform: rotate(360deg); } }

.eorzea-clock__orb-core{
  position: absolute; inset: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(0,240,255,.9) 0%,
      rgba(139,92,246,.7) 35%,
      rgba(255,46,151,.5) 70%,
      rgba(8,4,20,.85) 100%);
  box-shadow:
    0 0 22px rgba(139,92,246,.7),
    0 0 36px rgba(255,46,151,.35),
    inset 0 0 10px rgba(255,255,255,.4),
    inset -2px -2px 8px rgba(0,0,0,.4);
  animation: eorzea-orb-glow 3s ease-in-out infinite;
}
@keyframes eorzea-orb-glow{
  0%, 100%{
    box-shadow:
      0 0 22px rgba(139,92,246,.7),
      0 0 36px rgba(255,46,151,.35),
      inset 0 0 10px rgba(255,255,255,.4),
      inset -2px -2px 8px rgba(0,0,0,.4);
  }
  50%{
    box-shadow:
      0 0 32px rgba(0,240,255,.95),
      0 0 50px rgba(139,92,246,.5),
      inset 0 0 14px rgba(255,255,255,.6),
      inset -2px -2px 8px rgba(0,0,0,.4);
  }
}

.eorzea-clock__orb-marker{
  position: absolute;
  top: -1px; left: 50%;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow:
    0 0 10px var(--gold),
    0 0 20px rgba(255,215,0,.7),
    0 0 30px rgba(255,215,0,.35);
  transform-origin: 50% 36px;
  animation: eorzea-marker-orbit 8s linear infinite;
}
@keyframes eorzea-marker-orbit{
  from{ transform: translateX(-50%) rotate(0deg); }
  to{ transform: translateX(-50%) rotate(360deg); }
}

/* Vertical kanji watermark */
.eorzea-clock__kanji{
  position: absolute;
  right: 14px; top: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(0,240,255,.55);
  writing-mode: vertical-rl;
  text-shadow: 0 0 8px rgba(0,240,255,.4);
  z-index: 2;
  user-select: none;
}

/* Info column */
.eorzea-clock__info{
  position: absolute;
  left: 100px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}

.eorzea-clock__label{
  font-size: 8px;
  letter-spacing: 3px;
  color: rgba(0,240,255,.7);
  text-transform: uppercase;
}

.eorzea-clock__time{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 3px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,240,255,.55), 0 2px 4px rgba(0,0,0,.6);
  display: flex;
  align-items: baseline;
}
.eorzea-clock__sep{
  color: var(--cyan);
  margin: 0 1px;
  animation: eorzea-blink 1s steps(2) infinite, eorzea-sep-hue 6s linear infinite;
  text-shadow: 0 0 14px currentColor;
}
@keyframes eorzea-blink{ 50%{ opacity: .25; } }
@keyframes eorzea-sep-hue{
  0%   { color: #00F0FF; }
  33%  { color: #FF2E97; }
  66%  { color: #FFD700; }
  100% { color: #00F0FF; }
}

.eorzea-clock__day{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.75);
}
.eorzea-clock__pip{
  width: 5px; height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 7px var(--cyan);
  animation: eorzea-pip-pulse 2s ease-in-out infinite;
}
@keyframes eorzea-pip-pulse{
  50%{ box-shadow: 0 0 12px var(--cyan); transform: scale(1.15); }
}

@media (max-width: 700px){
  .eorzea-clock{ width: 230px; height: 96px; }
  .eorzea-clock__orb{ width: 60px; height: 60px; }
  .eorzea-clock__orb-core{ inset: 22px; }
  .eorzea-clock__orb-marker{ transform-origin: 50% 30px; }
  .eorzea-clock__info{ left: 84px; }
  .eorzea-clock__time{ font-size: 25px; }
}