/*
==============================================================================
PORTFOLIO CORE STYLESHEET
==============================================================================
Designed and Developed by Thiago Spadotto

This stylesheet defines the visual identity, typography, modern typography variables,
fluid grid systems, modern glassmorphic elements, responsive layouts, 3D card tilt glare,
typewriter visual effects, light/dark transition layers, and adaptive viewports.

TABLE OF CONTENTS:
1. FONTS & IMPORTS
2. CSS CUSTOM PROPERTIES (VARIABLES)
3. BASE RESETS & GLOBAL SETUP
4. CUSTOM SCROLLBAR
5. HIGH-PERFORMANCE CUSTOM CURSOR
6. TRANSITIONS & CORE THEME SHIFT LAYERS (VIEW TRANSITIONS API)
7. GLOBAL ANIMATION KEYFRAMES (FLOATS, PULSES, INTEGRATED DRIFTS)
8. PRELOADER & ERROR FALLBACK LAYOUTS
9. APP HEADER & NAVIGATION BAR COMPONENTS
10. LANGUAGE & USER PREFERENCE SWITCH TOGGLES
11. SECTIONS LAYOUT STYLING
    11.1 Landing Page (Hero) & Cosmic Gradient Spheres
    11.2 Premium Abstract Hero Video Overlay
    11.3 About Section & Bento Grid System
    11.4 Profile Picture Ring Parallax (DP Avatar)
    11.5 Skills Section & Interactive Technology Tools
    11.6 Projects Grid Showcase (Cards, Glare & Pills)
    11.7 Back to Top Navigation Component
    11.8 Footer & Eyeball Mouse-Tracking Effect
    11.9 Floating Social Media Bubbles
12. LIGHT MODE UTILITIES & COLOR OVERRIDES
13. RESPONSIVE DEVICE SYSTEM-WIDE MEDIA QUERIES
==============================================================================
*/

/* ==========================================================================
   1. FONTS & IMPORTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

@font-face {
  font-family: 'Altone';
  src: url('src/fonts/Altone-VF.ttf') format('truetype');
  font-weight: 200 800;        /* Supports weights from Extra Light to Extra Bold */
  font-stretch: 75% 100%;     /* Width dynamic stretch bounds */
  font-style: normal;
  font-display: swap;         /* Enhance perceived content loading metrics */
}

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */
:root {
  cursor: default;
  --accent: #5b52dd;
  --color-white: #f5f5f7;       /* Soft white for improved readability */
  --color-black: #000000;
  --color-dark-mode: #0a0a0f;   /* Deep, modern space-navy black */
  --color-light-mode: #fbfbfc;
  --color-ddd-color: #9a9aa2;   /* Muted gray for secondary descriptions */
  --color-gray: #c4c4c4;
  --color-purple: #8000ff;
  --color-light-purple: #cf59e6;
  --color-light-blue: #6bc5f8;
  --color-navbarBorder-dark: #e2e2e207;
  --color-shadowDark: rgba(0, 0, 0, 0.137);
  --static-heading-gradient-blue: #b0f3f1;
  --static-heading-gradient-pink: #ffcfdf;
  --tech-stack-box-first-color: rgba(255, 255, 255, 0.03);
  --tech-stack-box-second-color: rgba(255, 255, 255, 0.01);
  --tech-stack-box-border-color: rgba(255, 255, 255, 0.08);
  --grid-color: rgba(255, 255, 255, 0.015);
  --noise-opacity: 0.02;
}

/* ==========================================================================
   3. BASE RESETS & GLOBAL SETUP
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-dark-mode);
  font-family: 'Altone', sans-serif;
}

main {
  position: relative;
  z-index: 2;
  background-color: var(--color-dark-mode);
}

.main,
body,
html {
  overflow-x: clip;
  max-width: 100vw;
}

.image-div,
.navbar,
.project-box,
footer {
  overflow: hidden;
}

.cta,
.github-redirect,
.navbar-tabs-ul a {
  text-decoration: none;
}

#GmailLogo,
.sign svg path {
  fill: white;
}

::selection {
  background-color: transparent;
}

::-moz-selection {
  background: 0 0;
}

/* ==========================================================================
   4. CUSTOM SCROLLBAR
   ========================================================================== */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--accent) var(--color-dark-mode);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark-mode);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}

/* ==========================================================================
   5. HIGH-PERFORMANCE CUSTOM CURSOR
   ========================================================================== */
.cursor-inner {
  width: 8px;
  height: 8px;
  background-color: var(--color-light-blue);
}

.cursor-outer {
  width: 35px;
  height: 35px;
  border: 2px solid #fff;
}

.cursor-inner,
.cursor-outer {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 10000; /* Placed above navbar and preloader */
  pointer-events: none;
  will-change: transform;
}

.cursor-inner.hover {
  width: 25px;
  height: 25px;
  transition: width 0.2s, height 0.2s;
  filter: invert(1); /* High-performance alternative to mix-blend-mode */
}

.cursor-outer.hover {
  width: 50px;
  height: 50px;
  transition: .2s;
}

/* ==========================================================================
   6. TRANSITIONS & CORE THEME SHIFT LAYERS (VIEW TRANSITIONS API)
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

/* ==========================================================================
   7. GLOBAL ANIMATION KEYFRAMES (FLOATS, PULSES, INTEGRATED DRIFTS)
   ========================================================================== */
@keyframes float-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20%, 15%) scale(1.1); }
}

@keyframes float-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-15%, -10%) scale(1.15); }
}

@keyframes float-3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, 15%) scale(1.05); }
}

@keyframes pulse {
  0% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes breath {
  from { opacity: .3; }
  to { opacity: .5; }
}

@keyframes pop-up {
  from {
    bottom: -50px;
    left: 50px;
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }
  40% {
    opacity: 1;
    height: 10px;
  }
  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }
  100% {
    height: 3px;
    opacity: 0;
  }
}

