/* ============================================
   LINKS PAGE — POP STYLE (matches index.html)
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
    --bg: #fefcff;
    --bg-alt: #f5f0ff;
    --surface: #ffffff;
    --surface-h: rgba(124,58,237,.04);
    --border: rgba(124,58,237,.1);
    --border-h: rgba(124,58,237,.22);
    --text: #1a1a2e;
    --text2: #5a5a7a;
    --text3: #a0a0be;
    --cyan: #06b6d4;
    --purple: #7c3aed;
    --pink: #ec4899;
    --green: #10b981;
    --orange: #f97316;
    --grad: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
    --grad-soft: linear-gradient(135deg, rgba(124,58,237,.08), rgba(236,72,153,.06), rgba(249,115,22,.04));
    --shadow-xs: 0 1px 3px rgba(124,58,237,.06);
    --shadow-sm: 0 4px 12px rgba(124,58,237,.07);
    --shadow-md: 0 8px 32px rgba(124,58,237,.09);
    --shadow-color: 0 12px 40px rgba(236,72,153,.15);
    --font-head: 'Outfit', system-ui, sans-serif;
    --font-en: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
    --font-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --ease: cubic-bezier(.22,1,.36,1);
    --bounce: cubic-bezier(.34,1.56,.64,1);
}

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
    font-family: var(--font-ja);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.8;
}

/* === Canvas & Cursor === */
#bg-canvas {
    position: fixed; inset:0;
    width:100%; height:100%;
    z-index:0; pointer-events:none;
}

.cursor-glow {
    position: fixed;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.06) 0%, rgba(236,72,153,.03) 40%, transparent 70%);
    pointer-events: none; z-index: 0;
    transform: translate(-50%,-50%);
    transition: opacity .4s;
    opacity: 0;
}

.cursor-glow.active { opacity: 1; }

/* === Page === */
.page-wrapper {
    position: relative; z-index:1;
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 20px 40px;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
}

/* === Profile === */
.profile {
    text-align: center;
    margin-bottom: 36px;
    opacity:0;
    animation: popUp .8s var(--bounce) .2s forwards;
}

@keyframes popUp {
    from { opacity:0; transform: translateY(28px) scale(.96); }
    to { opacity:1; transform: translateY(0) scale(1); }
}

/* Avatar */
.avatar-wrap {
    position: relative;
    width: 108px; height: 108px;
    margin: 0 auto 24px;
}

.avatar {
    width:100%; height:100%;
    border-radius: var(--r-lg);
    background: var(--grad);
    display: flex; align-items:center; justify-content:center;
    position: relative; z-index:2;
    box-shadow: var(--shadow-color);
    animation: avatarFloat 5s ease-in-out infinite;
    will-change: transform;
}

.avatar-glow {
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    background: var(--grad);
    opacity: .18;
    filter: blur(18px);
    z-index:1;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%,100% { opacity:.14; transform:scale(1); }
    50% { opacity:.22; transform:scale(1.06); }
}

@keyframes avatarFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.avatar-voxel {
    width: 56px; height: 56px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
}

/* Name */
.name {
    font-family: var(--font-ja);
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1.2;
    margin-bottom: 8px;
    background: var(--grad);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0%,100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

.title {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* Catchphrase */
.catch-group {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.catch-word {
    font-family: var(--font-ja);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity:0;
    display: inline-block;
    cursor: default;
    transition: transform .3s var(--bounce), filter .3s;
}

.catch-word[data-delay="0"] {
    color: var(--purple);
    animation: catchPop .6s var(--bounce) .65s forwards;
}
.catch-word[data-delay="1"] {
    color: var(--pink);
    animation: catchPop .6s var(--bounce) .8s forwards;
}
.catch-word[data-delay="2"] {
    color: var(--orange);
    animation: catchPop .6s var(--bounce) .95s forwards;
}

@keyframes catchPop {
    0% { opacity:0; transform: translateY(16px) scale(.7); filter: blur(4px); }
    70% { transform: translateY(-3px) scale(1.05); }
    100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

.catch-word:hover {
    transform: scale(1.15) !important;
    filter: brightness(1.1);
}

.catch-sub {
    font-size: 13px;
    color: var(--text2);
    letter-spacing: 1.5px;
    opacity:0;
    animation: fadeUp .6s ease-out 1.15s forwards;
}

@keyframes fadeUp {
    from { opacity:0; transform: translateY(8px); }
    to { opacity:1; transform: translateY(0); }
}

/* === Section Head === */
.section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    width: 100%;
}

.section-tag {
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--purple);
    white-space: nowrap;
    padding: 4px 12px 4px 22px;
    background: rgba(124,58,237,.06);
    border-radius: 100px;
    position: relative;
}

.section-tag::before {
    content: '';
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--grad);
}

.section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* === Tabs === */
.tab-bar {
    display: flex; gap: 6px;
    margin-bottom: 14px;
    width: 100%;
}

.tab {
    flex: 1;
    display: flex; align-items:center; justify-content:center; gap: 8px;
    padding: 10px 0;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-sm);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 600;
    color: var(--text3);
    cursor: pointer;
    transition: all .3s var(--ease);
}

.tab.active {
    border-color: var(--purple);
    color: var(--purple);
    background: rgba(124,58,237,.05);
    box-shadow: 0 2px 8px rgba(124,58,237,.08);
}

.tab:hover:not(.active) { border-color: var(--border-h); color: var(--text2); }

.tab-count {
    font-size: 10px;
    font-weight: 700;
    background: rgba(124,58,237,.08);
    color: var(--purple);
    padding: 2px 7px;
    border-radius: 6px;
}

.tab.active .tab-count {
    background: var(--purple);
    color: #fff;
}

/* Tab Content */
.tab-content { display: none; width: 100%; }
.tab-content.active { display: block; animation: panelIn .35s ease-out; }

@keyframes panelIn {
    from { opacity:0; transform: translateY(6px); }
    to { opacity:1; transform: translateY(0); }
}

/* === Links === */
.links {
    width: 100%;
    margin-bottom: 40px;
    opacity:0;
    animation: fadeUp .7s ease-out 1.25s forwards;
}

.links-list {
    display: flex; flex-direction: column;
    gap: 10px;
}

.link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: all .4s var(--ease);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.link-card::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--grad-soft);
    opacity: 0;
    transition: opacity .4s;
}

.link-card:hover::before { opacity: 1; }

.link-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-h);
    box-shadow: var(--shadow-md);
}

.link-card:active {
    transform: translateY(-1px) scale(.99);
    transition-duration: .1s;
}

.link-card--accent {
    border-color: rgba(124,58,237,.18);
    background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(236,72,153,.03));
}

.link-card--accent:hover {
    border-color: var(--purple);
    box-shadow: var(--shadow-color);
}

/* Link Icon */
.link-icon {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, hsl(var(--icon-hue, 270) 65% 55%), hsl(var(--icon-hue, 270) 75% 45%));
    color: #fff;
    display: flex; align-items:center; justify-content:center;
    position: relative; z-index: 1;
    transition: all .4s var(--bounce);
    box-shadow: 0 3px 10px hsla(var(--icon-hue, 270),60%,40%,.2);
}

.link-icon svg { width: 20px; height: 20px; }

.link-card:hover .link-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 5px 16px hsla(var(--icon-hue, 270),60%,40%,.25);
}

.link-card:hover {
    border-color: hsla(var(--hue, 270),60%,50%,.22);
}

/* Link Body */
.link-body {
    flex: 1;
    display: flex; flex-direction: column; gap: 1px;
    position: relative; z-index: 1;
}

.link-name {
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text);
}

.link-desc {
    font-family: var(--font-en);
    font-size: 11px;
    color: var(--text3);
    letter-spacing: .5px;
}

/* Link Arrow */
.link-arrow {
    color: var(--text3);
    transition: all .4s var(--ease);
    flex-shrink: 0;
    position: relative; z-index: 1;
}

.link-card:hover .link-arrow {
    color: var(--purple);
    transform: translateX(4px);
}

/* Shine effect */
.link-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transition: none;
    pointer-events: none;
    z-index: 0;
}

.link-card:hover::after {
    animation: shine .6s ease-out forwards;
}

@keyframes shine {
    to { left: 100%; }
}

/* Focus states (accessibility) */
.link-card:focus-visible {
    outline: 2.5px solid var(--purple);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tab:focus-visible {
    outline: 2.5px solid var(--purple);
    outline-offset: -2px;
}

/* Screen reader only */
.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;
}

/* === Footer === */
.footer {
    margin-top: auto;
    text-align: center;
    opacity:0;
    animation: fadeUp .5s ease-out 2s forwards;
}

.footer p {
    font-family: var(--font-en);
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 2px;
}

/* === Responsive === */
@media (max-width: 620px) {
    .avatar-wrap { width: 100px; height: 100px; }
    .avatar { border-radius: 22px; }
    .avatar-glow { border-radius: 26px; }
    .avatar-voxel { width: 52px; height: 52px; }
    .name { font-size: 36px; letter-spacing: 7px; }
}

@media (max-width: 520px) {
    .page-wrapper { padding: 44px 14px 32px; }
    .name { font-size: 30px; letter-spacing: 5px; }
    .title { font-size: 10px; }
    .catch-word { font-size: 17px; }
    .catch-sub { font-size: 12px; }
    .avatar-wrap { width: 92px; height: 92px; }
    .avatar { border-radius: 20px; }
    .avatar-glow { border-radius: 24px; }
    .avatar-voxel { width: 46px; height: 46px; }
    .link-card { padding: 16px 14px; }
    .link-icon { width: 40px; height: 40px; min-width: 40px; }
    .link-icon svg { width: 18px; height: 18px; }
    .link-desc { font-size: 12px; }
    .cursor-glow { width: 200px; height: 200px; }
    .section-head { margin-bottom: 12px; }
}