<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Curphey Collection — Transatlantic Chaos Records</title>
<meta name="description" content="The Curphey Family - Transatlantic Chaos Records">
<meta property="og:title" content="The Curphey Collection">
<meta property="og:description" content="The Curphey Family - Transatlantic Chaos Records">
<meta property="og:type" content="website">
<meta property="og:url" content="https://curphey.com">
<meta property="og:image" content="https://curphey.com/images/mark.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="The Curphey Collection">
<meta name="twitter:description" content="The Curphey Family - Transatlantic Chaos Records">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self'; script-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; frame-ancestors 'none';">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta name="referrer" content="no-referrer">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400&display=swap">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #000; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; transition: background 2s ease; }

  /* DAY MODE — warm natural light */
  body.daytime {
    background: #1a1816;
  }
  body.daytime .wall::before {
    content: '';
    position: fixed;
    top: -50%;
    left: 20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,240,210,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  body.daytime .frame {
    box-shadow: 10px 14px 30px rgba(0,0,0,0.5), -3px -3px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  body.daytime .disc-streak {
    background: linear-gradient(135deg, transparent 15%, rgba(255,245,220,0.12) 30%, rgba(255,245,220,0.25) 42%, rgba(255,255,240,0.3) 46%, rgba(255,245,220,0.25) 50%, rgba(255,245,220,0.12) 60%, transparent 75%);
  }

  /* NIGHT MODE — spotlights */
  body.nighttime {
    background: #050505;
  }
  body.nighttime .gallery-grid {
    position: relative;
  }
  /* Individual spotlights per frame */
  body.nighttime .frame {
    box-shadow: 12px 16px 40px rgba(0,0,0,0.9), -4px -3px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.02);
  }
  body.nighttime .frame::before {
    background:
      radial-gradient(ellipse at 50% -20%, rgba(255,240,200,0.04) 0%, transparent 60%),
      repeating-linear-gradient(92deg, rgba(255,255,255,0.005) 0px, transparent 1px, transparent 8px, rgba(255,255,255,0.003) 9px);
  }
  body.nighttime .disc-streak {
    background: linear-gradient(135deg, transparent 25%, rgba(255,250,230,0.06) 38%, rgba(255,250,230,0.14) 44%, rgba(255,255,240,0.18) 47%, rgba(255,250,230,0.14) 50%, rgba(255,250,230,0.06) 55%, transparent 68%);
  }

  .wall { position: relative; z-index: 1; padding: 30px 16px; max-width: 1050px; width: 100%; }
  .gallery-title { text-align: center; margin-bottom: 40px; }

  .label-logo {
    display: inline-block;
    border: 2px solid #d4af37;
    padding: 18px 40px 14px;
    position: relative;
    margin-bottom: 12px;
  }
  .label-logo::before, .label-logo::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px;
    height: 1px;
    background: rgba(212,175,55,0.3);
  }
  .label-logo::before { top: 5px; }
  .label-logo::after { bottom: 5px; }
  .label-name {
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    letter-spacing: 10px;
    color: #d4af37;
    text-transform: uppercase;
    display: block;
  }
  .label-tagline {
    font-size: 6px;
    letter-spacing: 4px;
    color: rgba(212,175,55,0.4);
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
  }

  .label-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
    margin: 10px auto;
  }

  .gallery-title h1 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    letter-spacing: 8px;
    color: #d4af37;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(212,175,55,0.12);
    margin-bottom: 6px;
  }
  .gallery-title .sub {
    font-size: 7px;
    letter-spacing: 3px;
    color: rgba(212,175,55,0.45);
    margin-top: 4px;
  }
  .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }

  .frame {
    position: relative;
    background: linear-gradient(145deg, #1a1816, #0c0a08, #161412, #0e0c0a);
    border: 5px solid #1e1c1a;
    box-shadow: 12px 16px 40px rgba(0,0,0,0.85), -4px -3px 15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02);
    padding: 18px;
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), z-index 0s, box-shadow 0.4s ease;
    cursor: pointer;
  }
  .frame::before { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background: repeating-linear-gradient(92deg, rgba(255,255,255,0.005) 0px, transparent 1px, transparent 8px, rgba(255,255,255,0.003) 9px); pointer-events:none; }
  .frame::after { content:''; position:absolute; top:4px;left:4px;right:4px;bottom:4px; border:1px solid rgba(255,255,255,0.02); pointer-events:none; }
  .frame.expanded { transform: scale(2); z-index: 100; box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 0 2000px rgba(0,0,0,0.5); }
  .frame[data-pos="0"] { transform-origin: top left; }
  .frame[data-pos="1"] { transform-origin: top center; }
  .frame[data-pos="2"] { transform-origin: top right; }
  .frame[data-pos="3"] { transform-origin: bottom left; }
  .frame[data-pos="4"] { transform-origin: bottom center; }
  .frame[data-pos="5"] { transform-origin: bottom right; }

  .matte { padding:16px 14px 14px; background: linear-gradient(160deg, #0d0c0b, #080706, #0b0a09); box-shadow: inset 0 2px 12px rgba(0,0,0,0.9); position:relative; overflow:hidden; }
  .glass { position:absolute; top:0;left:0;right:0;bottom:0; background: linear-gradient(130deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 30%, rgba(255,255,255,0.035) 38%, rgba(255,255,255,0.05) 42%, rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.01) 54%, rgba(255,255,255,0) 70%); pointer-events:none; z-index:20; }

  .disc-area { width:160px; height:160px; margin:5px auto 14px; position:relative; }
  .disc { width:100%; height:100%; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; }
  .disc-metal { position:absolute; width:100%; height:100%; border-radius:50%; background: conic-gradient(from 30deg at 50% 50%, #c49a2c, #dbb840, #c9a530, #b8922a, #d4af37, #ecc94e, #d4af37, #ba952c, #c49a2c, #dbb840, #ccaa34, #b8922a, #d4af37, #ecc94e, #c49a2c); box-shadow: 0 3px 18px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.15); }
  .disc-grooves { position:absolute; width:100%; height:100%; border-radius:50%; background: radial-gradient(circle at 50% 50%, transparent 16%, rgba(0,0,0,0.04) 16.5%, transparent 17%, rgba(0,0,0,0.03) 19.5%, transparent 20%, rgba(0,0,0,0.04) 22.5%, transparent 23%, rgba(0,0,0,0.03) 25.5%, transparent 26%, rgba(0,0,0,0.04) 28.5%, transparent 29%, rgba(0,0,0,0.03) 31.5%, transparent 32%, rgba(0,0,0,0.04) 34.5%, transparent 35%, rgba(0,0,0,0.03) 37.5%, transparent 38%, rgba(0,0,0,0.04) 40.5%, transparent 41%, rgba(0,0,0,0.03) 43.5%, transparent 44%, rgba(0,0,0,0.04) 46.5%, transparent 47%, rgba(0,0,0,0.03) 49.5%, transparent 50%, rgba(0,0,0,0.04) 52.5%, transparent 53%, rgba(0,0,0,0.03) 55.5%, transparent 56%, rgba(0,0,0,0.04) 58.5%, transparent 59%, rgba(0,0,0,0.03) 61.5%, transparent 62%, rgba(0,0,0,0.04) 64.5%, transparent 65%, rgba(0,0,0,0.03) 67.5%, transparent 68%, rgba(0,0,0,0.04) 70.5%, transparent 71%, rgba(0,0,0,0.03) 73.5%, transparent 74%, rgba(0,0,0,0.04) 76.5%, transparent 77%, rgba(0,0,0,0.03) 79.5%, transparent 80%, rgba(0,0,0,0.04) 82.5%, transparent 83%, rgba(0,0,0,0.03) 85.5%, transparent 86%, rgba(0,0,0,0.04) 88.5%, transparent 89%, rgba(0,0,0,0.03) 91.5%, transparent 92%, rgba(0,0,0,0.04) 94.5%, transparent 95%); }
  .disc-streak { position:absolute; width:100%; height:100%; border-radius:50%; background: linear-gradient(135deg, transparent 20%, rgba(255,255,240,0.08) 35%, rgba(255,255,240,0.18) 42%, rgba(255,255,255,0.22) 46%, rgba(255,255,240,0.18) 50%, rgba(255,255,240,0.08) 57%, transparent 72%); pointer-events:none; }
  .disc-glow { position:absolute; top:3%; left:5%; width:40%; height:35%; background: radial-gradient(ellipse, rgba(255,255,240,0.06), transparent); border-radius:50%; pointer-events:none; }
  .disc-rim { position:absolute; width:100%; height:100%; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 0 0 2px rgba(255,255,255,0.03), 0 0 0 1px rgba(0,0,0,0.3); }
  .disc-label { position:absolute; top:50%; left:50%; width:32%; height:32%; transform:translate(-50%,-50%); border-radius:50%; background: linear-gradient(145deg, #151515, #1e1e1e); border:2px solid #2a2a2a; display:flex; align-items:center; justify-content:center; flex-direction:column; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); z-index:2; }
  .disc-label-name { font-size:5px; letter-spacing:1.5px; color:#d4af37; font-weight:bold; text-transform:uppercase; }
  .disc-label-hole { width:3px; height:3px; border-radius:50%; background:#0a0a0a; border:1px solid #252525; margin-top:2px; }

  .bottom-row { display:flex; gap:10px; margin-top:14px; align-items:stretch; }
  .headshot { width:70px; height:70px; flex-shrink:0; border:1px solid #222; box-shadow:0 2px 6px rgba(0,0,0,0.4); overflow:hidden; }
  .headshot img { width:100%; height:100%; object-fit:cover; }
  .plaque { flex:1; background: linear-gradient(145deg, #d4af37, #c9a530, #dbb840, #c9a530, #d4af37); padding:8px 10px 10px; text-align:center; box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); border:1px solid rgba(0,0,0,0.08); display:flex; flex-direction:column; justify-content:center; }
  .plaque-title { font-size:5px; letter-spacing:2.5px; color:rgba(0,0,0,0.35); text-transform:uppercase; margin-bottom:2px; }
  .plaque-name { font-family:'Playfair Display',serif; font-size:10px; color:rgba(0,0,0,0.65); font-weight:bold; margin:1px 0; }
  .plaque-detail { font-size:4.5px; letter-spacing:0.8px; color:rgba(0,0,0,0.3); line-height:1.6; margin-top:2px; }

  /* MARK GLITCH */
  .mark-glitch-canvas { position:absolute; top:0;left:0; width:100%;height:100%; z-index:11; pointer-events:none; opacity:0; transition:opacity 0.05s; }
  .mask-channel { position:absolute; top:0;left:0;right:0;bottom:0; display:flex; align-items:center; justify-content:center; z-index:12; opacity:0; pointer-events:none; mix-blend-mode:screen; }
  .mask-img { width:90px; height:auto; }
  .mask-r .mask-img { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-10deg) brightness(0.7); }
  .mask-g .mask-img { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(80deg) brightness(0.7); }
  .mask-b .mask-img { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(190deg) brightness(0.7); }
  .mark-tear { position:absolute; left:0;right:0; height:0; z-index:13; pointer-events:none; opacity:0; }

  /* CARA FLOWERS — bigger daisies with petals, very slow growth */
  .flower-bed { position:absolute; bottom:0; left:5%; right:5%; height:40px; pointer-events:none; z-index:8; }
  .daisy-stem { position:absolute; bottom:0; width:1.5px; height:0; background:linear-gradient(to top,#2a5225,#4a8a3f); transform-origin:bottom center; }
  .daisy-stem:nth-child(1){left:12%;--h:28px;animation:dg 12s ease-out 1s forwards, dbreeze 2.8s ease-in-out 13s infinite;}
  .daisy-stem:nth-child(2){left:35%;--h:35px;animation:dg 14s ease-out 2s forwards, dbreeze2 3.2s ease-in-out 16s infinite;}
  .daisy-stem:nth-child(3){left:60%;--h:22px;animation:dg 11s ease-out 3s forwards, dbreeze 2.4s ease-in-out 14s infinite;}
  .daisy-stem:nth-child(4){left:82%;--h:30px;animation:dg 13s ease-out 1.5s forwards, dbreeze2 3s ease-in-out 14.5s infinite;}
  @keyframes dg{0%{height:0;}100%{height:var(--h);}}
  @keyframes dbreeze{0%,100%{transform:rotate(0deg);}15%{transform:rotate(-6deg);}40%{transform:rotate(8deg);}60%{transform:rotate(-4deg);}80%{transform:rotate(5deg);}}
  @keyframes dbreeze2{0%,100%{transform:rotate(1deg);}20%{transform:rotate(-7deg);}45%{transform:rotate(6deg);}65%{transform:rotate(-5deg);}85%{transform:rotate(3deg);}}

  /* Daisy leaf */
  .daisy-leaf { position:absolute; width:6px; height:9px; background:#3d7a35; border-radius:0 70% 0 70%; opacity:0; }
  .daisy-leaf.right { left:2px; }
  .daisy-leaf.left { right:2px; border-radius:70% 0 70% 0; }
  .daisy-stem:nth-child(1) .daisy-leaf { top:55%; animation: dl 1s ease-out 8s forwards; }
  .daisy-stem:nth-child(2) .daisy-leaf:nth-of-type(1) { top:40%; animation: dl 1s ease-out 10s forwards; }
  .daisy-stem:nth-child(2) .daisy-leaf:nth-of-type(2) { top:65%; animation: dl 1s ease-out 11s forwards; }
  .daisy-stem:nth-child(3) .daisy-leaf { top:50%; animation: dl 1s ease-out 9s forwards; }
  .daisy-stem:nth-child(4) .daisy-leaf:nth-of-type(1) { top:35%; animation: dl 1s ease-out 9.5s forwards; }
  .daisy-stem:nth-child(4) .daisy-leaf:nth-of-type(2) { top:60%; animation: dl 1s ease-out 10.5s forwards; }
  @keyframes dl{0%{opacity:0;transform:scale(0);}100%{opacity:0.8;transform:scale(1);}}

  /* Daisy flower head with petals */
  .daisy-head { position:absolute; top:-8px; left:50%; transform:translateX(-50%) scale(0); width:16px; height:16px; opacity:0; }
  .daisy-stem:nth-child(1) .daisy-head { animation: db 2s ease-out 10s forwards, dbob 2.8s ease-in-out 13s infinite; }
  .daisy-stem:nth-child(2) .daisy-head { animation: db 2s ease-out 13s forwards, dbob2 3.2s ease-in-out 16s infinite; }
  .daisy-stem:nth-child(3) .daisy-head { animation: db 2s ease-out 11s forwards, dbob 2.5s ease-in-out 14s infinite; }
  .daisy-stem:nth-child(4) .daisy-head { animation: db 2s ease-out 12s forwards, dbob2 3s ease-in-out 14.5s infinite; }
  @keyframes db{0%{opacity:0;transform:translateX(-50%) scale(0);}60%{opacity:1;transform:translateX(-50%) scale(1.1);}100%{opacity:1;transform:translateX(-50%) scale(1);}}
  @keyframes dbob{0%,100%{transform:translateX(-50%) scale(1) rotate(0deg);}25%{transform:translateX(-50%) scale(1) rotate(-6deg);}50%{transform:translateX(-50%) scale(1) rotate(5deg);}75%{transform:translateX(-50%) scale(1) rotate(-3deg);}}
  @keyframes dbob2{0%,100%{transform:translateX(-50%) scale(1) rotate(1deg);}30%{transform:translateX(-50%) scale(1) rotate(7deg);}55%{transform:translateX(-50%) scale(1) rotate(-5deg);}80%{transform:translateX(-50%) scale(1) rotate(3deg);}}

  .petal { position:absolute; width:4px; height:7px; background:#fffdf0; border-radius:50%; top:50%; left:50%; transform-origin:center bottom; }
  .petal:nth-child(1){transform:translate(-50%,-100%) rotate(0deg);}
  .petal:nth-child(2){transform:translate(-50%,-100%) rotate(45deg);}
  .petal:nth-child(3){transform:translate(-50%,-100%) rotate(90deg);}
  .petal:nth-child(4){transform:translate(-50%,-100%) rotate(135deg);}
  .petal:nth-child(5){transform:translate(-50%,-100%) rotate(180deg);}
  .petal:nth-child(6){transform:translate(-50%,-100%) rotate(225deg);}
  .petal:nth-child(7){transform:translate(-50%,-100%) rotate(270deg);}
  .petal:nth-child(8){transform:translate(-50%,-100%) rotate(315deg);}
  .daisy-center { position:absolute; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle,#f5d060,#daa520); top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; }

  /* Pink daisy variant */
  .daisy-pink .petal { background:#f7829e; }
  /* Blue daisy variant */
  .daisy-blue .petal { background:#7eb8e0; }

  /* JACK PLAY BUTTON */
  .frame-jack .disc-label { transition: all 0.3s ease; cursor: default; }
  .frame-jack.expanded .disc-label { background: radial-gradient(circle, #cc0000, #880000); border-color: #ff2222; cursor: pointer; box-shadow: 0 0 12px rgba(255,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); animation: btnPulse 1.5s ease-in-out infinite; }
  .frame-jack.expanded .disc-label-name { color: #fff; font-size: 6px; letter-spacing: 2px; }
  .frame-jack.expanded .disc-label-hole { display: none; }
  @keyframes btnPulse { 0%,100%{ box-shadow: 0 0 12px rgba(255,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); } 50%{ box-shadow: 0 0 20px rgba(255,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2); } }

  /* SPACE INVADERS MODAL */
  .si-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.92); z-index:9999; display:none; align-items:center; justify-content:center; flex-direction:column; }
  .si-modal.active { display:flex; }
  .si-wrap { position:relative; background:#0a0a0a; border:2px solid #00ff41; border-radius:8px; overflow:hidden; box-shadow: 0 0 40px rgba(0,255,65,0.15), 0 0 80px rgba(0,255,65,0.05); }
  .si-canvas { display:block; image-rendering:pixelated; }
  .si-scanlines { position:absolute; top:0;left:0;right:0;bottom:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,0.12) 0px,rgba(0,0,0,0.12) 1px,transparent 1px,transparent 3px); pointer-events:none; }
  .si-glow { position:absolute; top:0;left:0;right:0;bottom:0; box-shadow:inset 0 0 60px rgba(0,255,65,0.06); pointer-events:none; border-radius:6px; }
  .si-close { position:absolute; top:-32px; right:0; background:none; border:none; color:#666; font-size:20px; cursor:pointer; font-family:monospace; padding:4px 8px; }
  .si-close:hover { color:#fff; }

  /* GABE TICKER */
  .ticker-container{overflow:hidden;width:100%;height:12px;margin-top:3px;border-top:1px solid rgba(0,0,0,0.08);padding-top:2px;padding-bottom:2px;position:relative;}
  .ticker-track{display:flex;position:absolute;white-space:nowrap;will-change:transform;}
  .ticker-item{font-size:5.5px;font-weight:bold;letter-spacing:0.3px;padding:0 4px;flex-shrink:0;}
  .ticker-up{color:rgba(0,100,0,0.7);} .ticker-down{color:rgba(160,0,0,0.6);} .ticker-sep{color:rgba(0,0,0,0.15);}

  /* REDACTED PEEKING EYES */
  .headshot-hiding { background: radial-gradient(ellipse at 50% 110%, #2a2420 0%, #100a06 55%, #050302 100%); position: relative; }
  .hiding-eyes { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; animation: peekHide 11s ease-in-out infinite; }
  .eye { width: 13px; height: 9px; background: #f0e3c8; border-radius: 50%/60%; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(0,0,0,0.25); animation: eyeBlink 4.3s ease-in-out infinite; }
  .eye.eye-r { animation-delay: 0.07s; }
  .pupil { position: absolute; left: 50%; top: 55%; width: 4px; height: 4px; background: #0c0602; border-radius: 50%; transform: translate(-50%, -50%); animation: eyeDart 5.7s ease-in-out infinite; }
  @keyframes eyeBlink { 0%, 92%, 96%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
  @keyframes eyeDart { 0%, 28%, 60%, 100% { margin-left: 0; } 33%, 55% { margin-left: -3px; } 68%, 85% { margin-left: 3px; } }
  @keyframes peekHide { 0%, 82%, 100% { transform: translateY(0); opacity: 1; } 88%, 94% { transform: translateY(14px); opacity: 0.6; } }

  /* MARG PAW PRINTS */
  .paw-prints{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9;}
  .paw{position:absolute;opacity:0;font-size:18px;filter:grayscale(1) brightness(0.4);}
  @keyframes pawAppear{0%{opacity:0;}10%{opacity:0.25;}80%{opacity:0.25;}100%{opacity:0;}}
  .paw-1{top:72%;left:12%;transform:rotate(-20deg);animation:pawAppear 8s ease-in-out 2s infinite;}
  .paw-2{top:55%;left:30%;transform:rotate(-15deg);animation:pawAppear 8s ease-in-out 3s infinite;}
  .paw-3{top:38%;left:18%;transform:rotate(-25deg);animation:pawAppear 8s ease-in-out 4s infinite;}
  .paw-4{top:22%;left:38%;transform:rotate(-10deg);animation:pawAppear 8s ease-in-out 5s infinite;}
  .paw-5{top:10%;left:55%;transform:rotate(-30deg);animation:pawAppear 8s ease-in-out 6s infinite;}
  .scratch-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;}
  .scratch-line{stroke:rgba(255,255,255,0.05);stroke-width:0.3;fill:none;stroke-linecap:round;}

  /* DIFFERENT GOLD SHADES PER DISC */
  .frame-mark .disc-metal { background: conic-gradient(from 30deg, #b8922a, #d0a830, #b8902a, #a8822a, #b8922a, #d4aa30, #b8922a, #a8822a, #b8922a, #d0a830, #b8922a, #a8822a, #b8922a, #d4aa30, #b8922a); filter: brightness(0.9) saturate(0.85); }
  .frame-cara .disc-metal { background: conic-gradient(from 60deg, #d4b842, #ecd050, #d4b842, #c4a838, #d4b842, #f0d858, #d4b842, #c4a838, #d4b842, #ecd050, #d4b842, #c4a838, #d4b842, #f0d858, #d4b842); filter: brightness(1.05); }
  .frame-jack .disc-metal { background: conic-gradient(from 10deg, #c09828, #d8b038, #c09828, #a88820, #c09828, #d8b038, #c09828, #a88820, #c09828, #d8b038, #c09828, #a88820, #c09828, #d8b038, #c09828); filter: brightness(0.85) saturate(0.8); }
  .frame-redacted .disc-metal { filter: brightness(0.95) saturate(0.9) contrast(0.95); }
  .frame-redacted .disc-label-name { color: #0a0a0a; font-size: 7px; letter-spacing: 0; text-shadow: 0 0 1px rgba(0,0,0,0.9); }
  .frame-gabe .disc-metal { background: conic-gradient(from 45deg, #d4af37, #ecc94e, #d4af37, #c4a030, #d4af37, #f0d060, #d4af37, #c4a030, #d4af37, #ecc94e, #d4af37, #c4a030, #d4af37, #f0d060, #d4af37); filter: brightness(1.08) saturate(1.1); }
  .frame-marg .disc-metal { filter: brightness(1.1) saturate(1.15); }

  /* MARG DOORBELL */
  .frame-marg .disc-label { transition: all 0.3s ease; cursor: default; }
  .frame-marg.expanded .disc-label { background: radial-gradient(circle, #f5e6c8, #c9a530); border-color: #d4af37; cursor: pointer; box-shadow: 0 0 8px rgba(212,175,55,0.5), inset 0 2px 4px rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2); }
  .frame-marg.expanded .disc-label-name { color: #3a2a0a; font-size: 4px; letter-spacing: 1.5px; }
  .frame-marg.expanded .disc-label-hole { display: none; }
  .frame-marg.expanded .disc-label:active { box-shadow: 0 0 4px rgba(212,175,55,0.3), inset 0 1px 6px rgba(0,0,0,0.5); transform: translate(-50%,-50%) scale(0.95); }

  /* ANGRY MARG IN-FRAME */
  .marg-angry { position:absolute; top:0; left:0; right:0; bottom:0; z-index:15; display:none; overflow:hidden; }
  .marg-angry.active { display:block; }
  .marg-angry img { width:100%; height:100%; object-fit:cover; object-position:center 15%; transform:scale(0); opacity:0; }
  .marg-angry.active img { animation: margSlam 0.35s cubic-bezier(0.17,0.67,0.3,1.3) forwards; }
  @keyframes margSlam { 0%{transform:scale(0) rotate(-5deg);opacity:0;} 55%{transform:scale(1.12) rotate(2deg);opacity:1;} 75%{transform:scale(0.97) rotate(-1deg);} 100%{transform:scale(1) rotate(0deg);opacity:1;} }
  @keyframes frameShake { 0%,100%{transform:translate(0,0);} 12%{transform:translate(-3px,2px);} 25%{transform:translate(2px,-2px);} 37%{transform:translate(-2px,3px);} 50%{transform:translate(3px,-1px);} 62%{transform:translate(-1px,2px);} 75%{transform:translate(2px,-2px);} 87%{transform:translate(-1px,1px);} }
  .frame-marg.shaking .matte { animation: frameShake 0.4s ease-in-out; }

  /* WALKING SHADOW */
  .gallery-shadow {
    position: fixed;
    bottom: 0;
    left: -200px;
    width: 120px;
    height: 100vh;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.25) 50%,
      rgba(0,0,0,0.15) 70%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 50;
    opacity: 0;
  }

  /* SECURITY OVERLAY — triggered after 30s of activity */
  .sec-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 1.5s ease-in;
  }
  .sec-overlay.active { opacity: 1; }

  /* Scanlines */
  .sec-scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px);
    z-index: 1;
  }

  /* Vignette */
  .sec-vignette {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
  }

  /* Corner brackets */
  .sec-corner { position: absolute; width: 20px; height: 20px; border-color: rgba(255,255,255,0.1); border-style: solid; border-width: 0; z-index: 3; }
  .sec-corner.tl { top: 15px; left: 15px; border-top-width: 1px; border-left-width: 1px; }
  .sec-corner.tr { top: 15px; right: 15px; border-top-width: 1px; border-right-width: 1px; }
  .sec-corner.bl { bottom: 15px; left: 15px; border-bottom-width: 1px; border-left-width: 1px; }
  .sec-corner.br { bottom: 15px; right: 15px; border-bottom-width: 1px; border-right-width: 1px; }

  /* REC indicator */
  .sec-rec {
    position: absolute;
    top: 18px; left: 20px;
    display: flex; align-items: center; gap: 6px;
    z-index: 4;
    font-family: 'Courier New', monospace;
  }
  @keyframes secBlink { 0%,45%{opacity:1;}50%,55%{opacity:0;}60%,100%{opacity:1;} }
  .sec-rec-dot {
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 6px rgba(204,0,0,0.8);
    animation: secBlink 1.5s ease-in-out infinite;
  }
  /* Day mode: red */
  .sec-overlay.day .sec-rec-dot { background: #cc0000; }
  .sec-overlay.day .sec-rec-text { color: #cc0000; font-size: 10px; letter-spacing: 2px; font-weight: bold; }
  .sec-overlay.day .sec-cam-id { color: rgba(255,255,255,0.2); }
  .sec-overlay.day .sec-timestamp { color: rgba(255,255,255,0.25); }

  /* Night mode: green */
  .sec-overlay.night .sec-rec-dot { background: #00ff41; box-shadow: 0 0 6px rgba(0,255,65,0.8); }
  .sec-overlay.night .sec-rec-text { color: rgba(0,255,65,0.7); font-size: 10px; letter-spacing: 2px; font-weight: bold; }
  .sec-overlay.night .sec-cam-id { color: rgba(0,255,65,0.2); }
  .sec-overlay.night .sec-timestamp { color: rgba(0,255,65,0.25); }
  .sec-overlay.night .sec-corner { border-color: rgba(0,255,65,0.08); }
  .sec-overlay.night .sec-vignette { background: radial-gradient(ellipse at center, rgba(0,30,0,0.05) 0%, rgba(0,15,0,0.25) 60%, rgba(0,0,0,0.5) 100%); }
  .sec-overlay.night .sec-scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 2px); }

  .sec-cam-id {
    position: absolute;
    top: 18px; right: 20px;
    font-size: 8px; letter-spacing: 1px;
    font-family: 'Courier New', monospace;
    z-index: 4;
  }
  .sec-timestamp {
    position: absolute;
    bottom: 18px; left: 20px;
    font-size: 9px; letter-spacing: 1px;
    font-family: 'Courier New', monospace;
    z-index: 4;
  }
  .sec-crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 40px; height: 40px;
    z-index: 3;
  }
  .sec-crosshair::before, .sec-crosshair::after {
    content: ''; position: absolute;
  }
  .sec-overlay.day .sec-crosshair::before { width:1px; height:100%; left:50%; background:rgba(255,255,255,0.06); }
  .sec-overlay.day .sec-crosshair::after { height:1px; width:100%; top:50%; background:rgba(255,255,255,0.06); }
  .sec-overlay.night .sec-crosshair { width:50px; height:50px; border:1px solid rgba(0,255,65,0.06); border-radius:50%; }
  .sec-overlay.night .sec-crosshair::before { width:1px; height:60px; left:50%; top:-5px; background:rgba(0,255,65,0.04); }
  .sec-overlay.night .sec-crosshair::after { height:1px; width:60px; top:50%; left:-5px; background:rgba(0,255,65,0.04); }

  @media(max-width:700px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
  @media(max-width:450px){.gallery-grid{grid-template-columns:1fr;max-width:300px;}}
</style>
</head>
<body>
<div class="sec-overlay" id="secOverlay">
  <div class="sec-scanlines"></div>
  <div class="sec-vignette"></div>
  <div class="sec-corner tl"></div><div class="sec-corner tr"></div><div class="sec-corner bl"></div><div class="sec-corner br"></div>
  <div class="sec-rec"><div class="sec-rec-dot"></div><div class="sec-rec-text">REC</div></div>
  <div class="sec-cam-id" id="secCamId">CAM 01 · GALLERY A</div>
  <div class="sec-crosshair"></div>
  <div class="sec-timestamp" id="secTimestamp"></div>
</div>
<div class="wall">
  <div class="gallery-title">
    <div class="label-logo">
      <span class="label-name">Transatlantic Chaos</span>
      <span class="label-tagline">Records · Est. MM–MMXXVI</span>
    </div>
    <div class="label-divider"></div>
    <div class="sub">London · Brighton · Seattle · Mill Valley · Brighton · The World's Oceans</div>
  </div>
  <div class="gallery-grid">

    <!-- MARK -->
    <div class="frame frame-mark">
      <div class="matte" id="markMatte">
        <div class="glass"></div>
        <canvas class="mark-glitch-canvas" id="markNoise"></canvas>
        <div class="mask-channel mask-r" id="maskR"><img class="mask-img" src="images/mask.png" alt=""></div>
        <div class="mask-channel mask-g" id="maskG"><img class="mask-img" src="images/mask.png" alt=""></div>
        <div class="mask-channel mask-b" id="maskB"><img class="mask-img" src="images/mask.png" alt=""></div>
        <div class="mark-tear" id="tear1"></div><div class="mark-tear" id="tear2"></div><div class="mark-tear" id="tear3"></div><div class="mark-tear" id="tear4"></div>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label"><div class="disc-label-name">Mark</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot"><img src="images/mark.jpg" alt="Mark"></div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">Mark Curphey</div><div class="plaque-detail">Hacker, Software Developer,<br>Cyclist &amp; Aspiring Sailor</div></div>
        </div>
      </div>
    </div>

    <!-- CARA -->
    <div class="frame frame-cara">
      <div class="matte">
        <div class="glass"></div>
        <div class="flower-bed">
          <div class="daisy-stem">
            <div class="daisy-leaf right"></div>
            <div class="daisy-head"><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="daisy-center"></div></div>
          </div>
          <div class="daisy-stem">
            <div class="daisy-leaf right"></div>
            <div class="daisy-leaf left"></div>
            <div class="daisy-head daisy-pink"><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="daisy-center"></div></div>
          </div>
          <div class="daisy-stem">
            <div class="daisy-leaf left"></div>
            <div class="daisy-head daisy-blue"><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="daisy-center"></div></div>
          </div>
          <div class="daisy-stem">
            <div class="daisy-leaf right"></div>
            <div class="daisy-leaf left"></div>
            <div class="daisy-head"><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="petal"></div><div class="daisy-center"></div></div>
          </div>
        </div>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label"><div class="disc-label-name">Cara</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot"><img src="images/cara.jpg" alt="Cara"></div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">Cara Curphey</div><div class="plaque-detail">Businesswoman &amp; Head Gardener<br>For services to horticulture</div></div>
        </div>
      </div>
    </div>

    <!-- JACK -->
    <div class="frame frame-jack">
      <div class="matte">
        <div class="glass"></div>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label" id="jackPlayBtn"><div class="disc-label-name">Jack</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot"><img src="images/jack.jpg" alt="Jack"></div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">Jack Curphey</div><div class="plaque-detail">Engineer, Mechanic<br>&amp; Hardcore Gamer</div></div>
        </div>
      </div>
    </div>

    <!-- REDACTED (our shyest Curphey) -->
    <div class="frame frame-redacted">
      <div class="matte">
        <div class="glass"></div>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label"><div class="disc-label-name">████</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot headshot-hiding" aria-label="Subject declined to be photographed">
            <div class="hiding-eyes">
              <div class="eye"><div class="pupil"></div></div>
              <div class="eye eye-r"><div class="pupil"></div></div>
            </div>
          </div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">[REDACTED] Curphey</div><div class="plaque-detail">Identity withheld at subject's request.<br>Whereabouts unknown.</div></div>
        </div>
      </div>
    </div>

    <!-- GABE -->
    <div class="frame frame-gabe">
      <div class="matte">
        <div class="glass"></div>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label"><div class="disc-label-name">Gabe</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot"><img src="images/gabe.jpg" alt="Gabe"></div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">Gabe Curphey</div><div class="plaque-detail">Aspiring Businessman</div><div class="ticker-container"><div class="ticker-track" id="tickerTrack"></div></div></div>
        </div>
      </div>
    </div>

    <!-- MARG -->
    <div class="frame frame-marg">
      <div class="matte">
        <div class="glass"></div>
        <div class="marg-angry" id="margAngry"><img src="images/marg-angry.png" alt="Angry Marg"></div>
        <div class="paw-prints"><div class="paw paw-1">🐾</div><div class="paw paw-2">🐾</div><div class="paw paw-3">🐾</div><div class="paw paw-4">🐾</div><div class="paw paw-5">🐾</div></div>
        <svg class="scratch-svg"><line x1="60%" y1="55%" x2="65%" y2="62%" class="scratch-line"/><line x1="62%" y1="56%" x2="67%" y2="60%" class="scratch-line"/><line x1="25%" y1="70%" x2="30%" y2="78%" class="scratch-line"/><line x1="27%" y1="71%" x2="31%" y2="76%" class="scratch-line"/></svg>
        <div class="disc-area"><div class="disc"><div class="disc-metal"></div><div class="disc-grooves"></div><div class="disc-streak"></div><div class="disc-glow"></div><div class="disc-rim"></div><div class="disc-label" id="margBellBtn"><div class="disc-label-name" style="font-size:4px;">Marg</div><div class="disc-label-hole"></div></div></div></div>
        <div class="bottom-row">
          <div class="headshot"><img src="images/marg.jpg" alt="Marg"></div>
          <div class="plaque"><div class="plaque-title">Presented to</div><div class="plaque-name">Marg</div><div class="plaque-detail">Loyal Chihuahua<br>Lifetime Achievement Award</div></div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- SPACE INVADERS MODAL -->
<div class="si-modal" id="siModal">
  <div class="si-wrap">
    <button class="si-close" id="siClose">✕</button>
    <canvas class="si-canvas" id="siCanvas" style="width:420px;height:520px;"></canvas>
    <div class="si-scanlines"></div>
    <div class="si-glow"></div>
  </div>
</div>

<script>
// MARK GLITCH
(function(){var canvas=document.getElementById('markNoise'),matte=document.getElementById('markMatte'),maskR=document.getElementById('maskR'),maskG=document.getElementById('maskG'),maskB=document.getElementById('maskB'),tears=[document.getElementById('tear1'),document.getElementById('tear2'),document.getElementById('tear3'),document.getElementById('tear4')];function sizeCanvas(){canvas.width=matte.offsetWidth;canvas.height=matte.offsetHeight;}sizeCanvas();window.addEventListener('resize',sizeCanvas);var ctx=canvas.getContext('2d'),glitching=false,glitchEnd=0;function drawNoise(){var w=canvas.width,h=canvas.height,imgData=ctx.createImageData(w,h),d=imgData.data;for(var i=0;i<d.length;i+=4){var v=Math.random()*255;d[i]=v;d[i+1]=v;d[i+2]=v;d[i+3]=50;}ctx.putImageData(imgData,0,0);}function fireTear(t){var y=Math.random()*100,h=2+Math.random()*8,o=(Math.random()-0.5)*12;t.style.top=y+'%';t.style.height=h+'px';t.style.opacity='1';t.style.transform='translateX('+o+'px)';t.style.background='rgba(129,244,22,'+(0.05+Math.random()*0.08)+')';setTimeout(function(){t.style.opacity='0';t.style.height='0';},40+Math.random()*60);}function triggerGlitch(){glitching=true;glitchEnd=Date.now()+200+Math.random()*600;canvas.style.opacity='1';var sx=3+Math.random()*5,sy=(Math.random()-0.5)*4;maskR.style.opacity='0.7';maskG.style.opacity='0.7';maskB.style.opacity='0.7';maskR.style.transform='translate('+(-sx)+'px,'+(-sy)+'px)';maskG.style.transform='translate(0,0)';maskB.style.transform='translate('+sx+'px,'+sy+'px)';var d=0;tears.forEach(function(t){setTimeout(function(){fireTear(t);},d);d+=30+Math.random()*40;});}function hideGlitch(){glitching=false;canvas.style.opacity='0';maskR.style.opacity='0';maskG.style.opacity='0';maskB.style.opacity='0';}var lastN=0;function loop(ts){if(glitching){if(ts-lastN>66){drawNoise();lastN=ts;}if(Math.random()>0.5){var jx=2+Math.random()*6,jy=(Math.random()-0.5)*5;maskR.style.transform='translate('+(-jx)+'px,'+(-jy)+'px)';maskB.style.transform='translate('+jx+'px,'+jy+'px)';}if(Math.random()>0.65)fireTear(tears[Math.floor(Math.random()*tears.length)]);if(Date.now()>glitchEnd)hideGlitch();}else{if(Math.random()>0.997)triggerGlitch();}requestAnimationFrame(loop);}setTimeout(triggerGlitch,2000);requestAnimationFrame(loop);})();
// GABE TICKER
(function(){var items=[{t:'CURPH \u25b242.0',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'},{t:'FAM \u25b2100.0',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'},{t:'GABE \u25b2999.9',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'},{t:'SLEEP \u25bc2.1',c:'ticker-down'},{t:'\u2502',c:'ticker-sep'},{t:'HUSTLE \u25b288.5',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'},{t:'CHILL \u25bc0.3',c:'ticker-down'},{t:'\u2502',c:'ticker-sep'},{t:'DEALS \u25b277.7',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'},{t:'HAIR \u25b210/10',c:'ticker-up'},{t:'\u2502',c:'ticker-sep'}];var track=document.getElementById('tickerTrack');for(var c=0;c<4;c++){items.forEach(function(item){var span=document.createElement('span');span.className='ticker-item '+item.c;span.textContent=item.t;track.appendChild(span);});}var pos=0;function scroll(){pos-=0.3;if(Math.abs(pos)>=track.scrollWidth/2)pos=0;track.style.transform='translateX('+pos+'px)';requestAnimationFrame(scroll);}requestAnimationFrame(scroll);})();
// DAY/NIGHT MODE
(function(){
  var hour = new Date().getHours();
  var isNight = hour >= 20 || hour < 7;
  document.body.classList.add(isNight ? 'nighttime' : 'daytime');
})();
// HOVER EXPAND + SECURITY TRIGGER
(function(){
  var frames = document.querySelectorAll('.frame');
  var timers = {};
  var expandedSet = new Set();
  var secTriggered = false;

  var frameLinks = { 0: 'https://crashoverride.com', 1: 'https://albion-consulting.com' };

  frames.forEach(function(frame, i) {
    frame.setAttribute('data-pos', i);
    frame.addEventListener('mouseenter', function() {
      timers[i] = setTimeout(function() {
        frames.forEach(function(f) { f.classList.remove('expanded'); });
        frame.classList.add('expanded');
        expandedSet.add(i);
        if (!secTriggered && expandedSet.size >= 6) {
          triggerSecurity();
        }
      }, 1000);
    });
    frame.addEventListener('mouseleave', function() {
      clearTimeout(timers[i]);
      frame.classList.remove('expanded');
    });
    if (frameLinks[i]) {
      frame.addEventListener('click', function() {
        if (frame.classList.contains('expanded')) {
          window.open(frameLinks[i], '_blank');
        }
      });
    }
  });

  var overlay = document.getElementById('secOverlay');
  var tsEl = document.getElementById('secTimestamp');
  var camEl = document.getElementById('secCamId');

  function triggerSecurity() {
    secTriggered = true;
    var hour = new Date().getHours();
    var isNight = hour >= 20 || hour < 7;
    overlay.classList.add(isNight ? 'night' : 'day');
    camEl.textContent = isNight ? 'NV-CAM \u00b7 GALLERY' : 'CAM 01 \u00b7 GALLERY A';
    overlay.classList.add('active');
    updateTimestamp();
    setInterval(updateTimestamp, 1000);
  }

  function updateTimestamp() {
    var now = new Date();
    tsEl.textContent = now.getFullYear() + '-' +
      String(now.getMonth()+1).padStart(2,'0') + '-' +
      String(now.getDate()).padStart(2,'0') + ' ' +
      String(now.getHours()).padStart(2,'0') + ':' +
      String(now.getMinutes()).padStart(2,'0') + ':' +
      String(now.getSeconds()).padStart(2,'0');
  }
})();

// MARG DOORBELL
(function(){
  var margFrame = document.querySelector('.frame-marg');
  var margBtn = document.getElementById('margBellBtn');
  var margLabel = margBtn.querySelector('.disc-label-name');
  var angryDiv = document.getElementById('margAngry');
  var margShowing = false;

  // Show RING when expanded
  var obs = new MutationObserver(function() {
    var expanded = margFrame.classList.contains('expanded');
    margLabel.textContent = expanded ? '🔔 RING' : 'Marg';
    margLabel.style.fontSize = expanded ? '5px' : '4px';
    if (!expanded && margShowing) {
      angryDiv.classList.remove('active');
      margShowing = false;
    }
  });
  obs.observe(margFrame, { attributes: true, attributeFilter: ['class'] });

  margBtn.addEventListener('click', function(e) {
    if (!margFrame.classList.contains('expanded') || margShowing) return;
    e.stopPropagation();
    margBtn.style.pointerEvents = 'none';
    // Brief pause for tension
    setTimeout(function() {
      margShowing = true;
      margFrame.classList.add('shaking');
      angryDiv.classList.add('active');
      setTimeout(function() {
        margFrame.classList.remove('shaking');
        margBtn.style.pointerEvents = '';
      }, 400);
    }, 350);
  });
})();

// JACK SPACE INVADERS
(function(){
  var jackFrame = document.querySelector('.frame-jack');
  var jackBtn = document.getElementById('jackPlayBtn');
  var jackLabel = jackBtn.querySelector('.disc-label-name');
  var modal = document.getElementById('siModal');
  var canvas = document.getElementById('siCanvas');
  var ctx = canvas.getContext('2d');
  var gameRunning = false;
  var animId = null;

  // Show PLAY when expanded
  var obs = new MutationObserver(function() {
    if (jackFrame.classList.contains('expanded')) {
      jackLabel.textContent = '▶ PLAY';
    } else {
      jackLabel.textContent = 'Jack';
    }
  });
  obs.observe(jackFrame, { attributes: true, attributeFilter: ['class'] });

  // Click play button
  jackBtn.addEventListener('click', function(e) {
    if (!jackFrame.classList.contains('expanded')) return;
    e.stopPropagation();
    openGame();
  });

  document.getElementById('siClose').addEventListener('click', closeGame);

  function openGame() {
    modal.classList.add('active');
    startGame();
  }

  function closeGame() {
    modal.classList.remove('active');
    gameRunning = false;
    if (animId) cancelAnimationFrame(animId);
    jackFrame.classList.remove('expanded');
  }

  // ── GAME ENGINE ──
  var W = 420, H = 520;
  canvas.width = W;
  canvas.height = H;

  var player, aliens, playerBullets, alienBullets, score, gameOver, gameWon, showingHint, hintTimer;
  var keys = {};

  // Pixel sprite definitions
  var SPRITES = {
    invader1: [
      [0,0,1,0,0,0,0,0,1,0,0],
      [0,0,0,1,0,0,0,1,0,0,0],
      [0,0,1,1,1,1,1,1,1,0,0],
      [0,1,1,0,1,1,1,0,1,1,0],
      [1,1,1,1,1,1,1,1,1,1,1],
      [1,0,1,1,1,1,1,1,1,0,1],
      [1,0,1,0,0,0,0,0,1,0,1],
      [0,0,0,1,1,0,1,1,0,0,0]
    ],
    invader2: [
      [0,0,0,1,1,0,0,0],
      [0,0,1,1,1,1,0,0],
      [0,1,1,1,1,1,1,0],
      [1,1,0,1,1,0,1,1],
      [1,1,1,1,1,1,1,1],
      [0,0,1,0,0,1,0,0],
      [0,1,0,1,1,0,1,0],
      [1,0,1,0,0,1,0,1]
    ],
    ship: [
      [0,0,0,0,0,1,0,0,0,0,0],
      [0,0,0,0,1,1,1,0,0,0,0],
      [0,0,0,0,1,1,1,0,0,0,0],
      [0,1,1,1,1,1,1,1,1,1,0],
      [1,1,1,1,1,1,1,1,1,1,1],
      [1,1,1,1,1,1,1,1,1,1,1]
    ]
  };

  function drawSprite(sprite, x, y, s, color) {
    ctx.fillStyle = color;
    for (var r = 0; r < sprite.length; r++)
      for (var c = 0; c < sprite[r].length; c++)
        if (sprite[r][c]) ctx.fillRect(x + c * s, y + r * s, s, s);
  }

  function initGame() {
    score = 0;
    gameOver = false;
    gameWon = false;
    showingHint = true;
    hintTimer = 120; // ~2 seconds at 60fps
    player = { x: W / 2 - 16, y: H - 50, w: 33, h: 18, speed: 4 };
    playerBullets = [];
    alienBullets = [];
    aliens = [];
    var colors = ['#00ff41', '#33ff77', '#00ccff'];
    for (var row = 0; row < 3; row++) {
      for (var col = 0; col < 8; col++) {
        aliens.push({
          x: 40 + col * 44,
          y: 60 + row * 40,
          w: row === 0 ? 24 : 33,
          h: 24,
          row: row,
          alive: true,
          color: colors[row],
          sprite: row === 0 ? SPRITES.invader2 : SPRITES.invader1
        });
      }
    }
    aliens.dir = 1;
    aliens.speed = 1;
    aliens.moveTimer = 0;
    aliens.moveInterval = 45;
    aliens.shootTimer = 0;
  }

  function startGame() {
    gameRunning = true;
    initGame();
    loop();
  }

  function loop() {
    if (!gameRunning) return;
    update();
    draw();
    animId = requestAnimationFrame(loop);
  }

  function update() {
    if (showingHint) {
      hintTimer--;
      if (hintTimer <= 0) showingHint = false;
      return;
    }
    if (gameOver || gameWon) return;

    // Player movement
    if (keys['ArrowLeft'] && player.x > 4) player.x -= player.speed;
    if (keys['ArrowRight'] && player.x < W - player.w - 4) player.x += player.speed;

    // Player bullets
    for (var i = playerBullets.length - 1; i >= 0; i--) {
      playerBullets[i].y -= 6;
      if (playerBullets[i].y < 0) playerBullets.splice(i, 1);
    }

    // Alien bullets
    for (var i = alienBullets.length - 1; i >= 0; i--) {
      alienBullets[i].y += 3;
      if (alienBullets[i].y > H) { alienBullets.splice(i, 1); continue; }
      // Hit player?
      if (alienBullets[i].x > player.x && alienBullets[i].x < player.x + player.w &&
          alienBullets[i].y > player.y && alienBullets[i].y < player.y + player.h) {
        gameOver = true;
        return;
      }
    }

    // Alien movement
    aliens.moveTimer++;
    if (aliens.moveTimer >= aliens.moveInterval) {
      aliens.moveTimer = 0;
      var hitEdge = false;
      for (var i = 0; i < aliens.length; i++) {
        if (!aliens[i].alive) continue;
        if ((aliens[i].x + aliens[i].w + 8 * aliens.dir > W - 10) || (aliens[i].x + 8 * aliens.dir < 10)) {
          hitEdge = true;
          break;
        }
      }
      if (hitEdge) {
        aliens.dir *= -1;
        for (var i = 0; i < aliens.length; i++) {
          if (aliens[i].alive) aliens[i].y += 16;
        }
        // Speed up slightly
        if (aliens.moveInterval > 15) aliens.moveInterval -= 2;
      } else {
        for (var i = 0; i < aliens.length; i++) {
          if (aliens[i].alive) aliens[i].x += 8 * aliens.dir;
        }
      }
    }

    // Alien shooting
    aliens.shootTimer++;
    if (aliens.shootTimer > 60) {
      aliens.shootTimer = 0;
      var living = aliens.filter(function(a) { return a.alive; });
      if (living.length > 0) {
        var shooter = living[Math.floor(Math.random() * living.length)];
        alienBullets.push({ x: shooter.x + shooter.w / 2, y: shooter.y + shooter.h });
      }
    }

    // Bullet-alien collision
    for (var b = playerBullets.length - 1; b >= 0; b--) {
      for (var a = 0; a < aliens.length; a++) {
        if (!aliens[a].alive) continue;
        if (playerBullets[b] &&
            playerBullets[b].x > aliens[a].x && playerBullets[b].x < aliens[a].x + aliens[a].w &&
            playerBullets[b].y > aliens[a].y && playerBullets[b].y < aliens[a].y + aliens[a].h) {
          aliens[a].alive = false;
          playerBullets.splice(b, 1);
          score += (3 - aliens[a].row) * 10;
          break;
        }
      }
    }

    // Check alien reached player
    for (var i = 0; i < aliens.length; i++) {
      if (aliens[i].alive && aliens[i].y + aliens[i].h >= player.y) {
        gameOver = true;
        return;
      }
    }

    // Check win
    if (aliens.filter(function(a) { return a.alive; }).length === 0) {
      gameWon = true;
    }
  }

  function draw() {
    ctx.fillStyle = '#0a0a0a';
    ctx.fillRect(0, 0, W, H);

    if (showingHint) {
      ctx.fillStyle = '#00ff41';
      ctx.font = 'bold 16px monospace';
      ctx.textAlign = 'center';
      ctx.fillText('SPACE INVADERS', W / 2, H / 2 - 50);
      ctx.fillStyle = '#00ccff';
      ctx.font = '12px monospace';
      ctx.fillText('← → ARROW KEYS : MOVE', W / 2, H / 2);
      ctx.fillText('SPACE : FIRE', W / 2, H / 2 + 24);
      ctx.fillStyle = '#666';
      ctx.font = '10px monospace';
      ctx.fillText('ESC : QUIT', W / 2, H / 2 + 56);
      ctx.textAlign = 'left';
      return;
    }

    // Score
    ctx.fillStyle = '#00ff41';
    ctx.font = 'bold 14px monospace';
    ctx.fillText('SCORE: ' + String(score).padStart(4, '0'), 12, 24);

    // Ground line
    ctx.fillStyle = '#00ff41';
    ctx.fillRect(0, H - 20, W, 1);

    // Aliens
    for (var i = 0; i < aliens.length; i++) {
      if (!aliens[i].alive) continue;
      var s = aliens[i].row === 0 ? 3 : 3;
      drawSprite(aliens[i].sprite, aliens[i].x, aliens[i].y, s, aliens[i].color);
    }

    // Player
    drawSprite(SPRITES.ship, player.x, player.y, 3, '#00ccff');

    // Player bullets
    ctx.fillStyle = '#ffff00';
    for (var i = 0; i < playerBullets.length; i++) {
      ctx.fillRect(playerBullets[i].x, playerBullets[i].y, 2, 8);
    }

    // Alien bullets
    ctx.fillStyle = '#ff4444';
    for (var i = 0; i < alienBullets.length; i++) {
      ctx.fillRect(alienBullets[i].x, alienBullets[i].y, 2, 8);
    }

    // Game over / win
    if (gameOver || gameWon) {
      ctx.fillStyle = 'rgba(0,0,0,0.7)';
      ctx.fillRect(0, H / 2 - 70, W, 140);
      ctx.textAlign = 'center';
      ctx.fillStyle = gameWon ? '#00ff41' : '#ff4444';
      ctx.font = 'bold 24px monospace';
      ctx.fillText(gameWon ? 'WAVE CLEARED!' : 'GAME OVER', W / 2, H / 2 - 20);
      ctx.fillStyle = '#fff';
      ctx.font = '14px monospace';
      ctx.fillText('SCORE: ' + score, W / 2, H / 2 + 12);
      ctx.fillStyle = '#00ccff';
      ctx.font = '12px monospace';
      ctx.fillText('[ SPACE ] PLAY AGAIN', W / 2, H / 2 + 44);
      ctx.fillStyle = '#666';
      ctx.fillText('[ ESC ] CLOSE', W / 2, H / 2 + 64);
      ctx.textAlign = 'left';
    }
  }

  // Keyboard
  document.addEventListener('keydown', function(e) {
    if (!gameRunning) return;
    keys[e.key] = true;
    if (e.key === ' ' || e.key === 'Spacebar') {
      e.preventDefault();
      if (showingHint) { showingHint = false; return; }
      if (gameOver || gameWon) { initGame(); return; }
      if (playerBullets.length < 1) {
        playerBullets.push({ x: player.x + player.w / 2 - 1, y: player.y - 4 });
      }
    }
    if (e.key === 'Escape') {
      closeGame();
    }
    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') e.preventDefault();
  });
  document.addEventListener('keyup', function(e) {
    keys[e.key] = false;
  });
})();
</script>
</body>
</html>
