/* =========================================================
   MOMIJI — Trang cá nhân phong cách anime mùa thu
   style.css — theme + hiệu ứng UI/UX hiện đại
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Shippori+Mincho:wght@500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:            #1B1626;
  --bg-soft:       #241B2F;
  --bg-elev:       #2A2038;
  --ink:           #F5EBE0;
  --muted:         #A89BB0;
  --accent:        #E8622C;
  --accent-2:      #C1432E;
  --accent-3:      #E0A458;
  --violet:        #8B5CF6;
  --line:          rgba(255,255,255,.08);
  --line-soft:     rgba(255,255,255,.05);
  --radius-lg:     26px;
  --radius-md:     16px;
  --radius-sm:     12px;
  --shadow-glow:   0 0 25px rgba(232,98,44,.4);
  --ease:          cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:'Be Vietnam Pro', sans-serif; -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, button{ font-family:inherit; }
img{ max-width:100%; display:block; }
.jp{ font-family:'Shippori Mincho', serif; }
.num{ font-family:'Space Grotesk', monospace; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1152px; margin:0 auto; padding:0 24px; }
.wrap-sm{ max-width:768px; margin:0 auto; padding:0 24px; }
.center{ display:flex; align-items:center; justify-content:center; }
.row{ display:flex; align-items:center; }
.gap-1{ gap:8px; } .gap-2{ gap:12px; } .gap-3{ gap:16px; }
.flex-1{ flex:1; } .hide{ display:none !important; }
.muted{ color:var(--muted); }
.text-center{ text-align:center; }

/* ---------- Ambient background ---------- */
.bg-fixed{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-fixed::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top, #2A2038 0%, #1B1626 60%);
}
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
  animation:blobMove 18s var(--ease) infinite alternate;
}
.blob-1{ width:420px; height:420px; background:var(--accent); top:-140px; left:-100px; }
.blob-2{ width:380px; height:380px; background:var(--violet); bottom:-160px; right:-80px; animation-delay:-6s; }
.blob-3{ width:280px; height:280px; background:var(--accent-3); top:40%; left:60%; animation-delay:-11s; }
@keyframes blobMove{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(40px,-30px) scale(1.15); }
}

.leaves{ position:absolute; inset:0; overflow:hidden; }
.leaf{ position:absolute; top:0; will-change:transform; animation:leafFall linear infinite; }
.leaf-sway{ animation:leafSway ease-in-out infinite alternate; }
@keyframes leafFall{ 0%{ transform:translateY(-8vh); opacity:0; } 8%{ opacity:.9; } 100%{ transform:translateY(108vh); opacity:0; } }
@keyframes leafSway{ from{ transform:translateX(-18px) rotate(-8deg); } to{ transform:translateX(18px) rotate(8deg); } }

/* cursor glow (theo con trỏ chuột, chỉ desktop) */
.cursor-glow{
  position:fixed; width:280px; height:280px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(232,98,44,.10), transparent 70%);
  transform:translate(-50%,-50%); transition:opacity .3s; opacity:0;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow.active{ opacity:1; } }

