:root{
  --bg:#000;
  --green-1:#00ff41;
  --green-2:#39ff14;
  --green-3:#7cffb2;
  --muted:#0b0b0b;
  --glass: rgba(0,0,0,0.45);
  --accent: var(--green-1);
  font-family: 'UnifrakturCook', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* alternative serif for lines containing 'k' to avoid glyph issues */
.alt-font{ font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif; font-size:16.5px; line-height:1.45; color:var(--green-2); }

/* new: gentle side-to-side bounce for the FIND text */
@keyframes side-bounce {
  0%   { transform: translateX(-6px); }
  50%  { transform: translateX(6px); }
  100% { transform: translateX(-6px); }
}
.alt-font{
  /* keep existing styles but add animation */
  animation: side-bounce 2.4s ease-in-out infinite;
  will-change: transform;
}
/* make the movement subtler on small screens */
@media (max-width:640px){
  .alt-font{ animation-duration:3s; transform: translateX(0); animation-name: side-bounce; }
  .ui{padding:12px}
  .card{padding:18px}
  .logo h1{font-size:18px}
  canvas#matrix{filter:contrast(1.1)}
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--green-1);overflow:hidden}
/* new background: dark gradient over the photo for low contrast, image sits beneath the canvas */
html,body{
  /* dark overlay + photo (keeps overall page dark so matrix stands out) */
  background:
    linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.68)),
    url('/Saint Monti & Lovequincyy.jpg') center/cover no-repeat fixed;
  background-blend-mode: normal;
  color:var(--green-1);
  height:100%;
  margin:0;
  overflow:hidden;
}
canvas#matrix{position:fixed;inset:0;z-index:0}

/* DVD bouncing logo */
#dvd-logo{
  position:fixed;
  z-index:1;
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:8px;
  pointer-events:none;
  transform: translate3d(0,0,0);
  will-change: transform;
  mix-blend-mode:screen;
}

.ui{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:18px 28px}
header.ui{justify-content:space-between;border-bottom:1px solid rgba(0,255,65,0.06);backdrop-filter: blur(6px)}
.logo h1{margin:0;font-size:20px;letter-spacing:1px;color:var(--accent)}
.logo .tag{margin:0;font-size:12px;color:rgba(0,255,65,0.6)}
/* logo image and layout */
.logo{display:flex;align-items:center;gap:12px}
.logo-img{width:56px;height:56px;object-fit:contain;border-radius:6px;flex:0 0 56px}
.logo-text{display:flex;flex-direction:column;line-height:1}

.controls .btn{margin-left:8px}

/* ensure buttons align nicely with icons */
.controls .btn{display:inline-flex;align-items:center;gap:8px}
.btn-icon{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 18px}

/* brand link icons for streams and socials */
.link-icon{width:18px;height:18px;object-fit:contain;margin-right:8px;vertical-align:middle;filter:none}

/* Per-brand color adjustments using CSS filters (approximations) */
.icon-spotify{filter: invert(34%) sepia(78%) saturate(530%) hue-rotate(86deg) brightness(98%) contrast(95%);}
.icon-apple{filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(170deg) brightness(95%) contrast(90%); /* white-ish */}
.icon-instagram{filter: invert(46%) sepia(76%) saturate(665%) hue-rotate(330deg) brightness(95%) contrast(95%);}
.icon-facebook{filter: invert(29%) sepia(69%) saturate(400%) hue-rotate(160deg) brightness(95%) contrast(92%);}

/* YouTube Music brand color (approximation) */
.icon-youtubemusic{filter: invert(14%) sepia(93%) saturate(639%) hue-rotate(345deg) brightness(96%) contrast(98%);}

/* add a Tiktok icon tweak (approximate brand color) */
.icon-tiktok{filter: invert(15%) sepia(40%) saturate(2000%) hue-rotate(305deg) brightness(95%) contrast(100%);}

/* add SoundCloud brand color approximation */
.icon-soundcloud{filter: invert(78%) sepia(36%) saturate(3848%) hue-rotate(320deg) brightness(97%) contrast(98%);}

