@font-face {
    font-family: 'W95FA';
    src: url('W95FA.otf') format('opentype');
}

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    background: #0f0f0f;
    color: white;
    font-family: 'W95FA', monospace;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

header {
    padding: 30px 20px;
}

header h1 {  
    font-size: 3rem;
    font-weight: normal;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card {
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 0.25s ease;
}

.card:hover {
    transform:
        translateY(-6px)
        scale(1.02);
}

.glitch-box {
    position: relative;
    width: 300px;
    overflow: hidden;
    border-radius: 14px;
}

.base-img {
    
    height: auto;
    display: block;
    border-radius: 14px;
    position: relative;
    z-index: 1;
    box-shadow: none;
    filter: none;
    transition:
        filter 0.1s linear;
}

.glitch-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* scanlines */
.glitch-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 4px
        );

    animation:
        scanMove 0.15s linear infinite;
}

/* distortion */
.glitch-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            transparent 0%,
            rgba(255,255,255,0.08) 8%,
            transparent 15%,
            transparent 35%,
            rgba(255,255,255,0.06) 42%,
            transparent 50%,
            transparent 70%,
            rgba(255,255,255,0.08) 78%,
            transparent 100%
        );

    animation:
        distort 0.08s linear infinite;
}

.glitch-block {
    position: absolute;
    left: 0;
    width: 100%;
    height: 22px;
    background:
        rgba(255,255,255,0.08);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

/* bloco 1 */
.glitch-block:nth-child(3) {
    top: 15%;
    animation:
        block1 0.11s linear infinite;
}

/* bloco 2 */
.glitch-block:nth-child(4) {
    top: 42%;
    animation:
        block2 0.09s linear infinite;
}

/* bloco 3 */
.glitch-block:nth-child(5) {
    top: 70%;
    animation:
        block3 0.13s linear infinite;
}

.glitch-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%);
    z-index: 4;
    opacity: 0;
    font-size: 4rem;
    font-weight: bold;
    color: white;
    text-shadow:
        4px 0 red,
        -4px 0 cyan;
    pointer-events: none;
}

.glitch-box:hover .base-img {
    animation:
        brutalGlitch 0.06s linear infinite;

    filter:
        contrast(1.4)
        saturate(1.5)
        brightness(1.05);
}

.glitch-box:hover .glitch-overlay {
    opacity: 1;
}

.glitch-box:hover .glitch-block {
    opacity: 1;
}

.glitch-box:hover .glitch-text {
    opacity: 1;
    animation:
        textGlitch 0.05s linear infinite;
}

@keyframes brutalGlitch {

    0% {
        transform:
            translate(0px, 0px)
            skew(0deg);
    }

    10% {
        transform:
            translate(-10px, 4px)
            skew(-3deg);
    }

    20% {
        transform:
            translate(12px, -5px)
            skew(4deg);
    }

    30% {
        transform:
            translate(-14px, 7px)
            skew(-5deg);
    }

    40% {
        transform:
            translate(10px, -8px)
            skew(3deg);
    }

    50% {
        transform:
            translate(-8px, 4px)
            skew(-4deg);
    }

    60% {
        transform:
            translate(14px, -6px)
            skew(5deg);
    }

    70% {
        transform:
            translate(-12px, 5px)
            skew(-3deg);
    }

    80% {
        transform:
            translate(8px, -4px)
            skew(2deg);
    }

    90% {
        transform:
            translate(-5px, 2px)
            skew(-1deg);
    }

    100% {
        transform:
            translate(0px, 0px)
            skew(0deg);
    }
}

@keyframes scanMove {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(10px);
    }
}

@keyframes distort {

    0% {
        transform: translateX(0px);
    }

    25% {
        transform: translateX(-25px);
    }

    50% {
        transform: translateX(18px);
    }

    75% {
        transform: translateX(-12px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes block1 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-35px);
    }

    100% {
        transform: translateX(20px);
    }
}

@keyframes block2 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(28px);
    }

    100% {
        transform: translateX(-20px);
    }
}

@keyframes block3 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-18px);
    }

    100% {
        transform: translateX(30px);
    }
}

