:root {
  font-size: 62.5%;
  scroll-behavior: auto;
  --motion-fast: 0.35s;
  --motion-base: 0.55s;
  --motion-medium: 0.85s;
  --motion-slow: 1.35s;
  --motion-easing: ease-in-out;
  --bg: #131a2a;
  --surface: #202a3e;
  --surface-strong: #1a2234;
  --text: #f9f9f9;
  --muted: #8f97aa;
  --accent: #4f7cff;
  --accent-strong: #78a4ff;
}

@media (max-width: 1200px) {
  :root {
    font-size: 61%;
  }
}

@media (max-width: 992px) {
  :root {
    font-size: 59%;
  }
}

@media (max-width: 860px) {
  :root {
    font-size: 57%;
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 55%;
  }
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-size: 1.6rem;
  font-family: "DM Sans", sans-serif;
  line-height: 1;
}

body.light-mode {
  --bg: #f8fbff;
  --surface: #ffffff;
  --surface-strong: #edf3ff;
  --text: #151b27;
  --muted: #626b7f;
}

body.modal-open {
  overflow: hidden;
}

button {
  background: none;
  color: inherit;
  border: 0;
  cursor: pointer;
}

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

.hidden {
  display: none !important;
}

.container {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 0;
}

header::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.2rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 92.32%);
}

.menuOpen {
  position: fixed;
  top: 8.8rem;
  left: 0;
  bottom: 0;
  width: 32rem;
  z-index: 120;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  border-right: 0.1rem solid rgba(255, 255, 255, 0.06);
  padding: 4rem 3rem;
}

.menuOpen h2 {
  margin: 0;
  color: var(--accent);
  font-family: "Poppins", sans-serif;
  font-size: 2.8rem;
  text-align: left;
}

.menuOpen nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  padding-top: 4.2rem;
}

.menuOpen nav a {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem;
  color: var(--text);
  transform-origin: left center;
  transition:
    color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.menuOpen nav a:hover,
.menuOpen nav a:focus-visible {
  color: var(--accent);
  transform: scale(1.12);
  text-shadow: 0 0 1.2rem rgba(79, 124, 255, 0.18);
}

.menu {
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem;
  color: var(--accent);
}

.menu span {
  width: 2rem;
  height: 0.2rem;
  background: currentColor;
  transition: transform var(--motion-base) var(--motion-easing);
}

.menu.is-open span:first-child {
  transform: translateY(0.4rem) rotate(45deg);
}

.menu.is-open span:last-child {
  transform: translateY(-0.4rem) rotate(-45deg);
}

header h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
}

.toggle {
  display: flex;
}

.toggle input {
  position: absolute;
  opacity: 0;
}

.toggle .label {
  display: flex;
  width: 6rem;
  padding: 0.3rem;
  border-radius: 2rem;
  background: var(--accent);
  cursor: pointer;
  transition: background-color var(--motion-medium) var(--motion-easing);
}

.toggle .label .box {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg);
  transition: transform var(--motion-medium) var(--motion-easing);
}

.toggle input:checked + .label .box {
  transform: translateX(3.4rem);
}

section#sobre {
  padding-bottom: 11.25rem;
}

.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  padding: 10rem 2.5rem;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.title h1 {
  font-family: "Poppins", sans-serif;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 5.4rem;
}

.title span {
  font-family: "Poppins", sans-serif;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 5.4rem;
  color: var(--accent);
}

.title p {
  font-family: "DM Sans", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.actions {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.7rem;
  border-radius: 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #f9f9f9;
  transition:
    transform var(--motion-base) var(--motion-easing),
    background var(--motion-base) var(--motion-easing);
}

.actions a:first-child {
  background-image: linear-gradient(
    90deg,
    rgba(79, 124, 255, 0.85) 0.2%,
    rgba(63, 98, 211, 0.75) 100%
  );
}

.actions a:last-child {
  background-image: none;
  border: 0.1rem solid var(--accent);
  color: var(--accent);
}

.actions a:hover {
  transform: scale(0.985);
}

.profile-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34rem;
  height: 34rem;
  padding: 1rem;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 92.32%);
  transition: transform var(--motion-fast) var(--motion-easing);
}

.profile-ring:hover {
  transform: scale(1.02);
}

.profile-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface);
}

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.about h2,
.skills h2,
.contacts h2,
#projects .container > h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  text-align: center;
}