@keyframes pulse54012 {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

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

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes path {
  0%, 34%, 71%, 100% { transform: scale(1); }
  17% { transform: scale(var(--scale_path_1, 1)); }
  49% { transform: scale(var(--scale_path_2, 1)); }
  83% { transform: scale(var(--scale_path_3, 1)); }
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* ==========================================================================
   8. PRELOADER & ERROR FALLBACK LAYOUTS
   ========================================================================== */
#preloader {
  background-color: #fff;
  position: fixed;
  z-index: 99999;
  justify-content: center;
  overflow-y: hidden;
  background-image: url(src/svg/Pulse-0.4s-200px.svg);
  background-size: 10%;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(1);
  width: 100%;
  height: 100%;
}

noscript {
  display: flex;
  align-items: center;
  position: fixed;
  justify-content: center;
  font-size: 4rem;
  color: #fff;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark-mode);
}

/* ==========================================================================
   9. APP HEADER & NAVIGATION BAR COMPONENTS
   ========================================================================== */
header {
  width: 100%;
  height: 0;
  position: relative;
  z-index: 1000;
}

.navbar {
  background: rgba(10, 10, 16, 0.5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  height: 64px;
  width: 90%;
  max-width: 1200px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) translateZ(0); /* Forces hardware acceleration */
  will-change: transform, backdrop-filter;
}

.fakenavbar {
  height: 0;
  width: 0%;
  background-color: transparent;
}

.navbar-tabs,
.navbar-tabs-ul {
  height: 100%;
  align-items: center;
}

.navbar-tabs {
  display: flex;
  width: 70%;
}

.navbar-tabs-ul {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: flex-end;
  gap: 10px;
  color: var(--color-white);
  padding: 5px;
  border-radius: 40px;
  position: relative;
}

.navbar-tabs-ul li {
  width: fit-content;
  height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 30px;
  position: relative;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
}

.navbar-tabs-ul li:hover {
  background: rgba(255, 255, 255, 0.15);
}

.navbar-tabs-ul li.activeThistab {
  background-color: transparent;
}

.navbar-tabs-ul li.activeThistab a {
  color: var(--color-white);
  font-weight: 600;
}

.navbar-tabs-ul a {
  color: var(--color-white);
  font-weight: 500;
}

.nav-indicator {
  position: absolute !important;
  padding: 0 !important;
  display: block !important;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  z-index: 0 !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.nav-indicator:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Removed old dotted indicators */
.activeThistab:before,
.navbar-tabs-ul li:hover:before {
  display: none;
}

.activeThistab:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

.logo {
  width: 10%;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition-duration: 1s;
}

.logo:hover {
  transform: scale(1.1);
}

.logo-top {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: bottom;
  position: relative;
}

.logo-top img {
  height: 100%;
  z-index: 2;
}

.face {
  content: "";
  position: absolute;
  width: 100%;
  height: 74%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 1;
  padding-left: 1px;
}

.eye {
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
}

.left-eye {
  box-shadow: -1px -2px 2px rgba(0, 0, 0, .589) inset;
}

.right-eye {
  box-shadow: 1px 3px 2px rgba(0, 0, 0, .589) inset;
}

.pupil {
  width: 3.5px;
  height: 3.5px;
  background: #241010;
  border-radius: 50%;
}

.hey {
  color: #fff;
  position: absolute;
  font-size: 2.5rem;
  font-weight: 300;
  background-color: #20222e;
  padding: 5px 10px;
  border-radius: 20px;
  left: 120px;
  bottom: 80px;
  opacity: 0;
}

.popup {
  animation: 3s linear pop-up;
}

/* ==========================================================================
   10. LANGUAGE & USER PREFERENCE SWITCH TOGGLES
   ========================================================================== */
.header-toggles {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-toggle-container {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.17);
  border-radius: 20px;
  width: 80px;
  height: 32px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
}

.lang-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--color-white);
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.lang-en, 
.lang-pt {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.lang-en .flag-svg,
.lang-pt .flag-svg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(100%) opacity(50%);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.lang-en.active .flag-svg,
.lang-pt.active .flag-svg {
  filter: none;
}

.lang-toggle-container.pt-active .lang-slider {
  transform: translateX(100%);
}

.soundtogglebuttoncontainer,
.visualmodetogglebuttoncontainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  transition-duration: .3s;
}

.visualmodeshow,
.soundmodeshow {
  transition-duration: .3s;
}

.soundmodeshow {
  transition-delay: .1s;
  display: inline-block;
}

#switchforsetting,
.hamburger,
.mobiletogglemenu {
  display: none;
}

#switchforsound,
#switchforvisualmode {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#switchforvisualmode:focus-visible + #labelforvisualmode,
#switchforsound:focus-visible + #labelforsound {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

#labelforvisualmode,
#labelforsetting,
#switchforvisualmode:checked+#labelforvisualmode {
  background-repeat: no-repeat;
  background-position: center;
}

#labelforvisualmode {
  position: relative;
  width: 40px;
  height: 40px;
  background-image: url(src/png/sun.png);
  background-size: 60%;
  transition-duration: .5s;
  cursor: pointer;
}

#switchforvisualmode:checked+#labelforvisualmode {
  transform: rotate(360deg);
  transition-duration: .5s;
  background-image: url(src/png/crescent-moon\ \(1\).png);
  background-size: 50%;
}

.soundtogglebuttoncontainer {
  position: relative;
  gap: 10px;
}

#labelforsound {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  background-size: 60%;
  background-image: url(src/svg/Mute_Icon.svg);
  cursor: pointer;
  transition-duration: .5s;
}

#switchforsound:checked+#labelforsound {
  transition-duration: .5s;
  background-image: url(src/svg/Speaker_Icon.svg);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

#volumeSlider {
  width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  border-radius: 5px;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  cursor: pointer;
}

.soundtogglebuttoncontainer:hover #switchforsound:checked ~ #volumeSlider {
  width: 80px;
  opacity: 1;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#volumeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

#labelforsetting {
  height: 40px;
  background-size: 60%;
}

.setting-container,
.settingactivate {
  transform-origin: left;
  transition-duration: .5s;
}

/* ==========================================================================
   11. SECTIONS LAYOUT STYLING
   ========================================================================== */

/* 11.1 Landing Page (Hero) & Cosmic Gradient Spheres */
.landing-page-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 100px; /* Space allowance for the scroll down guide indicator */
}

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.sphere-1 {
  width: 40vw;
  height: 40vw;
  background: linear-gradient(40deg, rgba(255, 0, 128, 0.16), rgba(255, 102, 0, 0.08));
  top: -10%;
  left: -10%;
  animation: float-1 8s ease-in-out infinite alternate;
}

.sphere-2 {
  width: 45vw;
  height: 45vw;
  background: linear-gradient(240deg, rgba(72, 0, 255, 0.16), rgba(0, 183, 255, 0.08));
  bottom: -20%;
  right: -10%;
  animation: float-2 10s ease-in-out infinite alternate;
}

.sphere-3 {
  width: 30vw;
  height: 30vw;
  background: linear-gradient(120deg, rgba(133, 89, 255, 0.16), rgba(98, 216, 249, 0.08));
  top: 60%;
  left: 20%;
  animation: float-3 12s ease-in-out infinite alternate;
}

