/* COMM-DZ — pont auth /go/ (CDN) — ar/fr via html[dir] */
:root {
  --ink: #f3fffb;
  --muted: rgba(243, 255, 251, .72);
  --teal: #14b8a6;
  --teal-deep: #0f766e;
  --gold: #d4b56a;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: system-ui, "Segoe UI", sans-serif;
  --display: system-ui, "Segoe UI", ui-sans-serif, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  min-height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  background: #06241f;
}

.stage {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  isolation: isolate;
}

.aurora {
  position: absolute; inset: -20%;
  z-index: 0;
  background:
    radial-gradient(40% 35% at 18% 22%, rgba(20, 184, 166, .45), transparent 60%),
    radial-gradient(35% 40% at 82% 18%, rgba(212, 181, 106, .28), transparent 62%),
    radial-gradient(45% 40% at 55% 88%, rgba(15, 118, 110, .5), transparent 65%),
    linear-gradient(155deg, #041915, #0b3a33 48%, #06241f);
  animation: auroraDrift 9s ease-in-out infinite alternate;
  filter: saturate(1.1);
}
@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.orb {
  position: absolute; z-index: 1; border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  opacity: .55;
}
.orb-a {
  width: 18vmin; height: 18vmin; left: 8%; top: 18%;
  background: radial-gradient(circle at 30% 30%, rgba(61, 214, 198, .7), transparent 70%);
  animation: floatA 6.5s var(--ease) infinite alternate;
}
.orb-b {
  width: 24vmin; height: 24vmin; right: 6%; bottom: 12%;
  background: radial-gradient(circle at 40% 40%, rgba(212, 181, 106, .45), transparent 72%);
  animation: floatB 7.8s var(--ease) infinite alternate;
}
.orb-c {
  width: 12vmin; height: 12vmin; left: 42%; top: 8%;
  background: radial-gradient(circle at 50% 50%, rgba(244, 255, 251, .25), transparent 70%);
  animation: floatC 5.2s var(--ease) infinite alternate;
}
@keyframes floatA { from { transform: translate(0, 0); } to { transform: translate(8%, 12%); } }
@keyframes floatB { from { transform: translate(0, 0); } to { transform: translate(-10%, -8%); } }
@keyframes floatC { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 10%) scale(1.15); } }

.panel {
  position: relative; z-index: 2;
  width: min(26rem, 100%);
  text-align: center;
  animation: riseIn 900ms var(--ease) both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

.brand {
  display: grid;
  justify-items: center;
  gap: .85rem;
  margin-bottom: 1.35rem;
}
.mark-wrap {
  position: relative;
  width: 5.5rem; height: 5.5rem;
}
.mark-ring {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--teal), var(--gold), transparent 72%);
  animation: spin 2.8s linear infinite;
  opacity: .9;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
@keyframes spin { to { transform: rotate(360deg); } }
.mark {
  width: 5.5rem; height: 5.5rem;
  border-radius: 1.35rem;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(243, 255, 251, .12),
    0 18px 40px rgba(0, 0, 0, .35);
  animation: markPulse 2.4s var(--ease) infinite;
}
@keyframes markPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.word {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 2.75rem);
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(120deg, #fff 20%, #9ef3e6 55%, var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 3.2s ease-in-out infinite;
  background-size: 180% 100%;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

h1 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.lede {
  margin: 0 auto 1.25rem;
  max-width: 22rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 1.02rem;
  animation: ledeIn 700ms var(--ease) .15s both;
}
@keyframes ledeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.load-row {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: 0 auto 1.15rem;
}
.load-pulse {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(20, 184, 166, .55);
  animation: loadBounce 1.05s var(--ease) infinite;
}
.load-pulse:nth-child(2) {
  animation-delay: .15s;
  background: #5eead4;
}
.load-pulse:nth-child(3) {
  animation-delay: .3s;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(212, 181, 106, .45);
}
@keyframes loadBounce {
  0%, 80%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  40% { transform: translateY(-7px) scale(1.15); opacity: 1; }
}

html[data-kind="out"] .load-pulse,
html[data-kind="home"] .load-pulse {
  background: #7dd3c7;
}
html[data-kind="out"] .load-pulse:nth-child(3),
html[data-kind="home"] .load-pulse:nth-child(3) {
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .35);
}

.progress {
  --p: 0;
  width: min(14rem, 70vw);
  height: .35rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: rgba(243, 255, 251, .12);
  overflow: hidden;
}
.progress > i {
  display: block; height: 100%; width: calc(var(--p) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), var(--gold));
  box-shadow: 0 0 16px rgba(20, 184, 166, .55);
  transition: width 80ms linear;
}

.meta {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 255, 251, .55);
  animation: metaPulse 1.6s ease-in-out infinite;
}
@keyframes metaPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.meta b { color: #fff; font-weight: 800; }

.lang-switch {
  position: absolute;
  z-index: 3;
  top: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  gap: .35rem;
}
.lang-switch button {
  appearance: none;
  border: 1px solid rgba(243, 255, 251, .25);
  background: rgba(6, 36, 31, .45);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: .78rem;
  padding: .35rem .55rem;
  border-radius: .55rem;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] {
  background: rgba(20, 184, 166, .35);
  border-color: rgba(20, 184, 166, .7);
}

html.is-leaving .panel {
  animation: leaveOut 220ms ease both;
}
@keyframes leaveOut {
  to { opacity: 0; transform: translateY(-12px) scale(.98); filter: blur(4px); }
}

html[data-kind="out"] .aurora {
  background:
    radial-gradient(40% 35% at 22% 30%, rgba(15, 118, 110, .4), transparent 60%),
    radial-gradient(35% 40% at 78% 20%, rgba(212, 181, 106, .18), transparent 62%),
    linear-gradient(165deg, #031512, #0a2f2a 50%, #041a16);
}
html[data-kind="home"] .word {
  background: linear-gradient(120deg, #fff 10%, #7dd3c7 60%, #fff);
  -webkit-background-clip: text; background-clip: text;
  background-size: 180% 100%;
}

html[dir="rtl"] .panel { text-align: center; }
html[dir="rtl"] .meta { letter-spacing: 0; }

#cf-gate { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .orb, .mark, .mark-ring, .word, .panel, .lede, .load-pulse, .meta {
    animation: none !important;
  }
  .panel { opacity: 1; filter: none; transform: none; }
  .load-pulse { opacity: .85; }
}