/* ===================================================
THEME VARIABLES
=================================================== */
:root {
  --font-base: 'Inter', sans-serif;
  --font-headings: 'Merriweather', serif;
  --bg-color: #ffffff;
  --text-color: #121212;
  --accent-color: #0077ff;
  --accent-text: #ffffff;
  --section-bg: #f5f5f5;
  --tooltip-bg: #121212;
  --tooltip-text: #ffffff;
  --accent-hover: #0056b3;
  --status-success: #28a745;
  --status-error: #dc3545;
}
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f4f4f4;
  --accent-color: #B6FC34;
  --accent-text: #000000;
  --section-bg: #1f1f1f;
  --tooltip-bg: #ffffff;
  --tooltip-text: #000000;
  --accent-hover: #97e020;
}
[data-theme="light"] .nav-links a.active { color: var(--accent-color); }

/* ===================================================
GLOBAL BASE STYLES
=================================================== */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  margin: 0; padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-headings); margin: 0 0 0.6rem; }
h2 { font-size: 2.25rem; line-height: 1.25; }
h3 { font-size: 1.35rem; line-height: 1.35; }
html, body { height: 100%; max-height: 100%; overflow-x: hidden; }

/* ===================================================
HERO / HEADER
=================================================== */
header.hero {
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('../assets/images/mypic.webp') no-repeat center center / cover;
  color: #fff;
  min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh;
  padding: 4rem 1rem 2rem;
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  content-visibility: auto;
}
.hero-content { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
.hero-name { font-size: 3.5rem; font-weight: 900; letter-spacing: -1px; line-height: 1.2; margin: 0; }
.hero-role { font-size: 1.2rem; font-weight: 400; margin-top: 0.75rem; color: #e0e0e0; display: flex; justify-content: center; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.role-logo { height: 2.5rem; margin-left: 0.4rem; transform: translateY(2px); transition: transform 0.2s ease-in-out; }
.role-logo.neon { filter: none !important; }
.role-logo:hover { transform: scale(1.05); }
@keyframes float { 0%,100%{transform:translateY(2px);} 50%{transform:translateY(-4px);} }
.bounce { animation: float 3s ease-in-out infinite; }
.hero-tagline {
  font-size: 1rem; margin: 1.2rem auto 0;
  font-family: 'DejaVu Sans Mono','Courier New',monospace;
  color: #B6FC34; max-width: 600px; line-height: 1.6; text-align: center;
  text-shadow: 0 0 6px rgba(182,252,52,0.35);
}
.cursor { display: inline-block; font-weight: bold; animation: blink 0.8s steps(2, start) infinite; color: #B6FC34; text-shadow: 0 0 8px rgba(182,252,52,0.55); }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ===================================================
SCROLL HINT
=================================================== */
.scroll-down-hint {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  animation: fadeIn 1.5s ease forwards; opacity: 0;
  transition: opacity 0.25s ease;
}
.scroll-down-hint p { color: #B6FC34; font-size: 0.75rem; margin: 0; letter-spacing: 0.4px; }
.scroll-down-hint .circle {
  width: 20px; height: 20px; border: 1px solid #B6FC34; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #B6FC34; font-size: 0.6rem;
  animation: bounce 2s infinite ease-in-out; transition: transform 0.2s ease;
}
.scroll-down-hint.is-hidden {
  opacity: 0; pointer-events: none;
  animation: none !important; /* ✅ override fadeIn keep */
}
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
@keyframes fadeIn { to { opacity: 1; } }

/* ===================================================
NAVIGATION BAR
=================================================== */
.navbar {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 999;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 2rem;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3); transition: background 0.3s ease; color: #ffffff;
}
.nav-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: #ffffff; text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--accent-hover); }
.nav-links a.active { color: var(--accent-color); }
[data-theme="light"] .navbar { background: rgba(255,255,255,0.8); box-shadow: 0 2px 10px rgba(0,0,0,0.1); color: #121212; }
[data-theme="light"] .nav-links a { color: #121212; }
[data-theme="light"] .nav-links a:hover { color: var(--accent-hover); }
.theme-toggle-btn { background: none; border: none; font-size: 1.3rem; color: inherit; cursor: pointer; transition: transform 0.3s ease; }
.theme-toggle-btn:hover { transform: rotate(15deg); }
.hamburger { display: none; background: none; border: none; font-size: 1.5rem; color: inherit; cursor: pointer; }

/* ===================================================
SECTIONS & LAYOUT
=================================================== */
section { padding: 3.5rem 2rem; max-width: 1200px; margin: auto; background-color: var(--bg-color); }
.quote { font-size: 1.6rem; font-style: italic; text-align: center; padding: 2rem; background: var(--section-bg); border-left: 4px solid var(--accent-color); }
.quote span { display: block; margin-top: 1rem; font-size: 1.2rem; color: var(--accent-color); }
.skills ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.skills li { background: var(--accent-color); color: var(--accent-text); padding: 0.5rem 1rem; border-radius: 5px; }

/* ===================================================
PROJECTS
=================================================== */
.project-card { background: var(--section-bg); padding: 1rem; border: 1px solid #444; border-radius: 5px; margin-bottom: 1rem; }

/* ===================================================
TOOLTIP ICONS
=================================================== */
.wrapper { display: flex; justify-content: center; gap: 20px; margin-top: 1.5rem; }
.wrapper .icon { display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; transition: transform 0.3s; }
.wrapper .icon span { height: 60px; width: 60px; background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; transition: background 0.3s, transform 0.3s; }
.wrapper .icon:hover span { transform: scale(1.1); }
.tooltip { position: absolute; bottom: 100%; background: var(--tooltip-bg); color: var(--tooltip-text); padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 25px; margin-bottom: 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.icon:hover .tooltip { opacity: 1; }

/* ===============================
   CONTACT — Liquid Glass (fixed)
=============================== */

/* Section + socials */
.contact-section { padding: 3rem 1rem; text-align: center; }
.contact-cards-icons{
  display:flex; flex-wrap:wrap; gap:1.5rem; /* a hair more space for bigger chips */
  margin-bottom:2rem; justify-content:center; align-items:center; width:100%;
}

/* Social icon: glass pill (bigger) */
.contact-cards-icons .circle-icon{
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:50%;
  font-size:28px;                   /* scales FA icons */
  line-height: 1;                   /* prevent tiny vertical mis-centering */
  color:#fff; text-decoration:none;
  border:1px solid transparent;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box,
    rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.contact-cards-icons .circle-icon i{ pointer-events:none; } /* clicks hit the link, not the icon */

[data-theme="light"] .contact-cards-icons .circle-icon{
  color:#121212;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)) padding-box,
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.05)) border-box;
  box-shadow: 0 12px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
}

/* Accent “glass chip” on hover — no outer ring */
.contact-cards-icons .circle-icon:hover{
  transform: translateY(-2px) scale(1.03);
  color: var(--accent-text);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-color) 90%, transparent),
      color-mix(in srgb, var(--accent-color) 70%, transparent)
    ) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.12)) border-box;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.25);  /* ← no halo ring here */
}