.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: var(--noise-opacity);
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  z-index: 2;
  pointer-events: none;
}

.glow {
  position: absolute;
  width: 40vw;
  height: 40vh;
  background: radial-gradient(circle, rgba(72, 0, 255, 0.08), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: pulse 5s infinite alternate;
  filter: blur(30px);
}

.text-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
}

#hello-friend {
  font-size: 3.5rem;
  font-weight: 600;
  width: fit-content;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  font-family: 'Altone', sans-serif;
}

#name {
  font-size: clamp(5rem, 8vw, 10rem);
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  letter-spacing: -0.02em;
  width: fit-content;
  line-height: 0.9;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0 0.3em;
  display: flex;
  align-items: flex-start;
  background: -webkit-linear-gradient(135deg, var(--color-light-blue), var(--color-light-purple), var(--color-light-blue), var(--color-light-purple));
  background: linear-gradient(135deg, var(--color-light-blue), var(--color-light-purple), var(--color-light-blue), var(--color-light-purple));
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: gradient 16s ease-in-out infinite;
  animation: gradient 16s ease-in-out infinite;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#name p {
  -webkit-text-fill-color: transparent;
  background: none;
}

.name-word {
  display: flex;
}

#work {
  font-size: 8rem;
  width: fit-content;
  color: var(--color-white);
  display: flex;
  font-weight: 700;
  align-items: flex-start;
  flex-wrap: wrap;
}

#work div {
  display: flex;
  margin: 0 12px 0 0;
}

.letterExpand {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}

.letterExpand:hover {
  transform: scale(1.1);
}

#info-para {
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;
  color: var(--color-ddd-color);
  width: 75%;
  padding-top: 30px;
}

.contact-btn-div {
  width: 100%;
  padding-top: 50px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contact-btn-div a,
.getintouch-heading a {
  text-decoration: none;
}

.button {
  --black-700: var(--accent);
  --border_radius: 9999px;
  --transtion: 0.3s ease-in-out;
  --offset: 2px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform-origin: center;
  padding: 1.5rem 3rem;
  background-color: transparent;
  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  transition: transform var(--transtion);
  flex-shrink: 0;
  white-space: nowrap;
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--black-700);
  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsla(244, 67%, 20%, 0.5),
    0px 4px 15px -2px hsla(244, 67%, 59%, calc(0.45 * (1 - var(--active, 0)))),
    0 0 0 calc(var(--active, 0) * 0.375rem) hsla(244, 67%, 59%, 0.75);
  transition: all var(--transtion);
  z-index: 0;
}

.button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: hsla(260 97% 61% / 0.75);
  background-image: radial-gradient(
      at 51% 89%,
      hsla(266, 45%, 74%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
  background-position: top;
  opacity: var(--active, 0);
  border-radius: var(--border_radius);
  transition: opacity var(--transtion);
  z-index: 2;
}

.button:is(:hover, :focus-visible) {
  --active: 1;
}

.button:active {
  transform: scale(1);
}

.button .dots_border {
  --size_border: calc(100% + 2px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;
  border-radius: var(--border_radius);
  z-index: -10;
}

.button .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  transform: rotate(0deg);
  width: 100%;
  height: 2rem;
  background-color: var(--color-white);
  mask: linear-gradient(transparent 0%, var(--color-white) 120%);
  animation: rotate 2s linear infinite;
}

.button .sparkle {
  position: relative;
  z-index: 10;
  width: 1.75rem;
}

.button .sparkle .path {
  fill: currentColor;
  stroke: currentColor;
  transform-origin: center;
  color: hsl(0, 0%, 100%);
}

.button:is(:hover, :focus) .sparkle .path {
  animation: path 1.5s linear 0.5s infinite;
}

.button .sparkle .path:nth-child(1) { --scale_path_1: 1.2; }
.button .sparkle .path:nth-child(2) { --scale_path_2: 1.2; }
.button .sparkle .path:nth-child(3) { --scale_path_3: 1.2; }

.button .text_button {
  position: relative;
  z-index: 10;
  font-size: 1.8rem;
  color: white;
}

.scroll-down-container {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 10000; /* Above all content overlays */
}

.scrolldown {
  --color: white;
  --sizeX: 30px;
  --sizeY: 50px;
  position: relative;
  width: var(--sizeX);
  height: var(--sizeY);
  border: calc(var(--sizeX) / 10) solid var(--color);
  border-radius: 50px;
  box-sizing: border-box;
  cursor: pointer;
}

.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: var(--color);
  border-radius: 100%;
  animation: scrolldown-anim 2s infinite;
  box-sizing: border-box;
  box-shadow: 0px -5px 3px 1px rgba(255, 255, 255, 0.2);
}

.chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
  animation: pulse54012 500ms ease infinite alternate 250ms;
}

.abelha {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

/* 11.2 Premium Abstract Hero Video Overlay */
.hero-video-container {
  position: absolute;
  left: 49%;                 /* HORIZONTAL TRACKING: Increase to shift right, decrease to shift left */
  right: auto;
  top: 45%;                  /* VERTICAL TRACKING: Increase to shift down, decrease to shift up */
  transform: translateY(-50%);
  width: 105%;               /* SCALING BOUNDS */
  max-width: 1260px;
  z-index: 1;                /* Renders in front of canvas background, behind texts */
  pointer-events: none;      /* Clicks pass directly to the text layers below */
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  will-change: transform;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
}

.hero-video-container svg {
  position: absolute;
  width: 0;
  height: 0;
}

.hero-video-container video {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  object-fit: contain;
  filter: invert(1) contrast(1.3) brightness(0.85); 
  will-change: transform;
}

/* 11.3 About Section & Bento Grid System */
.about-section-container {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 100px;
}

.about-section,
.projects-section-div,
.skills-section {
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.projects-heading,
.section-heading,
.skills-heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.projects-heading-article,
.section-heading-article,
.skills-heading-article {
  font-size: 3rem;
  font-family: 'Altone', sans-serif;
  font-weight: 500;
  color: var(--color-white);
}

.projectsHeadingP,
.sectionHeadingP,
.skillsHeadingP {
  width: 300px;
  height: 1px;
  background-color: #ffffff50;
}

.about-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 20px;
  width: 100%;
  margin-top: 40px;
}

.bento-card {
  background: var(--tech-stack-box-first-color);
  border: 1px solid var(--tech-stack-box-border-color);
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  
  /* 3D Tilt Settings - Interactive properties */
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.3s ease, 
              background 0.3s ease, 
              box-shadow 0.3s ease;
}

.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 
              0 0 30px -5px rgba(91, 82, 221, 0.15);
}

