/* =========================================================
   DIKA - PERSONAL PORTFOLIO
   Design tokens, base, layout, components, motion, responsive
   ========================================================= */

:root{
  /* ---- Colors ---- */
  --bg-void:        #050506;
  --bg-deep:        #0b0b0f;
  --bg-panel:       #101014;
  --red-core:       #ff1b3d;
  --red-bright:     #ff3b57;
  --red-deep:       #7a0014;
  --red-ember:      #ff5470;
  --text-primary:   #f5f5f8;
  --text-muted:     #9a9aa5;
  --text-faint:     #5c5c66;
  --glass-fill:     rgba(255,255,255,0.035);
  --glass-fill-hi:  rgba(255,27,61,0.07);
  --glass-border:   rgba(255,27,61,0.18);
  --glass-border-hi:rgba(255,59,87,0.4);

  /* ---- Type ---- */
  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Layout ---- */
  --max-w: 1120px;
  --nav-h: 76px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

/* ================= RESET ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--nav-h);
}
body{
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color: transparent; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1,h2,h3{ font-weight:700; letter-spacing:-0.02em; }

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg-void); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--red-core), var(--red-deep));
  border-radius:10px;
  border:2px solid var(--bg-void);
}
*{ scrollbar-width: thin; scrollbar-color: var(--red-core) var(--bg-void); }

/* ================= SELECTION ================= */
::selection{ background: var(--red-core); color:#fff; }

/* ================= BACKGROUND LAYERS ================= */
#particle-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(255,27,61,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(122,0,20,0.25), transparent 60%),
    var(--bg-void);
}

#cursor-glow{
  position:fixed;
  top:0; left:0;
  width:420px; height:420px;
  margin:-210px 0 0 -210px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,27,61,0.16) 0%, rgba(255,27,61,0.05) 40%, transparent 70%);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: screen;
  opacity:0;
  transition: opacity .4s ease;
  will-change: transform;
}
#cursor-glow.active{ opacity:1; }

.floating-shapes{
  position:absolute; inset:0;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}
.shape{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity:.5;
  will-change: transform;
}
.shape-1{ width:280px; height:280px; top:8%; left:8%; background: radial-gradient(circle, var(--red-core), transparent 70%); }
.shape-2{ width:340px; height:340px; bottom:5%; right:6%; background: radial-gradient(circle, var(--red-deep), transparent 70%); }
.shape-3{ width:180px; height:180px; top:55%; left:45%; background: radial-gradient(circle, var(--red-ember), transparent 70%); opacity:.3; }
.shape-4{ width:220px; height:220px; top:15%; right:20%; background: radial-gradient(circle, var(--red-bright), transparent 70%); opacity:.25; }

/* ================= LOADING SCREEN ================= */
#loading-screen{
  position:fixed; inset:0;
  z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  background: var(--bg-void);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
#loading-screen.loaded{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-core{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.loader-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color: var(--red-core);
  border-right-color: var(--red-deep);
  animation: spin 1.1s linear infinite;
}
.ring-2{ inset:14px; border-top-color: var(--red-ember); border-right-color: transparent; border-bottom-color: var(--red-core); animation-duration: 1.6s; animation-direction: reverse; }
.loader-text{ font-family: var(--font-mono); font-weight:600; font-size:15px; letter-spacing:.15em; color:var(--text-primary); }
.loader-dot{ color: var(--red-core); }
.loader-caption{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.3em;
  color: var(--text-faint);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* ================= NAVBAR ================= */
#navbar{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: rgba(5,5,6,0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
#navbar.scrolled{
  background: rgba(8,8,10,0.72);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.nav-container{
  width:100%;
  max-width: var(--max-w);
  margin:0 auto;
  padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-weight:800; font-size:19px; letter-spacing:.06em;
  color: var(--text-primary);
}
.nav-logo .dot{ color: var(--red-core); }
.nav-menu{ display:flex; gap:8px; align-items:center; }
.nav-link{
  position:relative;
  padding:9px 16px;
  font-size:14.5px; font-weight:500;
  color: var(--text-muted);
  border-radius:999px;
  transition: color .3s ease, background .3s ease;
}
.nav-link:hover{ color: var(--text-primary); background: rgba(255,255,255,0.04); }
.nav-link.active{ color:#fff; background: linear-gradient(135deg, rgba(255,27,61,0.18), rgba(255,27,61,0.03)); box-shadow: inset 0 0 0 1px var(--glass-border-hi); }

.nav-toggle{
  display:none;
  width:32px; height:22px;
  position:relative;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background: var(--text-primary);
  border-radius:2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease), background .3s ease;
}
.nav-toggle.active span:nth-child(1){ transform: translateY(10px) rotate(45deg); background: var(--red-core); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); background: var(--red-core); }

