/* Faithful port of the crt-mascot-footer.html reference mockup, marketing
   page only (see base.html's {% block footer %} and home.html's override).
   Kept the reference's own class names, layout, and color palette as
   literally as possible -- the one deliberate substitution is font-family,
   set to this project's --font-primary (Albert Sans) instead of the
   reference's Inter/system-ui stack.

   .speaker/.speaker.left/.speaker.right and .power-dot below are dead
   CSS carried over as-is from the reference: it defines all of them but
   never actually uses them in its own <footer> markup (no .speaker or
   .power-dot elements anywhere in its HTML), so _footer_crt.html doesn't
   use them either. Left them in for a literal 1:1 port rather than
   silently dropping rules that exist in the source file.

   Note: the reference mockup uses var(--ink) throughout (borders, text,
   the drop-shadow edge) but never actually defines an --ink custom
   property anywhere in its own :root block -- without a fallback that's
   an unresolved reference, which computes to the property's inherited/
   initial value rather than the intended "thick black outline" look the
   rest of the design (hard 14px drop shadow, 4px borders) clearly implies.
   Defined it here as a near-black so the outline actually renders. */

.crt-footer {
--shell: #f7f5fb;
--shell-shadow: #d9d4e4;
--purple: #4a0098;
--purple-dark: #23004d;
--purple-light: #7b21d5;
--screen: #c7f000;
--screen-deep: #aee000;
--glow: rgba(199, 240, 0, 0.38);
--ink: #12121a;
position: relative;
isolation: isolate;
margin-top: auto;
color: var(--ink);
font-family: var(--font-primary);
}


.screen-bezel {
position: relative;
padding: 1em 0 0 0;
background: linear-gradient(145deg, var(--purple-light), var(--purple) 48%, var(--purple-dark));
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.08), 0 8px 0 var(--ink);
}

.screen {
color: #08070b;
position: relative;
overflow: hidden;
padding: clamp(1.4rem, 3.5vw, 2.6rem);
background: radial-gradient(circle at 50% 0, #e5ff38 0, transparent 45%), linear-gradient(180deg, var(--screen) 0%, var(--screen-deep) 100%);
box-shadow: inset 0 0 34px rgba(55, 75, 0, 0.24), 0 0 28px var(--glow);
}

.screen::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.17;
pointer-events: none;
background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 4px);
mix-blend-mode: multiply;
}

.footer-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.35fr repeat(3, minmax(110px, 0.65fr));
gap: 2rem;
align-items: start;
}

.brand__logo {
width: clamp(120px, 16vw, 132px);
margin: 0 0 0.6rem;
}

.brand__logo svg {
display: block;
width: 100%;
height: auto;
}

.brand p {
max-width: 36rem;
margin: 0;
line-height: 1.55;
}

.footer-nav h3 {
margin: 0 0 0.65rem;
font-size: 0.78rem;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.footer-nav a {
display: block;
width: fit-content;
margin: 0.45rem 0;
color: var(--ink);
font-weight: 760;
text-decoration: none;
transition: transform 0.18s ease, opacity 0.18s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
opacity: 0.68;
transform: translateX(3px);
}

.footer-bottom {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 1.7rem;
padding-top: 1rem;
font-size: 0.88rem;
}

.power-dot {
display: inline-block;
width: 0.75rem;
aspect-ratio: 1;
margin-right: 0.5rem;
border: 2px solid var(--ink);
border-radius: 50%;
background: #ff4f8d;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
vertical-align: -0.08rem;
}

.speaker {
position: absolute;
top: 42%;
width: 42px;
height: 88px;
border: 4px solid var(--ink);
background: linear-gradient(90deg, #fff, #d8d0e2);
box-shadow: inset 0 0 0 8px var(--purple), inset 0 0 0 12px var(--ink);
}

.speaker.left {
left: -30px;
border-radius: 50% 12px 12px 50%;
}

.speaker.right {
right: -30px;
border-radius: 12px 50% 50% 12px;
}


.footer-grid {
grid-template-columns: 1fr 1fr;
}

.brand {
grid-column: 1 / -1;
}

.speaker {
display: none;
}

@media (max-width: 30rem) {
.footer-grid {
grid-template-columns: 1fr;
}

.brand {
grid-column: auto;
}

.footer-bottom {
flex-direction: column;
}
}

@media (prefers-reduced-motion: no-preference) {
.screen {
animation: crt-glow-pulse 3.6s ease-in-out infinite;
}

@keyframes crt-glow-pulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.07);
}
}
}