/* ===========================================================================
   AdventureNET — Portaluri secundare din ecranul destinațiilor
   ---------------------------------------------------------------------------
   Sub harta cu Platformă / Panou Utilizator / Administrare / Panou Gazdă mai
   stau două ieșiri:

     · un SCUT în relief  -> starea platformei (`pages/status.html`)
     · o PANĂ cu stea     -> crearea unui cont nou (`pages/inregistrare.html`)

   Nu sunt cartonașe. Sunt obiecte cu volum: fiecare are o față, o margine
   ridicată și o umbră proprie, iar la trecerea cursorului se înclină ușor spre
   privitor. Adâncimea vine din `perspective` pe părinte plus `translateZ` pe
   straturi — nu dintr-o umbră desenată peste o suprafață plată.

   Lățimea (260px) este aceeași cu a cardurilor de destinație de deasupra
   (`layout.css`: `.destinatie { flex: 0 1 260px }`), ca rândurile să se
   alinieze. Paleta este cea a cărții: aur, noapte adâncă, piele.
   =========================================================================== */

.portaluri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  perspective: 900px;

  /* Linie subțire de despărțire față de hartă, în aur foarte stins. */
  border-top: 1px solid rgba(220, 180, 95, .16);
}

/* --------------------------------------------------------------------- */
/*  Obiectul în sine                                                      */
/* --------------------------------------------------------------------- */

.portal {
  position: relative;
  flex: 0 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  text-decoration: none;
  color: var(--aur-clar, #fbeec2);
  border-radius: var(--rotunjire-mare, 20px);
  transform-style: preserve-3d;
  transform: rotateX(0deg) translateZ(0);
  transition:
    transform var(--durata-scurta, 240ms) var(--usor, cubic-bezier(.22,1,.36,1)),
    box-shadow var(--durata-scurta, 240ms) var(--usor, cubic-bezier(.22,1,.36,1));

  /* Fața: piele întunecată, lustruită de sus */
  background:
    linear-gradient(168deg, rgba(46, 60, 104, .55), rgba(10, 16, 36, .92) 62%),
    radial-gradient(120% 90% at 50% -10%, rgba(220, 180, 95, .22), transparent 58%);

  /* Marginea ridicată + umbra */
  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .30),
    0 1px 0 rgba(251, 238, 194, .22) inset,
    0 -10px 22px rgba(0, 0, 0, .45) inset,
    0 14px 26px rgba(6, 11, 24, .48);
}

.portal:hover,
.portal:focus-visible {
  transform: rotateX(7deg) translateZ(16px);
  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .58),
    0 1px 0 rgba(251, 238, 194, .34) inset,
    0 -10px 22px rgba(0, 0, 0, .42) inset,
    0 26px 44px rgba(6, 11, 24, .58),
    0 0 40px rgba(220, 180, 95, .16);
}

.portal:focus-visible {
  outline: 3px solid var(--aur-cald, #eed597);
  outline-offset: 3px;
}

.portal:active {
  transform: rotateX(3deg) translateZ(5px);
}

/* Luciul care traversează fața la hover */
.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(102deg, transparent 34%, rgba(251, 238, 194, .17) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 720ms var(--usor, cubic-bezier(.22,1,.36,1));
}

.portal:hover::after,
.portal:focus-visible::after {
  transform: translateX(130%);
}

/* --------------------------------------------------------------------- */
/*  Textul                                                                */
/* --------------------------------------------------------------------- */

.portal-text {
  min-width: 0;
  transform: translateZ(20px);
}

.portal-nume {
  display: block;
  font-family: var(--font-academic, Palatino, serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.25;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}

.portal-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-interfata, system-ui, sans-serif);
  font-size: 11.6px;
  letter-spacing: .2px;
  color: rgba(220, 180, 95, .74);
}

/* --------------------------------------------------------------------- */
/*  Emblema (SVG) — stratul care iese cel mai mult în față                */
/* --------------------------------------------------------------------- */

.portal-emblema {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: block;
  transform: translateZ(34px);
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .72));
  transition: transform var(--durata-medie, 520ms) var(--usor, cubic-bezier(.22,1,.36,1));
}

.portal:hover .portal-emblema,
.portal:focus-visible .portal-emblema {
  transform: translateZ(52px) scale(1.07);
}

/* Pulsul din mijlocul scutului: platforma răspunde. Nu este un indicator de
   stare reală — starea adevărată se citește în pagina de status, iar aici ar
   fi o promisiune pe care ecranul acesta nu o poate verifica. */
.portal-puls {
  transform-origin: center;
  animation: portal-puls 2.4s ease-in-out infinite;
}

@keyframes portal-puls {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Steaua de pe portalul de înregistrare are propriul punct de rotire, altfel
   `transform: scale()` din animație ar trage-o spre colțul SVG-ului. */
.portal-stea {
  transform-box: fill-box;
  transform-origin: center;
}

/* Acul busolei de pe portalul „Pagini speciale" — la fel, ca pulsul să
   pornească din centrul acului, nu din colțul cadranului. */
.portal-ac {
  transform-box: fill-box;
  transform-origin: center;
}

/* --------------------------------------------------------------------- */
/*  Ecrane mici                                                           */
/* --------------------------------------------------------------------- */

@media (max-width: 640px) {
  .portaluri { gap: .8rem; margin-top: 1rem; padding-top: 1rem; }
  .portal { flex: 1 1 100%; padding: 13px 16px; }
  .portal-emblema { width: 42px; height: 42px; }
  .portal-nume { font-size: 14px; }
  .portal-sub  { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal,
  .portal-emblema,
  .portal::after { transition: none; }
  .portal:hover,
  .portal:focus-visible { transform: none; }
  .portal-puls { animation: none; opacity: .9; }
}