/* ==========================================================================
   🎃 Halloween layer v2.3 — "Original Hero, Haunted Decor" (remove after Nov 1)
   Page-scoped like the Relay design layer. The hero keeps its ORIGINAL
   light design and text colors (index.html inline styles + devops-hq.css
   apply untouched) — Halloween lives only in decor drawn on top: carved
   pumpkin moon, corner web + descending spider, graveyard silhouettes,
   and the canvas bats/witch from halloween.js (dark on light = crisp).
   Scene DOM (.hw-scene / .hw-fog-card / .hw-spider) + halloween.js pair
   with this file. No functional changes; content areas stay light.
   ========================================================================== */

.job-index-page, .job-detail-page {
  --hw-pumpkin:#FF8C1A;
  --hw-pumpkin-hot:#FF9A2E;
  --hw-lantern:#FFE9A8;     /* light shining through carvings */
  --hw-ivory:#FBF7F1;
}

/* ---------- shared: warm-ivory paper for content areas ---------- */
body.job-index-page, body.job-detail-page {
  background-color:var(--hw-ivory);
  background-image:linear-gradient(rgba(122,84,44,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(122,84,44,.028) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ================================================================
   INDEX — original light hero + Halloween decor on top
   (all hero text/background colors come from the page's own styles)
   ================================================================ */
.job-index-page .dhq-hero {
  position:relative; overflow:hidden;      /* layout only: contains .hw-scene */
}

/* ---------- the scene (DOM in template, motion in JS) ---------- */
.job-index-page .hw-scene {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.job-index-page .hw-scene ~ * { position:relative; z-index:1; }

/* carved pumpkin moon — face via clip-path carvings, light shines out */
.job-index-page .hw-moon {
  position:absolute; top:64px; right:7%;
  width:190px; height:190px; border-radius:50%;
  /* pointer parallax — halloween.js sets --mx/--my */
  transform:translate3d(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 6px), 0);
  background:
    radial-gradient(circle at 32% 28%, #FFD98C, transparent 46%),
    radial-gradient(circle at 36% 38%, #FFC266 0%, var(--hw-pumpkin-hot) 55%, #E86A00 82%, #C24E00 100%);
  box-shadow:
    0 14px 34px rgba(140,60,10,.28),
    0 0 46px 8px rgba(255,150,40,.35),
    inset -18px -14px 42px rgba(150,55,0,.55);
}
.job-index-page .hw-moon:after {            /* breathing halo — a warm print-glow on paper */
  content:""; position:absolute; inset:-52px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,190,110,.20), transparent 68%);
  animation:hw-breathe 7.5s ease-in-out infinite;
}
.job-index-page .hw-moon i {
  position:absolute; background:var(--hw-lantern); opacity:.96;
  filter:drop-shadow(0 0 7px rgba(255,215,130,.95));
}
.job-index-page .hw-eye { width:36px; height:30px; top:56px; }
.job-index-page .hw-eye-l { left:32px;  transform:rotate(-9deg);  clip-path:polygon(50% 0, 0 100%, 100% 100%); }
.job-index-page .hw-eye-r { right:32px; transform:rotate(9deg);   clip-path:polygon(50% 0, 0 100%, 100% 100%); }
.job-index-page .hw-nose {
  width:20px; height:22px; top:92px; left:50%; transform:translateX(-50%);
  clip-path:polygon(50% 0, 0 100%, 100% 100%);
}
.job-index-page .hw-mouth {
  width:120px; height:44px; top:118px; left:50%; transform:translateX(-50%);
  clip-path:polygon(0 35%, 10% 62%, 22% 38%, 34% 72%, 46% 40%, 58% 76%, 70% 42%, 84% 66%, 100% 34%, 88% 96%, 64% 100%, 38% 98%, 12% 92%);
}

/* corner spiderweb — quarter web anchored top-right of the hero */
.job-index-page .hw-web {
  position:absolute; top:0; right:0; width:230px; height:230px;
  background:
    repeating-radial-gradient(circle at 100% 0, transparent 0 25px, rgba(17,38,58,.30) 25px 26.5px),
    repeating-conic-gradient(from -90deg at 100% 0, rgba(17,38,58,.24) 0deg .7deg, transparent .7deg 22.5deg);
  -webkit-mask:linear-gradient(225deg, #000 0 49.5%, transparent 50%);
          mask:linear-gradient(225deg, #000 0 49.5%, transparent 50%);
  opacity:.9;
}

/* graveyard silhouettes along the hero floor */
.job-index-page .hw-graveyard {
  position:absolute; bottom:0; left:5%;
  display:flex; align-items:flex-end; gap:10px;
}
.job-index-page .hw-stone {
  width:64px; height:88px; position:relative;
  border-radius:32px 32px 3px 3px;
  background:linear-gradient(180deg,#16324E,#0C1B2C);
  box-shadow:inset -8px 0 12px rgba(0,0,0,.35), 0 8px 18px rgba(17,38,58,.18);
}
.job-index-page .hw-stone:after {
  content:"RIP"; position:absolute; top:20px; left:0; right:0; text-align:center;
  font:700 11px/1 Sora,sans-serif; letter-spacing:.1em; color:rgba(214,228,240,.55);
}
.job-index-page .hw-stone-cross {
  width:40px; height:92px;
  clip-path:polygon(36% 0, 64% 0, 64% 26%, 100% 26%, 100% 42%, 64% 42%, 64% 100%, 36% 100%, 36% 42%, 0 42%, 0 26%, 36% 26%);
  background:linear-gradient(180deg,#16324E,#0C1B2C);
}
.job-index-page .hw-pumpkin {
  width:76px; height:58px; position:relative;
  border-radius:48% 48% 46% 46%;
  background:linear-gradient(90deg,#D95E00 0 16%,var(--hw-pumpkin-hot) 16% 50%,var(--hw-pumpkin) 50% 84%,#D95E00 84% 100%);
  box-shadow:0 8px 20px rgba(140,60,10,.25), inset 0 -10px 18px rgba(140,50,0,.5);
}
.job-index-page .hw-pumpkin:before {        /* stem */
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-6deg);
  width:10px; height:16px; border-radius:3px; background:#4C7A2A;
}

@keyframes hw-breathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* ---------- the spider — drops in on its thread, hangs, climbs back ---------- */
.job-index-page .hw-spider {
  position:absolute; top:0; right:15%; z-index:2;
  width:46px; text-align:center;
  animation:hw-spider 32s ease-in-out infinite;
}
.job-index-page .hw-spider-thread {
  width:2px; height:58px; margin:0 auto;
  background:linear-gradient(180deg, rgba(17,38,58,0), rgba(17,38,58,.45));
}
.job-index-page .hw-spider-body {
  width:46px; height:44px; display:block; margin-top:-2px;
  transform-origin:50% -58px;              /* swing from the thread's anchor
                                              (thread height above the body) */
  animation:hw-sway 5s ease-in-out infinite alternate;
}
@keyframes hw-spider {
  0%, 100% { transform:translateY(-120px); }
  16%      { transform:translateY(0); }
  20%      { transform:translateY(-10px); }
  24%      { transform:translateY(0); }
  82%      { transform:translateY(0); }
  98%      { transform:translateY(-120px); }
}
@keyframes hw-sway { from { transform:rotate(-6deg); } to { transform:rotate(6deg); } }

/* ---------- index body accents ---------- */
.job-index-page .dhq-job-card { transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.job-index-page .dhq-job-card:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(17,38,58,.20);
}
.job-index-page .hw-tagline {
  text-align:center; margin:22px 0 4px;
  font-size:15px; color:var(--slate, #5B6B7C); font-style:italic;
}
/* bottom CTA band → ink night with the site's cyan hard shadow */
.job-index-page #jobs-section + div {
  background:linear-gradient(135deg,#0C1B2C,#16324E) !important;
  box-shadow:12px 12px 0 var(--cyan, #2DC9B7), 0 0 90px rgba(255,104,70,.14) !important;
}

/* ================================================================
   JOB DETAIL — the site's own ink card, haunted
   (the original .dhq-job-hero-card styles apply; only decor is added)
   ================================================================ */

/* corner web on the card (top-left) */
.job-detail-page .hw-web-card {
  position:absolute; top:0; left:0; width:150px; height:150px; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 17px, rgba(214,228,240,.33) 17px 18.2px),
    repeating-conic-gradient(from 180deg at 0 0, rgba(214,228,240,.26) 0deg .7deg, transparent .7deg 22.5deg);
  -webkit-mask:linear-gradient(45deg, #000 0 49.5%, transparent 50%);
          mask:linear-gradient(45deg, #000 0 49.5%, transparent 50%);
  opacity:.85;
}

/* spider dropping from the card's top edge */
.job-detail-page .hw-spider {
  position:absolute; top:0; right:9%; z-index:2;
  width:38px; text-align:center;
  animation:hw-spider 38s ease-in-out infinite; animation-delay:6s;
}
.job-detail-page .hw-spider-thread {
  width:2px; height:44px; margin:0 auto;
  background:linear-gradient(180deg, rgba(230,225,245,0), rgba(214,228,240,.55));
}
.job-detail-page .hw-spider-body {
  width:38px; height:36px; display:block; margin-top:-2px;
  transform-origin:50% -44px;
  animation:hw-sway 5.5s ease-in-out infinite alternate;
}

/* fog band drifting along the card's bottom edge (DOM in template) */
.job-detail-page .hw-fog-card {
  position:absolute; left:-4%; right:-4%; bottom:-34px; height:130px; pointer-events:none;
  transform:translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -3px), 0);
}
.job-detail-page .hw-fog-card:before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(148,178,204,.18), transparent 70%);
  filter:blur(16px);
  animation:hw-drift 58s ease-in-out infinite alternate;
}
@keyframes hw-drift { from { transform:translateX(0); } to { transform:translateX(120px); } }

/* candle-flicker on the apply button (original colors kept) */
.job-detail-page .btn-primary { animation:hw-flicker 3.4s ease-in-out infinite; }
.job-detail-page .btn-primary:hover { filter:brightness(1.07); }
@keyframes hw-flicker {
  0%,100% { filter:brightness(1); }
  46%     { filter:brightness(1.06); }
  52%     { filter:brightness(.96); }
  60%     { filter:brightness(1.04); }
}

/* ================================================================
   Reduced motion: scene stays, motion stops
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .job-index-page .hw-moon:after,
  .job-detail-page .hw-fog-card:before,
  .job-detail-page .btn-primary,
  .hw-spider,
  .hw-spider-body { animation:none; }
  .job-index-page .dhq-job-card,
  .job-index-page .dhq-job-card:hover { transform:none; }
}