/* Earnessa v23.10 — featured Freecash, transparent orbit core and mobile header */

/* Freecash remains first in the data order and receives a restrained premium frame. */
.site-card[data-site-slug="freecash"] {
  --nebula-primary: 77 224 191;
  --nebula-secondary: 246 205 112;
  --nebula-highlight: 255 248 210;
  border-color: rgba(246, 211, 124, .5) !important;
  background:
    radial-gradient(circle at 9% 4%, rgba(255, 223, 135, .09), transparent 31%),
    linear-gradient(145deg, rgba(9, 43, 42, .985), rgba(4, 24, 28, .99)) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(87, 226, 196, .11),
    0 0 28px rgba(239, 197, 91, .07),
    inset 0 1px 0 rgba(255, 244, 204, .09) !important;
}

.site-card[data-site-slug="freecash"]::before {
  opacity: .72;
  background:
    linear-gradient(90deg, rgba(247, 207, 106, .08), transparent 31%),
    radial-gradient(circle at 83% 4%, rgba(85, 231, 198, .07), transparent 38%);
}

.site-card[data-site-slug="freecash"] .site-name {
  color: #fff9e6;
  font-size: clamp(1.58rem, 2.2vw, 1.78rem);
  font-weight: 950;
  letter-spacing: -.035em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.site-card[data-site-slug="freecash"] .site-logo-wrap {
  border-color: rgba(248, 216, 132, .46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 12px 28px rgba(0, 0, 0, .2),
    0 0 0 3px rgba(244, 204, 101, .035) !important;
}

.site-card[data-site-slug="freecash"]:hover,
.site-card[data-site-slug="freecash"]:focus-within {
  border-color: rgba(255, 224, 145, .68) !important;
  box-shadow:
    0 28px 62px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(100, 237, 207, .16),
    0 0 34px rgba(243, 201, 94, .1),
    inset 0 1px 0 rgba(255, 246, 211, .11) !important;
}

/* Let the hero artwork show through the emblem well instead of forming a dark disc. */
.visual-core {
  border-color: rgba(159, 241, 234, .18) !important;
  background:
    radial-gradient(circle at 42% 32%, rgba(127, 244, 232, .075), transparent 45%),
    linear-gradient(145deg, rgba(8, 47, 51, .14), rgba(2, 20, 25, .055)) !important;
  box-shadow:
    0 0 28px rgba(48, 211, 200, .055),
    0 0 0 5px rgba(85, 218, 208, .018),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Mobile: two aligned columns — brand/login and language/register. */
@media (max-width: 720px) {
  body:not(.is-authenticated) .site-header {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "brand language"
      "login register" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding-top: 9px !important;
    padding-bottom: 10px !important;
  }

  body:not(.is-authenticated) .site-header > .brand {
    grid-area: brand !important;
    justify-self: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body:not(.is-authenticated) #member-control-panel {
    display: contents !important;
  }

  body:not(.is-authenticated) #language-switcher {
    grid-area: language !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body:not(.is-authenticated) .header-auth-actions {
    display: contents !important;
    margin: 0 !important;
  }

  body:not(.is-authenticated) .header-login-button {
    grid-area: login !important;
  }

  body:not(.is-authenticated) .header-register-button {
    grid-area: register !important;
  }

  body:not(.is-authenticated) .header-auth-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 8px !important;
    justify-self: stretch !important;
    font-size: .79rem !important;
  }

  body:not(.is-authenticated) .brand-mark,
  body:not(.is-authenticated) .brand-mark img {
    width: 36px !important;
    height: 36px !important;
  }

  body:not(.is-authenticated) .brand-mark {
    flex-basis: 36px !important;
  }

  body:not(.is-authenticated) .brand-wordmark {
    font-size: 1.05rem !important;
  }

  /* Mobile hero order: heading, subtitle, orbit and the centered action. */
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 30px 20px 34px !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero-copy > .eyebrow {
    position: relative;
    z-index: 2;
    order: 1;
    width: 100%;
    justify-content: center;
    margin-bottom: 13px;
    text-align: center;
  }

  .hero-title-help-row {
    position: relative;
    z-index: 2;
    order: 2;
    width: 100%;
    justify-content: center !important;
    text-align: center;
  }

  .hero-text {
    position: relative;
    z-index: 2;
    order: 3;
    width: 100%;
    max-width: 36ch;
    margin: 7px auto 0 !important;
    text-align: center;
  }

  .hero-visual {
    position: relative;
    z-index: 2;
    order: 4;
    display: block !important;
    width: min(254px, calc(100vw - 62px)) !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: 16px auto 4px !important;
    overflow: visible !important;
    transform: none !important;
    contain: layout style !important;
  }

  .hero-action {
    position: relative;
    z-index: 2;
    order: 5;
    justify-self: center;
    margin: 10px auto 0 !important;
  }

  .hero-visual::before { inset: -12px !important; }
  .hero-visual::after { inset: -5px !important; }
  .ring-two { inset: 36px !important; }
  .visual-core { inset: 62px !important; }
  .visual-emblem { width: 92px !important; height: 92px !important; }
  .orbit-toggle { bottom: 9px !important; transform: scale(.9); }

  /* Two GPU-friendly rotations keep all four planets moving without JS work. */
  .ring-one {
    animation: slow-spin 26s linear infinite !important;
    will-change: transform !important;
  }

  .ring-two {
    animation: reverse-spin 20s linear infinite !important;
    will-change: transform !important;
  }

  /* Signed-in header collapses as soon as mobile scrolling starts. */
  body.is-authenticated .site-header {
    row-gap: 8px !important;
    transition:
      padding 220ms ease,
      row-gap 220ms ease,
      border-color 220ms ease,
      border-radius 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease !important;
  }

  body.is-authenticated .site-header > .brand {
    transition: transform 220ms ease !important;
  }

  body.is-authenticated #member-control-panel,
  body.is-authenticated .header-member-area {
    max-height: 190px;
    opacity: 1;
    transform: translateY(0);
    transition:
      max-height 230ms ease,
      padding 230ms ease,
      border-width 230ms ease,
      opacity 150ms ease,
      transform 210ms ease !important;
  }

  body.is-authenticated .site-header.is-mobile-scrolled {
    row-gap: 0 !important;
    padding-top: max(5px, env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(4, 28, 32, .16) 20%, rgba(4, 31, 35, .31) 50%, rgba(4, 28, 32, .16) 80%, transparent 100%) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.is-authenticated .site-header.is-mobile-scrolled > .brand {
    justify-self: center !important;
    transform: scale(.94);
  }

  body.is-authenticated .site-header.is-mobile-scrolled #member-control-panel,
  body.is-authenticated .site-header.is-mobile-scrolled .header-member-area {
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
  }

  /* Mobile performance: keep interactive content crisp, drop costly decoration. */
  .hero-banknotes,
  .ambient {
    display: none !important;
  }

  .hero::after {
    display: none !important;
  }

  .site-card,
  .site-card-main,
  .site-card-info,
  .info-box,
  .faq-item,
  .member-task-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .site-card,
  .faq-item,
  .member-task-card {
    contain: layout paint style;
  }

  .site-card[data-site-slug="freecash"] {
    box-shadow:
      0 14px 30px rgba(0, 0, 0, .24),
      0 0 0 1px rgba(87, 226, 196, .1),
      inset 0 1px 0 rgba(255, 244, 204, .07) !important;
  }
}

@media (max-width: 360px) {
  body:not(.is-authenticated) .site-header {
    gap: 7px 8px !important;
  }

  body:not(.is-authenticated) .brand {
    gap: 6px !important;
  }

  body:not(.is-authenticated) .brand-wordmark {
    font-size: .96rem !important;
  }

  body:not(.is-authenticated) #language-switcher.language-switcher {
    width: 86px !important;
    min-width: 86px !important;
  }

  .hero-visual {
    width: min(232px, calc(100vw - 54px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-one,
  .ring-two {
    animation: none !important;
  }

  body.is-authenticated .site-header,
  body.is-authenticated .site-header > .brand,
  body.is-authenticated #member-control-panel,
  body.is-authenticated .header-member-area {
    transition: none !important;
  }
}