/* Elegant Dynamic Glare Spotlight Overlay */
.bento-card-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1; /* Retains placement below text select actions, above canvas backgrounds */
  background: radial-gradient(
    circle 300px at var(--mx, 0px) var(--my, 0px),
    rgba(255, 255, 255, 0.05),
    rgba(91, 82, 221, 0.08) 30%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Modern 3D Parallax Depth Layers */
.bento-card .details-label {
  transform: translateZ(20px);
  transform-style: preserve-3d;
}

.bento-card .details-content {
  transform: translateZ(12px);
  transform-style: preserve-3d;
}

.bento-bio p {
  transform: translateZ(12px);
  transform-style: preserve-3d;
}

.bento-bio .resumeBtn {
  transform: translateZ(20px);
  transform-style: preserve-3d;
  margin-top: 15px;
}

.bento-dp img {
  transform: translateZ(15px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-dp:hover img {
  transform: translateZ(20px) scale(1.05);
}

.bento-bio { 
  grid-column: span 2; 
  grid-row: 1; 
  justify-content: flex-start;
}

.bento-bio p {
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: var(--color-ddd-color);
}

.bento-dp { 
  grid-column: span 1; 
  grid-row: 1; 
  padding: 0; 
  overflow: hidden; 
  aspect-ratio: 3 / 4;
}

.bento-dp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 24px;
  transition: transform 0.5s ease;
}

.bento-dp:hover img {
  transform: scale(1.05);
}

.bento-exp { grid-column: 1; grid-row: 2 / 5; }
.bento-edu { grid-column: 2 / 4; grid-row: 2; }
.bento-skills { grid-column: 2 / 4; grid-row: 4; }
.bento-achieve { grid-column: 3; grid-row: 3; }
.bento-languages { grid-column: 2; grid-row: 3; }

.details-label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.details-label svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5px;
}

.details-content {
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: var(--color-ddd-color);
}

.details-content li {
  margin-bottom: 1.5rem;
}

.details-content li:last-child {
  margin-bottom: 0;
}

/* Timeline component indicators for Professional Experience */
.bento-exp .details-content ul {
  position: relative;
  padding-left: 20px;
  margin-top: 5px;
}

.bento-exp .details-content ul::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--accent);
  opacity: 0.3;
  border-radius: 2px;
}

.bento-exp .details-content li {
  position: relative;
  padding-left: 5px;
  display: flex;
  align-items: flex-start;
}

.bento-exp .details-content li::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 9px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(91, 82, 221, 0.3);
  z-index: 2;
}

.exp-info {
  flex: 1;
  display: block;
}

.exp-year {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(91, 82, 221, 0.1);
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 20px;
  margin-right: 12px;
  border: 1px solid rgba(91, 82, 221, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 3px;
}

.resumeBtn {
  width: 180px; /* Consistently structured absolute width to prevent layout jitter on hover */
  height: 50px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
  margin-top: 25px;
  font-family: 'Altone', sans-serif;
}

.IconContainer {
  width: 38px;
  height: 38px;
  background: var(--accent);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: 0.3s;
  margin-left: 0.5rem;
  margin-right: 1rem;
}

.resumeBtn .icon {
  width: 16px;
  fill: white;
  transition-duration: 0.3s;
}

.resumeBtn .text {
  height: 100%;
  width: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
  transition-duration: 0.3s;
  font-size: 1.5rem;
  position: relative;
  font-weight: 600;
  margin-bottom: 0; /* Reset margins mapped from global paragraphs styles */
  padding-right: 2rem;
}

.resumeBtn:hover .IconContainer {
  width: 170px;
  margin-right: 0.5rem;
  transition-duration: 0.3s;
}

.resumeBtn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(91, 82, 221, 0.15);
}

.resumeBtn:hover .text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition-duration: 0.3s;
}

.resumeBtn:active {
  transform: scale(0.95);
  transition-duration: 0.3s;
}

/* 11.4 Profile Picture Ring Parallax (DP Avatar) */
.dp {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dp img {
  width: 100%;
  max-width: var(--dp-size, 400px);
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  z-index: 3;
  position: relative;
  transition: all 0.5s ease;
}

.dp:hover img {
  transform: scale(1.02);
}

.dp::before,
.dp::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.5s ease;
  height: 300px;
  background-color: transparent;
}