/* ---------- Reveal / motion ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.toast-in{ animation:toastIn .35s var(--ease) both; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,-12px); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.fade-in{ animation:fadeIn .5s var(--ease) both; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; opacity:.85; }

@media (prefers-reduced-motion: reduce){
  .leaf, .leaf-sway, .reveal, .toast-in, .blob, .fade-in{ animation:none !important; transition:none !important; }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:30; padding:16px 0; transition:background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(27,22,38,.72); backdrop-filter:blur(14px); border-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; background:none; border:none; padding:0; }
.logo-mark{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 18px rgba(232,98,44,.45);
}
.logo-text{ font-size:20px; font-weight:900; letter-spacing:-.02em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  font-size:14px; color:var(--muted); padding:9px 14px; border-radius:999px; transition:color .2s, background .2s;
  display:flex; align-items:center; gap:6px; background:none; border:none;
}
.nav-link:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.nav-toggle{ display:none; background:none; border:none; color:var(--ink); }
.mobile-menu{
  display:none; margin:12px 24px 0; border:1px solid var(--line); background:var(--bg-soft);
  border-radius:16px; padding:10px; flex-direction:column; gap:4px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a, .mobile-menu button{
  text-align:left; font-size:14px; color:var(--ink); background:none; border:none; padding:10px 12px; border-radius:10px;
}
.mobile-menu a:hover, .mobile-menu button:hover{ background:rgba(255,255,255,.05); }
@media (max-width:640px){ .nav-links{ display:none; } .nav-toggle{ display:block; } }

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; border:none; border-radius:999px; padding:12px 22px;
  transition:transform .2s var(--ease), box-shadow .3s, background .2s, border-color .2s, opacity .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:var(--accent); color:var(--bg); box-shadow:var(--shadow-glow); }
.btn-primary:hover{ background:#f27943; box-shadow:0 0 35px rgba(232,98,44,.55); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:rgba(232,98,44,.55); }
.btn-text{ background:none; border:none; color:var(--muted); padding:9px 12px; }
.btn-text:hover{ color:var(--ink); }
.btn-sm{ padding:9px 15px; font-size:13px; }
.btn-block{ width:100%; }
.btn-icon{ padding:10px; border-radius:999px; }
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0);
  animation:rippleAnim .55s ease-out; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- Inputs ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.input, textarea.input{
  width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px; color:var(--ink); font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.input:focus, textarea.input:focus{ border-color:rgba(232,98,44,.6); box-shadow:0 0 0 3px rgba(232,98,44,.12); }
textarea.input{ resize:none; }
.input-group{
  display:flex; align-items:center; gap:8px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; transition:border-color .2s, box-shadow .2s;
}
.input-group:focus-within{ border-color:rgba(232,98,44,.6); box-shadow:0 0 0 3px rgba(232,98,44,.12); }
.input-group input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink); font-size:14px; }
.input-group.disabled{ opacity:.6; }
.hint-right{ font-size:11px; color:var(--muted); text-align:right; margin-top:4px; }
.error-text{ font-size:12px; color:#f87171; display:flex; align-items:center; gap:6px; margin-top:8px; }

/* ---------- Card (thẻ danh tính - signature UI) ---------- */
.card-frame{ position:relative; width:100%; max-width:380px; margin:0 auto; }
.card-frame.clickable{ cursor:pointer; }
.card-glow{
  position:absolute; inset:-1.5px; border-radius:28px; opacity:.7; transition:opacity .5s;
  background:linear-gradient(135deg, var(--accent-hex, var(--accent)), transparent 45%, var(--accent-hex, var(--accent)) 100%);
}
.card-frame:hover .card-glow{ opacity:1; }
.card-body{
  position:relative; border-radius:28px; background:#1B1626; border:1px solid var(--line-soft);
  padding:26px; overflow:hidden; transition:transform .4s var(--ease);
}
.card-frame:hover .card-body{ transform:perspective(900px) rotateY(-6deg) rotateX(4deg) scale(1.02); }
.card-body::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.card-frame:hover .card-body::after{ transform:translateX(120%); }
.card-leaf-deco{ position:absolute; top:-24px; right:-24px; opacity:.1; }
.card-tag{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
}
.card-tag span{
  font-size:10px; letter-spacing:.25em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid;
}
.card-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.card-name{ margin:16px 0 0; font-size:21px; font-weight:800; }
.card-username{ margin:2px 0 0; font-size:14px; letter-spacing:.03em; }
.card-bio{ margin:12px 0 0; font-size:13px; color:var(--muted); line-height:1.6; max-width:85%; }
.card-links{ margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.card-link{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:rgba(245,235,224,.8); transition:transform .2s, color .2s, border-color .2s;
}
.card-link:hover{ color:var(--ink); transform:translateY(-3px) scale(1.06); }

/* avatar */
.avatar{ position:relative; border-radius:50%; overflow:hidden; flex-shrink:0; display:grid; place-items:center; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar .initials{ font-weight:800; color:var(--ink); }
.avatar.ring{ box-shadow:0 0 0 3px #241B2F, 0 0 0 5px var(--ring-c, rgba(232,98,44,.4)), 0 0 30px var(--ring-c-soft, rgba(232,98,44,.2)); }

/* ---------- Sections ---------- */
.hero{ padding:64px 0 96px; display:grid; gap:56px; align-items:center; grid-template-columns:1fr; }
@media (min-width:1024px){ .hero{ grid-template-columns:1fr 1fr; } }
.eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:6px 14px;
  border-radius:999px; border:1px solid rgba(232,98,44,.4); color:var(--accent);
}
.h1{ margin:20px 0 0; font-size:44px; line-height:1.1; font-weight:900; letter-spacing:-.01em; }
.grad-text{
  background:linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:gradShift 6s ease infinite;
}
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.lede{ margin-top:20px; color:var(--muted); font-size:16px; line-height:1.7; max-width:460px; }
.section{ padding:64px 0; border-top:1px solid var(--line-soft); }
.h2{ font-size:26px; font-weight:800; margin:0 0 40px; }
.grid-3{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.feature{
  border:1px solid var(--line); background:rgba(36,27,47,.6); border-radius:20px; padding:24px;
  transition:border-color .25s, transform .25s;
}
.feature:hover{ border-color:rgba(232,98,44,.4); transform:translateY(-4px); }
.feature h3{ margin:16px 0 6px; font-weight:700; }
.feature p{ margin:0; font-size:14px; color:var(--muted); line-height:1.6; }
.step-n{ font-size:38px; font-weight:900; color:rgba(232,98,44,.3); }
.cta-panel{
  position:relative; overflow:hidden; border-radius:28px; border:1px solid rgba(232,98,44,.25);
  background:linear-gradient(135deg, var(--bg-soft), var(--bg)); padding:56px 24px; text-align:center;
}
.footer{
  border-top:1px solid var(--line-soft); padding:32px 0; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; font-size:12px; color:var(--muted);
}

/* ---------- Skeleton loading ---------- */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-soft); border-radius:14px; }
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* ---------- Explore / grid ---------- */
.search-bar{ display:flex; gap:10px; max-width:420px; margin-bottom:12px; }
.explore-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px){ .explore-grid{ grid-template-columns:repeat(3,1fr); } }
.empty-box{
  border:1px dashed var(--line); border-radius:16px; padding:40px 16px; text-align:center; color:rgba(168,155,176,.7); font-size:14px;
}

