/* ══════════════════════════════════════════════════════════
   HERO v18.1 — Prefixed .r90v18-hero, fullwidth, mascots peeking from panel edges
   Class prefix: r90v18-hero (avoids v17 critical.min.css conflicts)
   Desktop: ───[mascot-left │ glass panel 3-col │ mascot-right]───
   Mascots as CSS pseudo-elements on panel (v15 style)
   Mobile: stacked, robot beside card, dolphin beside CTAs
   ══════════════════════════════════════════════════════════ */

/* Hero: fullwidth background, no max-width */
.r90v18-hero {
  background: var(--r90-gradient-hero,
    radial-gradient(circle at 20% 20%, rgba(255,100,200,.15), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(100,150,255,.15), transparent 50%),
    linear-gradient(135deg, rgba(30,10,50,.96), rgba(10,5,30,.99)));
  color: #fff;
  padding: 1rem 0;
  width: 100%;
}

/* Stage: fullwidth, relative for mascot positioning */
.r90v18-hero__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Desktop mascots: hidden on mobile, shown flanking at screen edges */
.r90v18-hero__mascot { display: none; }

/* Mobile mascots: small, inline */
.r90v18-hero__mob-mascot-left  { width: 48px; height: auto; flex-shrink: 0; opacity: 0.5; align-self: center; }
.r90v18-hero__mob-mascot-right { width: 44px; height: auto; flex-shrink: 0; opacity: 0.45; align-self: center; }

/* Panel: centered glass card */
.r90v18-hero__panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