/* External Ring - Slow, refined parallax motion */
.dp::before {
  width: 106%; /* Slanted outward bounds matching image scope */
  height: 106%;
  max-width: calc(var(--dp-size, 400px) + 25px);
  max-height: calc(var(--dp-size, 400px) + 25px);
  background: linear-gradient(0deg, #8000ff, transparent, #6bc5f8);
  animation: rotateRing 12s linear infinite;
  filter: blur(3px);
  opacity: 0.3;
}

/* Internal Ring - Soft accentuation bounds */
.dp::after {
  width: 103%;
  height: 103%;
  max-width: calc(var(--dp-size, 400px) + 12px);
  max-height: calc(var(--dp-size, 400px) + 12px);
  background: linear-gradient(180deg, #6bc5f8, transparent, #8000ff);
  animation: rotateRing 8s linear infinite reverse;
  opacity: 0.4;
}

.dp:hover::before {
  width: 435px;
  height: 435px;
  opacity: 0.5;
  filter: blur(5px);
}

/* 11.5 Skills Section & Technology Tools */
.skills-section-container {
  padding-top: 150px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills-categories-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  margin-top: 40px;
}

.skill-category-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.skill-category-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.3;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tech-stack-box {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  border: 1px solid var(--tech-stack-box-border-color);
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-image: linear-gradient(to bottom right, var(--tech-stack-box-first-color), var(--tech-stack-box-second-color));
}

.tech-stack-box img {
  width: 80%;
}

.tech-stack-box:hover .tooltip {
  opacity: 1;
  transition-duration: .3s;
}

.tooltip {
  position: absolute;
  top: -20px;
  opacity: 0;
  background: #1a1a2b; /* Solid matte layout backgrounds ensuring clear visual output */
  border: 1px solid var(--tech-stack-box-border-color);
  padding: 5px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition-duration: .2s;
  letter-spacing: .5px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.language-speak,
.tech-stack-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.language-speak {
  height: 50px;
  justify-content: center;
}

.language-speak article {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
  font-family: 'Altone', sans-serif;
}

.frontend-dev-section {
  width: 100%;
  margin-top: 50px;
}

.frontend-dev-heading {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 900;
  height: 100px;
  letter-spacing: 5px;
  color: var(--color-white);
}

.tech-stack-wrapper {
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 50px;
}

/* 11.6 Projects Grid Showcase (Cards, Glare & Pills) */
.projects-section-container {
  padding: 150px 0 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.project-boxes-div {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 50px 0 0 0;
}

.project-box {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 30px;
  border: 1px solid var(--tech-stack-box-border-color);
  position: relative;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  background-image: linear-gradient(to bottom right, var(--tech-stack-box-first-color), var(--tech-stack-box-second-color));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.project-box:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Premium Spotlight glare effect overlay mapped on mouse move coordinates */
.project-box-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    circle 400px at var(--mx, 0px) var(--my, 0px),
    rgba(255, 255, 255, 0.05),
    rgba(91, 82, 221, 0.08) 35%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-box-wrapper {
  width: 100%;
}

.info-div {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  padding: 0 40px;
}

.tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.tech-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--tech-pill-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--tech-pill-border, rgba(255, 255, 255, 0.1));
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-white);
  font-family: 'Altone', sans-serif;
  transition: all 0.3s ease;
  position: relative;
}

.tech-pill img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.tech-pill:hover {
  background: var(--tech-pill-bg-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--accent);
}

.image-div {
  width: 50%;
  height: 100%;
  padding-top: 70px;
  padding-left: 10px;
}

.image-div img {
  height: 100%;
  border-top-left-radius: 30px;
}

.imagem-site {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: top;
  transition: object-position 8s ease-in-out;
}

.imagem-site.autoscroll-active {
  object-position: bottom;
}

.ProjectHeading {
  color: var(--color-white);
  font-size: 3.4rem;
  font-weight: 700;
}

.ProjectDescription {
  color: gray;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;
}

.ProjectImpact {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--accent);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-style: italic;
  opacity: 0.9;
}

.project-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.cta {
  padding: 12px 18px;
  transition: .2s;
  border: none;
  background: 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.cta::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  border-radius: 50px;
  background: var(--accent);
  width: 45px;
  height: 45px;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta:hover::before {
  width: 100%;
}


.cta span {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--color-white);
  position: relative;
}

.cta:hover span {
  color: #fff;
}

.cta svg {
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--color-white);
  stroke-width: 2;
  transform: translateX(-5px);
  transition: .3s;
  position: relative;
}

.cta:hover svg {
  stroke: white;
  transform: translateX(0);
}

.cta:active {
  transform: scale(.95);
}

/* 11.7 Back to Top Navigation Component */
#backtotopbutton {
  position: fixed;
  right: 35px;
  bottom: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  width: 3rem;
  height: 15rem;
  z-index: 1000;
  text-align: center;
  background-color: transparent;
  
  /* Smooth animation transition states */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
}

#backtotopbutton.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#backtotopbutton article {
  font-size: 1.5rem;
  color: var(--color-white);
  font-weight: 400;
  writing-mode: vertical-rl;
  mix-blend-mode: difference;
  font-family: 'Altone', sans-serif;
}

#backtotopbutton.show:hover {
  transform: translate(0, -20px);
  text-decoration: line-through var(--color-white);
}

#footer-sentinel {
  height: 1px;
  width: 100%;
}