/* ================= LAYOUT HELPERS ================= */
main{ position:relative; z-index:2; }
.section{
  max-width: var(--max-w);
  margin:0 auto;
  padding: 120px 28px;
}
.section-header{ text-align:center; margin-bottom:56px; }
.eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:.25em;
  color: var(--red-ember);
  margin-bottom:14px;
}
.section-header h2{ font-size:clamp(28px,4vw,42px); }
.header-line{
  display:block;
  width:64px; height:3px;
  margin:18px auto 0;
  background: linear-gradient(90deg, var(--red-core), transparent);
  border-radius:3px;
}

/* ================= GLASS ================= */
.glass{
  background: linear-gradient(160deg, var(--glass-fill-hi), var(--glass-fill));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft), border-color .6s var(--ease-soft);
  will-change: transform;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: var(--nav-h) 24px 60px;
  overflow:hidden;
}
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

.profile-ring{
  position:relative;
  width:148px; height:148px;
  border-radius:50%;
  margin-bottom:28px;
}
.profile-ring::before{
  content:'';
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,27,61,0.45), rgba(255,27,61,0.08) 55%, transparent 72%);
  filter: blur(6px);
  animation: breathe-glow 3.2s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes breathe-glow{
  0%, 100%{ opacity:.55; transform: scale(0.96); }
  50%{ opacity:1; transform: scale(1.04); }
}
.profile-photo{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--glass-border-hi);
  box-shadow: 0 0 40px rgba(255,27,61,0.3);
}
.profile-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.hero-eyebrow{
  font-family: var(--font-mono);
  font-size:13px; letter-spacing:.2em;
  color: var(--text-muted);
  margin-bottom:10px;
}
.hero-name{
  font-size:clamp(52px,10vw,96px);
  line-height:1;
  background: linear-gradient(135deg,#ffffff 20%, var(--red-bright) 65%, var(--red-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 60px rgba(255,27,61,0.25);
  margin-bottom:18px;
}
.hero-subtitle{
  font-family: var(--font-mono);
  font-size:clamp(14px,2.2vw,18px);
  color: var(--text-muted);
  min-height:1.6em;
  margin-bottom:38px;
}
.type-cursor{
  display:inline-block; width:2px; margin-left:2px;
  background: var(--red-core);
  animation: blink 0.9s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* ---- Buttons ---- */
.btn{
  position:relative;
  overflow:hidden;
  padding:15px 32px;
  border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:.02em;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .5s ease;
  isolation:isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn span{ position:relative; z-index:2; }
.btn-primary{
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  color:#fff;
  box-shadow: 0 10px 30px -8px rgba(255,27,61,0.55);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 40px -10px rgba(255,27,61,0.75); }
.btn-outline{
  background: rgba(255,255,255,0.02);
  color: var(--text-primary);
  border:1px solid var(--glass-border-hi);
}
.btn-outline:hover{ transform: translateY(-3px) scale(1.015); border-color: var(--red-core); box-shadow: 0 12px 32px -12px rgba(255,27,61,0.5); background: rgba(255,27,61,0.06); }

.ripple{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim .65s ease-out;
  pointer-events:none;
  z-index:1;
}
@keyframes ripple-anim{ to{ transform: scale(3); opacity:0; } }

/* ---- Scroll indicator ---- */
.scroll-indicator{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-mouse{
  display:block; width:26px; height:42px;
  border:2px solid var(--glass-border-hi);
  border-radius:14px;
  position:relative;
}
.scroll-dot{
  position:absolute; top:7px; left:50%;
  width:4px; height:8px; margin-left:-2px;
  background: var(--red-core);
  border-radius:3px;
  animation: scroll-move 1.6s ease-in-out infinite;
}
@keyframes scroll-move{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ================= REVEAL ANIMATION ================= */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.visible{ opacity:1; transform:none; }

/* ================= ABOUT ================= */
.about-card{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:48px clamp(24px,5vw,56px);
}
.quote-mark{ width:34px; height:28px; fill: rgba(255,27,61,0.5); margin-bottom:18px; }
.about-card p{
  font-size:clamp(16px,2vw,18.5px);
  line-height:1.85;
  color:#dedee3;
  font-weight:300;
}

/* ================= INFO GRID ================= */
.info-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.info-card{
  padding:30px 26px;
  display:flex; flex-direction:column; gap:10px;
}
.info-card:hover{ transform: translateY(-6px) scale(1.015); box-shadow: 0 26px 60px -20px rgba(255,27,61,0.35); border-color: var(--glass-border-hi); }
.info-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,27,61,0.1);
  color: var(--red-ember);
  margin-bottom:6px;
}
.info-icon svg{ width:22px; height:22px; }
.info-label{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.15em; color: var(--text-faint); text-transform:uppercase; }
.info-value{ font-size:17px; font-weight:600; color: var(--text-primary); }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.contact-card{
  padding:34px 28px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.contact-card:hover{ transform: translateY(-6px) scale(1.015); border-color: var(--glass-border-hi); box-shadow: 0 26px 60px -20px rgba(255,27,61,0.35); }
.contact-icon{
  width:46px; height:46px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,27,61,0.22), rgba(255,27,61,0.04));
  color: var(--red-bright);
  margin-bottom:14px;
}
.contact-icon svg{ width:22px; height:22px; }
.contact-label{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.15em; color: var(--text-faint); text-transform:uppercase; }
.contact-value{ font-size:16.5px; font-weight:600; margin-bottom:18px; word-break:break-word; }
.contact-actions{ display:flex; gap:10px; width:100%; }
.btn-mini{
  flex:1;
  text-align:center;
  padding:10px 14px;
  font-size:13px; font-weight:600;
  border-radius:999px;
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .45s var(--ease-soft), background .45s ease, border-color .45s ease;
}
.btn-copy{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color: var(--text-primary); }
.btn-copy:hover{ border-color: var(--red-core); color:#fff; transform: translateY(-2px); }
.btn-copy.copied{ background: var(--red-core); border-color: var(--red-core); color:#fff; }
.btn-open{ background: linear-gradient(135deg, var(--red-bright), var(--red-deep)); color:#fff; }
.btn-open:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(255,27,61,0.6); }

/* ================= FOOTER ================= */
.footer{
  position:relative; z-index:2;
  text-align:center;
  padding:36px 20px 46px;
  color: var(--text-faint);
  font-size:13px;
  border-top:1px solid rgba(255,255,255,0.05);
}

/* ================= BACK TO TOP ================= */
#back-to-top{
  position:fixed;
  right:24px; bottom:24px;
  width:48px; height:48px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px rgba(255,27,61,0.6);
  opacity:0; visibility:hidden; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  z-index:900;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:none; }
#back-to-top svg{ width:20px; height:20px; }
#back-to-top:hover{ transform: translateY(-4px); }

/* ================= TOAST ================= */
#toast{
  position:fixed;
  left:50%; bottom:34px;
  transform: translate(-50%, 20px);
  padding:12px 22px;
  background: rgba(15,15,18,0.92);
  border:1px solid var(--glass-border-hi);
  border-radius:999px;
  font-size:13.5px; font-weight:500;
  color:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
  z-index:1100;
}
#toast.show{ opacity:1; transform: translate(-50%, 0); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .info-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .nav-menu{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch;
    background: rgba(8,8,10,0.96);
    backdrop-filter: blur(18px);
    padding:16px;
    gap:6px;
    border-bottom:1px solid var(--glass-border);
    transform: translateY(-130%);
    transition: transform .4s var(--ease);
  }
  .nav-menu.active{ transform: translateY(0); }
  .nav-link{ text-align:center; padding:13px 16px; }
  .nav-toggle{ display:flex; }
  .section{ padding:90px 20px; }
  .info-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .hero-buttons{ flex-direction:column; width:100%; }
  .btn{ width:100%; text-align:center; }
  .profile-ring{ width:120px; height:120px; }
  .profile-photo{ font-size:42px; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ================= FOCUS STATES ================= */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--red-core);
  outline-offset:3px;
  border-radius:6px;
}