@keyframes textGlitch {

    0% {
        transform:
            translate(-50%, -50%);
    }

    20% {
        transform:
            translate(-53%, -48%);
    }

    40% {
        transform:
            translate(-47%, -52%);
    }

    60% {
        transform:
            translate(-52%, -50%);
    }

    80% {
        transform:
            translate(-48%, -49%);
    }

    100% {
        transform:
            translate(-50%, -50%);
    }
}

.intro-text {
    margin-top: 25px;
    text-align: center;
    line-height: 1.7;
    max-width: 700px;
}

.intro-text p {
    margin-bottom: 15px;
}

.intro-text h1 {
    margin-top: 20px;
}

.ambient-glitch {
    position: relative;
    width: 180px;
    overflow: hidden;
    border-radius: 14px;
}

.ambient-img {
   
    height: auto;
    display: block;
    border-radius: 14px;
    position: relative;
    z-index: 1;
    animation:
        ambientImageGlitch 0.18s linear infinite;

    filter:
        contrast(1.15)
        saturate(1.2);
}

.ambient-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.ambient-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    animation:
        ambientScan 0.12s linear infinite;
}

.ambient-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            transparent 0%,
            rgba(255,255,255,0.04) 10%,
            transparent 18%,
            transparent 35%,
            rgba(255,255,255,0.03) 42%,
            transparent 52%,
            transparent 70%,
            rgba(255,255,255,0.04) 82%,
            transparent 100%
        );

    animation:
        ambientDistort 0.08s linear infinite;
}

.ambient-block {
    position: absolute;
    left: 0;
    width: 100%;
    height: 18px;
    background:
        rgba(255,255,255,0.05);

    z-index: 3;

    pointer-events: none;
}

/* bloco 1 */

.ambient-block:nth-child(3) {

    top: 14%;

    animation:
        ambientBlock1 0.12s linear infinite;
}

/* bloco 2 */

.ambient-block:nth-child(4) {

    top: 40%;

    animation:
        ambientBlock2 0.09s linear infinite;
}

/* bloco 3 */

.ambient-block:nth-child(5) {

    top: 68%;

    animation:
        ambientBlock3 0.14s linear infinite;
}

/* =========================================================
   IMAGE GLITCH
========================================================= */

@keyframes ambientImageGlitch {

    0% {
        transform:
            translate(0px, 0px)
            skew(0deg);
    }

    10% {
        transform:
            translate(-3px, 1px)
            skew(-1deg);
    }

    20% {
        transform:
            translate(4px, -2px)
            skew(1deg);
    }

    30% {
        transform:
            translate(-5px, 2px)
            skew(-2deg);
    }

    40% {
        transform:
            translate(3px, -3px)
            skew(1deg);
    }

    50% {
        transform:
            translate(-4px, 2px)
            skew(-1deg);
    }

    60% {
        transform:
            translate(5px, -2px)
            skew(2deg);
    }

    70% {
        transform:
            translate(-4px, 2px)
            skew(-1deg);
    }

    80% {
        transform:
            translate(2px, -1px)
            skew(1deg);
    }

    90% {
        transform:
            translate(-2px, 1px)
            skew(-1deg);
    }

    100% {
        transform:
            translate(0px, 0px)
            skew(0deg);
    }
}

/* =========================================================
   SCANLINES
========================================================= */

@keyframes ambientScan {

    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(8px);
    }
}

/* =========================================================
   DISTORT
========================================================= */

@keyframes ambientDistort {

    0% {
        transform: translateX(0px);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(8px);
    }

    75% {
        transform: translateX(-6px);
    }

    100% {
        transform: translateX(0px);
    }
}

/* =========================================================
   BLOCKS
========================================================= */

@keyframes ambientBlock1 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-18px);
    }

    100% {
        transform: translateX(10px);
    }
}

@keyframes ambientBlock2 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(14px);
    }

    100% {
        transform: translateX(-12px);
    }
}

@keyframes ambientBlock3 {

    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(16px);
    }
}

/* =========================================================
   CODEX CARDS
========================================================= */

.grid .card {

    display: block;

    background: #181818;

    padding: 18px;

    border-radius: 16px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.grid .card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 0 25px rgba(255,255,255,0.08);
}

/* =========================================================
   CARD IMAGES
========================================================= */

