/*-----------------------------------------------------------------------------------
  Template: Freelancer - CV and Personal Portfolio
  Tweaks by Carmella + ChatGPT cleanup
-----------------------------------------------------------------------------------*/

/*===========================
  01. COMMON / RESET
===========================*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800|Open+Sans:400,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

@font-face {
  font-family: 'Garet';
  src: url('../assets/fonts/Garet-Book.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; vertical-align: middle; }
a, i, span { display: inline-block; }
a { color: #00A78E; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
input:focus, textarea:focus, button:focus { outline: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

html, body { height: 100%; }
body {
  font-family: "Open Sans", sans-serif;
  color: #646F87;
  background: #000; /* default page bg meshes with hero */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #293651;
  margin: 0;
}
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

/* Paragraphs */
p {
  font-size: 16px;
  line-height: 24px;
  color: #646F87;
  font-family: 'Garet', sans-serif !important;
}

/* Utilities */
.bg_cover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%; height: 100%;
}

/* Buttons */
.main-btn {
  display: inline-block;
  font-weight: 600;
  padding: 0 40px;
  font-size: 16px;
  line-height: 55px; height: 55px;
  border-radius: 5px;
  color: #fff;
  background-color: #00A78E;
  cursor: pointer;
  transition: all .4s ease-out;
}
.main-btn:hover { background-color: rgba(0,167,142,.7); }
.main-btn.main-btn-2 {
  background: transparent; color: #646F87; border: 2px solid #646F87; line-height: 51px;
}
@media (max-width: 767px) {
  .main-btn { padding: 0 30px; height: 45px; line-height: 45px; }
  .main-btn.main-btn-2 { line-height: 41px; }
}

/*===========================
  02. SECTION TITLE (GLOBAL)
===========================*/
.section_title .sub_title {
  font-size: 20px; font-weight: 600; color: #21ef80;
}
@media (max-width: 767px) { .section_title .sub_title { font-size: 16px; } }
@media (min-width: 576px) and (max-width: 767px) { .section_title .sub_title { font-size: 18px; } }

.section_title .main_title {
  font-family: 'Press Start 2P', cursive;
  font-size: 30px;
  color: #f504b8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
  text-align: center;
  text-shadow:
    2px 2px 0 #21ef80,
    2px 0   0 #21ef80,
    0   2px 0 #21ef80;
}
@media (max-width: 767px) { .section_title .main_title { font-size: 22px; } }
@media (min-width: 576px) and (max-width: 767px) { .section_title .main_title { font-size: 26px; } }

.section_title .line { padding-top: 10px; }
.section_title .line li {
  display: inline-block; background: #00A78E; border-radius: 50px; height: 3px;
}
.section_title .line li:nth-of-type(1) { width: 64px; }
.section_title .line li:nth-of-type(2) { width: 10px; }
.section_title .line li:nth-of-type(3) { width: 7px; }

/*===========================
  03. HEADER / NAVBAR
===========================*/
.header_navbar {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 99;
  transition: all .3s ease-out;
}
.navbar { padding: 25px 0; border-radius: 5px; transition: all .3s ease-out; }
.navbar-brand { padding: 0; }
.navbar-toggler { padding: 0; }
.navbar-toggler .toggler-icon {
  width: 30px; height: 2px; background: #293651; display: block; margin: 5px 0; transition: all .3s;
}
.navbar-toggler.active .toggler-icon:nth-of-type(1){ transform: rotate(45deg); top: 7px; position: relative;}
.navbar-toggler.active .toggler-icon:nth-of-type(2){ opacity: 0; }
.navbar-toggler.active .toggler-icon:nth-of-type(3){ transform: rotate(135deg); top: -7px; position: relative;}

@media (max-width: 991px) {
  .navbar-collapse {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: #fff; z-index: 9; box-shadow: 0 15px 20px rgba(0,0,0,.1); padding: 5px 12px;
  }
}

.navbar-nav .nav-item { margin-left: 45px; position: relative; }
@media (max-width: 1199px) and (min-width: 992px){ .navbar-nav .nav-item{ margin-left: 30px; } }
@media (max-width: 991px){ .navbar-nav .nav-item{ margin: 0; } }

