* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050505;
  color: #E2E8F0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,
.font-display {
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.02em;
}

header,
main,
footer {
  position: relative;
  z-index: 10;
}


/* =========================
   THREE.JS BACKGROUND
========================= */

#canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: #050505;
  pointer-events: none;
  overflow: hidden;
}

#canvas-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* =========================
   NOISE OVERLAY
========================= */

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .035;

  background-image:
  url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}


/* =========================
   SCROLLBAR
========================= */

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

::-webkit-scrollbar-track {
  background:#050505;
}

::-webkit-scrollbar-thumb {
  background:#1A1A1A;
  border-radius:10px;
  border:1px solid rgba(0,229,255,.2);
}

::-webkit-scrollbar-thumb:hover {
  background:#00E5FF;
}


/* =========================
   GLASS PANELS
========================= */

.glass-panel {

  background:
  rgba(10,12,16,.48);

  backdrop-filter:
  blur(16px);

  -webkit-backdrop-filter:
  blur(16px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 8px 32px rgba(0,0,0,.3);

  transition:
  all .4s cubic-bezier(.4,0,.2,1);
}


.glass-panel:hover {

  background:
  rgba(15,18,22,.6);

  border-color:
  rgba(255,255,255,.15);

  transform:
  translateY(-4px);
}


/* =========================
   BUTTON
========================= */

.btn-chic-cyan {

  background:
  rgba(0,229,255,.05);

  backdrop-filter:
  blur(4px);

  color:#fff;

  border:
  1px solid rgba(0,229,255,.4);

  position:relative;

  overflow:hidden;

  transition:
  all .3s ease;
}


.btn-chic-cyan:before {

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(0,229,255,.15),
    transparent
  );

  transform:
  translateX(-100%);

  transition:
  transform .5s ease;
}


.btn-chic-cyan:hover:before {

  transform:
  translateX(100%);
}


.btn-chic-cyan:hover {

  border-color:#00E5FF;

  box-shadow:
  0 0 20px rgba(0,229,255,.2);

  background:
  rgba(0,229,255,.1);
}


/* =========================
   ANIMATION
========================= */

@keyframes fadeUp {

from {
  opacity:0;
  transform:translateY(20px);
}

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

}


.animate-fade-up {

animation:
fadeUp .8s ease forwards;

}


/* =========================
   PORTFOLIO CARDS
========================= */

.portfolio-card {

position:relative;

transform-style:preserve-3d;

will-change:transform;

}


.portfolio-card:nth-child(1){

animation:
floatOne 7s ease-in-out infinite;

}


.portfolio-card:nth-child(2){

animation:
floatTwo 8s ease-in-out infinite;

}


.portfolio-card:nth-child(3){

animation:
floatThree 7.5s ease-in-out infinite;

}



@keyframes floatOne {

0%,100% {
 transform:
 translateY(0)
 rotate(-.4deg);
}

50% {
 transform:
 translateY(-10px)
 rotate(.4deg);
}

}


@keyframes floatTwo {

0%,100% {
 transform:
 translateY(5px)
 rotate(.5deg);
}

50% {
 transform:
 translateY(-8px)
 rotate(-.5deg);
}

}


@keyframes floatThree {

0%,100% {
 transform:
 translateY(-2px)
 rotate(-.3deg);
}

50% {
 transform:
 translateY(-12px)
 rotate(.5deg);
}

}


/* =========================
   BROWSER MOCKUP
========================= */


.browser-frame {

background:
rgba(5,6,8,.82);

border:
1px solid rgba(255,255,255,.15);

box-shadow:
0 20px 60px rgba(0,0,0,.5),
0 0 35px rgba(0,229,255,.04);

overflow:hidden;

}


.browser-bar {

height:42px;

background:
rgba(12,14,18,.92);

border-bottom:
1px solid rgba(255,255,255,.08);

display:flex;

align-items:center;

padding:0 14px;

gap:8px;

}


.browser-dot {

width:10px;

height:10px;

border-radius:50%;

}


.browser-address {

flex:1;

margin-left:8px;

height:25px;

border:
1px solid rgba(255,255,255,.07);

border-radius:6px;

background:
rgba(255,255,255,.035);

display:flex;

align-items:center;

padding:0 10px;

color:#64748b;

font:
10px 'DM Mono',monospace;

overflow:hidden;

white-space:nowrap;

}


.browser-content {

height:310px;

background:#fff;

position:relative;

}


.browser-content iframe {

width:100%;

height:100%;

border:0;

background:#fff;

}


.card-glow {

position:absolute;

inset:-1px;

pointer-events:none;

border-radius:inherit;

background:
linear-gradient(
120deg,
transparent 20%,
rgba(0,229,255,.08),
transparent 80%
);

opacity:0;

transition:
opacity .4s;

}


.portfolio-card:hover .card-glow {

opacity:1;

}


.site-meta {

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:18px 20px;

background:
rgba(8,9,11,.9);

border-top:
1px solid rgba(255,255,255,.07);

}


.site-url {

font:
11px 'DM Mono',monospace;

color:#94a3b8;

letter-spacing:.08em;

}


.site-number {

font:
10px 'DM Mono',monospace;

color:#00E5FF;

letter-spacing:.15em;

}


/* =========================
   HERO ORBIT
========================= */


.hero-orbit {

position:absolute;

width:460px;

height:460px;

border:
1px solid rgba(0,229,255,.08);

border-radius:50%;

left:50%;

top:50%;

transform:
translate(-50%,-50%);

pointer-events:none;

}


.hero-orbit:before,
.hero-orbit:after {

content:'';

position:absolute;

border-radius:50%;

inset:35px;

border:
1px solid rgba(177,156,217,.06);

}


.hero-orbit:after {

inset:80px;

border-color:
rgba(0,255,136,.05);

}


/* =========================
   RESPONSIVE
========================= */


@media(max-width:768px){

.browser-content {

height:250px;

}


.hero-orbit {

width:300px;

height:300px;

}


.portfolio-card:nth-child(n){

animation:none;

}

}



/* Reduced Motion */

@media(prefers-reduced-motion:reduce){

*,
*:before,
*:after {

scroll-behavior:auto!important;

animation-duration:.01ms!important;

animation-iteration-count:1!important;

transition-duration:.01ms!important;

}

}

/* =========================
   CYBERDELIA TEXT GRADIENT
========================= */

.cyber-gradient {
  background: linear-gradient(
    90deg,
    #00E5FF 0%,
    #C084FC 50%,
    #00FF88 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}