:root {
  --bg: #060912;
  --bg-2: #0b1120;
  --pink: #ec0f6c;
  --orange: #ff6a3d;
  --gold: #ffbe2e;
  --text: #f4f6fb;
  --text-muted: #a9b1c6;
  --gradient: linear-gradient(90deg, var(--pink) 0%, var(--orange) 55%, var(--gold) 100%);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60% 45% at 50% 8%, rgba(90, 120, 180, 0.16) 0%, transparent 70%),
    radial-gradient(120% 120% at 50% 0%, #10182c 0%, var(--bg) 55%, #04060c 100%);
  color: var(--text);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: 0 0;
  mask-image: radial-gradient(90% 80% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 0%, transparent 75%);
}

/* Perspective horizon grid — adds sci-fi depth low on the page */
.horizon-grid {
  position: fixed;
  inset: 58% -30% -48% -30%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(111, 214, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 214, 255, .18) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(420px) rotateX(66deg) scale(1.3);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  animation: gridTravel 9s linear infinite;
}

.horizon-line {
  position: fixed;
  top: 55%;
  left: 50%;
  width: min(70rem, 120vw);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(150, 210, 255, .55), transparent);
  box-shadow: 0 0 20px 4px rgba(111, 214, 255, .22);
  animation: horizonPulse 4.2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes gridTravel { to { background-position: 0 46px, 46px 0; } }
@keyframes horizonPulse {
  0%, 100% { opacity: .28; transform: translate(-50%, -50%) scaleX(.85); }
  50% { opacity: .7; transform: translate(-50%, -50%) scaleX(1); }
}

#network {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Login button — top-right corner, links to the Gestor de Editais.
   Shape, position, colors and icon sizing are all set inline on the
   elements themselves so the button renders correctly even if this
   stylesheet fails to load or is served stale/cached; this rule only
   adds the hover/focus/entrance-animation enhancements. */
.login-button {
  opacity: 0;
  animation: fade-in 0.8s ease-out 1.2s forwards;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.login-button:hover,
.login-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 106, 61, 0.35);
}

.login-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


.glow {
  position: fixed;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}

.glow--pink {
  bottom: -20%;
  left: -15%;
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
}

.glow--gold {
  bottom: -20%;
  right: -15%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  animation-delay: -3.5s;
}

@keyframes breathe {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50% { opacity: 0.42; transform: scale(1.08); }
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.25rem 1.5rem;
}

/* Side vertical copy blocks */
.side-copy {
  position: fixed;
  top: 3.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  z-index: 1;
  opacity: 0;
  animation: fade-in 1s ease-out 0.3s forwards;
}

.side-copy__row {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
}

.side-copy__rule {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
}

.side-copy p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.95;
  color: var(--text-muted);
  white-space: nowrap;
}

.side-copy__bar {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  display: block;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--gold), var(--pink));
  background-size: 220% 100%;
  animation: sheen 5s linear infinite;
}

.side-copy--left {
  left: 3rem;
  align-items: flex-start;
}

.side-copy--right {
  right: 3rem;
  top: 6.5rem;
  align-items: flex-end;
}

.side-copy--right p {
  text-align: right;
}

@keyframes sheen {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

@media (max-width: 1100px) {
  .side-copy {
    display: none;
  }
}

/* Hero */
.hero {
  position: relative;
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  opacity: 0;
  animation: reveal-up 0.9s ease-out 0.1s forwards;
}

/* Soft ambient glow breathing behind the mark */
.logo__orb {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(26rem, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 61, .22) 0%, transparent 68%);
  filter: blur(6px);
  z-index: -1;
  animation: logoOrbBreathe 6s ease-in-out infinite;
}

@keyframes logoOrbBreathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.1); }
}

.logo__mark {
  width: clamp(190px, 30vw, 320px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(255, 106, 61, 0.4));
  margin-bottom: 0.5rem;
  animation: float-mark 6s ease-in-out infinite;
}

.circuit-trace {
  fill: none;
  stroke: url(#markGradient);
  stroke-width: 1.1;
  opacity: 0.55;
  animation: trace-charge 3.2s ease-in-out infinite;
}

.circuit-via {
  animation: twinkle 3.2s ease-in-out infinite;
}

.t1  { animation-delay: 0s; }   .t2  { animation-delay: .3s; }  .t3  { animation-delay: .6s; }  .t4  { animation-delay: .9s; }
.t5  { animation-delay: 1.2s; } .t6  { animation-delay: 1.5s; } .t7  { animation-delay: .15s; } .t8  { animation-delay: .45s; }
.t9  { animation-delay: .75s; } .t10 { animation-delay: 1.05s; }.t11 { animation-delay: 1.35s; }.t12 { animation-delay: 1.65s; }
.t13 { animation-delay: .2s; }  .t14 { animation-delay: .5s; }

.logo__apex-glow {
  transform-origin: 100px 14px;
  animation: pulse-glow 2.6s ease-in-out infinite;
}

.logo__apex-dot {
  transform-origin: 100px 14px;
  animation: pulse-dot 2.6s ease-in-out infinite;
}

.logo__sparks path,
.logo__sparks circle {
  animation: twinkle 2.4s ease-in-out infinite;
}

.logo__sparks path:nth-child(1) { animation-delay: 0s; }
.logo__sparks path:nth-child(2) { animation-delay: 0.5s; }
.logo__sparks circle:nth-child(3) { animation-delay: 1s; }
.logo__sparks circle:nth-child(4) { animation-delay: 1.5s; }
.logo__sparks circle:nth-child(5) { animation-delay: 0.8s; }

.logo__type {
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.logo__brand {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--gold), var(--pink));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}

.logo__tagline {
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.hero__divider {
  width: min(420px, 70vw);
  height: 1px;
  margin: 1.5rem 0 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  opacity: 0;
  animation: fade-in 0.8s ease-out 0.5s forwards;
}

.hero__title {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.15;
  opacity: 0;
  animation: reveal-up 0.8s ease-out 0.6s forwards;
}

.text-gradient {
  background: linear-gradient(90deg, var(--pink) 0%, var(--orange) 35%, var(--gold) 60%, var(--pink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 6s linear infinite;
}

.hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 2.25rem;
  opacity: 0;
  animation: reveal-up 0.8s ease-out 0.75s forwards;
}

.dots-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(360px, 80vw);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fade-in 0.8s ease-out 0.9s forwards;
}

.dots-divider__line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.dots-divider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

.dots-divider__dot--pink { background: var(--pink); animation-delay: 0s; }
.dots-divider__dot--orange { background: var(--orange); animation-delay: 0.2s; }
.dots-divider__dot--gold { background: var(--gold); animation-delay: 0.4s; }

.hero__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  opacity: 0;
  animation: fade-in 0.8s ease-out 1.05s forwards;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(255, 190, 46, 0.2);
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.22);
}

.hero__pillars-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.hero__pillars-dot--pink { background: var(--pink); }
.hero__pillars-dot--orange { background: var(--orange); }

@media (max-width: 480px) {
  .hero__pillars {
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
  }
}

/* Animations */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float-mark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

@keyframes trace-charge {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .side-copy,
  .logo,
  .hero__divider,
  .hero__title,
  .hero__subtitle,
  .dots-divider,
  .hero__pillars,
  .horizon-grid,
  .horizon-line,
  .logo__orb {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}