/*
==============================================================================
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
   ========================================================================== */
/* UI Selection Resets */
.navbar,
.button,
.cta,
.lang-toggle-container,
.visualmodetogglebuttoncontainer,
.soundtogglebuttoncontainer,
.floating-socials,
#backtotopbutton,
label,
input,
img,
svg,
.logo,
.hey {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@font-face {
  font-family: 'Altone';
  src: url('src/fonts/Altone-VF.woff2') format('woff2');
  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-dark-mode: #0a0a0f;   /* Deep, modern space-navy black */
  --color-ddd-color: #9a9aa2;   /* Muted gray for secondary descriptions */
  --color-light-purple: #cf59e6;
  --color-light-blue: #6bc5f8;
  --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;
  /* Interactive WebGL background variables */
  --bg-shader-opacity: 0.06;
  --bg-shader-filter: none;
  --bg-shader-blend: normal;
}

/* ==========================================================================
   3. BASE RESETS & GLOBAL SETUP
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -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;
}

/* Restored default browser selection behavior for better accessibility */

/* ==========================================================================
   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);
}

/* Custom cursor styles removed */

/* ==========================================================================
   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;
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  border-radius: 30px;
}

.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 {
  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/svg/sun.svg);
  background-size: 60%;
  transition-duration: .5s;
  cursor: pointer;
}

#switchforvisualmode:checked+#labelforvisualmode {
  transform: rotate(360deg);
  transition-duration: .5s;
  background-image: url(src/svg/moon.svg);
  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);
}

/* Unicorn Studio Background Canvas (Controlled via theme variables for ultra-smooth shifts) */
div[data-us-project] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: var(--bg-shader-opacity);
  filter: var(--bg-shader-filter);
  mix-blend-mode: var(--bg-shader-blend);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hide Unicorn Studio watermarks and branded elements */
div[data-us-project] > *:not(canvas),
a[href*="unicornstudio"],
a[href*="unicorn.studio"],
[class*="unicorn-watermark"],
[id*="unicorn-watermark"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.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;
}

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

.hero-heading-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#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(4.2rem, 7vw, 8rem);
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  letter-spacing: -0.02em;
  width: fit-content;
  line-height: 1.1;
  margin-bottom: 0;
  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: 5.5rem;
  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;
}


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

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

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

.button,
.cta {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--accent);
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Altone', sans-serif;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(91, 82, 221, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
  white-space: nowrap;
  width: fit-content;
  height: fit-content;
}

/* Premium spotlight hover glow overlay */
.button::before,
.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle 80px at var(--btn-x, 50%) var(--btn-y, 50%), rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.button:hover,
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(91, 82, 221, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.35);
}

.button:hover::before,
.cta:hover::before {
  opacity: 1;
}

.button:active,
.cta:active {
  transform: translateY(0) scale(0.97);
}

.dots_border {
  display: none !important;
}

/* Unified simple button states override */

/* Unified simple button dots_border override */

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

.button .button-icon {
  position: relative;
  z-index: 10;
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
  stroke: currentColor;
  color: white;
}

.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.6rem;
  color: white;
  font-weight: 600;
}

.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: 47%;                 /* 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%);
}

@media screen and (min-width: 1200px) {
  .hero-video-container {
    left: 35%;               
  }
}

@media screen and (min-width: 1900px) {
  .hero-video-container {
    left: 40%;               
  }
}

.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: 1.4fr 0.8fr 0.8fr;
  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: 32px;
  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 #resume-btn {
  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;
  height: fit-content;
}

.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; 
}

.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);
}

.skills-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.skills-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--skills-pill-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--skills-pill-border, rgba(255, 255, 255, 0.1));
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-white);
  font-family: 'Altone', sans-serif;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: default;
  white-space: nowrap;
}

.skills-pill:hover {
  background: var(--skills-pill-hover-bg, rgba(91, 82, 221, 0.15));
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(91, 82, 221, 0.2);
}

.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: 36px;
  margin-top: 5px;
}

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

.bento-exp .details-content li {
  position: relative;
  padding-left: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
}

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

.bento-exp .details-content li::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
  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-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  padding: 4px 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 20px;
  margin-right: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0;
}

.bento-edu .details-content ul {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}

.bento-edu .details-content li {
  position: relative;
  padding-left: 0;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

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

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

/* Styling for old resumeBtn replaced by unified .button class */