/* 11.8 Footer */
footer {
  width: 100%;
  height: fit-content;
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.footer-background {
  width: 100%;
  height: 380px;
  background-color: #07070b; /* Balanced offset deeper black depth shading */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}

.footer-foreground {
  position: absolute;
  top: 0;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.footercontainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
}

.two-words {
  color: #b3b3b3;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 5rem;
  height: auto;
  padding: 0 40px;
}

.two-words article {
  font-size: 2.5rem;
  font-family: 'Altone', sans-serif;
  color: var(--color-white);
}

.social-media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 30px;
}

.getintouch-heading {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.getintouch-heading-article {
  font-size: 2rem;
  background: linear-gradient(-45deg, var(--color-light-blue), var(--color-light-purple), var(--color-light-blue), var(--color-light-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-family: 'Altone', sans-serif;
}

.logos {
  height: auto;
  width: 100%;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.logos a {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.09);
  border: 2px solid rgba(226, 222, 222, 0.14);
  position: relative;
  box-shadow: 0 0 0 var(--color-purple) inset;
  transition-duration: .3s;
}

.logos a:hover {
  box-shadow: 0 0 50px 100px var(--color-purple) inset;
  transition-duration: 0.5s;
  border: 2px solid var(--color-purple);
}

.logos a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  border-radius: 50%;
  transform: scale(0);
  background-color: transparent;
  transition-duration: .3s;
  z-index: -1;
}

.logos a:hover::before {
  transform: scale(1);
  transition-duration: .3s;
}

.SocialHandle {
  fill: white;
  width: 60%;
}

#GmailLogo {
  height: 70%;
}

.footer-avatar-container {
  width: 220px;
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.footer-avatar-img {
  width: 100%;
  z-index: 2;
}

.footer-avatar-face {
  position: absolute;
  width: 100%;
  height: 97%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-left: 5px;
}

.footer-avatar-eye {
  width: 50px;
  height: 50px;
  background-color: #dfd2d2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-avatar-eye::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(214, 214, 214, .726);
  z-index: 2;
  filter: blur(.2px);
  left: 15px;
  transform: rotate(45deg);
}

.footer-pupil {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  border: 5px solid #413333;
  filter: blur(.6px);
}

.footer-right-eye {
  box-shadow: 15px 15px 5px rgba(0, 0, 0, .233) inset, 10px 10px 5px rgba(41, 33, 33, .644) inset;
  position: relative;
}

.footer-left-eye {
  box-shadow: -10px -15px 5px rgba(0, 0, 0, .349) inset;
  position: relative;
}

.footer-bottom {
  background-color: #0b0b0b;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  z-index: 3;
}

.fa-copyright,
.footer-bottom article {
  font-size: 1.5rem;
  color: #b0b0b0;
  font-family: 'Altone', sans-serif;
}

.tonechange {
  color: #000;
}

/* 11.9 Floating Social Media Bubbles */
.floating-socials {
  position: fixed;
  bottom: 35px;
  left: 35px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
  
  /* Smooth animation transition states */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
}

.floating-socials.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-socials.hidden {
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  pointer-events: none;
}

.floating-bubble {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.floating-bubble svg,
.floating-bubble svg path {
  width: 20px;
  height: 20px;
  fill: #fff !important;
  transition: all 0.4s ease;
}

.floating-bubble #GmailLogo {
  width: 22px;
  height: 22px;
}

.floating-bubble:hover {
  transform: scale(1.08);
  border-color: var(--color-purple);
  box-shadow: 0 10px 25px rgba(128, 0, 255, 0.4), 0 0 15px rgba(128, 0, 255, 0.2);
  background: var(--color-purple);
}

.floating-bubble:hover svg,
.floating-bubble:hover svg path {
  fill: #fff !important;
  transform: scale(1.1);
}

#audioPlayer {
  display: none;
}

/* Typewriter Visual Effect Classes */
.typewriter-container {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-white);
  display: flex;
  align-items: center;
}

.typewriter-text {
  color: var(--accent);
  margin-left: 10px;
}

.typewriter-cursor {
  animation: blink 0.75s step-end infinite;
  color: white;
}

/* ==========================================================================
   12. LIGHT MODE UTILITIES & COLOR OVERRIDES
   ========================================================================== */
.light-mode {
  --accent: #5b52dd;
  --color-dark-mode: #fbfbfc;        /* Clean modern off-white */
  --color-black: #ffffff;
  --color-white: #1a1a1b;            /* Soft dark gray for enhanced typography contrast */
  --color-ddd-color: #4a4a4e;        /* Secondary description fonts */
  --color-navbarBorder-dark: rgba(0, 0, 0, 0.08);
  --static-heading-gradient-blue: #5b52dd;
  --static-heading-gradient-pink: #8b84d7;
  --color-shadowDark: rgba(0, 0, 0, 0.04);
  --tech-stack-box-first-color: rgba(255, 255, 255, 0.6);
  --tech-stack-box-second-color: rgba(255, 255, 255, 0.1);
  --tech-stack-box-border-color: rgba(0, 0, 0, 0.06);
  --color-navbar-bg: rgba(255, 255, 255, 0.7);
  --color-navbar-text: #1a1a1b;
  --color-nav-indicator: rgba(91, 82, 221, 0.16);
  --grid-color: rgba(0, 0, 0, 0.02);
  --noise-opacity: 0.015;
}

.light-mode .details-label {
  color: var(--accent);
  opacity: 1;
}

.light-mode .details-content {
  color: var(--color-white) !important;
  font-weight: 500;
}

.light-mode .tooltip {
  background: #111111a2 !important;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.13) !important;
}

.light-mode .tech-stack-box {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.light-mode .navbar {
  background: var(--color-navbar-bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-mode .navbar-tabs-ul a,
.light-mode .navbar-tabs-ul li {
  color: var(--color-navbar-text);
}

.light-mode .nav-indicator {
  background-color: var(--color-nav-indicator);
}

.light-mode #labelforsound {
  filter: invert(1);
}

.light-mode .footer-background {
  background-color: #f1f1f3 !important; /* Slightly tinted gray creating subtle separation */
}

.light-mode .two-words article {
  color: #000 !important;
  opacity: 0.8;
}

.light-mode .getintouch-heading-article {
  background: linear-gradient(135deg, var(--accent), #8b84d7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.light-mode .logos a {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .logos a svg path,
.light-mode .logos a svg {
  fill: #000 !important;
  transition: fill 0.3s ease;
}

.light-mode .logos a:hover svg path,
.light-mode .logos a:hover svg {
  fill: #fff !important;
}

.light-mode .fa-copyright,
.light-mode .footer-bottom article {
  color: #444 !important;
}

.light-mode .resumeBtn {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .resumeBtn .text {
  color: #000 !important;
}

.light-mode .resumeBtn .icon {
  fill: #fff; /* White icon inside the colored IconContainer */
}

.light-mode .resumeBtn:hover {
  border-color: var(--accent);
}

.light-mode .lang-toggle-container {
  border-color: #000;
  color: #000;
  background: rgba(0, 0, 0, 0.11);
}

.light-mode .lang-slider {
  background: #000;
}

.light-mode .lang-en.active, 
.light-mode .lang-pt.active {
  color: #fff;
}

.light-mode #volumeSlider {
  background: rgba(0, 0, 0, 0.1);
}

.light-mode #volumeSlider::-webkit-slider-thumb {
  background: var(--color-white); /* Evaluates to dark in light mode configuration variables */
}

.light-mode .bento-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.light-mode .bento-card:hover {
  border-color: rgba(91, 82, 221, 0.15);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 
              0 0 30px -5px rgba(91, 82, 221, 0.06);
}

.light-mode .bento-card-glare {
  background: radial-gradient(
    circle 300px at var(--mx, 0px) var(--my, 0px),
    rgba(91, 82, 221, 0.08),       /* Rich purple spotlight center for premium visibility (subtly reduced) */
    rgba(107, 197, 248, 0.04) 40%,  /* Luminous blue secondary spotlight ring (subtly reduced) */
    transparent 80%
  );
}

.light-mode .bento-bio p {
  color: var(--color-navbar-text);
}

.light-mode .bento-exp .details-content li::before {
  border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .exp-year {
  background: rgba(91, 82, 221, 0.05);
}

.light-mode .project-box:hover {
  border-color: rgba(91, 82, 221, 0.15);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.light-mode .project-box-glare {
  background: radial-gradient(
    circle 400px at var(--mx, 0px) var(--my, 0px),
    rgba(91, 82, 221, 0.08),       /* Rich purple spotlight center for premium visibility (subtly reduced) */
    rgba(107, 197, 248, 0.04) 45%,  /* Luminous blue secondary spotlight ring (subtly reduced) */
    transparent 80%
  );
}

.light-mode .tech-pill {
  --tech-pill-bg: rgba(0, 0, 0, 0.04);
  --tech-pill-border: rgba(0, 0, 0, 0.08);
  --tech-pill-bg-hover: rgba(0, 0, 0, 0.08);
}

.light-mode .ProjectImpact {
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.light-mode .cta::before {
  background-color: rgba(91, 82, 221, 0.3);
}

.light-mode .cta:hover::before {
  background-color: var(--accent);
}

.light-mode .typewriter-cursor {
  color: var(--color-white);
}

.light-mode .floating-bubble {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.light-mode .floating-bubble svg,
.light-mode .floating-bubble svg path {
  fill: #000 !important;
}

.light-mode .floating-bubble:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 10px 25px rgba(91, 82, 221, 0.35);
}

.light-mode .floating-bubble:hover svg,
.light-mode .floating-bubble:hover svg path {
  fill: #fff !important;
}

.light-mode .button .dots_border::before {
  background-color: var(--accent);
}

.light-mode .projects-heading-article,
.light-mode .section-heading-article,
.light-mode .skills-heading-article {
  color: var(--accent);
}

.light-mode .projectsHeadingP,
.light-mode .sectionHeadingP,
.light-mode .skillsHeadingP {
  background-color: #00000050;
}

.light-mode .tooltip {
  background: #ffffff;
  color: var(--color-navbar-text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.light-mode .skill-category-title {
  color: var(--color-navbar-text);
}

.light-mode .hero-video-container {
  mix-blend-mode: multiply;
}

.light-mode .hero-video-container video {
  mix-blend-mode: multiply;
  filter: contrast(1.15) brightness(1.08);
}

.invertsettinglabel,
.invertapplied {
  filter: invert(1);
}

/* ==========================================================================
   13. RESPONSIVE DEVICE SYSTEM-WIDE MEDIA QUERIES
   ========================================================================== */

/* Large screens and monitors (max-width: 1920px) */
@media screen and (max-width: 1920px) {
  html { font-size: 60%; }
}

/* Standard screens and laptop configurations (max-width: 1400px) */
@media screen and (max-width: 1400px) {
  html { font-size: 60%; }
}

/* Medium viewports (max-width: 1200px) */
@media screen and (max-width: 1200px) {
  html { font-size: 60%; }
  
  .projects-section-div,
  .skills-section,
  .text-content {
    width: 80%;
  }

  .about-section {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo:hover {
    transform: scale(1.1);
    transition-duration: .3s;
  }
}

/* Tablets and custom grids (max-width: 1150px) */
@media screen and (max-width: 1150px) {
  html { font-size: 60%; }
}

/* Laptop and Tablet video container landscape adjustments */
@media screen and (min-width: 1025px) and (max-width: 1399px) {
  .hero-video-container {
    left: 48%;
    top: 46%;
    width: 100%;
    max-width: 1100px;
  }
}

/* Standard tablet viewports (max-width: 998px) */
@media screen and (max-width: 998px) {
  html { font-size: 55%; }

  /* Bento Grid Tablet realignment */
  .about-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-bio { grid-column: span 2; grid-row: span 1; }
  .bento-dp { grid-column: span 1; grid-row: span 1; }
  .bento-exp { grid-column: span 1; grid-row: span 1; }
  .bento-edu { grid-column: span 1; grid-row: span 1; }
  .bento-achieve { grid-column: span 1; grid-row: span 1; }
  .bento-skills { grid-column: span 1; grid-row: span 1; }
  .bento-languages { grid-column: span 1; grid-row: span 1; }

  .about-details-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .details-label {
    font-size: 1.1rem;
  }

  /* Mobile Hamburger and Overlay Navigation system */
  #hamburger-button,
  .hamburger {
    background-color: transparent;
  }

  .mobile-navbar-tabs-ul a,
  .mobiletogglemenu {
    text-decoration: none;
  }

  .activeThismobiletab,
  .mobile-navbar-tabs-ul a {
    color: var(--color-white);
  }

  .blob,
  .cursor-inner,
  .cursor-outer,
  .navbar-tabs-ul {
    display: none;
  }

  .stopscrolling {
    overflow: hidden;
  }

  .hamburger {
    position: fixed;
    top: 0;
    width: 100%;
    height: 115px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9998;
  }

  .activeThismobiletab:before,
  .burger-bar,
  .hamburger-animation1,
  .hamburger-animation2,
  .hamburger-animation3 {
    background-color: var(--color-white);
  }

  .hamburgerbase {
    width: 80%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
  }

  #hamburger-button {
    font-size: 3rem;
    font-weight: 800;
    width: 4.5rem;
    height: 3.5rem;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  #burger-bar1,
  #burger-bar2,
  #burger-bar3 {
    height: 3px;
    border-radius: 0;
    transition-duration: .3s;
  }

  #burger-bar1,
  #burger-bar3 {
    width: 60%;
  }

  #burger-bar2 {
    width: 100%;
  }

  .hamburger-animation1 {
    transform: rotate(45deg) scaleX(1.7);
    transition-duration: .3s;
    transform-origin: left;
  }

  .hamburger-animation2 {
    transform: scaleX(0);
  }

  .hamburger-animation3 {
    transform: rotateZ(-45deg) scaleX(1.7);
    transform-origin: left;
    transition-duration: .3s;
  }

  .mobiletogglemenu {
    background-color: transparent;
    z-index: 9990;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    list-style: none;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    transform: translate(1000px);
    transition-duration: 1s;
  }

  .show-toggle-menu {
    transform: translate(0);
    transition-duration: .6s;
  }

  .mobile-navbar-tabs-ul {
    background-color: var(--color-dark-mode);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .176);
  }

  .mobile-navbar-tabs-li {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    font-family: 'Altone', sans-serif;
    height: 30px;
    width: fit-content;
  }

  .activeThismobiletab:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: -20px;
    border-radius: 50%;
  }

  .projects-section-div {
    width: 80%;
  }

  .project-box {
    flex-direction: column;
    height: auto !important;
    min-height: max-content;
  }

  .info-div {
    width: 100%;
    height: auto !important;
    min-height: max-content;
    padding: 40px 30px;
    justify-content: flex-start;
    gap: 20px;
  }

  .image-div {
    width: 100%;
    height: 400px;
    padding: 0;
    display: flex;
    align-items: flex-start;
  }

  .image-div img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0;
  }
}

/* Tablet Landscape video container alignments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .hero-video-container {
    left: 44%;
    top: 48%;
    width: 95%;
    max-width: 950px;
  }
}

/* Mobile Portrait & Standard Handheld adjustments (max-width: 768px) */
@media screen and (max-width: 768px) {
  html { font-size: 55%; }

  .scroll-down-container {
    display: none !important;
  }

  .about-bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-bio, 
  .bento-dp, 
  .bento-exp, 
  .bento-edu, 
  .bento-achieve, 
  .bento-skills, 
  .bento-languages {
    grid-column: span 1;
    grid-row: auto;
  }
  .bento-dp {
    order: -1;
  }

  .text-content {
    padding-left: 0;
    width: 80%;
  }

  #hello-friend {
    height: 100px;
    font-size: 3.5rem;
  }

  #name {
    font-size: clamp(5rem, 15vw, 8rem);
    max-width: 100%;
    word-wrap: break-word;
    line-height: 0.9;
  }

  #work {
    font-size: 4.5rem;
    max-width: 100%;
    word-wrap: break-word;
  }

  #info-para,
  .language-name {
    width: 100%;
  }

  .contact-btn-div {
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 30px;
  }
  
  .contact-btn-div .button,
  .getintouch-heading .button {
    padding: 2.5rem 5rem;
  }

  .contact-btn-div .text_button,
  .getintouch-heading .text_button {
    font-size: 2.5rem;
  }
  
  .resumeBtn {
    transform: scale(1.35);
    transform-origin: left center;
    margin-top: 25px;
    margin-bottom: 15px;
  }
  
  .getintouch-heading-article {
    font-size: 3rem;
  }
  
  .landing-page-container {
    padding-top: 90px;
    padding-bottom: 50px;
    height: auto;
    min-height: 100vh;
  }

  .about-section-container {
    padding-top: 50px;
  }
  
  .about-section {
    display: flex;
    flex-direction: column;
  }

  .info-dp-section {
    display: contents;
  }

  .dp {
    order: -2;
    margin-bottom: 20px;
    --dp-size: 250px;
    pointer-events: none;
  }

  .section-heading {
    order: -1;
    margin-bottom: 20px;
  }

  .about-info {
    order: 0;
  }
  
  .skills-section-container {
    padding-top: 100px;
  }

  .setting-container {
    margin-left: 0;
  }

  .logo {
    width: auto;
  }

  .logo:hover {
    transform: scale(1.1);
    transition-duration: .3s;
  }

  .projects-section-div {
    width: 80%;
  }

  .project-boxes-div {
    padding: 40px 0;
  }

  .imagem-site {
    transition: object-position 20s ease-in-out;
  }

  .logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-content: center;
    gap: 20px;
  }

  .footer-background,
  .footer-foreground {
    height: 440px;
  }

  .two-words article {
    font-size: 1.8rem;
    line-height: 1.4;
    padding: 0 15px;
  }

  #backtotopbutton {
    right: 10px;
    bottom: 10px;
  }

  .floating-socials {
    bottom: 20px;
    left: 20px;
    gap: 12px;
  }

  .floating-bubble {
    width: 46px;
    height: 46px;
  }

  .floating-bubble svg,
  .floating-bubble svg path {
    width: 17px;
    height: 17px;
  }

  .floating-bubble #GmailLogo {
    width: 19px;
    height: 19px;
  }

  /* Abstract background watermark scaling for standard video overlay */
  .hero-video-container {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 210%;
    max-width: 1050px;
    opacity: 0.15;
    z-index: -1; /* Placed behind typography elements */
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
  }
  
  .hero-video-container video {
    mix-blend-mode: screen;
    filter: invert(1) contrast(1.3) brightness(0.85);
  }

  .light-mode .hero-video-container {
    mix-blend-mode: multiply;
  }

  .light-mode .hero-video-container video {
    mix-blend-mode: multiply;
    filter: contrast(1.15) brightness(1.08);
  }
}