.grid .card img {



    height: auto;

    display: block;

    border-radius: 12px;

    margin:
        15px 0;
}

/* =========================================================
   CARD TEXT
========================================================= */

.grid .card h3 {

    margin-bottom: 12px;

    font-size: 1.3rem;

    line-height: 1.4;
}

.grid .card p {

    margin-bottom: 18px;

    color: #d0d0d0;
}

/* =========================================================
   READER PAGE
========================================================= */

/* =========================================================
   READER DARK MODE
========================================================= */
.reader {

    background: #ffffff;

    color: #111111;

    width: 100%;

    max-width: 900px;

    margin: auto;

    padding: 50px;

    border-radius: 12px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

/* modo escuro */

.reader.dark-reader {

    background: #111111;

    color: #eaeaea;
}

/* links */
.reader.dark-reader a {
    color: #8ec5ff;
}

/* títulos */
.reader.dark-reader h1,
.reader.dark-reader h2,
.reader.dark-reader h3 {
    color: #ffffff;
}
.reader-page {
    background: #111;
    min-height: 100vh;
    padding: 40px 20px;
}

/* =========================================================
   READER
========================================================= */

.reader {
    max-width: 900px;
    margin: auto;
    background: #f5efe6;
    color: #222;
    padding: 60px;
    border-radius: 14px;
    font-size: 20px;
    line-height: 1.9;
    box-shadow:
        0 0 40px rgba(0,0,0,0.35);
}

.reader p {
    margin-bottom: 24px;
}

/* =========================================================
   HERO
========================================================= */

.hero {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

/* =========================================================
   PROFILE
========================================================= */

.profile-box {
    width: 280px;
    text-align: left;
}

.profile-img {
  
    border-radius: 16px;
    margin-bottom: 20px;
}

.profile-box h2 {
    margin-bottom: 15px;
}

.profile-box p {
    color: #bbb;
    line-height: 1.7;
}

/* =========================================================
   HERO TEXT
========================================================= */

.hero-text {
    flex: 1;
    max-width: 700px;
}

.hero-text h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.hero-text h2 {
    color: #bbb;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    position: relative;
    width: 50%;
    max-width: 900px;
    margin: 60px auto;
    padding-left: 40px;
}

/* linha */

.timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    width: 2px;
    height: 100%;
    background:
        rgba(255,255,255,0.15);
}

/* =========================================================
   CARD
========================================================= */

.timeline-card {
    position: relative;
    display: block;
    margin-bottom: 50px;
}

/* conteúdo */
.timeline-content {

    background: #181818;

    border-radius: 16px;

    padding: 22px;

    transition:
        0.25s ease;

    border:
        1px solid rgba(255,255,255,0.05);
}

.timeline-content:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 0 30px rgba(255,255,255,0.08);
}

/* =========================================================
   IMAGENS
========================================================= */

.timeline-content img {
    border-radius: 12px;
    margin:
        18px 0;
}

/* =========================================================
   DATE
========================================================= */

.timeline-date {

    color: #326ac1;

    font-size: 0.9rem;
}

/* =========================================================
   TITLES
========================================================= */

.timeline-content h3 {

    margin:
        12px 0 15px;

    font-size: 1.5rem;
}

/* =========================================================
   TEXT
========================================================= */

.timeline-content p {

    color: #d0d0d0;

    line-height: 1.7;

    margin-bottom: 15px;
}

/* =========================================================
   CATEGORY
========================================================= */

.category {

    color: #3277c1;
}

/* =========================================================
   FOOTER
========================================================= */

footer {

    text-align: center;

    padding: 60px 20px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .hero {
        flex-direction: column;
    }

    .hero-text {
        text-align: center;
    }

    .timeline {
        padding-left: 25px;
    }

    .timeline-dot {
        left: -24px;
    }
}

/* =========================================================
   LAYOUT GERAL CODEX
========================================================= */
.codex-layout {
    width: 100%;

    display: flex;

    justify-content: center;
}
.filters {
    margin-left: 260px;
}

/* =========================================================
   PERFIL FIXO
========================================================= */
.profile-box {
    position: relative;
    top: 140px;
    left: 30px;
    width: 220px;
    padding: 20px;
    background: #161616;
    border-radius: 14px;
    z-index: 10;
}