.hero{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:calc(100vh - 120px)}
.card{width:min(880px,92%);background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(10,10,10,0.6));border:1px solid rgba(0,255,65,0.06);padding:28px;border-radius:12px;backdrop-filter: blur(6px);box-shadow: 0 6px 40px rgba(0,0,0,0.6);display:grid;grid-template-columns:1fr;gap:16px;text-align:center;align-items:center;justify-items:center;}
/* click tracker placed opposite the main heading */
/* #click-tracker{align-self:start;justify-self:end;background:rgba(0,0,0,0.35);border:1px solid rgba(0,255,65,0.06);padding:10px 14px;border-radius:10px;min-width:92px;text-align:center;color:var(--green-2)}
#click-tracker .tracker-label{font-size:12px;color:rgba(124,255,178,0.7);font-weight:700;letter-spacing:1px}
#click-count{font-size:20px;font-weight:800;color:var(--accent);margin-top:6px} */
/* click tracker removed */

.card h2{display:none} /* replaced by .grid-btn */

.grid-btn{
  display:inline-block;
  margin:0 0 8px 0;
  color:var(--accent);
  background:transparent;
  border:none;
  outline: none;
  padding:8px 18px;
  border-radius:10px;
  font-size:28px;
  font-weight:600;
  text-decoration:none;
  transition: filter .18s ease, text-shadow .18s ease, font-weight .12s ease, transform .12s ease;
  will-change: transform, text-shadow;
  cursor:pointer;
}
.grid-btn:focus{
  outline: none;
  /* subtle accessible focus ring without default browser outline */
  box-shadow: 0 0 0 6px rgba(57,255,20,0.06);
}
.grid-btn:hover{
  font-weight:800;
  text-shadow: 0 6px 28px rgba(57,255,20,0.22), 0 0 8px rgba(57,255,20,0.12);
  transform: translateY(-3px);
}
.grid-btn:active{
  transform: translateY(0);
  text-shadow: 0 4px 20px rgba(57,255,20,0.16);
}

/* gentle wobble to give "Enter the Grid" life */
@keyframes wobble{
  0%   { transform: rotate(-1.2deg) translateX(0); }
  100% { transform: rotate(0deg)    translateX(0); }
}

.btn-row{display:flex;gap:12px;margin-bottom:12px}
.btn{background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));border:1px solid rgba(57,255,20,0.18);color:#ffffff;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:700;transition: all 180ms ease, box-shadow 180ms ease;outline: none}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(57,255,20,0.18);color:#eaffea}
.btn:active{transform:translateY(0);box-shadow:0 8px 30px rgba(57,255,20,0.12)}
.interactive.active{box-shadow:0 18px 64px rgba(57,255,20,0.32);border-color:var(--green-2);color:var(--green-2);background:linear-gradient(180deg, rgba(57,255,20,0.06), rgba(0,0,0,0.45))}

/* Add glowing click animation */
.interactive {
  transition: transform 160ms ease, box-shadow 200ms ease;
  position: relative;
}
.interactive.active {
  animation: glow-pulse 840ms ease-out;
}
@keyframes glow-pulse {
  0% { box-shadow: 0 0 0 rgba(57,255,20,0.0); transform: translateY(0); }
  30% { box-shadow: 0 0 28px rgba(57,255,20,0.45); transform: translateY(-2px) }
  60% { box-shadow: 0 0 44px rgba(57,255,20,0.32); transform: translateY(-3px) }
  100% { box-shadow: 0 0 0 rgba(57,255,20,0.0); transform: translateY(0) }
}

.player audio{width:100%;margin-top:8px;background:transparent;color:var(--green-2)}

footer.footer{position:relative;z-index:2;justify-content:center;padding:12px 20px;border-top:1px solid rgba(0,255,65,0.04);font-size:12px;color:rgba(0,255,65,0.5);position:fixed;left:0;right:0;bottom:0}

.links-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.stream, .social{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid rgba(0,255,65,0.12);color:var(--green-2);text-decoration:none;font-weight:600;transition:transform .16s ease, box-shadow .16s ease;text-align:center}
.stream:hover, .social:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,255,65,0.12);color:var(--accent);border-color:var(--accent);background:rgba(0,0,0,0.25)}
.signup{display:flex;gap:8px;margin-top:14px;align-items:center}
.signup input[type="email"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,255,65,0.08);background:rgba(0,0,0,0.35);color:var(--green-2);outline:none}
.signup input[type="email"]:focus{box-shadow:0 6px 24px rgba(0,255,65,0.06);border-color:var(--accent)}
.btn.submit{padding:10px 14px}
.btn.submit.large{padding:14px 20px;font-size:16px;border-radius:10px}