/* Medium viewport queries (max-width: 500px) */
@media screen and (max-width: 500px) {
  html { font-size: 50%; }

  .hamburgerbase,
  .navbar {
    height: 70px;
  }

  #hamburger {
    margin-right: 20px;
    height: 115px;
    align-items: flex-end;
  }

  #hello-friend {
    font-size: 2.5rem;
  }


  .hey {
    left: 70px;
  }

  .logo:hover {
    transform: scale(1.1);
    transition-duration: .3s;
  }

  .landing-page-container {
    padding-top: 80px;
    height: auto;
    min-height: 100vh;
  }

  .text-content {
    justify-content: center;
    padding-top: 20px;
  }
  
  .section-heading-article {
    white-space: nowrap;
    font-size: 2.6rem;
  }

  .projectsHeadingP,
  .sectionHeadingP,
  .skillsHeadingP {
    width: auto;
    flex: 1;
  }

  .project-box {
    height: auto !important;
    min-height: max-content;
  }

  .info-div {
    height: auto !important;
    min-height: max-content;
    padding: 30px 20px;
  }

  .image-div {
    height: 250px;
    padding: 0;
  }

  .ProjectHeading {
    font-size: 2.8rem;
  }

  .ProjectDescription {
    font-size: 2.2rem;
  }

  .ProjectImpact {
    font-size: 1.8rem;
  }

  .skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .tech-stack-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
  
  .tech-stack-box img {
    width: 55%;
  }
}

