@font-face {
    font-family: 'Aerospace Font';
    src: url('assets/Aerospace.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,body {
    margin : 0;
    scroll-behavior : smooth;
    background-color: #0C0C1C !important;
    overflow-x : hidden;
}

.navbar {
    background: url("images/wormhole.png") no-repeat center center;
    background-size: cover;
    height: 250px;
    width : 100%;
    display : flex;
    justify-content : center;
    flex-wrap : wrap;
    text-align : center;
}

.div-navbar {

    background-color: rgba(0, 0, 0, 0.9);
    height : 80px;
    opacity : 0.7;
    display: flex;
    justify-content : center !important;
    width : 100%;
    flex-wrap : wrap;
    border-radius : 16px;
}

.logo {
    position : absolute;
    top : 40px;
    left : 40px;
}

.nav {
    position : relative;
    top : 40px;
    list-style-type: none;
    display: flex;
    justify-content: center !important;
    text-align: center;
    padding: 0;
    margin: 0;
}

.li-nav {
    display : block;
    padding : 10px !important;
}

.a-nav {
    color : white;
    text-decoration : none;
    font-family: 'Aerospace Font', sans-serif;
}

.a-nav:hover {

    color : royalblue;
    text-decoration : underline;

}

.div-social {

    position : relative;
    top : 20px;
    display: flex;
    flex-wrap : wrap;
    justify-content: right !important;
    text-align: center;
    padding: 0;
    margin: 0;
    width : 40%;

}

.social {

    padding : 10px;

}

@media screen and (max-width: 792px) {
  a-nav {
    font-size: 8px !important;
  }

  .div-social {
        width : 50%;
    }

}



.div-title {
    background-color: #0C0C1C !important;
    display : flex;
    padding : 50px;
    text-align : center;
    justify-content : center;
    background-color : black;
}


h1{
    font-family: 'Aerospace Font', sans-serif;
}

.span1 {

    color : white;
}


.span2 {
    background: linear-gradient(#205FD4, #AD54E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.features {

    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : center;
    text-align : center;

}

.feature {

    padding : 30px;

}

h3 {

    background: linear-gradient(#205FD4, #AD54E8);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;

}

h2 {
    color : white;
    text-align : center;
}

.skills {

    display : flex;
    flex-direction : row;
    justify-content : center;
    flex-wrap : wrap;


}

.skill {
    padding : 20px;

}

.accomplishments {

    display : flex;
    flex-direction : row;
    justify-content : center;
    flex-wrap : wrap;


}

.accomplishment {
    padding : 20px;
}

.a-accomplishments {
    display: block;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(#205FD4, #AD54E8);
    color : white;
    text-align: center;
    padding: 10px;
    border-radius: 16px;
    text-decoration: none;
}

.a-accomplishments:hover {
    background : linear-gradient(#AD54E8, #205FD4);
    text-decoration : underline;
}

.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    perspective: 1000px;
    align-items: center;
}

.project {
    width: 240px;
    height: 300px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s ease-in-out;
    transform-style: preserve-3d;
}

.project:hover .project-inner {
    transform: rotateY(180deg);
}

.project-front,
.project-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    backface-visibility: hidden;
    background: #1a1a3e;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.project-back {
    transform: rotateY(180deg);
}

p, h3 {
    color: white;
    margin: 10px 0;
}

.a-go {
    background: linear-gradient(#205FD4, #AD54E8);
    color: white;
    border-radius: 16px;
    text-decoration: none;
    padding: 10px 20px;
    margin-top: 20px;
}

.a-go:hover {
    background: linear-gradient(#AD54E8, #205FD4);
    text-decoration: underline;
}

.div-projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.div-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 1000px;
    text-align: center;
    padding: 20px;
    margin: 0 auto;
}


.a-code {
    background: linear-gradient(#205FD4, #AD54E8);
    color: white;
    border-radius: 16px;
    text-decoration: none;
    padding: 10px 20px;
    width : 100px;
    margin-top: 20px;
}

.a-code {
    background: linear-gradient(#AD54E8, #205FD4);
    text-decoration: underline;
}

.img-project{
    margin : 10px;
}


.animate-top {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 2.5s ease-out;
}

.animate-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-bottom {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s ease-out, transform 2.5s ease-out;

}

.animate-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

embed:hover {

    padding : 30px;
    transition : 1s ease-out;
}

.form {
    display : flex;
    justify-content : center;
    text-align : center;
}

form {
    display : flex;
    flex-direction : column;
    justify-content : center;
    text-align : center;
}

input {
    padding : 10px;
    margin : 10px;
}
input[type="text"] {
    width : 400px;
}

input[type="submit"] {
    border-radius : 16px;
}

:root{
      --bg: #060617;
      --blue:#4c7bfd;
      --purple:#7c4dff;
      --glass: rgba(255,255,255,0.04);
      --text: #e9eefc;
    }

    #site-loader {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: radial-gradient(ellipse at center, rgba(10,12,30,0.95) 0%, var(--bg) 60%);
      z-index: 99999;
      transition: opacity 420ms ease, visibility 420ms;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      overflow: hidden;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    body.loading { overflow: hidden; }

    .stars {
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(#ffffff 0.6px, transparent 0.7px),
        radial-gradient(#ffffff 0.9px, transparent 1px);
      background-size: 150px 150px, 300px 300px;
      opacity: 0.12;
      mix-blend-mode: screen;
      animation: drift 40s linear infinite;
      filter: blur(0.3px);
      transform: translateZ(0);
      pointer-events: none;
    }
    @keyframes drift { from{transform:translateY(0)} to{transform:translateY(-50px)} }

    .loader-card {
      position: relative;
      width: 220px;
      height: 220px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      box-shadow: 0 8px 40px rgba(10,12,30,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      backdrop-filter: blur(6px);
      color:var(--text);
    }

    .loader-label {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      letter-spacing: 0.6px;
      color: rgba(230,235,255,0.9);
    }

    .rocket-wrap {
      width: 110px;
      height: 110px;
      display:flex;
      align-items:center;
      justify-content:center;
      transform-origin: center;
      animation: bob 1600ms ease-in-out infinite;
    }
    @keyframes bob {
      0% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-8px) rotate(2deg); }
      100% { transform: translateY(0) rotate(-2deg); }
    }

    .rocket-flame { transform-origin: top center; animation: flicker 420ms linear infinite; }
    @keyframes flicker {
      0% { transform: scaleY(1); opacity:1; }
      50% { transform: scaleY(0.85); opacity:0.9; }
      100% { transform: scaleY(1); opacity:1; }
    }

    .orbit {
      position:absolute;
      width: 40px;
      height: 40px;
      right: -18px;
      top: -16px;
      transform-origin: 50% 50%;
      animation: orbit 3200ms linear infinite;
      opacity: 0.95;
    }
    @keyframes orbit { from { transform: rotate(0deg) translateX(0) } to { transform: rotate(360deg) translateX(0) } }

    .glow {
      position:absolute;
      width: 240px;
      height: 240px;
      border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(124,77,255,0.12), transparent 20%),
                  radial-gradient(circle at 70% 70%, rgba(76,127,253,0.12), transparent 20%);
      filter: blur(18px);
      z-index:0;
      pointer-events:none;
    }

    #site-loader.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .rocket-wrap, .orbit, .stars { animation: none; }
    }

    @media (max-width:420px) {
      .loader-card { width: 180px; height: 180px; }
      .rocket-wrap { width: 88px; height: 88px; }
    }

    .animate-top {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 600ms ease, opacity 600ms ease;
}

.animate-top.visible {
  transform: translateY(0);
  opacity: 1;
}

.animate-bottom {
  transform: translateY(-100px);
  opacity: 0;
  transition: transform 600ms ease, opacity 600ms ease;
}

.animate-bottom.visible {
  transform: translateY(0);
  opacity: 1;
}

/* loader fade */
#site-loader.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.hamburger{
position: absolute;
right: 24px;
top: 28px;
width: 48px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
z-index: 9999;
padding: 8px;
}
.hamburger:focus{ outline: 2px solid rgba(124,77,255,0.6); outline-offset: 4px; border-radius: 8px; }
.hamburger .bar{
display: block;
width: 26px;
height: 2.5px;
margin: 4px 0;
border-radius: 2px;
background: linear-gradient(#eaf0ff, #d6d6ff);
transition: transform 260ms ease, opacity 260ms ease;
}


/* open state */
.hamburger.open .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.open .bar:nth-child(2){ opacity: 0; }
.hamburger.open .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* mobile nav panel */
.nav-mobile{
position: fixed;
right: 16px;
top: 80px;
background: linear-gradient(180deg, rgba(14,15,30,0.96), rgba(8,9,25,0.92));
border-radius: 12px;
padding: 18px 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
min-width: 200px;
backdrop-filter: blur(8px);
z-index: 9998;
transition: transform 300ms ease, opacity 300ms ease;
}


.nav-mobile[hidden]{
opacity: 0;
transform: translateY(-10px) scale(0.98);
pointer-events: none;
}


.nav-mobile:not([hidden]){ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }


.nav-mobile .nav{ display:flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.nav-mobile .li-nav{ padding: 8px 6px; }
.nav-mobile .a-nav{ color: var(--text); font-size: 16px; }
.nav-mobile .a-nav:hover{ color: #9fb7ff; }


/* Menu mobile di default nascosto */
.nav-mobile[hidden] {
  display: none;
}

/* Quando viene aperto */
.nav-mobile {
  position: absolute;
  top: 80px; /* sotto la navbar */
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.95);
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  z-index: 1000;
}

.nav-mobile .li-nav {
  margin: 10px 0;
}

.nav-mobile .a-nav {
  font-size: 18px;
  color: white;
  text-decoration: none;
}
.nav-mobile .a-nav:hover {
  color: royalblue;
  text-decoration: underline;
}
/* Menu mobile di default nascosto */
.nav-mobile[hidden] {
  display: none !important;
}

/* Quando visibile (JS rimuove hidden) */
.nav-mobile {
  position: absolute;
  top: 80px; /* subito sotto la navbar */
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.95);
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  z-index: 1000;
}

/* Stile link mobile */
.nav-mobile .li-nav {
  margin: 10px 0;
}
.nav-mobile .a-nav {
  font-size: 18px;
  color: white;
  text-decoration: none;
}
.nav-mobile .a-nav:hover {
  color: royalblue;
  text-decoration: underline;
}

@media screen and (max-width: 792px) {
  nav:not(.nav-mobile) {
    display: none !important;
  }
}

@media screen and (min-width: 793px) {
  .nav-mobile {
    display: none !important;
  }
  .hamburger {
    display : none !important;
  }
}


.thesis-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.thesi-card {
    background: #11112a;
    color: #fff;
    padding: 1rem;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
}

.slides-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.carousel-controls button {
    background: linear-gradient(90deg,#205FD4,#AD54E8);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}
.curriculum {
    background-color : #1a1a3e;
    width : 40%;
    text-align : center;
    margin : 30px auto;
    border-radius : 16px;
}

@media screen and (max-width : 462px) {
    .curriculum {

        width : 100%;
    }


}

.submit-btn {
    width : 15%;
    margin : 0 auto;
}
:root {
  --color-primary: #205FD4;
  --color-accent:  #AD54E8;
  --color-dark:    #0C0C1C;
  --color-text:    #fff;
}

#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-dark);
  color: var(--color-text);
  padding: 1rem;
  font-size: 0.95rem;
  z-index: 9999;
}

.cookie-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.5rem 1rem;
  border-radius: 6px;
}}




.hero-3d { position: relative; z-index: 5; padding-top: 28px; }

.hero-3d::before { z-index: 2; pointer-events:none; position:absolute; inset:0; }

.model-wrap { width: 100%; display:flex; justify-content:center; align-items:center; z-index: 6; }
.shuttle-model { width: 100%; max-width: 480px; height: 340px; border-radius: 18px; overflow: hidden; z-index: 6; display:block; }

.shuttle-model img[slot="poster"] { width:100%; height:100%; object-fit:cover; display:block; }

#app .animate-top, .hero-3d .animate-top { transform: translateY(40px) !important; opacity: 0 !important; transition: transform 700ms cubic-bezier(.2,.9,.28,1) 150ms, opacity 700ms ease 150ms !important; }
#app .animate-top.visible, .hero-3d .animate-top.visible { transform: translateY(0) !important; opacity: 1 !important; }

#app .animate-bottom, .hero-3d .animate-bottom { transform: translateY(-40px) !important; opacity: 0 !important; transition: transform 700ms cubic-bezier(.2,.9,.28,1) 150ms, opacity 700ms ease 150ms !important; }
#app .animate-bottom.visible, .hero-3d .animate-bottom.visible { transform: translateY(0) !important; opacity: 1 !important; }

.hero-text .cta { animation: pulseGlow 2200ms ease-in-out infinite; }
@keyframes pulseGlow {
  0% { box-shadow: 0 8px 30px rgba(32,95,212,0.12); transform: translateY(0); }
  50% { box-shadow: 0 20px 56px rgba(173,84,232,0.18); transform: translateY(-4px); }
  100% { box-shadow: 0 8px 30px rgba(32,95,212,0.12); transform: translateY(0); }
}

.floating-badges { margin-top:14px; display:flex; gap:10px; align-items:center; }
.floating-badges .badge {
  padding:8px 12px; border-radius:999px; font-weight:600; font-size:0.9rem;
  background: linear-gradient(90deg, rgba(32,95,212,0.12), rgba(173,84,232,0.12));
  color: #fff; border: 1px solid rgba(255,255,255,0.04);
  transform-origin: center;
  animation: floatBadge 4200ms ease-in-out infinite;
}
.floating-badges .badge:nth-child(2){ animation-delay: 260ms; }
.floating-badges .badge:nth-child(3){ animation-delay: 520ms; }

@keyframes floatBadge {
  0% { transform: translateY(0) rotate(-0.5deg); opacity: 0.94; }
  50% { transform: translateY(-8px) rotate(0.5deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-0.5deg); opacity: 0.94; }
}

.social-proof { margin-top: 14px; padding: 6px 0; z-index: 4; }
.marquee { overflow:hidden; width:100%; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius: 12px; padding: 6px 12px; }
.marquee-track {
  display:inline-flex; gap:56px; align-items:center;
  animation: marqueeAnim 18s linear infinite;
  white-space:nowrap;
  font-size:0.95rem; color: rgba(255,255,255,0.88);
}
.marquee-track span { display:inline-block; padding: 0 12px; }
@keyframes marqueeAnim {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.social-floating {
  position: fixed; right: 18px; bottom: 18px; display:flex; flex-direction:column; gap:12px; z-index:9998;
}
.social-floating a {
  display:block; width:44px; height:44px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 8px 20px rgba(2,4,20,0.6);
  text-indent:-9999px; overflow:hidden; border:1px solid rgba(255,255,255,0.04);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.social-floating a:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 46px rgba(76,127,253,0.14); }

.social-floating .sf-link { background-image: linear-gradient(90deg,#0a66c2,#2d7de0); }
.social-floating .sf-git  { background-image: linear-gradient(90deg,#333,#6e6e6e); }
.social-floating .sf-mail { background-image: linear-gradient(90deg,#ad54e8,#205fd4); }

.model-wrap:hover .shuttle-model { transform: perspective(900px) translateY(-8px) rotateX(2deg) scale(1.02); transition: transform 420ms cubic-bezier(.2,.9,.28,1); }

* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .floating-badges .badge, .hero-text .cta, .shuttle-model, .hero-inner { animation: none !important; transition: none !important; transform: none !important; }
}

@media screen and (max-width: 920px) {
  .shuttle-model { max-width: 100%; height: 300px; }
  .hero-inner { grid-template-columns: 1fr; gap:16px; align-items: center; }
  .social-floating { right: 8px; bottom: 8px; }
  .floating-badges { justify-content:center; }
}

.hero-inner {
    text-align : center;
}
.floating-badges {
  text-align: center;
  margin: 0 auto;
}
.floating-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px auto;
  width: 100%;
}







:root{
--accent-1: #205FD4;
--accent-2: #AD54E8;
--glow-1: rgba(32,95,212,0.14);
--glow-2: rgba(173,84,232,0.18);
--glass-strong: rgba(255,255,255,0.035);
--card-grad: linear-gradient(135deg,var(--accent-1),var(--accent-2));
--shine: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.08) 100%);
--border-glow: 0 8px 28px rgba(124,77,255,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
}

html::before{
content:"";
position:fixed;
inset:0;
background: radial-gradient(1200px 600px at 10% 20%, rgba(32,95,212,0.04), transparent 8%),
radial-gradient(900px 500px at 90% 80%, rgba(173,84,232,0.03), transparent 8%);
pointer-events:none;
z-index:1;
mix-blend-mode: screen;
opacity:0.9;
transform: translateZ(0);
transition: opacity 400ms ease;
}

.header-sticky{
position: sticky;
top: 8px;
z-index: 9999;
margin: 8px 0;
transition: transform 280ms ease, backdrop-filter 280ms ease, box-shadow 280ms ease;
will-change: transform;
}

.header-sticky.scrolled{
transform: translateY(-6px);
backdrop-filter: blur(6px) saturate(120%);
box-shadow: 0 12px 40px rgba(2,6,20,0.6);
border-radius: 14px;
}

h1, h2, h3{
position: relative;
z-index: 3;
}

h1::after{
content: "";
position: absolute;
inset: auto 20% -6px 20%;
height: 6px;
background: linear-gradient(90deg, rgba(32,95,212,0.22), rgba(173,84,232,0.22));
border-radius: 6px;
filter: blur(10px);
opacity: 0.85;
z-index: -1;
}

.neon{
text-shadow: 0 4px 20px rgba(32,95,212,0.14), 0 2px 8px rgba(173,84,232,0.08);
animation: neonPulse 3.6s ease-in-out infinite;
}

@keyframes neonPulse{
0% { text-shadow: 0 6px 28px rgba(32,95,212,0.18), 0 3px 12px rgba(173,84,232,0.10); transform: translateY(0); }
50% { text-shadow: 0 12px 46px rgba(32,95,212,0.28), 0 6px 22px rgba(173,84,232,0.16); transform: translateY(-3px); }
100% { text-shadow: 0 6px 28px rgba(32,95,212,0.18), 0 3px 12px rgba(173,84,232,0.10); transform: translateY(0); }
}

a.cta, .a-go, .a-code, .btn-primary{
position: relative;
overflow: hidden;
transition: transform 260ms cubic-bezier(.2,.9,.28,1), box-shadow 260ms ease;
background-size: 200% 200%;
animation: gradientShift 6s linear infinite;
}

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

a.cta:hover, .a-go:hover, .a-code:hover, .btn-primary:hover{
transform: translateY(-6px) scale(1.02);
box-shadow: 0 18px 48px var(--glow-2);
}

.btn-ghost:focus, .a-nav:focus, .hamburger:focus{
outline: none;
box-shadow: 0 0 0 4px rgba(124,77,255,0.12);
border-radius: 8px;
}

.projects .project{
transform-origin: center;
transition: transform 420ms cubic-bezier(.2,.9,.28,1), box-shadow 420ms ease;
}

.projects .project:hover{
transform: translateY(-10px) scale(1.02);
box-shadow: 0 18px 46px rgba(2,4,20,0.6);
}

.project-inner{
perspective: 1600px;
}

.project-front::before, .project-back::before{
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
pointer-events: none;
mix-blend-mode: overlay;
}

.project-front::after, .project-back::after{
content: "";
position: absolute;
inset: 2px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.06));
pointer-events: none;
}

.project-front img{
transform-origin: center;
transition: transform 420ms cubic-bezier(.2,.9,.28,1);
}

.project:hover .project-front img{
transform: scale(1.04) translateZ(16px);
}

.project-inner.tilt{
transform-style: preserve-3d;
transition: transform 360ms cubic-bezier(.2,.9,.28,1);
}

.project-inner.tilt:hover{
transform: rotateX(6deg) rotateY(-6deg) translateZ(6px);
}

.project:nth-child(1){ animation: fadeInUp 720ms ease 120ms both; }
.project:nth-child(2){ animation: fadeInUp 720ms ease 180ms both; }
.project:nth-child(3){ animation: fadeInUp 720ms ease 240ms both; }
.project:nth-child(4){ animation: fadeInUp 720ms ease 300ms both; }
.project:nth-child(5){ animation: fadeInUp 720ms ease 360ms both; }

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

.skills .skill{
transition: transform 320ms cubic-bezier(.2,.9,.28,1), box-shadow 320ms ease;
border-radius: 12px;
padding: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
margin: 6px;
}

.skills .skill:hover{
transform: translateY(-6px) scale(1.03);
box-shadow: 0 14px 36px rgba(32,95,212,0.07);
}

.skill img{
transform-origin: center;
transition: transform 320ms ease;
}

.skill:hover img{
transform: scale(1.08) rotate(-6deg);
}

.marquee-track:hover{ animation-play-state: paused; cursor: default; }

.model-wrap{
position: relative;
transition: transform 420ms cubic-bezier(.2,.9,.28,1);
}

.shuttle-model{
transition: transform 420ms cubic-bezier(.2,.9,.28,1), box-shadow 420ms ease;
box-shadow: var(--border-glow);
}

.shuttle-model:focus, .shuttle-model:hover{
transform: translateY(-8px) rotateX(2deg) scale(1.02);
box-shadow: 0 30px 80px rgba(32,95,212,0.10), 0 8px 40px rgba(173,84,232,0.06);
}

.hero-inner:after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle at 50% 12%, rgba(255,255,255,0.02), transparent 8%);
z-index: 2;
}

.floating-badges .badge{
transition: transform 420ms cubic-bezier(.2,.9,.28,1), box-shadow 420ms ease, opacity 320ms ease;
}

.floating-badges .badge:hover{
transform: translateY(-8px) scale(1.05);
box-shadow: 0 20px 46px rgba(32,95,212,0.10);
}

.cookie-actions button{ transition: transform 180ms ease, box-shadow 180ms ease; }
.cookie-actions button:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(2,4,20,0.5); }

#cookie-banner{ transform: translateY(14px); transition: transform 420ms cubic-bezier(.2,.9,.28,1), opacity 300ms ease; }
#cookie-banner.show{ transform: translateY(0); opacity: 1; }

#site-loader{ transition: opacity 420ms ease, transform 420ms ease; }
#site-loader.fade-out{ transform: translateY(-6px) scale(0.995); opacity: 0; pointer-events: none; }

.back-to-top{
position: fixed;
right: 18px;
bottom: 18px;
width: 52px;
height: 52px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
box-shadow: 0 18px 40px rgba(2,4,20,0.6);
z-index: 9999;
opacity: 0;
transform: translateY(10px) scale(0.98);
transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.9,.28,1);
}

.back-to-top.visible{
opacity: 1;
transform: translateY(0) scale(1);
}

.back-to-top svg{ filter: drop-shadow(0 6px 18px rgba(32,95,212,0.12)); }

.progress-top{
position: fixed;
left: 0;
top: 0;
height: 4px;
width: 100%;
z-index: 99999;
background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
}

.progress-top .bar{
height: 4px;
width: 0%;
background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
transition: width 120ms linear;
box-shadow: 0 6px 20px rgba(32,95,212,0.12);
}

data-tooltip
{
position: relative;
cursor: help;
}

content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(8px);
bottom: 100%;
white-space: nowrap;
padding: 8px 10px;
border-radius: 8px;
background: rgba(12,12,28,0.95);
color: #fff;
font-size: 0.85rem;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
transform-origin: 50% 100%;
box-shadow: 0 8px 28px rgba(2,4,20,0.6);
z-index: 9999;
}

data-tooltip
:hover::after, data-tooltip
:focus::after{
opacity: 1;
transform: translateX(-50%) translateY(0);
}

button.ripple{
position: relative;
overflow: hidden;
}

button.ripple:after{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.06), transparent 20%);
opacity: 0;
transition: opacity 340ms ease;
pointer-events: none;
}

