/* perso.news — evolved-minimal, layered-depth, dark-neon */

:root {
  --news-dark: #0A0A18;
  --depth-gray: #282838;
  --neon-green: #30FF80;
  --text-white: #F0F0F8;
  --neon-magenta: #FF3080;
  --neon-blue: #3080FF;
  --neon-amber: #FFB030;

  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --cursor-x: 50%;
  --cursor-y: 50%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--news-dark);
  color: var(--text-white);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.9vw, 16px);
  line-height: 1.75;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  perspective: 1400px;
  perspective-origin: var(--cursor-x) var(--cursor-y);
}

/* Background depth layers */
.depth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.depth-plane {
  position: absolute;
  inset: -10%;
  border: 1px solid rgba(48, 128, 255, 0.06);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 80px);
}
.depth-plane-back  { transform: translateZ(-200px) scale(1.15); opacity: 0.35; }
.depth-plane-mid   { transform: translateZ(-100px) scale(1.08); opacity: 0.55; border-color: rgba(255,48,128,0.07); }
.depth-plane-front { transform: translateZ(-30px)  scale(1.02); opacity: 0.75; border-color: rgba(255,176,48,0.08); }

.accent-strip {
  position: absolute;
  height: 2px;
  width: 100%;
  opacity: 0;
  animation: stripFlash 1200ms 200ms cubic-bezier(.2,.7,.2,1) forwards;
}
.strip-blue    { top: 18vh;  background: var(--neon-blue);    box-shadow: 0 0 20px var(--neon-blue); animation-delay: 200ms; }
.strip-magenta { top: 56vh;  background: var(--neon-magenta); box-shadow: 0 0 20px var(--neon-magenta); animation-delay: 350ms; }
.strip-amber   { top: 82vh;  background: var(--neon-amber);   box-shadow: 0 0 20px var(--neon-amber); animation-delay: 500ms; }

@keyframes stripFlash {
  0%   { opacity: 0; transform: scaleX(0.2); }
  60%  { opacity: 1; transform: scaleX(1.05); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* News flash hero */
.news-flash {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 9vh 7vw 12vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt-y) * 0.4)) rotateY(calc(var(--tilt-x) * -0.4));
  transition: transform 220ms ease-out;
}

.flash-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-green);
  opacity: 0;
  animation: fadeUp 600ms 600ms forwards;
}

.meta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 12px var(--neon-green);
  animation: pulse 1.2s infinite;
}

.domain-title {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-white);
  white-space: pre;
}

.domain-title::after {
  content: "_";
  color: var(--neon-green);
  margin-left: 4px;
  animation: caret 1s steps(2) infinite;
  text-shadow: 0 0 16px var(--neon-green);
}

.tagline {
  max-width: 64ch;
  color: rgba(240, 240, 248, 0.78);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.7;
  opacity: 0;
  animation: fadeUp 700ms 1100ms forwards;
}

.flash-coords {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 240, 248, 0.52);
  opacity: 0;
  animation: fadeUp 700ms 1300ms forwards;
}
.flash-coords span { padding: 6px 10px; border: 1px solid rgba(240,240,248,0.12); }

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
@keyframes caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Layered news sections */
.layers {
  position: relative;
  z-index: 1;
  padding: 0 7vw 14vh;
  display: flex;
  flex-direction: column;
  gap: 12vh;
  transform-style: preserve-3d;
}

.layer {
  position: relative;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateZ(-40px) translateY(40px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.layer.is-visible { opacity: 1; transform: translateZ(0) translateY(0); }

.layer-foreground { --layer-color: var(--neon-blue); }
.layer-midground  { --layer-color: var(--neon-magenta); opacity: 0.96; }
.layer-background { --layer-color: var(--neon-amber); opacity: 0.9; }

.layer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(240, 240, 248, 0.1);
}

.priority-label {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--layer-color);
  color: var(--layer-color);
  text-shadow: 0 0 8px var(--layer-color);
}