/* Small mobile portrait configuration (max-width: 430px) */
@media screen and (max-width: 430px) {
  html { font-size: 50%; }

  .about-section,
  .projects-section-div,
  .skills-section {
    width: 80%;
  }

  .info-div {
    padding: 25px 20px;
  }

  .two-words article {
    font-size: 2.2rem;
  }

}

/* Small mobile configuration (max-width: 375px) */
@media screen and (max-width: 375px) {
  html { font-size: 47%; }

  .dp {
    --dp-size: 200px;
  }

  .two-words article {
    font-size: 2rem;
  }


  .footer-bottom article {
    font-size: 1.3rem;
  }

  .logos {
    gap: 20px;
  }
}

/* Micro-screen / Ultra-small layout bounds (max-width: 300px) */
@media screen and (max-width: 300px) {
  html { font-size: 47%; }

  .language-name article {
    text-align: center;
  }

  .two-words article {
    font-size: 2rem;
  }


  .footer-bottom article {
    font-size: 1rem;
  }

  .social-media-container a {
    width: 50px;
    height: 50px;
  }

  .logos {
    gap: 20px;
  }
}

/* Short height display viewports (max-width: 1300px and max-height: 730px) */
@media only screen and (max-width: 1300px) and (max-height: 730px){
  .landing-page-container {
    height: fit-content;
    margin-top: 100px;  
  }
}

/* Viewport intermediate adjustments (max-width: 1275px to min-width: 999px) */
@media screen and (max-width: 1275px) and (min-width: 999px) {
  .bento-dp {
    aspect-ratio: 2 / 3;
  }

  .bento-exp .details-content ul::before {
    display: none;
  }

  .bento-exp .details-content li::before {
    display: none;
  }

  .bento-exp .details-content ul {
    padding-left: 0;
  }

  .bento-exp .details-content li {
    padding-left: 0;
  }

  .project-box {
    height: 580px;
  }
}

/* Viewport intermediate adjustments (max-width: 1200px to min-width: 999px) */
@media screen and (max-width: 1200px) and (min-width: 999px) {
  .bento-dp {
    aspect-ratio: auto !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .bento-dp img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Tablet Viewport adjustments (max-width: 998px to min-width: 769px) - Under 1000px */
@media screen and (max-width: 998px) and (min-width: 769px) {
  .bento-dp {
    aspect-ratio: auto !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .bento-dp img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Hover capability-based interaction queries */
@media (hover: hover) {
  .mockup-container:hover .imagem-site {
    object-position: bottom;
  }
}