/* make the specific unlock button wider and more prominent */
/* #unlock {
    min-width: 300px;
    padding: 16px 26px;
} */
/* unlock button removed */

/* mobile: keep the button responsive and full-width on small screens */
@media (max-width:640px){
  .ui{padding:12px}
  .card{padding:18px}
  .logo h1{font-size:18px}
  canvas#matrix{filter:contrast(1.1)}
  /* #unlock { min-width: 0; width: 100%; padding: 14px 16px; } */
}

/* signup form */
.signup-form{display:flex;gap:8px;align-items:center;width:100%}
.signup-form input[type="email"]{flex:1;padding:12px 14px;border-radius:8px;border:1px solid rgba(0,255,65,0.12);background:rgba(0,0,0,0.35);color:var(--green-2);outline:none;font-weight:600}
.signup-form .btn{flex:0 0 auto;padding:10px 14px}
.signup-form input[type="email"]::placeholder{color:rgba(124,255,178,0.5)}
.signup-msg{margin:8px 0 0 0;font-size:13px;color:rgba(124,255,178,0.9)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.share-group{display:inline-flex;gap:8px;margin-left:12px}
.share{padding:8px 10px;border-radius:8px;border:1px solid rgba(0,255,65,0.06);background:transparent;color:var(--green-2)}

/* comments removed */

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:5}
.modal[aria-hidden="false"]{display:flex}
.modal-inner{width:min(480px,92%);background:#050505;border-radius:12px;padding:20px;border:1px solid rgba(0,255,65,0.06);box-shadow:0 12px 60px rgba(0,0,0,0.7)}
/* modal-close styles removed since the close button was removed */

@media (max-width:640px){
  .ui{padding:12px}
  .card{padding:18px}
  .logo h1{font-size:18px}
  canvas#matrix{filter:contrast(1.1)}
}

/* add command-prompt label and box */
.cmd-container{width:100%;display:flex;justify-content:center}
.cmd-box{
  width:min(520px,86%);
  max-width:100%;
  background:linear-gradient(180deg,#050505,#0b0b0b);
  border:1px solid rgba(57,255,20,0.08);
  color:var(--green-2);
  padding:10px 12px;
  border-radius:8px;
  font-family: 'Courier New', Courier, monospace;
  font-size:14px;
  text-align:left;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);
  caret-color: #9aff9a;
  outline:none;
  min-height:36px;
  align-self:center;
}
/* subtle focus ring for accessibility */
.cmd-box:focus{
  box-shadow:0 0 0 6px rgba(57,255,20,0.04), inset 0 2px 10px rgba(0,0,0,0.6);
  border-color:var(--green-2);
}
/* overlay label: position inside .cmd-container above .cmd-box */
.cmd-container{ position: relative; }
.cmd-label{
  position: absolute;
  left: 12%;
  top: 8px;
  transform: translateY(-50%);
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  color: rgba(124,255,178,0.95);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.6px;
  pointer-events: none;
  z-index: 3;
  /* bounce animation for the label */
  animation: label-bounce 1.6s ease-in-out infinite;
  will-change: transform;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* little down-arrow badge placed with the label */
.cmd-arrow{
  display:inline-block;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:8px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(57,255,20,0.12);
  color: var(--green-2);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 10px rgba(57,255,20,0.04) inset;
  transform-origin: center;
  /* gentle pop / pulse to draw attention downward */
  animation: arrow-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* label bounce keyframes */
@keyframes label-bounce {
  0%   { transform: translateY(-50%) translateY(0); }
  25%  { transform: translateY(-50%) translateY(-6px); }
  50%  { transform: translateY(-50%) translateY(0); }
  75%  { transform: translateY(-50%) translateY(-3px); }
  100% { transform: translateY(-50%) translateY(0); }
}

/* arrow pulse with slight downward nudge to emphasize pointing action */
@keyframes arrow-pulse {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(57,255,20,0); }
  40%  { transform: translateY(4px) scale(1.02); box-shadow: 0 10px 28px rgba(57,255,20,0.08); }
  80%  { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(57,255,20,0); }
  100% { transform: translateY(0) scale(1); }
}

/* when the cmd-box is narrow on small screens, keep the label inside bounds */
@media (max-width:640px){
  .cmd-label{ left: 8%; font-size:11px; top:6px; }
  .cmd-arrow{ padding:5px 7px; font-size:11px; }
}