/* ==========================================================================
   halloween.css — Halloween theme override for styles.css
   Φόρτωσέ το ΜΕΤΑ το styles.css:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="halloween.css">
   Για να το βγάλεις μετά το Halloween, σβήνεις μόνο το 2ο <link>.
   ========================================================================== */

/* ---------- Palette ---------- */
:root {
  --primary: #ff7a1a;                         /* pumpkin */
  --secondary: #8f2dff;                       /* witch purple */
  --text: #f4e9dc;                            /* bone */
  --glass: rgba(30, 14, 44, 0.68);
  --glass-border: rgba(255, 122, 26, 0.2);
  --glass-hover: rgba(46, 21, 64, 0.88);
  --text-muted-1: #cdb9d3;
  --text-muted-2: #9f8aab;

  --hw-void: #0b0614;
  --hw-slime: #9dff4a;
  --hw-ember: rgba(255, 122, 26, 0.35);
}

* {
  scrollbar-color: var(--primary) var(--hw-void);
}

::selection {
  background: var(--primary);
  color: var(--hw-void);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ---------- Background: night sky, moon glow, faint grid ---------- */
body {
  background: linear-gradient(135deg, #0b0614 0%, #150a22 50%, #1d0f2e 100%);
}

body::before {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 238, 205, 0.16) 0%, transparent 22%),
    radial-gradient(circle at 18% 28%, rgba(255, 122, 26, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 75% 55%, rgba(143, 45, 255, 0.09) 0%, transparent 38%),
    radial-gradient(circle at 40% 88%, rgba(255, 122, 26, 0.07) 0%, transparent 45%);
}

body::after {
  background-image:
    linear-gradient(rgba(255, 122, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 26, 0.025) 1px, transparent 1px);
}

::-webkit-scrollbar-track { background: var(--hw-void); }

/* ---------- Cobweb in the top-left corner (desktop only) ---------- */
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  z-index: 1001;
  pointer-events: none;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='%23f4e9dc' stroke-width='1'%3E%3Cpath d='M0 0 L200 0 M0 0 L185 80 M0 0 L140 140 M0 0 L80 185 M0 0 L0 200'/%3E%3Cpath d='M45 0 Q35 35 0 45 M90 0 Q70 70 0 90 M135 0 Q105 105 0 135 M180 0 Q140 140 0 180'/%3E%3C/svg%3E") no-repeat top left;
}

@media (max-width: 860px) {
  html::before { display: none; }
}

/* ---------- Headings ---------- */
.section-title {
  text-shadow: 0 0 14px rgba(255, 122, 26, 0.45);
}

.profile-details h1 {
  background: linear-gradient(90deg, #f4e9dc, var(--primary), #f4e9dc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The one memorable moment: the name flickers like a candle */
@media (prefers-reduced-motion: no-preference) {
  .profile-details h1 {
    animation:
      shine 6s linear infinite,
      candleFlicker 3.6s infinite;
  }
}

@keyframes candleFlicker {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.55)); }
  6%       { filter: drop-shadow(0 0 4px  rgba(255, 122, 26, 0.25)); }
  10%      { filter: drop-shadow(0 0 14px rgba(255, 140, 40, 0.7)); }
  34%      { filter: drop-shadow(0 0 9px  rgba(255, 122, 26, 0.5)); }
  38%      { filter: drop-shadow(0 0 3px  rgba(255, 122, 26, 0.2)); }
  42%      { filter: drop-shadow(0 0 13px rgba(255, 140, 40, 0.65)); }
  70%      { filter: drop-shadow(0 0 11px rgba(255, 122, 26, 0.55)); }
}

/* ---------- Navigation ---------- */
nav {
  border-bottom-color: rgba(255, 122, 26, 0.22);
}

nav a:hover {
  color: #ffd4a8;
}

nav a.active {
  background: linear-gradient(90deg, #ff7a1a, #ff4d1a);
  color: var(--hw-void);
  box-shadow: 0 4px 15px rgba(255, 94, 26, 0.4);
}

/* ---------- Profile ---------- */
.profile-avatar {
  box-shadow: 0 0 20px rgba(255, 122, 26, 0.25), inset 0 0 15px rgba(255, 122, 26, 0.12);
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); box-shadow: 0 15px 25px rgba(255, 122, 26, 0.32), inset 0 0 15px rgba(255, 122, 26, 0.12); }
  100% { transform: translateY(0px); }
}

.stat-number {
  text-shadow: 0 0 10px rgba(255, 122, 26, 0.5);
}

/* ---------- Cards ---------- */
.bento-card:hover {
  border-color: rgba(255, 122, 26, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 22px rgba(255, 122, 26, 0.07);
}

.bento-card::before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 190, 120, 0.07), transparent 40%);
}

.card-icon {
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.6));
}

.fav-project-item {
  background: rgba(11, 6, 20, 0.55);
}

.fav-project-item:hover {
  border-color: rgba(255, 122, 26, 0.4);
  background: rgba(46, 21, 64, 0.8);
}

.project-card:hover {
  border-color: rgba(255, 122, 26, 0.45);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
}

.project-card::after {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.project-card:hover::after {
  box-shadow: 0 -5px 15px rgba(255, 122, 26, 0.45);
}

/* ---------- Tags, badges, filters, search ---------- */
.tag {
  background: rgba(255, 122, 26, 0.12);
  border-color: rgba(255, 122, 26, 0.35);
}

.badge-upcoming {
  background: var(--secondary);
  box-shadow: 0 0 10px rgba(143, 45, 255, 0.5);
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(255, 122, 26, 0.16);
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.25);
}

.project-search-wrapper:focus-within {
  box-shadow: 0 0 20px rgba(255, 122, 26, 0.25);
}

/* ---------- Contact form ---------- */
.input-group input,
.input-group textarea {
  background: rgba(11, 6, 20, 0.55);
}

.input-group input:focus,
.input-group textarea:focus {
  background: rgba(46, 21, 64, 0.8);
  box-shadow: 0 0 15px rgba(255, 122, 26, 0.18);
}

.submit-btn {
  color: var(--hw-void);
}

.submit-btn:hover {
  background: #ffe2c4;
  box-shadow: 0 10px 25px rgba(255, 122, 26, 0.45);
}

/* ---------- Card buttons ---------- */
.card-btn.primary-btn {
  color: var(--hw-void);
}

.card-btn.primary-btn:hover {
  background: #ffe2c4;
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.5);
}

/* ---------- Toast ---------- */
.toast.success i { color: var(--hw-slime); }

/* ---------- Footer & scroll-to-top ---------- */
.modern-footer {
  background: rgba(11, 6, 20, 0.85);
}

.social-group a:hover {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(255, 122, 26, 0.6);
}

#scrollTopBtn {
  color: var(--hw-void);
  box-shadow: 0 5px 18px rgba(255, 122, 26, 0.4);
}