/* CV layout: section titles, job boards, bullet cards, stage screen, code bugs */

/* time of day: ground colours are driven from main.js via these variables */
.ground-cycle { --g1: #8fd053; --g2: #62a83a; --z: #7a4f2a; --base: #9c6a3c; background:
  linear-gradient(var(--g1) 0 34px, var(--g2) 34px 44px, transparent 44px),
  linear-gradient(135deg, var(--z) 25%, transparent 25%) -40px 44px / 80px 80px, linear-gradient(225deg, var(--z) 25%, transparent 25%) -40px 44px / 80px 80px,
  linear-gradient(315deg, var(--z) 25%, transparent 25%) 0 44px / 80px 80px, linear-gradient(45deg, var(--z) 25%, transparent 25%) 0 44px / 80px 80px, var(--base); }
#sun, #moon { position: absolute; top: 13%; right: 17%; border-radius: 50%; pointer-events: none; transition: opacity .2s; }
#sun { width: 120px; height: 120px; background: radial-gradient(circle, #fff7cf 0 42%, #ffd36b 44% 100%); box-shadow: 0 0 80px 26px rgba(255,211,107,.45); }
#moon { width: 84px; height: 84px; opacity: 0; background: radial-gradient(circle at 35% 35%, #fffdf2 0 55%, #e8e2cc 56% 100%); box-shadow: 0 0 50px 10px rgba(255,255,235,.35); }

/* scenery sets: each backdrop lives in its own container and crossfades */
#stage .layer > .set { position: absolute; left: 0; bottom: 0; width: 0; height: 0; will-change: opacity; }
.set > .sp { position: absolute; }
.ground-grass { --base: #9c6a3c; background:
  linear-gradient(var(--g1) 0 34px, var(--g2) 34px 44px, transparent 44px),
  linear-gradient(135deg, var(--z) 25%, transparent 25%) -40px 44px / 80px 80px, linear-gradient(225deg, var(--z) 25%, transparent 25%) -40px 44px / 80px 80px,
  linear-gradient(315deg, var(--z) 25%, transparent 25%) 0 44px / 80px 80px, linear-gradient(45deg, var(--z) 25%, transparent 25%) 0 44px / 80px 80px, var(--base); }