.about p {
  width: 55%;
  color: var(--muted);
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.8;
}

section#skills {
  margin: 2.5rem 0 10rem;
}

.skills .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skills h2 {
  margin-bottom: 10rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

.box-skill {
  position: relative;
  width: 10.8rem;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
  border-top-left-radius: 2.5rem;
  background: var(--surface);
  transition: transform var(--motion-fast) var(--motion-easing);
}

.box-skill::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.1rem;
  left: 0;
  height: 0.3rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 92.32%);
}

.box-skill:hover {
  transform: scale(1.04);
}

.box-skill p {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--accent);
  text-align: center;
  padding-inline: 0.8rem;
}

.tech-icon {
  font-size: 4rem;
  color: var(--accent);
  line-height: 1;
}

section#projects .container {
  display: flex;
  flex-direction: column;
  padding-bottom: 10rem;
}

#projects .container > h2 {
  text-align: center;
}

.allprojects h3 {
  position: relative;
  display: inline-block;
  margin-block: 10rem 5rem;
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
}

.allprojects h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.2rem;
  width: 75%;
  height: 0.3rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 92.32%);
}

.cards-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.75rem;
  align-items: center;
}

.project-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.6rem 0.6rem 1.8rem 1.8rem;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover {
  z-index: 2;
  transform: scale(1.06);
  box-shadow: 0 2rem 4rem rgba(7, 12, 22, 0.22);
}

.project-card:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 0.2rem rgba(19, 26, 42, 0.95),
    0 0 0 0.45rem rgba(79, 124, 255, 0.65);
}

.cover {
  position: relative;
  aspect-ratio: 1.52;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.04);
  background-repeat: no-repeat;
  background-size: cover;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  transition:
    opacity var(--motion-slow) var(--motion-easing),
    visibility var(--motion-slow) var(--motion-easing);
}

.cover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.3rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 92.32%);
}

.cover-one {
  background-color: #e8edf7;
  background-image:
    linear-gradient(#10182c, #10182c),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    radial-gradient(circle at 74% 67%, #ffb35b 0 9%, #7691ff 10% 20%, #f074a0 21% 31%, #926fff 32% 42%, transparent 43%),
    linear-gradient(180deg, rgba(19, 26, 42, 0.03), rgba(19, 26, 42, 0.08));
  background-repeat: no-repeat;
  background-size:
    14% 100%,
    16% 15%,
    16% 15%,
    16% 15%,
    40% 44%,
    23% 44%,
    17% 28%,
    100% 100%;
  background-position:
    0 0,
    18% 10%,
    37% 10%,
    56% 10%,
    18% 34%,
    64% 34%,
    68% 47%,
    0 0;
}

.cover-two {
  background-color: #f2f5fb;
  background-image:
    linear-gradient(#f7d54b, #f7d54b),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(135deg, #183f62, #2d769f),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(180deg, rgba(19, 26, 42, 0.04), rgba(19, 26, 42, 0.08));
  background-repeat: no-repeat;
  background-size:
    100% 14%,
    42% 5%,
    100% 29%,
    86% 9%,
    18% 23%,
    18% 23%,
    18% 23%,
    18% 23%,
    100% 100%;
  background-position:
    0 0,
    29% 4%,
    0 14%,
    7% 48%,
    8% 64%,
    30% 64%,
    52% 64%,
    74% 64%,
    0 0;
}

.cover-three {
  background-color: #0d1220;
  background-image:
    linear-gradient(#161d31, #161d31),
    linear-gradient(135deg, #233b71, #1a2a4d),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#edf2fb, #edf2fb),
    linear-gradient(#edf2fb, #edf2fb),
    linear-gradient(90deg, #5f84ff, #4a72ea),
    linear-gradient(#edf2fb, #edf2fb),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
  background-repeat: no-repeat;
  background-size:
    100% 10%,
    32% 78%,
    36% 58%,
    28% 6%,
    28% 6%,
    24% 8%,
    12% 3%,
    100% 100%;
  background-position:
    0 0,
    9% 15%,
    55% 24%,
    59% 39%,
    59% 49%,
    61% 60%,
    67% 72%,
    0 0;
}

.cover-four {
  background-color: #0b0f1a;
  background-image:
    linear-gradient(#181d2a, #181d2a),
    linear-gradient(#111827, #111827),
    linear-gradient(90deg, #6ea1ff 0 28%, transparent 28%),
    linear-gradient(90deg, #8ad5ff 0 22%, transparent 22%),
    linear-gradient(90deg, #72e7a2 0 34%, transparent 34%),
    linear-gradient(90deg, #ffbb63 0 18%, transparent 18%),
    linear-gradient(90deg, #f37ca5 0 30%, transparent 30%),
    linear-gradient(90deg, #dbe6ff 0 15%, transparent 15%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
  background-repeat: no-repeat;
  background-size:
    100% 12%,
    18% 100%,
    48% 0.8rem,
    32% 0.8rem,
    56% 0.8rem,
    24% 0.8rem,
    60% 0.8rem,
    36% 0.8rem,
    100% 100%;
  background-position:
    0 0,
    0 0,
    24% 24%,
    24% 34%,
    24% 44%,
    24% 54%,
    24% 64%,
    24% 74%,
    0 0;
}

.cover-five {
  background-color: #eef3fb;
  background-image:
    linear-gradient(#131a2a, #131a2a),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    repeating-linear-gradient(90deg, rgba(79, 124, 255, 0.14) 0 0.1rem, transparent 0.1rem 6rem),
    repeating-linear-gradient(180deg, rgba(79, 124, 255, 0.1) 0 0.1rem, transparent 0.1rem 2.8rem),
    linear-gradient(180deg, rgba(19, 26, 42, 0.03), rgba(19, 26, 42, 0.08));
  background-repeat: no-repeat;
  background-size:
    100% 9%,
    82% 12%,
    18% 16%,
    18% 16%,
    18% 16%,
    82% 44%,
    82% 44%,
    100% 100%;
  background-position:
    0 0,
    9% 12%,
    9% 29%,
    31% 29%,
    53% 29%,
    9% 49%,
    9% 49%,
    0 0;
}

.cover-calculator {
  background-image: url("img/calculadora-cientifica.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #0f1219;
}

.cover-users {
  background-image: url("img/gerenciador-de-usuarios.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #0f1219;
}

.cover-windows {
  background-image: url("img/calculadora-windows.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #0f1219;
}

.details {
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 1;
  width: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 2rem;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.details p {
  margin-bottom: 1rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: #f9f9f9;
  text-align: center;
}

.project-techs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.project-tech {
  font-size: 1.8rem;
  color: #8fb0ff;
  filter: drop-shadow(0 0 0.35rem rgba(79, 124, 255, 0.2));
}

.description {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.5rem 1.8rem;
  background: rgba(17, 20, 29, 0.94);
  border-top: 0.1rem solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

body.light-mode .description {
  background: rgba(255, 255, 255, 0.96);
  border-top: 0.1rem solid rgba(79, 124, 255, 0.14);
  box-shadow: 0 -1rem 2.4rem rgba(33, 58, 117, 0.08);
}

.project-card:hover .description,
.project-card:focus-within .description {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.project-card:hover .details,
.project-card:hover .cover::before,
.project-card:focus-within .details,
.project-card:focus-within .cover::before {
  opacity: 0;
  visibility: hidden;
}

.project-card:hover .details,
.project-card:focus-within .details {
  transform: translate(-50%, calc(-50% + 1.2rem));
}

.project-card:hover .cover,
.project-card:focus-within .cover {
  transform: scale(1.015);
  filter: saturate(1.03);
}

.description p {
  flex: 1;
  min-width: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #f9f9f9;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.light-mode .description p {
  color: var(--text);
}

.project-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 0.5rem 1.5rem;
  border: 0.1rem solid var(--accent);
  border-radius: 2rem;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #f9f9f9;
  white-space: nowrap;
  transition:
    background var(--motion-base) var(--motion-easing),
    color var(--motion-base) var(--motion-easing),
    transform var(--motion-base) var(--motion-easing);
}

body.light-mode .project-more {
  color: var(--accent);
}

.project-more:hover {
  background: var(--accent);
  color: #f9f9f9;
  transform: translateY(-0.1rem);
}

.project-card:hover .project-more,
.project-card:focus-within .project-more {
  background: rgba(79, 124, 255, 0.16);
  transform: scale(1.03);
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 2.4rem;
}

.project-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, 0.78);
  backdrop-filter: blur(1rem);
}

.project-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(108rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 2.8rem;
  overflow: hidden;
  background: #151826;
  box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.38);
  animation: modal-dialog-in var(--motion-slow) var(--motion-easing);
}

body.light-mode .project-modal__dialog {
  background: #ffffff;
  border-color: rgba(79, 124, 255, 0.12);
}

.project-modal__close {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  z-index: 2;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.12);
  color: var(--accent);
  font-size: 3rem;
  line-height: 1;
  transition:
    transform var(--motion-base) var(--motion-easing),
    background var(--motion-base) var(--motion-easing);
}

.project-modal__close:hover {
  transform: scale(1.05);
  background: rgba(79, 124, 255, 0.2);
}

.project-modal__visual {
  padding: 2.4rem;
  background: linear-gradient(160deg, rgba(13, 18, 32, 0.98), rgba(27, 36, 61, 0.94));
}

body.light-mode .project-modal__visual {
  background: linear-gradient(160deg, rgba(237, 243, 255, 0.94), rgba(221, 232, 255, 0.98));
}

.project-modal__window {
  height: 100%;
  min-height: 36rem;
  border-radius: 2rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
}

body.light-mode .project-modal__window {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(79, 124, 255, 0.12);
}

.project-modal__toolbar {
  display: flex;
  gap: 0.8rem;
  padding: 1.4rem 1.6rem;
  background: rgba(9, 12, 20, 0.4);
}

body.light-mode .project-modal__toolbar {
  background: rgba(79, 124, 255, 0.08);
}

.project-modal__toolbar span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
}

body.light-mode .project-modal__toolbar span {
  background: rgba(79, 124, 255, 0.3);
}

.project-modal__preview-card {
  position: relative;
  min-height: calc(100% - 3.9rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.4rem;
  padding: 3rem;
  color: #f9f9f9;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.94), rgba(29, 46, 91, 0.96));
}

.project-modal__preview-card.cover-calculator {
  background-image: url("img/calculadora-cientifica.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #11151f;
}

.project-modal__preview-card.cover-users {
  background-image: url("img/gerenciador-de-usuarios.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #11151f;
}

.project-modal__preview-card.cover-windows {
  background-image: url("img/calculadora-windows.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #11151f;
}

.project-modal__preview-card.cover-calculator,
.project-modal__preview-card.cover-users,
.project-modal__preview-card.cover-windows {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.8rem;
  gap: 1rem;
}

.project-modal__preview-card.cover-calculator::before,
.project-modal__preview-card.cover-users::before,
.project-modal__preview-card.cover-windows::before {
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.22), rgba(8, 11, 18, 0.04)),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 30%);
}

.project-modal__preview-card.cover-calculator h4,
.project-modal__preview-card.cover-users h4,
.project-modal__preview-card.cover-windows h4,
.project-modal__preview-card.cover-calculator p:last-of-type,
.project-modal__preview-card.cover-users p:last-of-type,
.project-modal__preview-card.cover-windows p:last-of-type,
.project-modal__preview-card.cover-calculator .project-modal__preview-stack,
.project-modal__preview-card.cover-users .project-modal__preview-stack,
.project-modal__preview-card.cover-windows .project-modal__preview-stack {
  display: none;
}

.project-modal__preview-card.cover-calculator .project-modal__preview-kicker,
.project-modal__preview-card.cover-users .project-modal__preview-kicker,
.project-modal__preview-card.cover-windows .project-modal__preview-kicker {
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.58);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.project-modal__preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(6, 8, 14, 0.04), rgba(6, 8, 14, 0.5));
}

.project-modal__preview-card > * {
  position: relative;
  z-index: 1;
}

.project-modal__preview-kicker {
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.project-modal__preview-card h4 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.15;
}

.project-modal__preview-card p:last-of-type {
  max-width: 42rem;
  font-size: 1.45rem;
  line-height: 1.6;
  color: rgba(249, 249, 249, 0.9);
}

.project-modal__preview-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.project-modal__preview-stack span {
  padding: 0.9rem 1.2rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.16);
  font-size: 1.2rem;
  font-weight: 500;
}

.project-modal__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
  padding: 4rem 4rem 3.2rem;
}

.project-modal__eyebrow {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.project-modal__title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.8rem, 3vw, 4rem);
  line-height: 1.15;
  color: var(--accent);
}

.project-modal__stack {
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.9;
}

.project-modal__summary,
.project-modal__text {
  font-size: 1.55rem;
  line-height: 1.75;
  color: var(--muted);
}

.project-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: 1rem;
}

.project-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.6rem;
  padding: 0 2rem;
  border: 0.1rem solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #f9f9f9;
  font-size: 1.35rem;
  font-weight: 500;
  transition:
    transform var(--motion-base) var(--motion-easing),
    background var(--motion-base) var(--motion-easing),
    color var(--motion-base) var(--motion-easing);
}

.project-modal__button:hover {
  transform: translateY(-0.15rem);
  background: var(--accent-strong);
}

.project-modal__button--ghost {
  background: transparent;
  color: var(--text);
}

body.light-mode .project-modal__button--ghost {
  color: var(--accent);
}

.js-hover-motion .menuOpen nav a {
  transition:
    color 0.45s var(--motion-easing),
    text-shadow 0.45s var(--motion-easing);
}

.js-hover-motion .actions a {
  transition:
    background var(--motion-base) var(--motion-easing),
    color var(--motion-base) var(--motion-easing),
    border-color var(--motion-base) var(--motion-easing);
}

.js-hover-motion .project-more {
  transition:
    background var(--motion-base) var(--motion-easing),
    color var(--motion-base) var(--motion-easing),
    border-color var(--motion-base) var(--motion-easing);
}

.js-hover-motion .project-modal__close {
  transition: background var(--motion-base) var(--motion-easing);
}

.js-hover-motion .project-modal__button {
  transition:
    background var(--motion-base) var(--motion-easing),
    color var(--motion-base) var(--motion-easing);
}

.js-hover-motion .menuOpen nav a,
.js-hover-motion .actions a,
.js-hover-motion .profile-ring,
.js-hover-motion .box-skill,
.js-hover-motion .project-card,
.js-hover-motion .project-more,
.js-hover-motion .icon,
.js-hover-motion .project-modal__close,
.js-hover-motion .project-modal__button {
  will-change: transform;
}

.js-hover-motion .menuOpen nav a:hover,
.js-hover-motion .menuOpen nav a:focus-visible,
.js-hover-motion .actions a:hover,
.js-hover-motion .profile-ring:hover,
.js-hover-motion .box-skill:hover,
.js-hover-motion .project-card:hover,
.js-hover-motion .project-more:hover,
.js-hover-motion .project-card:hover .project-more,
.js-hover-motion .project-card:focus-within .project-more,
.js-hover-motion .icon:hover,
.js-hover-motion .project-modal__close:hover,
.js-hover-motion .project-modal__button:hover {
  transform: none;
}

.js-hover-motion .project-card:hover {
  box-shadow: none;
}

.js-hover-motion .project-card:hover .cover,
.js-hover-motion .project-card:focus-within .cover {
  transform: none;
  filter: none;
}

@keyframes modal-dialog-in {
  from {
    opacity: 0;
    transform: translateY(1.8rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes showDown {
  from {
    opacity: 0;
    transform: translateY(-200%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes backgroundScale {
  to {
    background: var(--accent);
    color: #f9f9f9;
    transform: scale(1.05);
  }
}

@keyframes fade-project-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

section#contacts {
  display: flex;
  align-items: center;
  margin: 0 0 4rem;
  min-height: calc(100vh - 10.2rem);
}

.contacts {
  width: 100%;
  margin-top: 0;
  padding: 6rem 0;
}

.contacts .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contacts h2 {
  margin-bottom: 2.8rem;
  font-size: 2.4rem;
}

.icons {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: 4.8rem;
  width: min(100%, 62rem);
  justify-items: center;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11rem;
  min-width: 0;
  transition: transform var(--motion-fast) var(--motion-easing);
}

.icon:hover {
  transform: scale(1.02);
}

.icon a {
  width: fit-content;
}

.icon a:first-child {
  margin-bottom: 0.9rem;
}

.icon a:nth-child(2) {
  margin-bottom: 0.5rem;
}

.icon a:nth-child(2) p {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.icon a:last-child p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}

.box-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--surface);
}

.svg-icon {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--accent);
}

.stroke-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fill-icon {
  fill: currentColor;
}

.js-section {
  opacity: 0;
  transform: translateX(-10rem);
  transition:
    opacity var(--motion-medium) var(--motion-easing),
    transform var(--motion-medium) var(--motion-easing);
}

.js-section.active {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 992px) {
  .cards-projects {
    grid-template-columns: 1fr;
  }

  .project-modal {
    padding: 1.8rem;
  }

  .project-modal__dialog {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 3.6rem);
    overflow-y: auto;
  }

  .project-modal__visual {
    padding: 2rem 2rem 0;
  }

  .project-modal__window {
    min-height: 28rem;
  }

  .project-modal__content {
    padding: 2.6rem 2.4rem 2.4rem;
  }

  .description {
    position: static;
    display: flex;
    width: 100%;
    align-items: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: var(--surface);
    border-top: 0.1rem solid rgba(79, 124, 255, 0.12);
    box-shadow: none;
  }

  .project-card:hover .details,
  .project-card:hover .cover::before {
    opacity: 1;
    visibility: visible;
  }

  .description p {
    white-space: normal;
  }

  .icons {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    width: min(100%, 30rem);
    gap: 2.6rem 4rem;
  }
}

@media (max-width: 860px) {
  .menuOpen {
    inset: 8.8rem 0 0;
    width: auto;
    border-right: 0;
    padding-top: 5rem;
  }

  .menuOpen h2 {
    text-align: center;
  }

  .menuOpen nav {
    align-items: center;
  }

  .menuOpen nav a {
    transform-origin: center center;
  }

  .banner {
    flex-wrap: wrap-reverse;
    justify-content: center;
    padding-top: 5rem;
    text-align: center;
  }

  .intro {
    align-items: center;
  }

  .title h1,
  .title span {
    font-size: clamp(3.2rem, 6vw, 4.2rem);
    line-height: 1.25;
  }

  .title p {
    font-size: 1.8rem;
  }

  .about p {
    width: 100%;
  }

  .cards {
    gap: 2.4rem;
  }
}

@media (max-width: 660px) {
  section#contacts {
    min-height: auto;
  }

  .contacts {
    padding: 4rem 0 2rem;
  }

  .profile-ring {
    width: min(28rem, 78vw);
    height: min(28rem, 78vw);
  }

  .project-card {
    min-width: 100%;
  }

  .project-modal {
    padding: 1.2rem;
  }

  .project-modal__dialog {
    border-radius: 2.2rem;
  }

  .project-modal__close {
    top: 1.2rem;
    right: 1.2rem;
    width: 3.8rem;
    height: 3.8rem;
    font-size: 2.6rem;
  }

  .project-modal__visual {
    padding: 1.6rem 1.6rem 0;
  }

  .project-modal__preview-card {
    min-height: 24rem;
    padding: 2.2rem;
  }

  .project-modal__content {
    padding: 2.2rem 1.8rem 2rem;
  }

  .project-modal__actions {
    flex-direction: column;
  }

  .project-modal__button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .project-card:hover {
    transform: scale(1.02);
  }

  .toggle .label {
    width: 4.8rem;
  }

  .toggle .label .box {
    width: 1.5rem;
    height: 1.5rem;
  }

  .toggle input:checked + .label .box {
    transform: translateX(2.5rem);
  }

  .menuOpen {
    inset: 7.4rem 0 0;
    width: auto;
    border-right: 0;
    padding-top: 4.5rem;
  }

  .menuOpen h2 {
    font-size: 2.4rem;
    padding-inline: 2rem;
    text-align: center;
  }

  .menuOpen nav {
    align-items: center;
    gap: 2.2rem;
    padding-top: 4rem;
  }

  .menuOpen nav a {
    font-size: 2.2rem;
  }

  .actions {
    width: 100%;
    justify-content: center;
  }

  .actions a {
    width: 100%;
    font-size: 1.6rem;
    padding: 1.4rem 2.5rem;
  }

  .project-modal__preview-card h4 {
    font-size: 2.4rem;
  }

  .project-modal__preview-card p:last-of-type,
  .project-modal__summary,
  .project-modal__text {
    font-size: 1.4rem;
  }

  .project-modal__stack {
    font-size: 1.3rem;
  }

  .skills h2,
  .contacts h2 {
    margin-bottom: 5rem;
  }

  .icons {
    grid-template-columns: 1fr;
    width: min(100%, 14rem);
    gap: 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}