/* 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: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  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%;
  height: auto;
}

.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: 580px;
  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: 24px;
  padding: 0 40px;
}

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

.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 {
  color: gray;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-style: normal;
  opacity: 1;
}

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

.cta span {
  color: white;
  position: relative;
  z-index: 2;
}

.cta svg {
  width: 14px;
  height: auto;
  stroke: white;
  stroke-width: 2;
  fill: none;
  margin-left: 8px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.cta:hover svg {
  transform: translateX(4px);
}

/* 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 span {
  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);
}

#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: 580px;
  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: 580px;
  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: 48px;
  padding: 60px 0;
}

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

.two-words article {
  font-size: 2.5rem;
  font-family: 'Altone', sans-serif;
  color: var(--color-white);
  margin: 0 !important;
  padding: 0 45px !important;
  position: relative;
  line-height: 1.6;
}

.two-words article::before {
  content: "“";
  position: absolute;
  top: -20px;
  left: 26px;
  font-size: 10rem;
  font-family: serif;
  color: var(--accent);
  opacity: 0.15;
  pointer-events: none;
}

.two-words article::after {
  content: "”";
  position: absolute;
  bottom: -45px;
  right: 26px;
  font-size: 10rem;
  font-family: serif;
  color: var(--accent);
  opacity: 0.15;
  pointer-events: none;
}

.quote-author {
  font-size: 1.9rem;
  opacity: 0.75;
  font-style: italic;
  display: inline-block;
  margin-top: 12px;
}

.social-media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-contact-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 20px auto 0 auto;
  padding: 40px 30px 30px 30px;
  border-radius: 20px;
  border: 1.5px solid var(--tech-stack-box-border-color, rgba(255, 255, 255, 0.2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.getintouch-heading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 20px !important;
  background-color: #07070b;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  white-space: nowrap;
}

.light-mode .getintouch-heading {
  background-color: #f1f1f3;
}

.getintouch-heading-article {
  font-size: 2rem;
  color: #ffffff;
  font-weight: 700;
  font-family: 'Altone', sans-serif;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-email {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: 'Altone', sans-serif;
  color: var(--accent);
  text-decoration: none;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

.footer-email::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background: var(--accent);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-email:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.footer-email:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.logos {
  height: auto;
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

.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(--accent) inset;
  transition-duration: .3s;
}

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

.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(--accent);
  background: var(--accent);
}

.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;
}

/* ==========================================================================
   11.9 UNIFIED TYPOGRAPHY SYSTEM (DESKTOP)
   ========================================================================== */
#info-para,
.bento-bio p,
.details-content,
.ProjectDescription,
.ProjectImpact {
  font-size: 1.9rem !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   12. LIGHT MODE UTILITIES & COLOR OVERRIDES
   ========================================================================== */
.light-mode {
  --accent: #5b52dd;
  --color-dark-mode: #fbfbfc;        /* Clean modern off-white */
  --color-white: #1a1a1b;            /* Soft dark gray for enhanced typography contrast */
  --color-ddd-color: #4a4a4e;        /* Secondary description fonts */
  --color-light-blue: #4f46e5;       /* Premium high-contrast Indigo */
  --color-light-purple: #9333ea;     /* Premium high-contrast Purple */
  --tech-stack-box-first-color: rgba(255, 255, 255, 0.15);
  --tech-stack-box-second-color: rgba(255, 255, 255, 0.05);
  --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 WebGL background shader tuning */
  --bg-shader-opacity: 0.08;
  --bg-shader-filter: invert(1) hue-rotate(180deg) contrast(1.65) saturate(1.4) brightness(1.02);
  --bg-shader-blend: multiply;
}

.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-image: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.light-mode .tech-stack-box:hover {
  border-color: rgba(91, 82, 221, 0.2) !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.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,
.light-mode #labelforvisualmode {
  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 {
  color: var(--color-white) !important;
}

.light-mode .footer-contact-box {
  border-color: rgba(0, 0, 0, 0.16);
}

.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: var(--color-ddd-color) !important;
}

.light-mode .footer-bottom {
  background-color: #f1f1f3 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.light-mode .quote-author {
  color: var(--color-ddd-color) !important;
  opacity: 0.9;
}

.light-mode #info-para strong {
  color: var(--color-white);
}

/* Light mode overrides for resumeBtn replaced by unified .button class */

.light-mode .lang-toggle-container {
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-navbar-text);
  background: var(--color-nav-indicator);
}

.light-mode .lang-slider {
  background: var(--accent);
}

.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.55) !important; /* Premium semi-opaque white for high contrast */
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03), 
              0 1px 3px -1px rgba(0, 0, 0, 0.01),
              inset 0 1px 0 rgba(255, 255, 255, 0.9); /* Gorgeous top light highlight */
}

.light-mode .bento-card:hover {
  border-color: rgba(91, 82, 221, 0.18) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 25px 45px -15px rgba(91, 82, 221, 0.06), 
              0 0 35px -5px rgba(91, 82, 221, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.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);
  border-color: rgba(91, 82, 221, 0.15) !important;
}