button.ripple:active:after{
opacity: 1;
transition: opacity 160ms linear;
}

.input-glass{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.04);
padding: 12px 14px;
border-radius: 12px;
transition: box-shadow 220ms ease, transform 220ms ease;
}

.input-glass:focus{
box-shadow: 0 12px 36px rgba(32,95,212,0.08);
transform: translateY(-2px);
outline: none;
}

.thesi-card:hover{
transform: translateY(-8px) scale(1.01);
box-shadow: 0 24px 60px rgba(2,4,20,0.68);
transition: transform 420ms cubic-bezier(.2,.9,.28,1), box-shadow 420ms ease;
}

.slides-container{ border-radius: 12px; overflow: hidden; box-shadow: 0 18px 46px rgba(2,4,20,0.6); }

@media (prefers-reduced-motion: reduce){
.neon, .projects .project, .skills .skill, .marquee-track, .floating-badges .badge, .hero-text .cta, .shuttle-model { animation: none !important; transition: none !important; transform: none !important; }
}

.answer {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    backdrop-filter: blur(10px);
    animation: fadeIn 1s ease-in-out forwards;
}

.suggestions {
    margin-top: 2rem;
}

.suggestion {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.sugg-el {
    background: linear-gradient(135deg, #205FD4, #AD54E8);
    color: #fff;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    min-width: 180px;
}

.sugg-el:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}