/* Grid: stacked mobile */
.r90v18-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Show Card (Col 1) ── */
.r90v18-hero__left { display: flex; gap: .6rem; align-items: flex-start; }
.r90v18-hero__card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: row; gap: .6rem;
  padding: .75rem; border-radius: 14px;
  background: var(--r90-bg-card, rgba(4,0,18,.96));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.r90v18-hero__cover-frame {
  width: 64px; flex-shrink: 0; border-radius: 10px; padding: 2px;
  background: linear-gradient(135deg, #35d9ff, #ff6ba5, #ffd34a);
}
.r90v18-hero__cover {
  width: 100%; padding-bottom: 100%; border-radius: 8px;
  background-size: cover; background-position: center;
}
.r90v18-hero__card-meta { min-width: 0; }
.r90v18-hero__show-name {
  font-size: .85rem; font-weight: 600; margin: 0;
  color: var(--r90-highlight, #ffd96b);
  font-family: 'Playfair Display', serif;
}
.r90v18-hero__show-hours { font-size: .7rem; margin: .1rem 0 0; color: var(--r90-highlight-warm, #ffd34a); }
.r90v18-hero__show-desc {
  font-size: .65rem; margin: .25rem 0 0; color: rgba(255,255,255,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Center Column ── */
.r90v18-hero__center { display: flex; flex-direction: column; gap: .6rem; }
.r90v18-hero__kicker { display: flex; align-items: center; gap: .35rem; font-size: .65rem; color: rgba(255,255,255,.5); }
.r90v18-hero__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: r90-pulse 2s ease-in-out infinite; }
@keyframes r90-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.r90v18-hero__title {
  font-size: 1.5rem; font-weight: 700; margin: 0;
  font-family: 'Playfair Display', serif;
  background: linear-gradient(135deg, #fff, #e0c3fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.r90v18-hero__title span { color: #ffd34a; -webkit-text-fill-color: #ffd34a; }

/* Identity */
.r90v18-hero__identity {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; background: rgba(255,255,255,.04);
  border-radius: 8px; border: 1px solid rgba(255,255,255,.05);
}
.r90v18-hero__id-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(109,92,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .9em; flex-shrink: 0; overflow: hidden;
}
.r90v18-hero__id-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.r90v18-hero__id-info { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-size: .7rem; }
.r90v18-hero__id-name { font-weight: 600; }
.r90v18-hero__id-level { font-size: .6rem; background: rgba(255,255,255,.12); padding: 1px 5px; border-radius: 3px; }
.r90v18-hero__id-karma { font-size: .6rem; color: rgba(255,255,255,.5); }
.r90v18-hero__id-rank  { font-size: .6rem; color: rgba(255,255,255,.35); }

/* Stats + NP + Pulse + CTA */
.r90v18-hero__stats { display: flex; gap: .35rem; }
.r90v18-hero__stat { flex: 1; text-align: center; padding: .4rem .25rem; background: rgba(255,255,255,.04); border-radius: 7px; }
.r90v18-hero__stat-val { display: block; font-size: .95rem; font-weight: 600; }
.r90v18-hero__stat-lbl { display: block; font-size: .5rem; color: rgba(255,255,255,.35); margin-top: 1px; }

.r90v18-hero__np {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .5rem; background: rgba(255,255,255,.03);
  border-radius: 7px; border: 1px solid rgba(255,255,255,.04);
}
.r90v18-hero__np-art { width: 34px; height: 34px; flex-shrink: 0; border-radius: 4px; background-size: cover; background-position: center; background-color: rgba(255,255,255,.04); }
.r90v18-hero__np-meta { flex: 1; min-width: 0; }
.r90v18-hero__np-label { display: block; font-size: .45rem; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .5px; }
.r90v18-hero__np-artist { display: block; font-size: .7rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r90v18-hero__np-title  { display: block; font-size: .6rem; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r90v18-hero__np-vote { display: flex; gap: 2px; flex-shrink: 0; }
.r90v18-hero__np-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: .8rem; border-radius: 4px; opacity: .35; transition: opacity .15s, background .15s; }
.r90v18-hero__np-btn:hover { opacity: 1; background: rgba(255,255,255,.07); }
.r90v18-hero__np-btn.is-active { opacity: 1; }

/* Pulse */
.r90v18-hero__pulse { padding: .5rem 0 0; border-top: 1px solid rgba(255,255,255,.04); }
.r90v18-hero__pulse-hdr { display: flex; align-items: center; justify-content: space-between; font-size: .55rem; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .7px; margin-bottom: .3rem; }
.r90v18-hero__pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #8b5cf6; animation: r90-pulse 2s ease-in-out infinite; }
.r90v18-hero__pulse-list { display: flex; flex-direction: column; gap: 3px; max-height: 140px; overflow-y: auto; overflow-x: hidden; }
.r90v18-hero__pulse-list img { max-width: 32px !important; max-height: 32px !important; object-fit: cover; border-radius: 4px; }
.r90v18-hero__pulse-list .r90h-vote-item, .r90v18-hero__pulse-list .r90h-social-item { font-size: .65rem !important; padding: 4px 6px !important; background: rgba(255,255,255,.02); border-radius: 5px; }
.r90v18-hero__pulse-list .r90h-vote-cover { width: 28px !important; height: 28px !important; flex-shrink: 0; overflow: hidden; }
.r90v18-hero__pulse-list .r90h-vote-cover img { width: 100% !important; height: 100% !important; }
.r90v18-hero__pulse-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px; background: rgba(255,255,255,.02); border-radius: 5px; font-size: .65rem; color: rgba(255,255,255,.55); }
.r90v18-hero__pulse-skel { height: 24px; border-radius: 5px; background: rgba(255,255,255,.02); animation: r90-shimmer 1.5s ease-in-out infinite; }
@keyframes r90-shimmer { 0%,100%{opacity:.4} 50%{opacity:.1} }

/* CTA Row — mobile: stacked + dolphin */
.r90v18-hero__cta-row { display: flex; gap: .5rem; align-items: flex-end; margin-top: .5rem; }
.r90v18-hero__cta { flex: 1; }
.r90v18-hero__cta-guest, .r90v18-hero__cta-user { display: flex; flex-direction: column; gap: .35rem; }
.r90v18-hero__btn {
  display: flex; align-items: center; justify-content: center;
  padding: .5rem .4rem; border-radius: 7px;
  font-size: .72rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7); transition: all .15s ease; min-height: 38px;
}
.r90v18-hero__btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.r90v18-hero__btn--accent { background: var(--r90-gradient-cta, linear-gradient(135deg, #ff6ad5, #ff8f6a)); border: none; color: #fff; }
.r90v18-hero__btn--accent:hover { opacity: .9; }

/* ══════════════════════════════════════════════════════════
   DESKTOP — fullwidth hero, mascots peeking from panel edges (v15 style)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .r90v18-hero { padding: 1.5rem 0; }
  .r90v18-hero__stage { overflow: visible; }

  /* Hide mobile mascots + HTML mascot divs (using CSS pseudo-elements instead) */
  .r90v18-hero__mob-mascot-left, .r90v18-hero__mob-mascot-right { display: none; }
  .r90v18-hero__mascot { display: none !important; }

  /* Panel: centered glass card, with glow border + mascots peeking from edges */
  .r90v18-hero__panel {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    border: 1px solid rgba(139,92,246,.12);
    box-shadow:
      0 0 40px rgba(139,92,246,.06),
      0 0 80px rgba(31,180,255,.03),
      inset 0 1px 0 rgba(255,255,255,.05);
    background: rgba(10,5,25,.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: visible;
    isolation: isolate;
  }
  .r90v18-hero__panel > * {
    position: relative;
    z-index: 2;
  }

  /* Mascots via pseudo-elements — peeking from behind card edges (v15 style) */
  .r90v18-hero__panel::before,
  .r90v18-hero__panel::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 65%;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  }
  .r90v18-hero__panel::before {
    background-image: url('https://90hit.ro/wp-content/uploads/2026/03/robot-left-optimized.webp');
    left: 0;
    transform: translate(-65%, -50%);
    animation: r90v18-mascotFloatLeft 6s ease-in-out infinite;
  }
  .r90v18-hero__panel::after {
    background-image: url('https://90hit.ro/wp-content/uploads/2026/03/dolhin-right-transparent.webp');
    right: 0;
    transform: translate(72%, -50%);
    animation: r90v18-mascotFloatRight 6s ease-in-out infinite 3s;
  }
  .r90v18-hero__panel:hover::before {
    transform: translate(-62%, -50%);
    animation-play-state: paused;
  }
  .r90v18-hero__panel:hover::after {
    transform: translate(69%, -50%);
    animation-play-state: paused;
  }

  /* 3-col grid */
  .r90v18-hero__grid {
    display: grid;
    grid-template-columns: 240px 1fr 220px;
    gap: 1.25rem;
    align-items: start;
  }
  .r90v18-hero__left { display: block; }
  .r90v18-hero__card { flex-direction: column; gap: .5rem; }
  .r90v18-hero__cover-frame { width: 100%; }
  .r90v18-hero__show-name { font-size: 1.1rem; }
  .r90v18-hero__title { font-size: 2.2rem; }
  .r90v18-hero__stat-val { font-size: 1.2rem; }
  .r90v18-hero__np-artist { font-size: .85rem; }
  .r90v18-hero__id-info { font-size: .8rem; }
  .r90v18-hero__pulse { border-top: none; padding-top: 0; }
  .r90v18-hero__pulse-list { max-height: 300px; }

  /* CTA: horizontal */
  .r90v18-hero__cta-guest, .r90v18-hero__cta-user { flex-direction: row; gap: .4rem; }
  .r90v18-hero__btn { flex: 1; }
}

/* Wider screens: bigger mascots (pseudo-elements scale via panel height), wider panel */
@media (min-width: 1100px) {
  .r90v18-hero__panel { max-width: 1060px; padding: 1.75rem 2rem; }
  .r90v18-hero__grid { grid-template-columns: 260px 1fr 240px; gap: 1.5rem; }
  .r90v18-hero__title { font-size: 2.5rem; }
  .r90v18-hero__stat-val { font-size: 1.3rem; }
  .r90v18-hero__panel::before,
  .r90v18-hero__panel::after { height: 70%; }
}

@media (min-width: 1400px) {
  .r90v18-hero__panel { max-width: 1120px; }
  .r90v18-hero__grid { grid-template-columns: 280px 1fr 250px; }
  .r90v18-hero__panel::before,
  .r90v18-hero__panel::after { height: 75%; }
}

/* ══════════════════════════════════════════════════════════
   KEYFRAMES — Mascot float animations (v15 style)
   ══════════════════════════════════════════════════════════ */
@keyframes r90v18-mascotFloatLeft {
  0%, 100% { transform: translate(-65%, -50%) translateY(0); }
  50%      { transform: translate(-65%, -50%) translateY(-10px); }
}
@keyframes r90v18-mascotFloatRight {
  0%, 100% { transform: translate(72%, -50%) translateY(0); }
  50%      { transform: translate(72%, -50%) translateY(-10px); }
}

/* Accessibility: disable mascot animations */
@media (prefers-reduced-motion: reduce) {
  .r90v18-hero__panel::before,
  .r90v18-hero__panel::after {
    animation: none !important;
  }
}