/* ============================================================
   HSN.AE — Socials Page
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #07070d;
  --bg-2: #0d0d14;
  --white: #f4f5f7;
  --dim: #8a8f9c;
  --dim-2: #4a4e5c;
  --red: #ff2d20;
  --red-2: #c0392b;
  --grad: linear-gradient(135deg, var(--red), var(--red-2));
  --line: rgba(244,245,247,0.07);
  --font: 'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono: ui-monospace,'SF Mono','Cascadia Mono',monospace;
  --ease: cubic-bezier(0.22,1,0.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scrollbar-color:#1c1e2a var(--bg); }
body {
  background:
    radial-gradient(circle at 50% -20%, rgba(255,45,32,.08), transparent 38%),
    var(--bg);
  color:var(--white);
  font-family:var(--font); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh;
  isolation:isolate;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,45,32,.045), transparent 42%),
    linear-gradient(245deg, transparent 30%, rgba(255,255,255,.025), transparent 58%);
  background-size:180% 180%, 160% 160%;
  animation:background-sweep 18s ease-in-out infinite alternate;
}
@keyframes background-sweep {
  0% { background-position:0% 20%, 100% 80%; opacity:.55; }
  100% { background-position:100% 75%, 0% 25%; opacity:1; }
}
body.is-loading { overflow:hidden; }
::selection { background:var(--red); color:#fff; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

#grain {
  position:fixed; inset:-12px; z-index:40; pointer-events:none; opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-5px,3px)}
  40%{transform:translate(3px,-5px)} 60%{transform:translate(-4px,-2px)}
  80%{transform:translate(5px,3px)} 100%{transform:translate(0,0)}
}

html.has-cursor, html.has-cursor a, html.has-cursor button { cursor:none; }
#cursor { position:fixed; top:0; left:0; z-index:300; pointer-events:none; opacity:0; transition:opacity .3s; }
html.has-cursor #cursor { opacity:1; }
.cursor-dot { position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--white); }
.cursor-ring {
  position:fixed; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%;
  border:1px solid rgba(244,245,247,.3);
  transition:transform .22s var(--ease),border-color .22s,background-color .22s;
}
#cursor.is-hover .cursor-ring { transform:scale(1.6); border-color:var(--red); background:rgba(255,45,32,.07); }
#cursor.is-down .cursor-ring { transform:scale(.75); }

#intro {
  position:fixed; inset:0; z-index:200; background:#05050a;
  display:flex; align-items:center; justify-content:center;
  clip-path:inset(0% 0% 0% 0%);
}
body.intro-done #intro { display:none; }
.intro-frame { position:absolute; inset:14px; border:1px solid rgba(244,245,247,.06); pointer-events:none; }
.intro-letter { position:absolute; font-size:clamp(120px,28vw,400px); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--white); opacity:0; }
.intro-word { position:relative; font-size:clamp(56px,12vw,180px); font-weight:700; letter-spacing:-.03em; line-height:1; opacity:0; }
.intro-word-ghost { position:absolute; inset:0; opacity:.5; pointer-events:none; }
.intro-word-ghost--r { color:var(--red); transform:translate(-4px,3px); }
.intro-word-ghost--d { color:var(--red-2); transform:translate(4px,-3px); }
.intro-word-base { position:relative; z-index:1; }
.intro-tag { position:absolute; right:28px; bottom:26px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--dim-2); }
.intro-flash { position:absolute; inset:0; background:var(--white); opacity:0; pointer-events:none; }

#aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; transform:translate3d(calc(var(--pointer-x, 0) * 1px),calc(var(--pointer-y, 0) * 1px),0); transition:transform 1.2s var(--ease); }
#stars,
#shooting-stars {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.star {
  position:absolute;
  width:var(--size,2px);
  height:var(--size,2px);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px 1px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.4);
  opacity:0;
  animation:star-twinkle var(--duration,4s) ease-in-out var(--delay,0s) infinite;
}
@keyframes star-twinkle {
  0%,100% { opacity:.08; transform:scale(.7); }
  45% { opacity:.8; transform:scale(1); }
  55% { opacity:.35; transform:scale(.85); }
}
.shooting-star {
  position:absolute;
  top:-12vh;
  left:var(--left,70%);
  width:2px;
  height:var(--length,130px);
  border-radius:999px;
  opacity:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 45%,rgba(255,255,255,0));
  box-shadow:0 0 8px 1px rgba(255,255,255,.8);
  transform:rotate(42deg);
  transform-origin:top center;
  animation:shooting-star var(--duration,1.5s) ease-in var(--delay,8s) infinite;
}
@keyframes shooting-star {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(42deg) scaleY(.25); }
  12% { opacity:1; }
  72% { opacity:.9; }
  100% { opacity:0; transform:translate3d(-42vw,72vh,0) rotate(42deg) scaleY(1); }
}

.orb { position:absolute; border-radius:50%; filter:blur(100px); will-change:transform; }
.orb--a { width:60vw; height:60vw; top:-10vh; right:-15vw; background:radial-gradient(circle,rgba(255,45,32,.18),transparent 65%); animation:drift-a 18s ease-in-out infinite alternate, orb-pulse 7s ease-in-out infinite; }
.orb--b { width:50vw; height:50vw; bottom:-10vh; left:-12vw; background:radial-gradient(circle,rgba(192,57,43,.14),transparent 65%); animation:drift-b 22s ease-in-out infinite alternate, orb-pulse 9s ease-in-out -2s infinite; }
.orb--c { width:30vw; height:30vw; top:40vh; left:40vw; background:radial-gradient(circle,rgba(255,45,32,.08),transparent 65%); animation:drift-c 14s ease-in-out infinite alternate, orb-pulse 6s ease-in-out -1s infinite; }
@keyframes drift-a { from{transform:translate(0,0) scale(1)} to{transform:translate(-4vw,6vh) scale(1.1)} }
@keyframes drift-b { from{transform:translate(0,0) scale(1)} to{transform:translate(5vw,-5vh) scale(1.08)} }
@keyframes drift-c { from{transform:translate(0,0)} to{transform:translate(-3vw,4vh)} }
@keyframes orb-pulse { 0%,100% { opacity:.7; } 50% { opacity:1; } }

.page {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 24px 60px;
}

.mono-wrap {
  position:relative; margin-bottom:34px;
  display:flex; align-items:center; justify-content:center;
  perspective:700px;
  transform-style:preserve-3d;
}
.mono-frame {
  position:absolute;
  width:210px; height:210px;
  border-radius:50%;
  border:1px solid rgba(255,45,32,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  transform:rotateX(68deg) rotateY(-12deg);
  animation:frame-drift 10s ease-in-out infinite alternate;
}
@keyframes frame-drift {
  0% { transform:rotateX(68deg) rotateY(-12deg) rotateZ(-4deg); }
  100% { transform:rotateX(68deg) rotateY(12deg) rotateZ(4deg); }
}
.mono-ring {
  position:absolute;
  width:120px; height:120px; border-radius:50%;
  border:1px solid rgba(255,45,32,.25);
  transform-style:preserve-3d;
  animation:ring-orbit-inner 7s linear infinite;
}
.mono-ring-2 {
  width:148px; height:148px;
  border:1px solid rgba(255,45,32,.1);
  animation:ring-orbit-outer 11s linear infinite reverse;
}
@keyframes ring-orbit-inner {
  0% { transform:rotateX(68deg) rotateY(-10deg) rotateZ(0deg); }
  25% { transform:rotateX(82deg) rotateY(28deg) rotateZ(90deg); }
  50% { transform:rotateX(68deg) rotateY(10deg) rotateZ(180deg); }
  75% { transform:rotateX(54deg) rotateY(-28deg) rotateZ(270deg); }
  100% { transform:rotateX(68deg) rotateY(-10deg) rotateZ(360deg); }
}
@keyframes ring-orbit-outer {
  0% { transform:rotateX(58deg) rotateY(18deg) rotateZ(0deg); }
  25% { transform:rotateX(42deg) rotateY(-22deg) rotateZ(90deg); }
  50% { transform:rotateX(58deg) rotateY(-18deg) rotateZ(180deg); }
  75% { transform:rotateX(74deg) rotateY(22deg) rotateZ(270deg); }
  100% { transform:rotateX(58deg) rotateY(18deg) rotateZ(360deg); }
}
.mono-ring-dot {
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 12px var(--red), 0 0 24px rgba(255,45,32,.45);
  transform-origin:center;
}
.mono-ring-dot--1 {
  animation:orbit-inner 7s linear infinite;
}
.mono-ring-dot--2 {
  width:5px; height:5px;
  animation:orbit-outer 12s linear infinite reverse;
}
@keyframes orbit-inner {
  from { transform:rotate(0deg) translateX(59px) rotate(0deg); }
  to { transform:rotate(360deg) translateX(59px) rotate(-360deg); }
}
@keyframes orbit-outer {
  from { transform:rotate(180deg) translateX(74px) rotate(-180deg); }
  to { transform:rotate(540deg) translateX(74px) rotate(-540deg); }
}
.mono-pfp {
  width:88px; height:88px; border-radius:50%;
  border:1px solid rgba(255,45,32,.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px rgba(255,45,32,.2);
  overflow:hidden;
  background:#020202;
  position:relative; z-index:1;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  animation:pfp-float 5s ease-in-out infinite;
}
.mono-pfp:hover {
  transform:scale(1.08) rotate(3deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 82px rgba(255,45,32,.48);
}
.mono-pfp img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.1) brightness(.92) saturate(0);
  transition:transform .7s var(--ease), filter .5s ease;
}
.mono-pfp:hover img { transform:scale(1.12); filter:contrast(1.15) brightness(1.02) saturate(.15); }
@keyframes pfp-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
.mono-pfp::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(255,45,32,.2), transparent 55%);
  mix-blend-mode:screen;
}
@keyframes mono-pulse {
  0%,100%{box-shadow:0 0 60px rgba(255,45,32,.2),inset 0 0 30px rgba(255,45,32,.05)}
  50%{box-shadow:0 0 90px rgba(255,45,32,.35),inset 0 0 40px rgba(255,45,32,.1)}
}
@keyframes pulse-orb {
  0%,100% { transform:scale(1) rotate(0deg); opacity:.65; }
  50% { transform:scale(1.12) rotate(12deg); opacity:1; }
}

.identity { text-align:center; margin-bottom:46px; }
.identity-name {
  font-size:clamp(48px,10vw,96px); font-weight:700;
  letter-spacing:-.04em; line-height:.95;
  background:linear-gradient(110deg,var(--white) 0%,var(--white) 42%,#ff6b61 68%,var(--red) 100%);
  background-size:220% 100%;
  animation:gradient-slide 5s ease-in-out infinite alternate;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@keyframes gradient-slide {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.identity-name.in { opacity:1; transform:translateY(0); }
.identity-handle {
  display:inline-block; margin-top:12px;
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; color:var(--dim);
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.identity-handle.in { opacity:1; transform:translateY(0); }
.identity-social-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}
.identity-social-row .identity-handle { margin-top:0; }
.identity-followers {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  color:#ff7d73;
  white-space:nowrap;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.identity-followers::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 9px rgba(255,45,32,.75);
}
.identity-handle.in + .identity-followers { opacity:1; transform:translateY(0); }
.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;
}
.identity-tag {
  display:inline-block; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--red); padding:5px 14px;
  border:1px solid rgba(255,45,32,.3); border-radius:100px;
  background:rgba(255,45,32,.06);
  opacity:0; transform:translateY(10px);
  transition:opacity .8s var(--ease) .25s, transform .8s var(--ease) .25s;
}
.identity-tag.in { opacity:1; transform:translateY(0); }

.profile-meta {
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
}
.profile-meta.in { opacity:1; transform:translateY(0); }
.pfp {
  width:72px; height:72px; border-radius:50%;
  border:1px solid rgba(255,45,32,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 38px rgba(255,45,32,.16);
  overflow:hidden;
  flex:none;
  background:#020202;
  position:relative;
}
.pfp img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.1) brightness(.92) saturate(0);
}
.pfp::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(255,45,32,.2), transparent 55%);
  mix-blend-mode:screen;
}
.meta-text { text-align:left; }
.meta-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--dim-2);
}
.meta-title {
  margin-top:4px; font-size:16px; font-weight:600;
}
.meta-sub {
  margin-top:2px; font-family:var(--mono); font-size:11px; color:var(--dim);
}

.live-box {
  width:100%; max-width:480px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px;
  margin-bottom:18px;
  border-radius:16px;
  border:1px solid rgba(255,45,32,.18);
  background:rgba(255,45,32,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease) .28s, transform .8s var(--ease) .28s;
}
.live-box.in { opacity:1; transform:translateY(0); }
.live-left { display:flex; align-items:center; gap:10px; }
.live-pip {
  width:9px; height:9px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 12px rgba(255,45,32,.65);
  animation:live-blink 1.3s ease-in-out infinite;
}
@keyframes live-blink { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)} }
.live-label { font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:#ff7d73; }
.live-count {
  font-size:20px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.live-refresh {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--dim-2);
}

.links {
  width:100%; max-width:460px;
  display:flex; flex-direction:column; gap:10px;
}
.link-card {
  display:flex; align-items:center; gap:14px;
  background:rgba(13,13,20,.7); backdrop-filter:blur(16px);
  border:1px solid rgba(244,245,247,.09); border-radius:14px;
  padding:14px 17px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
  transform-style:preserve-3d;
  will-change:transform;
  transition:opacity .7s var(--ease), transform .7s var(--ease),
              border-color .25s, background .25s, box-shadow .25s;
}
.link-card.in { opacity:1; transform:translateY(0); }
.link-card:hover {
  border-color:rgba(255,45,32,.36);
  background:rgba(22,14,17,.82);
  box-shadow:0 14px 32px rgba(0,0,0,.25), 0 0 22px rgba(255,45,32,.07);
}
.link-card::before {
  content:''; position:absolute; inset:-1px; border-radius:15px; padding:1px;
  background:linear-gradient(115deg,transparent 30%,rgba(255,45,32,.7),transparent 70%);
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.link-card:hover::before { opacity:1; animation:border-sweep 2s linear infinite; }
@keyframes border-sweep { to { background-position:-220% 0; } }
.link-card::after {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,45,32,.18),transparent 62%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.link-card:hover::after { opacity:1; }
.link-card > * { position:relative; z-index:1; transform:translateZ(14px); }
.link-card .link-arrow { transform:translateZ(18px); }
.link-card:hover .link-arrow { transform:translate3d(5px,0,18px); color:var(--red); }
.ripple {
  position:absolute; z-index:2; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(255,45,32,.55), 0 0 22px rgba(255,45,32,.75);
  transform:translate(-50%,-50%) scale(1);
  animation:ripple-out .7s ease-out forwards;
}
@keyframes ripple-out {
  to { opacity:0; transform:translate(-50%,-50%) scale(28); }
}

.link-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease);
}
.link-card:hover .link-icon { transform:scale(1.06); }
.link-text { flex:1; min-width:0; }
.link-title { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.link-sub { font-size:11px; color:var(--dim); margin-top:1px; font-family:var(--mono); letter-spacing:.04em; }
.link-arrow {
  color:var(--dim-2); font-size:16px; flex-shrink:0;
  transition:transform .3s var(--ease), color .25s;
}
.link-card:hover .link-arrow { transform:translateX(4px); color:var(--red); }

.about {
  width:100%;
  max-width:480px;
  margin-top:54px;
  padding:24px 26px;
  text-align:center;
  border:1px solid rgba(255,45,32,.2);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,45,32,.09),rgba(13,13,20,.78) 48%,rgba(255,255,255,.025));
  box-shadow:0 18px 50px rgba(0,0,0,.2), 0 0 28px rgba(255,45,32,.06);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  opacity:0;
  transform:translateY(18px) rotateX(0deg) rotateY(0deg);
  animation:about-in .9s var(--ease) 1.05s forwards, about-float 6s ease-in-out 1.95s infinite;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.about:hover {
  border-color:rgba(255,45,32,.48);
  box-shadow:0 24px 65px rgba(0,0,0,.34), 0 0 42px rgba(255,45,32,.13);
  transform:translateY(-7px) rotateX(2deg) rotateY(-2deg);
}
.about > * {
  position:relative;
  z-index:1;
  transform:translateZ(16px);
}
.about::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 26%,transparent 72%,rgba(255,45,32,.08));
  transform:translateZ(1px);
}
.about::before {
  content:'';
  position:absolute;
  top:0;
  left:-35%;
  width:35%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:about-scan 4s ease-in-out 1.8s infinite;
}
.about-kicker {
  display:block;
  margin-bottom:10px;
  color:var(--red);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
}
.about h2 {
  font-size:clamp(20px,4vw,26px);
  line-height:1.1;
  letter-spacing:-.03em;
}
.about p {
  margin:12px auto 0;
  max-width:390px;
  color:var(--dim);
  font-size:13px;
  line-height:1.7;
}
@keyframes about-in { to { opacity:1; transform:translateY(0) rotateX(0deg) rotateY(0deg); } }
@keyframes about-float {
  0%,100% { transform:translateY(0) rotateX(0deg) rotateY(0deg); }
  25% { transform:translateY(-4px) rotateX(1deg) rotateY(-1deg); }
  50% { transform:translateY(-8px) rotateX(0deg) rotateY(1deg); }
  75% { transform:translateY(-4px) rotateX(-1deg) rotateY(0deg); }
}
@keyframes about-scan { 0%,20% { transform:translateX(0); opacity:0; } 35% { opacity:1; } 80%,100% { transform:translateX(390%); opacity:0; } }

.foot {
  margin-top:52px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--dim-2);
  opacity:0; transition:opacity .8s var(--ease) .6s;
}
.foot.in { opacity:1; }
.foot span { color:var(--red); }

@media (max-width:480px) {
  .page { padding:56px 16px 46px; }
  .link-card { padding:15px 18px; gap:14px; }
  .profile-hero { width:100%; display:flex; flex-direction:column; align-items:center; }
  .identity-social-row { flex-wrap:wrap; justify-content:center; gap:8px 12px; }
  .identity-followers { font-size:10px; }
  .about { animation-duration:.9s, 6s; }
  .about:hover { transform:translateY(-4px); }
  .live-box { flex-direction:column; align-items:flex-start; }
}
@media (pointer:coarse) { #cursor { display:none; } }
@media (prefers-reduced-motion:reduce) {
  #grain,.orb,.mono-ring,.mono-ring-2,.mono-letter { animation:none; }
  .identity-name,.identity-handle,.identity-tag,.profile-meta,.live-box,.link-card,.about,.foot { opacity:1; transform:none; transition:none; }
}