.light-mode .project-box {
  background-image: none !important;
  background: rgba(255, 255, 255, 0.55) !important; /* Premium semi-opaque white for high contrast */
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03), 
              0 1px 3px -1px rgba(0, 0, 0, 0.01),
              inset 0 1px 0 rgba(255, 255, 255, 0.9); /* Premium top reflection */
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.light-mode .project-box:hover {
  border-color: rgba(91, 82, 221, 0.18) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 25px 45px -15px rgba(91, 82, 221, 0.06), 
              0 0 35px -5px rgba(91, 82, 221, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.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 .skills-pill {
  --skills-pill-bg: rgba(0, 0, 0, 0.04);
  --skills-pill-border: rgba(0, 0, 0, 0.08);
  --skills-pill-hover-bg: rgba(91, 82, 221, 0.1);
}

.light-mode .ProjectDescription,
.light-mode .ProjectImpact {
  color: var(--color-ddd-color) !important;
}

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

.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 color-mix(in srgb, var(--accent) 35%, transparent);
}

.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);
}

/* Subtle cosmic gradient spheres and glow overrides in light mode */
.light-mode .sphere-1 {
  background: linear-gradient(40deg, rgba(255, 0, 128, 0.12), rgba(255, 102, 0, 0.06)) !important;
}

.light-mode .sphere-2 {
  background: linear-gradient(240deg, rgba(72, 0, 255, 0.12), rgba(0, 183, 255, 0.06)) !important;
}

.light-mode .sphere-3 {
  background: linear-gradient(120deg, rgba(133, 89, 255, 0.12), rgba(98, 216, 249, 0.06)) !important;
}

.light-mode .glow {
  background: radial-gradient(circle, rgba(72, 0, 255, 0.06), transparent 70%) !important;
}

/* Custom cursor Light Mode adaptation */
.light-mode .cursor-inner {
  background-color: var(--accent);
}

.light-mode .cursor-outer {
  border: 2px solid hsl(from var(--accent) h s l / 0.5);;
}

/* ==========================================================================
   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; 
    aspect-ratio: 1 / 1;
    max-height: 350px;
    width: 100%;
  }
  .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;
  }

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

  .stopscrolling {
    overflow: hidden;
  }

  .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: 24px;
  }

  .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%; }

  /* Unified Mobile Typography (Running Texts) */
  #info-para,
  .bento-bio p,
  .details-content,
  .ProjectDescription,
  .ProjectImpact {
    font-size: 1.8rem !important;
    line-height: 1.6 !important;
  }

  .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;
    aspect-ratio: 1 / 1;
    max-height: 400px;
    width: 100%;
  }

  .text-content {
    padding-left: 0;
    width: 80%;
    height: auto;
    justify-content: flex-start;
  }

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

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

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

  #work .typewriter-text {
    margin-left: 4px; 
  }

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

  .contact-btn-div {
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 30px;
  }
  
  .button,
  .cta {
    padding: 15px 32px !important;
    font-size: 1.7rem !important;
    transform: none !important;
    width: fit-content !important;
    height: fit-content !important;
  }

  .button .text_button,
  .cta span {
    font-size: 1.7rem !important;
  }

  #resume-btn {
    margin-top: 25px;
    margin-bottom: 15px;
  }
  
  .getintouch-heading-article {
    font-size: 3rem;
  }
  
  .landing-page-container {
    padding-top: 85px;
    padding-bottom: 50px;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .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: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

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

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

  .two-words article::before {
    font-size: 8rem;
    top: -15px;
    left: 8px;
  }

  .two-words article::after {
    font-size: 8rem;
    bottom: -35px;
    right: 8px;
  }

  .quote-author {
    font-size: 1.8rem;
    margin-top: 10px;
  }

  #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: 220px;
    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%; }

  .navbar {
    height: 70px;
  }

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


  .hey {
    left: 70px;
  }

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

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

  .text-content {
    justify-content: flex-start;
    padding-top: 0;
  }
  
  .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;
  }

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

  .tech-stack-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 12px;
  }
  
  .tech-stack-box img {
    width: 60%;
  }
}

/* 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: 16px;
  }
}

/* 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: 16px;
  }
}

/* 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 adjustments below 1275px (including tablet & mobile) */
@media screen and (max-width: 1275px) {

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

  .bento-exp .details-content li::before {
    display: block;
    top: 11px;
    transform: translateY(-50%);
  }

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

  /* Stack pill + description vertically for compressed horizontal space */
  .bento-exp .details-content li {
    padding-left: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .bento-edu .details-content li {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .exp-year {
    margin-right: 0;
  }

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

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

/* Custom responsive layout for screens between 770px and 1000px */
@media screen and (min-width: 770px) and (max-width: 1000px) {
  .about-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto max-content 1fr;
    grid-auto-rows: auto;
    gap: 20px;
  }

  .bento-bio {
    grid-column: span 2;
    grid-row: 1;
  }

  .bento-dp {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .bento-exp {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .bento-edu {
    grid-column: 2;
    grid-row: 3;
    height: 100%; /* Stretches to the base of the timeline card */
  }

  .bento-achieve {
    grid-column: span 2;
    grid-row: 4;
  }

  .bento-languages {
    grid-column: span 2;
    grid-row: 5;
  }

  .bento-skills {
    grid-column: span 2;
    grid-row: 6;
  }
}