/* ==============================================================
 *  ROOT VARIABLES
 *  ============================================================== */
:root{
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255,255,255,0.08);
  --accent: rgba(120,120,255,0.08);
  --icon-size: 44px;               /* base icon button size */
  --blood: #cc0000;                /* red used on hover */
}

/* ==============================================================
 *  PAGE BACKGROUND & GLOBAL SETTINGS
 *  ============================================================== */
html,
body{
  height:100%;
  margin:0;
  background-color:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* subtle vertical lines + noise (injected via script.js) */
  background-image:
  repeating-linear-gradient(90deg, rgba(90,10,20,0.06) 0px, rgba(90,10,20,0.06) 1px, transparent 1px, transparent 14px),
  repeating-linear-gradient(90deg, rgba(25,20,55,0.05) 6px, rgba(25,20,55,0.05) 7px, transparent 7px, transparent 30px),
  radial-gradient(circle at 50% 35%, rgba(255,255,255,0.008), rgba(0,0,0,0) 18%),
  var(--noise, none);
  background-blend-mode: screen, screen, overlay, normal;
  background-repeat: repeat;
}

/* ==============================================================
 *  CENTER WRAPPER
 *  ============================================================== */
.center-wrap{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vw;
  box-sizing:border-box;
}

/* ==============================================================
 *  SVG TEXT STYLING
 *  ============================================================== */
.logo-svg tspan{
  white-space:pre;
}
.logo-svg .t0{
  font-size:380px;
  line-height:130px;
  fill:currentColor;               /* inherits from parent’s `color` */
  font-weight:400;
  font-family:"LTSip-Regular","LT Sip";
}
.logo-svg .t1{
  font-size:250px;
  line-height:75px;
  fill:currentColor;               /* inherits from parent’s `color` */
  font-weight:400;
  font-family:"LTSip-Regular","LT Sip";
}

/* --------------------------------------------------------------
 *  Base SVG container
 *  -------------------------------------------------------------- */
.logo-svg{
  height:25vh;
  width:auto;
  max-width:90vw;
  display:block;
  color:var(--fg);                 /* initial colour for `currentColor` */
  transition:color 240ms ease;
}
.logo-svg *{
  fill:currentColor;               /* ensures any child without explicit fill follows `color` */
  stroke:none;
}
.logo-svg{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

/* --------------------------------------------------------------
 *  Hover effect – change colour to “blood”
 *  -------------------------------------------------------------- */
.logo-svg .logo-text{
  transition:color 260ms ease, filter 260ms ease;
}
.logo-svg:hover .logo-text{
  color:var(--blood);              /* makes all `fill:currentColor` turn red */
  filter:drop-shadow(0 6px 12px rgba(204,0,0,0.35));
}

/* ==============================================================
 *  SOCIAL BAR (unchanged – kept for completeness)
 *  ============================================================== */
.social-bar{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1000;
  pointer-events:none;             /* children enable pointer‑events */
}

/* --------------------------------------------------------------
 *  Individual social link “buttons”
 *  -------------------------------------------------------------- */
.social-link{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-size);
  height:var(--icon-size);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:rgba(255,255,255,0.82);
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.6);
  transition:transform 180ms ease,
  color 180ms ease,
  background-color 180ms ease,
  box-shadow 180ms ease,
  filter 180ms ease;
  -webkit-tap-highlight-color:transparent;
  font-size:18px;                  /* icon size scaling */
  backdrop-filter:blur(2px);
}

/* --------------------------------------------------------------
 *  Floating motion (subtle)
 *  -------------------------------------------------------------- */
.social-link::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  border-radius:8px;
  pointer-events:none;
  transform-origin:center;
  transition:transform 700ms cubic-bezier(.2,.9,.2,.95);
}
.social-link{
  position:relative;
}

/* --------------------------------------------------------------
 *  Icon styling
 *  -------------------------------------------------------------- */
.social-link i{
  display:block;
}

/* --------------------------------------------------------------
 *  Hover / focus effect – tint and slight shift
 *  -------------------------------------------------------------- */
.social-link:hover,
.social-link:focus{
  transform:translateX(-8px) scale(1.03);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.7);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}

/* --------------------------------------------------------------
 *  Service‑specific tints (via data‑service attribute)
 *  -------------------------------------------------------------- */
.social-link[data-service="bluesky"]{
  background-color:rgba(40,60,120,0.06);
  color:rgba(170,190,255,0.9);
}
.social-link[data-service="youtube"]{
  background-color:rgba(200,30,30,0.06);
  color:rgba(255,120,120,0.92);
}
.social-link[data-service="facebook"]{
  background-color:rgba(30,45,90,0.05);
  color:rgba(170,190,255,0.88);
}
.social-link[data-service="tiktok"]{
  background-color:rgba(70,50,70,0.05);
  color:rgba(235,200,255,0.9);
}
.social-link[data-service="x"]{
  background-color:rgba(80,80,80,0.05);
  color:rgba(220,220,220,0.9);
}
.social-link[data-service="mastodon"]{
  background-color:rgba(30,80,70,0.05);
  color:rgba(170,255,210,0.9);
}

/* --------------------------------------------------------------
 *  Hover tint intensify
 *  -------------------------------------------------------------- */
.social-link[data-service="bluesky"]:hover{
  background-color:rgba(40,60,120,0.12);
}
.social-link[data-service="youtube"]:hover{
  background-color:rgba(200,30,30,0.12);
}
.social-link[data-service="facebook"]:hover{
  background-color:rgba(30,45,90,0.10);
}
.social-link[data-service="tiktok"]:hover{
  background-color:rgba(70,50,70,0.10);
}
.social-link[data-service="x"]:hover{
  background-color:rgba(120,120,120,0.10);
}
.social-link[data-service="mastodon"]:hover{
  background-color:rgba(30,80,70,0.10);
}

/* --------------------------------------------------------------
 *  Focus outline for keyboard users
 *  -------------------------------------------------------------- */
.social-link:focus{
  outline:2px solid rgba(255,255,255,0.12);
  outline-offset:3px;
}

/* ==============================================================
 *  RESPONSIVE ADJUSTMENTS
 *  ============================================================== */
@media (max-width:720px){
  .social-bar{
    right:10px;
    gap:8px;
  }
  :root{
    --icon-size:38px;
  }
}
@media (max-width:420px){
  .social-bar{
    display:flex;
  }
  :root{
    --icon-size:34px;
  }
  .social-bar{
    right:8px;
    transform:translateY(-40%);
    gap:6px;
  }
}