.layer-meta {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 240, 248, 0.45);
}

/* Cards */
.cards {
  display: grid;
  gap: 28px;
  transform-style: preserve-3d;
}
.cards-foreground { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.cards-midground  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards-background { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.news-card {
  position: relative;
  padding: 28px 26px 22px;
  background: linear-gradient(180deg, rgba(40,40,56,0.55) 0%, rgba(10,10,24,0.85) 100%);
  border: 1px solid rgba(240, 240, 248, 0.08);
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(calc(var(--card-tilt-y, 0deg) * 1))
    rotateY(calc(var(--card-tilt-x, 0deg) * 1))
    translateZ(0);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease, box-shadow 220ms ease, border-color 220ms ease;
  overflow: hidden;
}

.news-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--card-color, var(--text-white));
  box-shadow: 0 0 18px var(--card-color, transparent);
}

.card-blue    { --card-color: var(--neon-blue); }
.card-magenta { --card-color: var(--neon-magenta); }
.card-amber   { --card-color: var(--neon-amber); }

.news-card:hover {
  border-color: var(--card-color);
  box-shadow:
    0 0 0 1px var(--card-color),
    0 18px 48px rgba(0,0,0,0.55),
    0 0 60px -10px var(--card-color);
}

.layer:hover .news-card:not(:hover) { opacity: 0.7; }

.card-mark {
  position: absolute;
  top: 18px; right: 18px;
  width: 12px; height: 12px;
  border: 1px solid var(--card-color);
  background: rgba(255,255,255,0);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--card-color);
}

.card-tag {
  display: inline-block;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-color);
  margin-bottom: 14px;
}

.card-title {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--text-white);
  transition: text-shadow 220ms ease;
}
.news-card:hover .card-title { text-shadow: 0 0 14px var(--card-color); }

.card-body {
  color: rgba(240, 240, 248, 0.74);
  font-size: 14px;
  line-height: 1.75;
}

.card-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 240, 248, 0.08);
  display: flex;
  justify-content: space-between;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,240,248,0.5);
}
.foot-spark { color: var(--card-color); letter-spacing: 0.04em; }

/* Reader panel */
.reader-panel {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 5;
  padding: 14px 16px;
  background: rgba(10, 10, 24, 0.78);
  border: 1px solid rgba(48, 128, 255, 0.25);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  min-width: 220px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(48, 128, 255, 0.12);
  opacity: 0;
  animation: fadeUp 700ms 1500ms forwards;
}
.panel-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: rgba(240,240,248,0.85);
}
.panel-row + .panel-row { border-top: 1px dashed rgba(240,240,248,0.08); }
.panel-key { color: rgba(240,240,248,0.5); text-transform: uppercase; }
.panel-val { color: var(--neon-green); }

/* Ticker */
.ticker-shell {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 10px 16px;
  background: linear-gradient(180deg, rgba(10,10,24,0.7), rgba(10,10,24,0.95));
  border-top: 1px solid rgba(48, 255, 128, 0.4);
  box-shadow: 0 -10px 30px rgba(48, 255, 128, 0.08);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
}
.ticker-prefix {
  flex: 0 0 auto;
  padding-right: 14px;
  border-right: 1px solid rgba(48, 255, 128, 0.4);
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  width: 100%;
  animation: tickerScroll 60s linear infinite;
}
.ticker-shell:hover .ticker-track { animation-play-state: paused; }
.ticker-content {
  display: inline-flex;
  gap: 50px;
  padding-right: 50px;
  flex: 0 0 auto;
}
.ticker-content span { color: var(--neon-green); }
.ticker-content span::before {
  content: "▸ ";
  color: rgba(48, 255, 128, 0.55);
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 720px) {
  .reader-panel { display: none; }
  .news-flash { padding: 12vh 6vw 14vh; }
  .layers { padding: 0 5vw 18vh; gap: 8vh; }
  .news-card { padding: 22px 20px 18px; }
}