.navbar-nav .nav-item a {
  font-size: 16px; font-weight: 600; color: #fff;
  padding: 10px 0; font-family: 'Inter', sans-serif; transition: all .3s;
}
@media (max-width: 991px){ .navbar-nav .nav-item a{ display: block; padding: 4px 0; color: #293651; } }

.navbar-nav .nav-item a span {
  width: 0; height: 2px; background: #fff; position: absolute; left: 0; bottom: 0;
  border-radius: 50px; opacity: 0; visibility: hidden; transition: all .3s;
}
.navbar-nav .nav-item a span::before, .navbar-nav .nav-item a span::after {
  content: ''; position: absolute; height: 2px; background: #fff; width: 0;
}
.navbar-nav .nav-item a span::before{ left: 110%; }
.navbar-nav .nav-item a span::after{ left: 140%; }

.navbar-nav .nav-item.active > a span,
.navbar-nav .nav-item:hover  > a span { opacity: 1; visibility: visible; width: 60%; }
.navbar-nav .nav-item.active > a span::before,
.navbar-nav .nav-item:hover  > a span::before { width: 20%; }
.navbar-nav .nav-item.active > a span::after,
.navbar-nav .nav-item:hover  > a span::after { width: 15%; }

.navbar-nav .nav-item .sub-menu {
  width: 200px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1);
  position: absolute; top: 110%; left: 0; opacity: 0; visibility: hidden; transition: all .3s;
}
.navbar-nav .nav-item:hover .sub-menu { top: 100%; opacity: 1; visibility: visible; }
@media (max-width: 991px){
  .navbar-nav .nav-item .sub-menu { position: relative; width: 100%; top: 0; display: none; opacity: 1; visibility: visible; }
}
.navbar-nav .nav-item .sub-menu li a { display: block; padding: 8px 20px; color: #293651; }
.navbar-nav .nav-item .sub-menu li a:hover { padding-left: 25px; color: #00A78E; }

.navbar-nav .sub-nav-toggler { display: none; }
@media (max-width: 991px){
  .navbar-nav .sub-nav-toggler {
    display: block; position: absolute; right: 0; top: 0; background: none; color: #293651;
    font-size: 18px; border: 0; width: 30px; height: 30px;
  }
  .navbar-nav .sub-nav-toggler span {
    width: 8px; height: 8px; border-left: 1px solid #293651; border-bottom: 1px solid #293651;
    transform: rotate(-45deg); position: relative; top: -5px;
  }
}

.sticky { position: fixed; z-index: 99; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.05); transition: all .3s; }
.sticky .navbar { padding: 10px 0; }
.sticky .navbar-nav .nav-item a { color: #e0e0e0; }
.sticky .navbar-nav .nav-item.active > a,
.sticky .navbar-nav .nav-item:hover > a { color: #21ef80; }

.brand-name{
  font-family: 'Press Start 2P', cursive;
  font-size: 15px; color: #21ef80; letter-spacing: 1px;
}

/*===========================
  04. HERO
===========================*/
.header_area {}
.header_hero {
  background: #000;
  padding-top: 70px;
  position: relative; z-index: 5; overflow: hidden;
  min-height: 90vh; display: flex; align-items: center;
}
.header_social {
  position: absolute; top: 50%; left: 50px; transform: translateY(-50%);
  border: 2px solid #21ef80; border-radius: 12px; padding: 10px;
  background: rgba(33,239,128,.05);
}
.header_social li a {
  font-size: 24px; color: #21ef80; transition: color .3s ease;
}
.header_social li a:hover {
  color: #21ef80;
  text-shadow: 0 0 6px #00ffc3, 1px 1px 2px #003322, 0 0 10px #21ef80;
}
.tagline { color: #e0e0e0; font-weight: 500; }

.header_hero .container .row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: center;
}
.header_hero_content { flex: 1 1 60%; max-width: 700px; margin: 0 auto; }
.header_hero_content .header_sub_title,
.header_hero_content .header_title {
  font-family: 'Press Start 2P', cursive;
  color: #f504b8; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: 2px 2px 0 #21ef80, 2px 0 0 #21ef80, 0 2px 0 #21ef80;
}
.header_hero_content .header_sub_title { font-size: 22px; margin-bottom: 20px; }
.header_hero_content .header_title { font-size: 28px; margin-bottom: 20px; }
.header_hero_content span {
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 500; color: #fff; display: block;
  margin: 20px auto 0; max-width: 500px;
}
.header_hero_image { flex: 1 1 30%; text-align: right; }
.header_hero_image img { max-width: 260px; width: 100%; }
@media (max-width: 991px){
  .header_hero .container .row { flex-direction: column; }
  .header_hero_image { text-align: center; margin-top: 30px; }
}

/* Glitch label */
.glitch { position: relative; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 18px; letter-spacing: 1px; text-shadow: 2px 2px #21ef80; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; color: #f504b8; z-index: -1;
}
.glitch::before { animation: glitchTop 1s infinite linear alternate-reverse; }
.glitch::after  { animation: glitchBottom 1.5s infinite linear alternate-reverse; color: #21ef80; }

@keyframes glitchTop {
  0% { clip-path: inset(0 0 90% 0); transform: translate(-2px,-2px); }
  20%{ clip-path: inset(0 0 85% 0); transform: translate(2px,0); }
  40%{ clip-path: inset(0 0 75% 0); transform: translate(-1px,2px); }
  60%{ clip-path: inset(0 0 60% 0); transform: translate(1px,-1px); }
  80%{ clip-path: inset(0 0 80% 0); transform: translate(-3px,1px); }
  100%{ clip-path: inset(0 0 90% 0); transform: translate(0,0); }
}
@keyframes glitchBottom {
  0% { clip-path: inset(90% 0 0 0); transform: translate(2px,2px); }
  20%{ clip-path: inset(85% 0 0 0); transform: translate(-2px,1px); }
  40%{ clip-path: inset(75% 0 0 0); transform: translate(1px,-2px); }
  60%{ clip-path: inset(60% 0 0 0); transform: translate(-1px,2px); }
  80%{ clip-path: inset(80% 0 0 0); transform: translate(3px,-1px); }
  100%{ clip-path: inset(90% 0 0 0); transform: translate(0,0); }
}

/* Loading Screen (custom) */
#loading-screen {
  position: fixed; inset: 0; background: #000; color: #21ef80; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', cursive;
}
.loading-text { font-size: 16px; margin-bottom: 20px; animation: flicker .2s infinite alternate; letter-spacing: 2px; }
.loading-bar { width: 60%; height: 10px; background: #333; overflow: hidden; border: 2px solid #21ef80; margin-bottom: 20px; }
.loading-fill { height: 100%; background: #21ef80; animation: loadBar 2.5s linear forwards; }
.start-text {
  font-size: 12px; color: #21ef80; animation: blink 1s infinite alternate;
  display: none; margin-top: 15px; letter-spacing: 1px; cursor: pointer;
  border: 2px solid #21ef80; padding: 10px 18px; transition: all .3s ease; text-align: center;
}
.start-text:hover { background: #21ef80; color: #000; box-shadow: 0 0 10px #21ef80; }

@keyframes loadBar { from { width: 0%; } to { width: 100%; } }
@keyframes blink   { 0% { opacity: 1; } 50% { opacity: .1; } 100% { opacity: 1; } }
@keyframes flicker { 0% { opacity: 1; } 100% { opacity: .4; } }

/* Hide site content until start is clicked */
body.preload main, body.preload .header_area, body.preload section, body.preload footer { display: none; }

/* Character Selection (right side of hero) */
.select-player-section { background: #000; padding: 10px 40px 40px; text-align: center; margin-top: 40px; }
.select-title {
  font-family: 'Press Start 2P', cursive; font-size: 20px; color: #21ef80;
  text-shadow: 1px 1px 0 #f504b8, 2px 2px 3px #000, 0 0 8px #21ef80;
  margin-bottom: 30px;
}
.character-container { display: flex; align-items: center; justify-content: center; gap: 20px; }
.arrow-btn {
  background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .2s ease;
}
.arrow-btn:hover { transform: scale(1.15); }
.character-card {
  border: 4px solid #f504b8; padding: 20px; background: #111; border-radius: 12px; transition: all .3s ease; width: 240px;
}
.character-card:hover { transform: scale(1.05); cursor: pointer; }
.character-card img { width: 100%; height: auto; }
.character-box {
  width: 200px; height: 220px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 0 auto;
}
#character-label {
  font-family: 'Press Start 2P', cursive !important;
  color: #21ef80;
  text-shadow: 0 0 3px #00ffc3, 1px 1px 0 #003322;
  margin-top: 12px; font-size: 12px; text-transform: uppercase;
}

/*===========================
  05. ABOUT
===========================*/
.about_area {
  background: #0a062a url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  color: #e0e0e0;
}
.about_content p { font-family: 'Inter', sans-serif; color: #e0e0e0; font-size: 15px; margin-top: 10px; }
.about_image { display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 30px; padding-left: 20px; }
.about_image img { max-width: 100%; height: auto; max-height: 350px; display: block; transform: translate(-20px, 20px); }

/*===========================
  06. PROJECTS
===========================*/
.services_area { background: #000; }
.single_service {
  background: #2d004d;
  border: 2px solid #aa00ff;
  border-radius: 12px;
  box-shadow: 0 0 5px #aa00ff, 0 0 15px #aa00ff, inset 0 0 10px #5500aa;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 500px; display: flex; flex-direction: column; justify-content: space-between;
}
.single_service:hover { transform: scale(1.03); box-shadow: 0 0 8px #f504b8, 0 0 20px #f504b8, inset 0 0 12px #f504b8; }
.single_service .service_title a {
  font-family: 'Press Start 2P', cursive; padding: 10px; font-size: 14px; color: #21ef80;
  text-shadow: 0 0 3px #00ffc3, 1px 1px 0 #003322;
}
.single_service .service_content p {
  color: #e0e0e0; font-size: 14px; margin-top: 15px; line-height: 1.4; padding: 10px;
}
.service_content { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.project-link { text-decoration: none; color: inherit; display: block; height: 100%; width: 100%; }
.project-link:hover { color: inherit; }
.project-link img { pointer-events: none; }

/*===========================
  07. SKILLS
===========================*/
.skills-section {
  background: #0a062a url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  padding: 64px 20px 100px;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; max-width: 1080px; margin: 0 auto;
}
@media (max-width: 900px){ .skills-grid { grid-template-columns: 1fr; } }

.skill-card {
  background: rgba(5,5,12,.85);
  border: 2px solid #f504b8;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 0 18px rgba(245,4,184,.55);
}
.skill-card__title {
  font-family: 'Press Start 2P', cursive; padding: 10px; font-size: 18px; color: #21ef80;
  text-shadow: 0 0 3px #00ffc3, 1px 1px 0 #003322;
}
.skill-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid #f504b8; background: rgba(0,0,0,.55); color: #21ef80;
  font-family: 'Inter', sans-serif; font-size: clamp(12px, 1.8vw, 14px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.skill-pill i { font-size: 18px; }
.skill-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 10px #f504b8, inset 0 0 8px rgba(245,4,184,.4);
  background: #f504b8; color: #0b0f14;
}
.skill-pill:focus-visible { outline: 2px dashed #f504b8; outline-offset: 3px; }

/*===========================
  08. FOOTER
===========================*/
.footer_area {
  background: #0a062a;
  padding-top: 80px;
  padding-bottom: 0;
}
.footer_content .footer_social {
  display: flex; justify-content: center; gap: 25px; margin-top: 25px; padding-left: 0;
}
.footer_content .footer_social li { list-style: none; }
.footer_content .footer_social li a {
  width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%;
  font-size: 20px; color: #21ef80; background: transparent; border: 1px solid #21ef80;
  transition: all .3s ease; display: inline-block;
}
.footer_content .footer_social li a:hover { background: #21ef80; color: #0a062a; box-shadow: 0 0 10px #21ef80; }
.footer_content .connect-label {
  font-family: 'Press Start 2P', cursive; font-size: 18px; color: #f504b8; letter-spacing: 1px; text-transform: uppercase;
  margin-top: 20px; text-align: center;
  text-shadow: 2px 2px 0 #21ef80, 2px 0 0 #21ef80, 0 2px 0 #21ef80;
}
.footer_content .connect-text {
  color: #e0e0e0; font-family: 'Inter', sans-serif; font-size: 14px; max-width: 600px; margin: 15px auto 0; text-align: center;
}
.footer_content .credit { color: #888; font-size: 12px; margin-top: 30px; text-align: center; }

.footer_ground { width: 100%; overflow: hidden; margin-top: 40px; }
.footer_ground img { width: 100%; display: block; image-rendering: pixelated; }