*{
    margin:0;
    padding:0;
}
:root {
    /* Torch position (updated by JS each frame; default = centred) */
    --mx: 50%;
    --my: 42%;
}
body {
    font:14px/1.3 Arial,sans-serif;
    /* Deep, layered navy so the chrome gears read as polished steel under blue light,
       with a subtle tiled "01" bit-stream texture floating on top. */
    background:
        url('../images/bits-tile.svg') repeat,
        radial-gradient(1200px 480px at 50% 50%, #0a4a8f 0%, rgba(0,46,97,0) 70%),
        linear-gradient(180deg, #001f45 0%, #002E61 45%, #00163a 100%);
    background-attachment: fixed;
    color:#fff;

    /* Center the whole composition (logo + tagline + gears) in the
       viewport, on both axes, at any window size. */
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* ============================================================
   TORCH — a moving spotlight that reveals a brighter copy of the
   bit-stream only inside a soft circle at the cursor. Fixed to the
   viewport, sits above the background but below the content, never
   intercepts clicks, and blends with "screen" so it only ever
   lightens the navy (never darkens the logo or gears).
   ============================================================ */
.torch {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* soft beam lighting the "wall" within the circle */
        radial-gradient(circle 260px at var(--mx) var(--my),
            rgba(130,195,255,0.22) 0%, rgba(120,190,255,0.06) 45%, rgba(120,190,255,0) 72%),
        /* the bright bits (revealed by the mask below) */
        url('../images/bits-tile-glow.svg') repeat;
    mix-blend-mode: screen;

    -webkit-mask-image: radial-gradient(circle 245px at var(--mx) var(--my),
        #000 0%, #000 30%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 74%);
            mask-image: radial-gradient(circle 245px at var(--mx) var(--my),
        #000 0%, #000 30%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 74%);
}

/* ============================================================
   FRAMES — small rounded borders that frame random groups of 4 or
   8 bits and blink/relocate around the field. Same torch-centred
   radial mask as .torch, but with a ~10% floor (never fully zero)
   so the borders stay faintly visible everywhere and glow brightly
   wherever the torch sweeps. JS creates/positions the boxes.
   ============================================================ */
.frames {
    position: fixed;
    inset: 0;
    z-index: 1;                 /* above the torch's bits, below the logo/gears */
    pointer-events: none;
    /* No mask / blend / filter — the borders' glow is driven purely by cheap
       per-box opacity from JS (distance to the torch). */
}
.frame {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(195,226,255,0.95);
    border-radius: 4px;
    box-shadow:
        0 0 6px rgba(150,205,255,0.50),
        inset 0 0 5px rgba(150,205,255,0.28);
    opacity: 0;                 /* JS drives this every frame: blink x proximity */
    will-change: opacity;       /* promote so opacity updates are compositor-only */
}

/* The centered content column */
.stage {
    position: relative;
    z-index: 2;                 /* ABOVE the torch so the logo/gears stay clean */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    width: 100%;
}
.logo {
    display: block;
    line-height: 0;
}
.logo img {
    width: 540px;
    max-width: 80vw;
    height: auto;
    /* Bold, layered drop-shadow traces the logo's transparent silhouette
       (a soft lift + a tight dark edge) so it floats off the navy. */
    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,0.55))
        drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
a { color: #fff; }
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    color:#fff;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

body p {
    font-family: Arial;
    font-size:22px;
    font-weight:bold;
    line-height:18px;
    margin: 26px auto 6px;       /* +20px gap below the logo */
    padding-bottom: 4px;
    /* Matching bold shadow for the tagline text */
    text-shadow:
        0 4px 9px rgba(0,0,0,0.9),
        0 2px 3px rgba(0,0,0,0.75),
        0 1px 1px rgba(0,0,0,0.7);
}

/* ============================================================
   HORIZONTAL GEAR TRAIN
   A left-to-right meshing chain of 7 gears. Each gear is placed
   so its centre is ~0.90*(r1+r2) from its neighbour (the ~10%
   tooth overlap that sells the "they interlock" illusion), and
   the chain zig-zags +/-20 deg around the axis for a horizontal
   band with vertical rhythm.
   ============================================================ */
.container {
    position: relative;
    width: 706px;
    height: 290px;
    margin: 8px auto 0;
    max-width: 100%;
}

/* Soft pool of light beneath the train + a faint "rail" line to
   reinforce the horizontal reading of the machine. */
.container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 75% at 50% 50%, rgba(96,178,255,0.16) 0%, rgba(96,178,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.container::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(140,195,255,0) 0%,
        rgba(140,195,255,0.35) 50%,
        rgba(140,195,255,0) 100%);
    box-shadow: 0 0 12px rgba(120,185,255,0.35);
    pointer-events: none;
    z-index: 0;
}

/* CSS3 keyframes (standard + legacy prefixes) */
@keyframes ckw  { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes cckw { from { transform: rotate(360deg); } to { transform: rotate(0deg);   } }
@-webkit-keyframes ckw  { from { -webkit-transform: rotate(0deg);   } to { -webkit-transform: rotate(360deg); } }
@-webkit-keyframes cckw { from { -webkit-transform: rotate(360deg); } to { -webkit-transform: rotate(0deg);   } }
@-moz-keyframes ckw  { from { -moz-transform: rotate(0deg);   } to { -moz-transform: rotate(360deg); } }
@-moz-keyframes cckw { from { -moz-transform: rotate(360deg); } to { -moz-transform: rotate(0deg);   } }

/* gears */
.gear {
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: center;
    will-change: transform;

    /* Drop shadow for depth + a cool cyan rim-glow so the silver
       gears pop against the navy backdrop. Slightly deeper/darker
       shadow for a bit more lift off the background. */
    filter:
        drop-shadow(0 9px 10px rgba(0,0,0,0.6))
        drop-shadow(0 0 9px rgba(96,178,255,0.22));

    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

/* 1 - g4  (r72)  clockwise */
#gear1 {
    background-image: url('../images/g4.png');
    width: 144px; height: 144px;
    left: 18px;  top: 88px;
    animation: ckw 11.52s linear infinite;
    -moz-animation: ckw 11.52s linear infinite;
    -webkit-animation: ckw 11.52s linear infinite;
}
/* 2 - g2  (r62.5) counter-clockwise */
#gear2 {
    background-image: url('../images/g2.png');
    width: 125px; height: 125px;
    left: 141px; top: 56px;
    animation: cckw 10s linear infinite;
    -moz-animation: cckw 10s linear infinite;
    -webkit-animation: cckw 10s linear infinite;
}
/* 3 - g1  (r42.5) clockwise */
#gear3 {
    background-image: url('../images/g1.png');
    width: 85px; height: 85px;
    left: 250px; top: 108px;
    animation: ckw 6.8s linear infinite;
    -moz-animation: ckw 6.8s linear infinite;
    -webkit-animation: ckw 6.8s linear infinite;
}
/* 4 - g3  (r51.5) counter-clockwise */
#gear4 {
    background-image: url('../images/g3.png');
    width: 103px; height: 103px;
    left: 321px; top: 70px;
    animation: cckw 8.24s linear infinite;
    -moz-animation: cckw 8.24s linear infinite;
    -webkit-animation: cckw 8.24s linear infinite;
}
/* 5 - g1  (r42.5) clockwise */
#gear5 {
    background-image: url('../images/g1.png');
    width: 85px; height: 85px;
    left: 409px; top: 108px;
    animation: ckw 6.8s linear infinite;
    -moz-animation: ckw 6.8s linear infinite;
    -webkit-animation: ckw 6.8s linear infinite;
}
/* 6 - g2  (r62.5) counter-clockwise */
#gear6 {
    background-image: url('../images/g2.png');
    width: 125px; height: 125px;
    left: 478px; top: 56px;
    animation: cckw 10s linear infinite;
    -moz-animation: cckw 10s linear infinite;
    -webkit-animation: cckw 10s linear infinite;
}
/* 7 - g3  (r51.5) clockwise */
#gear7 {
    background-image: url('../images/g3.png');
    width: 103px; height: 103px;
    left: 585px; top: 102px;
    animation: ckw 8.24s linear infinite;
    -moz-animation: ckw 8.24s linear infinite;
    -webkit-animation: ckw 8.24s linear infinite;
}

/* Scale the fixed-width train down gracefully on small screens */
@media (max-width: 760px) {
    .container {
        transform: scale(0.62);
        transform-origin: top center;
        height: 180px;
    }
}