/* Welcome-only atmosphere. Interior screens stay on the existing theme. */

:root {
  --fx-pink: #ff3fd8;
  --fx-cyan: #29d3ff;
  --fx-purple: #a64bff;
}

body.is-welcome {
  background: #05010a;
  overflow-x: hidden;
  overflow-anchor: none;
}

body.is-welcome .app {
  z-index: 2;
}

.fx-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fx-scene[hidden],
.fx-scanlines[hidden],
.fx-grain[hidden] { display: none; }

.fx-bg-far {
  position: absolute;
  inset: 0;
  background: url("../assets/city-bg.jpg") center / cover no-repeat;
  filter: blur(22px) saturate(1.5) brightness(0.42);
}

.fx-bg-wrap {
  position: absolute;
  inset: 0;
}

.fx-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/city-bg.jpg") center / cover no-repeat;
  filter: saturate(1.4) contrast(1.1) brightness(0.78);
}

.fx-colorize {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #3c0a7a 0%, #c0187e 48%, #ff2fa0 62%, #14206e 100%);
  mix-blend-mode: overlay;
  opacity: 0.55;
}

.fx-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, transparent 38%, rgba(5, 0, 12, 0.38) 100%),
    linear-gradient(180deg, rgba(10, 0, 25, 0.28) 0%, rgba(10, 0, 25, 0.08) 32%, rgba(8, 0, 20, 0.22) 70%, rgba(5, 1, 10, 0.72) 100%);
}

.fx-fog {
  position: absolute;
  left: 0;
  width: 100%;
  mix-blend-mode: screen;
  filter: blur(18px);
}

.fx-fog-back {
  bottom: 8%;
  height: 55%;
  background-image:
    radial-gradient(38% 42% at 20% 60%, rgba(255, 110, 220, 0.16), transparent 70%),
    radial-gradient(30% 36% at 62% 72%, rgba(110, 190, 255, 0.12), transparent 70%),
    radial-gradient(34% 40% at 92% 50%, rgba(190, 110, 255, 0.14), transparent 70%);
}

.fx-fog-front {
  bottom: -12%;
  height: 45%;
  background-image:
    radial-gradient(40% 50% at 30% 55%, rgba(255, 140, 230, 0.14), transparent 70%),
    radial-gradient(35% 45% at 78% 65%, rgba(140, 210, 255, 0.1), transparent 70%);
}

#fxRain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 60% 0%, rgba(230, 200, 255, 0.55), rgba(255, 120, 220, 0.15) 50%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
}

.fx-flash.is-on { animation: fxLightning 1.1s ease-out; }

@keyframes fxLightning {
  0% { opacity: 0; }
  6% { opacity: 0.85; }
  12% { opacity: 0.1; }
  20% { opacity: 0.55; }
  34% { opacity: 0; }
  42% { opacity: 0.25; }
  100% { opacity: 0; }
}

.fx-scanlines {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.22;
}

.fx-scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(255, 120, 230, 0.05), transparent);
  animation: fxRoll 9s linear infinite;
}

@keyframes fxRoll {
  from { transform: translateY(-25vh); }
  to { transform: translateY(105vh); }
}

.fx-grain {
  position: fixed;
  inset: -50%;
  z-index: 6;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain 1s steps(6) infinite;
}

@keyframes fxGrain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Glass the welcome chrome so the city reads through */
body.is-welcome header.app-header,
body.is-welcome .hero-wrap,
body.is-welcome .header-bar {
  background: transparent;
}

body.is-welcome header.app-header,
body.is-welcome .hero-glitch,
body.is-welcome .glitch-btn {
  overflow-anchor: none;
}

body.is-welcome header.app-header {
  overflow: hidden;
}

body.is-welcome .hero-wrap {
  text-align: center;
}

body.is-welcome header.app-header::after { display: none; }

body.is-welcome .header-bar:not(:has(.nav)) { display: none; }

body.is-welcome .card,
body.is-welcome .philosophy {
  background: rgba(10, 6, 18, 0.52);
  border-color: rgba(255, 63, 216, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 63, 216, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.is-welcome .welcome-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 63, 216, 0.16) 0%, transparent 55%),
    rgba(10, 6, 18, 0.48);
}

body.is-welcome .welcome-lead {
  text-shadow: 0 0 12px rgba(255, 63, 216, 0.35);
}

/* Title image glitch */
.hero-glitch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255, 63, 216, 0.32), rgba(41, 211, 255, 0.12) 42%, transparent 68%);
  filter: blur(10px);
  pointer-events: none;
  animation: fxMoon 7s ease-in-out infinite;
}

@keyframes fxMoon {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

body.is-welcome .hero-img {
  position: relative;
  max-width: 280px;
  max-height: 168px;
  mix-blend-mode: normal;
  filter: none;
}

.hero-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("../assets/hero-lockup.png") center / 100% 100% no-repeat;
  mask: url("../assets/hero-lockup.png") center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: fxShine 7s ease-in-out infinite 2s;
}

@keyframes fxShine {
  0%, 72% { background-position: 100% 0; }
  92%, 100% { background-position: 0 0; }
}

.hero-slice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: url("../assets/hero-lockup.png") center / 100% 100% no-repeat;
}

.hero-slice-a { filter: hue-rotate(-70deg) saturate(2.5); }
.hero-slice-b { filter: hue-rotate(80deg) saturate(2.5); }

.hero-glitch.is-glitch .hero-slice-a { animation: fxGlitchA 0.5s steps(1, end); }
.hero-glitch.is-glitch .hero-slice-b { animation: fxGlitchB 0.5s steps(1, end); }
.hero-glitch.is-glitch .hero-img { animation: fxJitter 0.5s steps(1, end); }

@keyframes fxGlitchA {
  0% { opacity: 0.9; clip-path: inset(8% 0 78% 0); transform: translate(-7px, 0); }
  20% { clip-path: inset(56% 0 30% 0); transform: translate(5px, 0); }
  40% { clip-path: inset(30% 0 55% 0); transform: translate(-4px, 1px); }
  60% { clip-path: inset(78% 0 8% 0); transform: translate(8px, 0); }
  80% { clip-path: inset(44% 0 44% 0); transform: translate(-3px, 0); }
  100% { opacity: 0; }
}

@keyframes fxGlitchB {
  0% { opacity: 0.9; clip-path: inset(62% 0 22% 0); transform: translate(6px, 0); }
  20% { clip-path: inset(18% 0 70% 0); transform: translate(-6px, 0); }
  40% { clip-path: inset(70% 0 12% 0); transform: translate(4px, -1px); }
  60% { clip-path: inset(36% 0 50% 0); transform: translate(-8px, 0); }
  80% { clip-path: inset(5% 0 85% 0); transform: translate(3px, 0); }
  100% { opacity: 0; }
}

@keyframes fxJitter {
  0% { transform: translate(2px, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: none; }
}

.neon-break {
  position: relative;
  width: min(420px, 86vw);
  height: 56px;
  margin: 0.1rem auto 0.35rem;
  background: url("../assets/neon-break.png") center / contain no-repeat;
  mix-blend-mode: normal;
  animation: fxBreakPulse 5s ease-in-out infinite;
}

.neon-break span {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/neon-break.png") center / contain no-repeat;
  mask: url("../assets/neon-break.png") center / contain no-repeat;
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
  animation: fxStreak 4.5s ease-in-out infinite;
}

@keyframes fxBreakPulse {
  0%, 100% { filter: brightness(0.9) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 63, 216, 0.6)); }
}

@keyframes fxStreak {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}

/* Button glitch — welcome only */
body.is-welcome .btn.glitch-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 63, 216, 0.45);
  box-shadow: 0 0 16px rgba(255, 63, 216, 0.22), 0 0 22px rgba(41, 211, 255, 0.12);
}

body.is-welcome .welcome-btn.glitch-btn {
  background: rgba(28, 18, 40, 0.72);
  color: #fff;
  border-color: rgba(41, 211, 255, 0.45);
}

body.is-welcome .welcome-btn.glitch-btn:hover {
  background: rgba(40, 24, 58, 0.85);
  box-shadow: 0 0 22px rgba(255, 63, 216, 0.4), 0 0 28px rgba(41, 211, 255, 0.22);
}

body.is-welcome .google-signin-btn.glitch-btn {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18), 0 0 16px rgba(255, 63, 216, 0.2);
}

body.is-welcome .btn.glitch-btn::before,
body.is-welcome .btn.glitch-btn::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

body.is-welcome .btn.glitch-btn.is-glitch {
  animation: fxJitter 0.45s steps(1, end);
}

body.is-welcome .btn.glitch-btn.is-glitch::before {
  opacity: 0.85;
  color: var(--fx-cyan);
  animation: fxGlitchA 0.45s steps(1, end);
}

body.is-welcome .btn.glitch-btn.is-glitch::after {
  opacity: 0.85;
  color: var(--fx-pink);
  animation: fxGlitchB 0.45s steps(1, end);
}

body.is-welcome .btn.glitch-btn.is-sweep::after {
  content: "";
  opacity: 1;
  color: transparent;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  animation: fxBtnSweep 0.7s ease-out;
}

@keyframes fxBtnSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

body.is-welcome .glitch-btn-plain.is-glitch,
body.is-welcome .glitch-btn-plain:hover {
  animation: fxJitter 0.45s steps(1, end);
  text-shadow: -2px 0 var(--fx-cyan), 2px 0 var(--fx-pink);
}

@media (hover: hover) and (pointer: fine) {
  body.is-welcome .btn.glitch-btn:hover {
    animation: fxJitter 0.5s steps(1, end);
  }

  body.is-welcome .btn.glitch-btn:hover::before {
    opacity: 0.9;
    color: var(--fx-cyan);
    animation: fxGlitchA 0.5s steps(1, end);
  }

  body.is-welcome .btn.glitch-btn:hover::after {
    opacity: 0.9;
    color: var(--fx-pink);
    animation: fxGlitchB 0.5s steps(1, end);
  }
}

body.is-welcome .account-signin-note {
  max-width: 22rem;
  margin: 0 auto 0.75rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #f4efe6;
}

body.is-welcome .account-signin-note.is-error {
  color: #ffb0d8;
}

@media (prefers-reduced-motion: reduce) {
  .fx-scanlines::after,
  .fx-grain,
  .hero-glow,
  .hero-shine,
  .neon-break,
  .neon-break span { animation: none; }
}