/* ---------- Editor ---------- */
.editor-grid{ display:grid; gap:40px; align-items:start; grid-template-columns:1fr; }
@media (min-width:1024px){ .editor-grid{ grid-template-columns:1fr 380px; } }
.editor-section h2{ font-size:17px; font-weight:700; margin:0 0 16px; }
.editor-section{ margin-bottom:32px; }
.link-row{
  display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; margin-bottom:10px;
}
.link-row input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink); font-size:14px; }
.link-row button{ background:none; border:none; color:var(--muted); flex-shrink:0; }
.link-row button:hover{ color:#f87171; }
.accent-dot{
  width:34px; height:34px; border-radius:50%; border:none; transition:transform .2s;
  position:relative;
}
.accent-dot:hover{ transform:scale(1.1); }
.accent-dot.active::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--dot-c);
}
.dropdown-wrap{ position:relative; }
.dropdown{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:200px; border-radius:14px;
  border:1px solid var(--line); background:var(--bg-soft); box-shadow:0 20px 50px rgba(0,0,0,.4); overflow:hidden;
}
.dropdown button{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none;
  color:var(--ink); padding:11px 14px; font-size:14px;
}
.dropdown button:hover{ background:rgba(255,255,255,.05); }
.dropzone{
  border:1.5px dashed var(--line); border-radius:16px; padding:22px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dropzone.drag{ border-color:var(--accent); background:rgba(232,98,44,.06); }
.sticky-col{ position:sticky; top:96px; }
.preview-label{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); text-align:center; margin-bottom:12px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; top:24px; left:50%; z-index:60; background:var(--bg-soft); border:1px solid rgba(52,211,153,.3);
  color:#6ee7b7; font-size:14px; padding:10px 18px; border-radius:999px; display:flex; align-items:center; gap:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.toast.error{ border-color:rgba(248,113,113,.35); color:#fca5a5; }

/* ---------- Auth gate ---------- */
.auth-box{ max-width:400px; margin:0 auto; padding:96px 24px; }

/* ---------- Public profile page ---------- */
.public-wrap{ min-height:100vh; display:flex; flex-direction:column; }
.public-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:56px 24px; }
.public-footer{ padding-bottom:32px; text-align:center; }

/* ---------- misc ---------- */
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;}
.mt-5{margin-top:20px;} .mt-6{margin-top:24px;} .mt-7{margin-top:28px;} .mt-8{margin-top:32px;} .mt-10{margin-top:40px;}
.mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}