.profile-box img {
    border-radius: 12px;
}

.profile-box h2 {
    margin-top: 15px;
    font-size: 1.4rem;
    font-weight: normal;
}
/* =========================================================
   ÁREA DIREITA
========================================================= */

.codex-content {
    flex: 1;
    max-width: 900px;
}

/* =========================================================
   FILTERS
========================================================= */

.filters {
    margin-bottom: 40px;
    text-align: center;
}

/* =========================================================
   FILTER BUTTONS
========================================================= */

.filters button {

    background: #1a1a1a;

    color: #d0d0d0;

    border: 1px solid #2b2b2b;

    padding: 10px 16px;

    margin: 4px;

    border-radius: 10px;

    cursor: pointer;

    transition:
        0.2s ease;
}

/* hover */

.filters button:hover {

    background: #252525;

    transform: translateY(-2px);
}

/* =========================================================
   ACTIVE
========================================================= */

.filters button.active {

    background: #68C132;

    color: black;

    border-color: #3277c1;

    box-shadow:
        0 0 10px rgba(104,193,50,0.5);
}

/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 40px;

    padding-left: 40px;
	
	    margin-left: 260px;

    width: calc(100% - 320px);

    max-width: 900px;
}

/* linha vertical */

.timeline::before {
    content: "";

    position: absolute;

    left: 10px;

    top: 0;

    width: 2px;

    height: 100%;

    background: #2f2f2f;
}

/* =========================================================
   CARD
========================================================= */

.timeline-card {
    position: relative;

    display: block;
}

/* bolinha */
.timeline-dot {
    position: absolute;
    left: -38px;
    top: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3277c1;
    box-shadow:
        0 0 10px rgba(104,193,50,0.7);
}

/* conteúdo */

.timeline-content {
    background: #161616;
    border: 1px solid #252525;
    border-radius: 18px;
    padding: 20px;
    transition:
        transform 0.2s ease,
        border 0.2s ease;
}

.timeline-content:hover {
    transform: translateY(-4px);
    border-color: #444;
}

.timeline-content img {
    
    border-radius: 12px;
    margin: 15px 0;
}

.timeline-content h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.timeline-content p {
    line-height: 1.7;
    color: #ddd;
    margin-bottom: 15px;
}

.timeline-date {
    display: inline-block;
    margin-bottom: 10px;
    color: #888;
    font-size: 0.9rem;
}

.category { 
    color: #3277c1;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1100px) {

    .codex-layout {
        flex-direction: column;
        align-items: center;
    }

    .profile-box {
        position: relative;
        top: 0;
        width: 100%;
        max-width: 500px;
    }

    .codex-content {
        width: 100%;
    }
}

/* =========================================================
   LIGHT THEME
========================================================= */

body.light-theme {
    background: #f5efe6;
    color: #222;
}

/* =========================================================
   PROFILE
========================================================= */

body.light-theme .profile-box {
    background: #ffffff;
    color: #222;
    border-color: #d8d8d8;
}

/* =========================================================
   TIMELINE
========================================================= */

body.light-theme .timeline-content {
    background: #ffffff;
    color: #222;
    border-color: #d8d8d8;
}

/* =========================================================
   FILTERS
========================================================= */

body.light-theme .filters button {
    background: #ffffff;
    color: #222;
    border-color: #cccccc;
}

/* botão ativo */
body.light-theme .filters button.active {
    background: #68C132;
    color: #000;
}

/* =========================================================
   FOOTER
========================================================= */

body.light-theme footer {
    background: #ebe5da;
    color: #222;
}
    .btn {
      display: inline-block;
      margin: 10px 0;
      padding: 10px 15px;
      background: #68C132;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
	
	.pulse-text {
  position: relative;
  display: inline-block;

  color: #3277c1;
  text-decoration: none;
}

/* texto original fica normal */
.pulse-text:hover {
  transform: none;
}

/* cópia para a emanação */
.pulse-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: currentColor;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

/* somente a cópia pulsa */
.pulse-text:hover::after {
  animation: text-pulse 1s ease-out;
}

@keyframes text-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
    filter: blur(14px);
  }
}