/* ==========================================================================
   POLARIX — le seuil
   Une seule page-écran. Rien à faire dessus sauf entrer, donc rien d'autre
   ne doit s'y trouver.
   ========================================================================== */

.portal {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--gutter);
  text-align: center;
}

/* --- Bandeau haut -------------------------------------------------------- */

.portal__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.portal__top .px-brand { --px-brand-w: 148px; }
.portal__for { color: var(--muted); }

@media (max-width: 720px) {
  .portal__top { flex-direction: column; gap: 0.6rem; }
  .portal__for { font-size: 0.625rem; }
}

/* --- La prise de position ------------------------------------------------
   Quatre cercles qui se referment sur le pôle, puis le passage qui s'ouvre.
   Une passe unique au chargement : c'est une mise en route, pas une boucle.
   -------------------------------------------------------------------------- */

.fix {
  position: relative;
  display: grid;
  place-items: center;
  width: min(64vmin, 540px);
  aspect-ratio: 1;
}

/* Verre fumé sous l'instrument : le ciel s'efface là où l'objet se pose. */
.fix::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(4, 6, 12, 0.7) 0%,
              rgba(4, 6, 12, 0.5) 48%,
              transparent 74%);
}

.fix__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Halo d'approche, sous le cadran. Il éclaire l'étoile par-derrière : aucun
   calque ne passe devant la marque, donc rien ne la ternit. */
.fix__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 72%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(242, 183, 94, 0.3) 0%,
              rgba(242, 183, 94, 0.08) 38%,
              transparent 66%);
  opacity: 0;
  transition: opacity var(--d-mid) var(--ease);
  pointer-events: none;
}

.enter:hover ~ .fix__glow,
.enter:focus-visible ~ .fix__glow { opacity: 1; }

.fix__ring {
  fill: none;
  stroke: rgba(169, 196, 239, 0.26);
  stroke-width: 1;
}
.fix__ring:nth-child(1) { stroke-dasharray: 2 10; }
.fix__ring:nth-child(3) { stroke: rgba(169, 196, 239, 0.14); }

.fix__cross path {
  fill: none;
  stroke: rgba(169, 196, 239, 0.2);
  stroke-width: 1;
}

.fix__trail {
  stroke: var(--polaris);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.5;
}
.fix__star { fill: var(--paper); }

/* La rose porte ses propres facettes (jetons --rose-*), elle n'hérite donc
   pas d'une couleur d'encre comme les symboles à une couleur. */
.fix__pole { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Les cercles se referment du plus grand au plus petit. */
  .js .fix__ring {
    transform-origin: 320px 320px;
    opacity: 0;
    animation: lock 1.5s var(--ease) forwards;
    animation-delay: calc(var(--i) * 190ms + 200ms);
  }
  .js .fix__cross,
  .js .fix__orbiter {
    opacity: 0;
    animation: fadeIn 1.4s var(--ease) forwards 1s;
  }
  .js .fix__pole {
    opacity: 0;
    transform-origin: 320px 320px;
    animation: poleIn 1.5s var(--ease-snap) forwards 620ms;
  }

  /* Une fois posé, l'astre tient son orbite. La rotation est lente : ce
     n'est pas un indicateur d'attente. */
  .fix__orbiter {
    transform-origin: 320px 320px;
    animation: spin 26s linear infinite 1s;
  }
  .fix__rings { transform-origin: 320px 320px; }
  .fix__cross { transform-origin: 320px 320px; animation: spin 300s linear infinite reverse; }
}

@keyframes lock {
  from { opacity: 0; transform: scale(1.28) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes poleIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes spin   { to { transform: rotate(360deg); } }

/* --- Le passage ----------------------------------------------------------
   On n'entre pas à côté de l'étoile, on entre par elle : la cible est un
   anneau qui l'entoure, et le mot se pose dessous, à l'intérieur. Rien ne
   recouvre la marque.

   Cliquable dès la première image : personne n'attend la fin d'une
   animation pour entrer sur un site.
   -------------------------------------------------------------------------- */

.enter {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 47%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: end;
  justify-items: center;
  padding-bottom: 8%;
  border-radius: var(--r-pill);
}

.enter__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--d-mid) var(--ease),
              transform var(--d-mid) var(--ease-snap);
}

.enter__label {
  position: relative;
  font-family: var(--font-tech);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color var(--d-mid) var(--ease);
}

.enter:hover .enter__ring,
.enter:focus-visible .enter__ring {
  border-color: var(--polaris);
  transform: scale(1.05);
}
.enter:hover .enter__label,
.enter:focus-visible .enter__label { color: var(--polaris); }
.enter:active .enter__ring { transform: scale(0.99); }

@media (prefers-reduced-motion: no-preference) {
  .js .enter { opacity: 0; animation: fadeIn 1s var(--ease) forwards 1.35s; }
}

/* --- Signature ------------------------------------------------------------ */

.portal__claim {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  max-width: 18ch;
}
.portal__claim b { display: inline-block; line-height: 1.08; padding-bottom: 0.05em; }

@media (prefers-reduced-motion: no-preference) {
  .js .portal__claim { opacity: 0; animation: riseIn 1.1s var(--ease) forwards 1.5s; }
  .js .portal__top,
  .js .portal__bottom { opacity: 0; animation: fadeIn 1.1s var(--ease) forwards 1.7s; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- Bandeau bas ---------------------------------------------------------- */

.portal__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--font-tech);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 560px) {
  .portal { gap: var(--s-1); }
  .portal__bottom { flex-direction: column; gap: 0.5rem; }
}