/* Keyboard focus — keep a thinner accessible ring */
.contact-cards-icons .circle-icon:focus-visible{
  outline: none;
  transform: translateY(-2px) scale(1.03);
  color: var(--accent-text);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-color) 90%, transparent),
      color-mix(in srgb, var(--accent-color) 70%, transparent)
    ) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.12)) border-box;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent), /* thinner ring */
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* If both hover & focus-visible, suppress the extra halo (purely cosmetic) */
.contact-cards-icons .circle-icon:hover:focus-visible{
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Mobile: scale chips back down */
@media (max-width: 480px){
  .contact-cards-icons .circle-icon{ width:60px; height:60px; font-size:24px; }
  .contact-cards-icons{ gap:1.25rem; }
}

/* Glass card */
.contact-card.glass{
  position:relative; isolation:isolate;           /* keep glare inside */
  max-width:640px; margin:0 auto; text-align:left;
  padding:1.25rem 1.25rem 1rem; border-radius:18px;
  overflow:hidden;                                 /* ✅ prevents child overflow */
  --glass-tint: rgba(255,255,255,.06);
  --glass-stroke: rgba(255,255,255,.22);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04)) padding-box,
    linear-gradient(140deg, var(--glass-stroke), rgba(255,255,255,.04)) border-box,
    var(--glass-tint);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="light"] .contact-card.glass{
  --glass-tint: rgba(255,255,255,.70);
  --glass-stroke: rgba(0,0,0,.10);
  --glass-shadow: 0 20px 48px rgba(0,0,0,.12);
}
.contact-card.glass::before,
.contact-card.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
}
.contact-card.glass::before{
  background:
    radial-gradient(120% 80% at 8% -10%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(90% 60% at 100% 0%, rgba(255,255,255,.10), transparent 45%);
  mix-blend-mode: screen; opacity:.9;
}
[data-theme="light"] .contact-card.glass::before{
  background:
    radial-gradient(120% 80% at 8% -10%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(90% 60% at 100% 0%, rgba(255,255,255,.25), transparent 45%);
  mix-blend-mode: normal; opacity:.7;
}
.contact-card.glass::after{
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:3px 3px; opacity:.6;
}
.contact-card.glass h3{
  margin:0 0 1rem; font-size:1.45rem; letter-spacing:.2px;
  font-family:var(--font-headings);
}

/* Form layout */
.contact-form{ display:grid; gap:.95rem; }
.field{ position:relative; display:grid; gap:.45rem; }
.field-meta{ font-size:.85rem; color:#999; text-align:right; margin-top:.15rem; min-height:1em; }

/* Inputs = translucent panes */
.contact-form input,
.contact-form textarea{
  width:100%; box-sizing:border-box;               /* ✅ keeps inside card */
  font-size:1rem; color:var(--text-color);
  border-radius:14px; padding:1rem .95rem;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box;
  background-clip: padding-box, border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea{
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.40)) padding-box,
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.05)) border-box;
}
.contact-form textarea{
  min-height:132px; resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
  border-color:color-mix(in srgb, var(--accent-color) 45%, transparent);
}