.ground:not(.ground-grass)::before { display: none; }
.ground-stage { filter: brightness(var(--gb, 1)); background:
  linear-gradient(#e2b04a 0 6px, #4a3452 6px 38px, #2c1f33 38px 46px, transparent 46px),
  repeating-linear-gradient(90deg, #5b4163 0 118px, #4a3452 118px 122px), #3b2a42; }
.ground-neon { background:
  linear-gradient(#2fc3b0 0 6px, #ff8fa3 6px 9px, #1b1f3a 9px 44px, transparent 44px),
  repeating-linear-gradient(90deg, #262a4d 0 78px, #3b3f73 78px 80px), #20243f; box-shadow: 0 -6px 26px rgba(47,195,176,.45); }
.ground-pavement { filter: brightness(var(--gb, 1)); background:
  linear-gradient(#e3d3ae 0 14px, #b9a47c 14px 22px, transparent 22px),
  repeating-linear-gradient(90deg, #cdb98f 0 94px, #ae9870 94px 98px) 0 22px / 100% 40px no-repeat,
  repeating-linear-gradient(90deg, #8f7955 0 60px, #836e4c 60px 64px), #7d6749; }
.ground-roof { filter: brightness(var(--gb, 1)); background:
  linear-gradient(#d9a36b 0 12px, #b67f4b 12px 40px, transparent 40px),
  repeating-linear-gradient(45deg, #9a6a45 0 22px, #8a5e3c 22px 44px), #7a5236; }
.ground-cobble { filter: brightness(var(--gb, 1)); background:
  linear-gradient(#d6cfbf 0 12px, #b1a893 12px 20px, transparent 20px),
  radial-gradient(ellipse 18px 12px at 20px 15px, #9b927f 0 90%, transparent 100%) 0 20px / 42px 30px,
  radial-gradient(ellipse 18px 12px at 20px 15px, #8b8372 0 90%, transparent 100%) 21px 35px / 42px 30px,
  #6f685b; }
.ground-street { filter: brightness(var(--gb, 1)); background:
  linear-gradient(#d8d9de 0 12px, #a9abb3 12px 20px, #4a4e58 20px 46px, transparent 46px),
  linear-gradient(90deg, #f2c94c 0 70px, transparent 70px) 0 62px / 170px 6px repeat-x,
  linear-gradient(#8d9099 0 4px, transparent 4px) 0 86px / 100% 4px no-repeat,
  #3d4049; }
.ground-studio { background:
  linear-gradient(#e2474b 0 5px, #34363d 5px 40px, transparent 40px),
  repeating-linear-gradient(90deg, #3a3d45 0 140px, #30333a 140px 144px), #2a2c32; }

/* fireflies at night */
#night .flies { position: absolute; inset: 40% 0 10% 0; animation: flies 9s ease-in-out infinite alternate;
  background: radial-gradient(3px 3px at 40px 60px, #fff6a0 50%, transparent 55%), radial-gradient(2px 2px at 190px 140px, #fff6a0 50%, transparent 55%),
    radial-gradient(3px 3px at 330px 40px, #ffe36b 50%, transparent 55%), radial-gradient(2px 2px at 120px 220px, #fff6a0 50%, transparent 55%);
  background-size: 420px 260px; filter: drop-shadow(0 0 4px #ffe36b); }
@keyframes flies { from { background-position: 0 0; opacity: .5; } to { background-position: 120px -60px; opacity: 1; } }

/* EMPIRE stage: verses float in the spotlights, no screen */
.stage-beams { width: 1150px; height: 520px; transform: translateX(-50%); pointer-events: none; }
.stage-beams i { position: absolute; top: 0; width: 220px; height: 100%; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(255,228,150,.55), rgba(255,228,150,0) 92%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: beamSweep 5s ease-in-out infinite alternate; }
.stage-beams i:nth-child(1) { left: 4%; animation-delay: -1s; }
.stage-beams i:nth-child(2) { left: 24%; animation-delay: -3.2s; background: linear-gradient(rgba(255,120,190,.45), rgba(255,120,190,0) 92%); }
.stage-beams i:nth-child(3) { left: 40%; animation-duration: 6.5s; }
.stage-beams i:nth-child(4) { left: 57%; animation-delay: -2.1s; background: linear-gradient(rgba(120,220,255,.45), rgba(120,220,255,0) 92%); }
.stage-beams i:nth-child(5) { left: 76%; animation-delay: -4.4s; }
@keyframes beamSweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
/* verses stay inside the stage: clipped to it and faded out at its edges */
.lyrics { width: 760px; height: 300px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.lyrics a { pointer-events: auto; }
.lglow { position: absolute; left: 50%; bottom: -20px; width: 900px; height: 380px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 60%, rgba(255,225,150,.32), rgba(255,160,200,.12) 45%, transparent 70%); animation: glowPulse 3.4s ease-in-out infinite alternate; }
@keyframes glowPulse { from { opacity: .75; } to { opacity: 1; } }
.verse { position: absolute; left: 0; bottom: 34px; width: 760px; text-align: center; color: #fff; will-change: transform, opacity; }
.verse .kicker { font-family: var(--display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px rgba(255,198,41,.7); }
.verse p { font-family: var(--grotesk); font-weight: 600; font-size: 22px; line-height: 1.42; margin: 10px auto 0; max-width: 720px;
  text-shadow: 0 0 22px rgba(255,210,140,.55), 0 2px 0 rgba(20,10,40,.85), 0 0 3px rgba(20,10,40,.9); }
.vstats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; margin-top: 8px; }
.vstats b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--gold); text-shadow: 0 0 18px rgba(255,198,41,.8), 0 2px 0 rgba(20,10,40,.8); }
.vstats span { font-family: var(--grotesk); font-weight: 600; font-size: 14px; color: #fff; text-shadow: 0 1px 0 rgba(20,10,40,.9); }
.vlinks { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.vlinks a { font-family: var(--grotesk); font-weight: 700; font-size: 16px; color: #9fdcf5; text-shadow: 0 1px 0 rgba(20,10,40,.9); }
.ldots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; }
.ldots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s; }
.ldots i.on { background: var(--gold); box-shadow: 0 0 10px rgba(255,198,41,.9); }
/* foreground props pass in front of the hero (the hero sits at z-index 3) */
#fore { z-index: 4; pointer-events: none; }

/* ---------- lighting ---------- */
/* sun moves and warms with the time of day; slow rotating rays */
#sun { top: var(--sun-top, 13%); background: radial-gradient(circle, #fffbe6 0 40%, var(--sun-edge, #ffd36b) 44% 100%);
  box-shadow: 0 0 90px 36px color-mix(in srgb, var(--sun-edge, #ffd36b) 45%, transparent); }
#sun::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; border-radius: 50%; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,240,200,.16) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 62%); mask-image: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: rays 70s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* aerial perspective: distant layers fade into the horizon colour */
#haze { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--haze, #d8f2ff) 0%, transparent 58%); opacity: .5; }
/* colour grade for the backdrop, plus a cool multiply at night */
#grade { position: absolute; inset: 0; pointer-events: none; background: var(--grade, #fff1c9); opacity: var(--grade-a, .08); mix-blend-mode: soft-light; }
#grade-night { position: absolute; inset: 0; pointer-events: none; background: #1d1c5c; opacity: calc(var(--n, 0) * .38); mix-blend-mode: multiply; }
#vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10,6,30,.2) 100%); opacity: calc(.8 + var(--n, 0) * .6); }
/* characters and props take the scene's light; cards stay untouched so text is always readable */
#world .sp img, #mid2 .sp img, #hero img.frame { filter: brightness(var(--lb, 1)) saturate(var(--ls, 1)) sepia(var(--lw, 0)); }
#fore .sp img { filter: brightness(calc(var(--lb, 1) * .92)) saturate(var(--ls, 1)) sepia(var(--lw, 0)); }
/* contact shadows */
.hero-shadow { position: absolute; left: 0; bottom: -5px; height: 18px; border-radius: 50%; transform-origin: 50% 50%;
  background: radial-gradient(ellipse at center, rgba(20,12,30,.42), transparent 70%); opacity: calc(1 - var(--n, 0) * .5); }
.sp.grounded::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 86%; height: 22px; transform: translateX(-50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20,12,30,.38), transparent 70%); opacity: calc(1 - var(--n, 0) * .5); }
/* street lamps light up after dark */
.sp.lamp::before { content: ''; position: absolute; left: 50%; top: -60px; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,130,.75), rgba(255,190,90,.25) 35%, transparent 68%); opacity: var(--n, 0); mix-blend-mode: screen; }
/* haze drifting through the stage beams */
.stage-haze { width: 1300px; height: 260px; transform: translateX(-50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 45% 60% at 30% 70%, rgba(190,140,255,.28), transparent 70%), radial-gradient(ellipse 45% 60% at 70% 60%, rgba(255,150,200,.22), transparent 70%);
  animation: hazeDrift 12s ease-in-out infinite alternate; }
@keyframes hazeDrift { to { background-position: 60px 0, -60px 0; } }

/* section titles: extruded pixel words (v1) + subtitle ribbon */
.t3d { font-family: 'Silkscreen', 'Courier New', monospace; font-weight: 700; line-height: .9; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; }
.ribbon { display: inline-block; background: var(--red); color: #fff; font-family: 'Lobster', Georgia, serif; font-size: 32px; line-height: 1;
  padding: 10px 34px 12px; white-space: nowrap; z-index: 1; text-shadow: 0 2px 0 rgba(0,0,0,.18); transform-origin: 50% 100%; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: 12px; width: 34px; height: 100%; background: var(--red-d); z-index: -1; }
.ribbon::before { left: -24px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.ribbon::after { right: -24px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.ribbon.teal { background: var(--teal); } .ribbon.teal::before, .ribbon.teal::after { background: #1d8b7d; }
.ribbon.gold { background: var(--gold); color: var(--navy); text-shadow: none; } .ribbon.gold::before, .ribbon.gold::after { background: var(--gold-d); }

/* job header: company board hanging on a chain */
.jhead { width: 500px; }
.jhead .chain { width: 14px; height: 320px; margin: -320px auto 0; border-radius: 7px;
  background: repeating-linear-gradient(#bfc3ca 0 16px, #7d8189 16px 20px, transparent 20px 22px); }
.jboard { background: #2d2f35; color: #eef0f4; padding: 20px 26px 18px; border-top: 8px solid var(--gold); box-shadow: inset 0 -10px 0 #1f2025, 8px 10px 0 rgba(0,0,0,.28); }
.jboard .co { font-family: var(--display); font-size: 40px; line-height: 1.02; color: #fff; }
.jboard .role { font-family: var(--grotesk); font-weight: 700; font-size: 21px; line-height: 1.2; color: #9fdcf5; margin-top: 8px; }
.jboard .when { font-family: var(--display); font-size: 15px; letter-spacing: .03em; color: var(--gold); margin-top: 8px; }

/* bullet cards: CV wording on taped paper */
.jcard { width: 480px; background: var(--paper); color: var(--navy); padding: 24px 28px 20px; box-shadow: 10px 12px 0 rgba(0,0,0,.28); }
.jcard.wide { width: 720px; }
.jcard .tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,198,41,.85); }
.jcard .kicker { font-family: var(--display); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.jcard h3 { font-family: var(--grotesk); font-weight: 800; font-size: 26px; line-height: 1.1; margin: 6px 0 4px; }
.jcard .lead { font-family: var(--sans); font-size: 18px; line-height: 1.5; margin: 8px 0 0; }
.jcard.wide .lead { font-family: var(--grotesk); font-size: 23px; line-height: 1.42; }
.jcard ul { margin: 10px 0 0; padding-left: 20px; }
.jcard li { font-family: var(--sans); font-size: 17px; line-height: 1.45; margin: 6px 0; }
.jcard li::marker { color: var(--red); }
.jcard ul.plain { list-style: none; padding-left: 0; }
.jcard ul.plain li { font-family: var(--grotesk); font-weight: 700; font-size: 22px; }
.cstats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; padding-bottom: 10px; border-bottom: 3px dashed var(--paper-d); }
.cstats b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--red); }
.cstats span { font-family: var(--grotesk); font-weight: 600; font-size: 14px; }
.ccovers { display: flex; gap: 10px; margin-top: 12px; }
.ccovers img, .ctile { display: block; width: 86px; height: 86px; object-fit: cover; box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.ccovers a:hover img { outline: 4px solid var(--gold); }
.ctile { display: flex; align-items: flex-end; padding: 7px; color: #fff; font-family: var(--display); font-size: 10px; line-height: 1.1;
  background: linear-gradient(135deg, #0f6b5a 0 58%, #ffc629 58%); }
.clinks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.clinks a { font-family: var(--grotesk); font-weight: 700; font-size: 16px; color: var(--navy); }

/* work experience list */
.setlist { width: 540px; transform: translateX(-50%) rotate(-1.2deg); background: var(--paper); color: var(--navy); padding: 20px 24px 16px; box-shadow: 10px 12px 0 rgba(0,0,0,.3); }
.setlist::before { content: ''; position: absolute; top: -12px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(2deg); background: rgba(255,198,41,.85); }
.sl-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--navy); padding-bottom: 8px; margin-bottom: 4px; }
.sl-head b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--red); text-transform: uppercase; }
.sl-head span { font-family: var(--grotesk); font-weight: 600; font-size: 16px; }
.setlist ol { list-style: none; margin: 0; padding: 0; }
.setlist button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: none; border: 0; border-bottom: 2px dashed var(--paper-d);
  padding: 6px 4px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.setlist li:last-child button { border-bottom: 0; }
.setlist button:hover { background: rgba(255,198,41,.3); }
.setlist i { font-family: var(--display); font-style: normal; font-size: 16px; color: var(--red); }
.setlist .t b { display: block; font-family: var(--grotesk); font-weight: 800; font-size: 19px; line-height: 1.1; }
.setlist .t small { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.2; opacity: .8; }
.setlist em { font-family: var(--display); font-style: normal; font-size: 13px; white-space: nowrap; }

/* EMPIRE stage screen: bullets side by side, sliding horizontally */
.prompter { width: 800px; }
.prompter .screen { position: relative; height: 320px; overflow: hidden; background: rgba(12,10,30,.88); border: 5px solid #2a2d36; box-shadow: inset 0 0 60px rgba(122,63,196,.5); }
.prompter .track { display: flex; height: 100%; will-change: transform; }
.pcard { flex: 0 0 790px; padding: 20px 34px; color: #fff; }
.pcard .kicker { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.pcard p { font-family: var(--sans); font-size: 19px; line-height: 1.5; margin: 10px 0 0; color: #f0eefa; }
.pstats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px; }
.pstats b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--gold); }
.pstats span { font-family: var(--grotesk); font-size: 14px; color: #fff; }
.plinks { display: flex; gap: 16px; margin-top: 10px; }
.plinks a { font-family: var(--grotesk); font-weight: 600; font-size: 16px; color: #9fdcf5; }
.pdots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.pdots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s; }
.pdots i.on { background: var(--gold); }
.pdots span { margin-left: 8px; font-family: var(--grotesk); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.75); }

/* skills & tools */
.tools-row { width: 1000px; max-width: none; gap: 14px; justify-content: center; }
.vtag { font-family: var(--display); font-size: 22px; color: #fff; background: #f37a8e; padding: 11px 20px 9px; border-radius: 10px; white-space: nowrap; box-shadow: 0 6px 0 #c4506a; }
.vtag.teal { background: var(--teal); box-shadow: 0 6px 0 #1d8b7d; }
.desk .name { font-size: 18px; min-height: 42px; }
.pass b { font-size: 20px; }

/* code bugs */
.bug { transform: translateX(-50%); width: 130px; height: 100px; }
.bug-body { position: absolute; left: 0; right: 0; bottom: 0; height: 95px; animation: patrol 2.6s ease-in-out infinite alternate; }
.bug-body img { position: absolute; bottom: 0; left: 50%; height: 86px; translate: -50% 0; }
.bug .w1 { animation: blinkA .34s steps(1) infinite; }
.bug .w2 { animation: blinkB .34s steps(1) infinite; }
.bug .sq { opacity: 0; height: 64px; }
.bug.squashed .w1, .bug.squashed .w2 { display: none; }
.bug.squashed .sq { opacity: 1; }
.bug.squashed .bug-body { animation: none; }
.bug-pop { position: absolute; left: 50%; bottom: 110px; translate: -50% 0; font-family: var(--display); font-size: 18px; color: #fff; background: var(--teal); padding: 6px 10px 4px; white-space: nowrap; opacity: 0; box-shadow: 4px 4px 0 #1d8b7d; }
.bug.squashed .bug-pop { animation: bugPop 1.6s ease-out forwards; }
@keyframes patrol { from { translate: -55px 0; } to { translate: 55px 0; } }
@keyframes blinkA { 50% { opacity: 0; } }
@keyframes blinkB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bugPop { 0% { opacity: 0; transform: translateY(20px); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }