/*
Theme Name: Nryn Link
Theme URI: https://nryn.link
Author: Shyam Narayan
Author URI: https://shyamnarayan.com
Description: A single-page, Linktree-style dark theme with floating 3D matte cards and drifting abstract geometry. Built for nryn.link.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nryn-link
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --bg-1:#050b18;
  --bg-2:#0a1630;
  --bg-3:#0f1f42;
  --panel:#132447;
  --panel-2:#16294f;
  --panel-border:rgba(120,160,255,0.14);
  --accent:#5aa9ff;
  --accent-soft:#7fc1ff;
  --text:#f4f8ff;
  --text-dim:#b7c6e8;
  --shadow-deep:0 20px 45px -15px rgba(0,0,0,0.65), 0 6px 16px -4px rgba(0,0,0,0.55);
  --shadow-lift:0 26px 55px -18px rgba(0,0,0,0.7), 0 10px 22px -6px rgba(0,0,0,0.6);
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Space Grotesk', 'Inter', sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:
    radial-gradient(circle at 15% 8%, rgba(90,169,255,0.10), transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(90,169,255,0.08), transparent 50%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ==========================================================================
   Floating abstract geometry (pure CSS, no JS, GPU-cheap)
   ========================================================================== */
.nryn-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.nryn-shape{
  position:absolute;
  filter:blur(2px);
  opacity:0.5;
  will-change:transform;
}
.nryn-shape.blur{ filter:blur(40px); opacity:0.55; }

.shape-1{
  top:-8%; left:-10%; width:38vw; height:38vw; max-width:520px; max-height:520px;
  background:radial-gradient(circle at 30% 30%, rgba(90,169,255,0.35), transparent 70%);
  border-radius:50%;
  animation:drift1 26s ease-in-out infinite alternate;
}
.shape-2{
  bottom:-15%; right:-12%; width:44vw; height:44vw; max-width:600px; max-height:600px;
  background:radial-gradient(circle at 60% 60%, rgba(60,110,220,0.30), transparent 70%);
  border-radius:50%;
  animation:drift2 32s ease-in-out infinite alternate;
}
.shape-3{
  top:35%; left:60%; width:22vw; height:22vw; max-width:320px; max-height:320px;
  background:conic-gradient(from 90deg, rgba(127,193,255,0.18), rgba(20,40,90,0) 60%);
  border-radius:38% 62% 55% 45% / 45% 40% 60% 55%;
  animation:drift3 22s ease-in-out infinite alternate, spin1 60s linear infinite;
}
.shape-4{
  top:10%; right:8%; width:14vw; height:14vw; max-width:180px; max-height:180px;
  border:1px solid rgba(120,160,255,0.18);
  border-radius:30% 70% 65% 35% / 35% 45% 55% 65%;
  animation:spin2 40s linear infinite;
}
.shape-5{
  bottom:8%; left:12%; width:10vw; height:10vw; max-width:140px; max-height:140px;
  border:1px solid rgba(90,169,255,0.16);
  transform:rotate(20deg);
  animation:spin3 50s linear infinite reverse;
}

@keyframes drift1{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(6vw,8vh) scale(1.08); }
}
@keyframes drift2{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-5vw,-6vh) scale(1.1); }
}
@keyframes drift3{
  0%{ transform:translate(0,0) rotate(0deg); }
  100%{ transform:translate(-4vw,5vh) rotate(25deg); }
}
@keyframes spin1{ to{ transform:rotate(360deg); } }
@keyframes spin2{ to{ transform:rotate(360deg); } }
@keyframes spin3{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .nryn-shape{ animation:none !important; }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.nryn-wrap{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:56px 20px 80px;
}
.nryn-page{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.nryn-header-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(22px,5vw,28px);
  letter-spacing:0.02em;
  margin:0 0 28px;
  text-align:center;
  color:var(--text);
}
.nryn-header-title .accent-dot{ color:var(--accent-soft); }

/* ==========================================================================
   3D matte floating surface — shared look for avatar / icons / buttons
   ========================================================================== */
.nryn-3d{
  background:linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%);
  border:1px solid var(--panel-border);
  box-shadow:var(--shadow-deep);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nryn-3d:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:rgba(127,193,255,0.32);
}
.nryn-3d:active{ transform:translateY(-1px) scale(0.99); }

/* Avatar */
.nryn-avatar-wrap{
  width:132px; height:132px;
  border-radius:50%;
  padding:6px;
  margin-bottom:20px;
}
.nryn-avatar-wrap img,
.nryn-avatar-fallback{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.nryn-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, var(--panel-2), var(--bg-3));
  color:var(--accent-soft);
  font-family:var(--font-head);
  font-size:44px;
  font-weight:700;
}

/* Social icon row */
.nryn-socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:22px;
}
.nryn-social-icon{
  width:46px; height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
}
.nryn-social-icon svg{ width:20px; height:20px; fill:currentColor; }
.nryn-social-icon:hover{ color:var(--accent-soft); }

/* Email */
.nryn-email{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  color:var(--text-dim);
  margin-bottom:30px;
}
.nryn-email svg{ width:15px; height:15px; fill:currentColor; opacity:0.85; }
.nryn-email:hover{ color:var(--accent-soft); }

/* Buttons list */
.nryn-buttons{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.nryn-btn{
  width:100%;
  padding:18px 24px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--text);
  text-align:center;
}
.nryn-btn .nryn-btn-arrow{
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease;
  font-size:15px;
  color:var(--accent-soft);
}
.nryn-btn:hover .nryn-btn-arrow{ opacity:1; transform:translateX(0); }

/* Footer */
.nryn-footer{
  margin-top:46px;
  font-size:12px;
  color:rgba(183,198,232,0.45);
  text-align:center;
}
.nryn-footer a{ color:rgba(183,198,232,0.6); }
.nryn-footer a:hover{ color:var(--accent-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:480px){
  .nryn-wrap{ padding:40px 16px 60px; }
  .nryn-avatar-wrap{ width:112px; height:112px; }
  .nryn-social-icon{ width:42px; height:42px; }
  .nryn-btn{ padding:16px 18px; font-size:15px; }
}

@media (min-width:1024px){
  .nryn-page{ max-width:600px; }
}