/* Floating labels (textarea starts top-left) */
.field.float input::placeholder,
.field.float textarea::placeholder{ color:transparent; }

.field.float label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  padding:0 8px; border-radius:8px; font-size:.95rem; color:#9aa0a6;
  background: rgba(18,18,18,.55); backdrop-filter: blur(4px);
  transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease, background .16s ease;
  pointer-events:none;
}
[data-theme="light"] .field.float label{ background: rgba(255,255,255,.75); }

/* textarea label: top-left by default */
.field.float textarea + label{
  top:14px; transform:none; font-size:.95rem; opacity:.9;
}
.field.float input:focus + label,
.field.float input:not(:placeholder-shown) + label,
.field.float textarea:focus + label,
.field.float textarea:not(:placeholder-shown) + label{
  top:-10px; transform:none; font-size:.78rem; color:var(--accent-color);
  background: color-mix(in srgb, var(--bg-color) 70%, transparent);
}

/* Visual cue for invalid inputs */
.contact-form [aria-invalid="true"]{
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 28%, transparent);
}

/* Send button — accent glass pill */
.contact-form button{
  margin-top:.25rem;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent-color) 92%, transparent),
              color-mix(in srgb, var(--accent-color) 78%, transparent)) padding-box,
              linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08)) border-box;
  color: var(--accent-text);
  border:1px solid transparent;
  padding:.9rem 1.35rem; font-size:1rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, filter .12s ease;
  margin-inline:auto; width:max-content;
}
[data-theme="light"] .contact-form button{
  box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.5);
}
.contact-form button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.contact-form button:active{ transform: translateY(0); }
.contact-form button:disabled{ opacity:.75; cursor:not-allowed; filter:grayscale(6%); }

/* Keep paper-plane spinning only while loading (unchanged) */
.contact-form button.loading .fa-paper-plane{ animation: plane-spin .9s linear infinite; }
@keyframes plane-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Status line */
.status{ font-size:.95rem; text-align:center; margin-top:.75rem; white-space:pre-line; }
.status.success{ color:var(--status-success); }
.status.error{ color:var(--status-error); }

/* Responsive */
@media (max-width:768px){
  .contact-card.glass{ padding:1.1rem .95rem; border-radius:16px; }
}

/* Optional: stable inline error area */
.error-msg{
  min-height: 1.05em;
  font-size: .85rem;
  color: var(--status-error);
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  .contact-cards-icons .circle-icon,
  .contact-form button{ transition: none; }
}

/* ===================================================
BACK TO TOP
=================================================== */
#backToTop {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  background: var(--accent-color); color: var(--accent-text);
  border: none; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
  cursor: pointer; z-index: 1000; display: inline-flex; align-items: center; justify-content: center;
}
#backToTop:hover { transform: translateY(2px); }
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* Keyboard focus for accessibility */
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }

/* ===================================================
FOOTER
=================================================== */
footer { text-align: center; padding: 2rem; background: var(--section-bg); color: var(--text-color); font-size: 0.95rem; }
#visit-counter { font-size: 1rem; color: var(--accent-color); margin-top: 0.5rem; }

/* ===================================================
RESPONSIVE
=================================================== */
@media screen and (max-width: 768px) {
  header.hero { padding: 3rem 1rem 1.5rem; }
  .hero-name { font-size: 2.4rem; }
  .hero-role { font-size: 1rem; }
  .scroll-down-hint { bottom: 1rem; font-size: 0.7rem; }

  .hamburger { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(0,0,0,0.95); flex-direction: column; gap: 1rem; padding: 1rem 2rem; text-align: center; z-index: 998;
  }
  .nav-links.show { display: flex; }
  [data-theme="light"] .nav-links { background: rgba(255,255,255,0.95); }

  section { padding: 3rem 1.25rem; }
  header h1 { font-size: 2rem; }
  header p, .quote { font-size: 1rem; }

  .skills ul { flex-direction: column; align-items: center; }
  .wrapper { flex-direction: column; }
  .contact-cards, .contact-cards-icons { flex-direction: column; align-items: center; }
  .contact-form { width: 100%; }
}