/* wzlife.xyz - Homepage Styles */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#1a1a2e; --muted:#6b7280; --paper:#fafafa; --white:#fff;
  --line:#e5e7eb; --accent:#6366f1; --accent-light:#818cf8;
  --warm:#f59e0b; --warm-light:#fbbf24;
  --radius:20px; --shadow:0 20px 60px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:16px/1.6 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-x:hidden;
}

/* ===== Split Layout ===== */
.split-hero{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* Left: content */
.split-left{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 32px;text-align:center;position:relative;z-index:2;
  background:var(--paper);
}

/* Floating bg shapes on left side */
.split-left::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.split-left::before span{
  position:absolute;border-radius:50%;opacity:.04;
}
.split-left::before span:nth-child(1){width:300px;height:300px;background:var(--accent);top:-80px;left:-80px}
.split-left::before span:nth-child(2){width:200px;height:200px;background:var(--warm);bottom:-60px;right:-40px}

.bg-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deco span{position:absolute;border-radius:50%;opacity:.05;animation:float 20s infinite ease-in-out}
.bg-deco span:nth-child(1){width:300px;height:300px;background:var(--accent);top:-80px;left:-80px;animation-delay:0s}
.bg-deco span:nth-child(2){width:200px;height:200px;background:var(--warm);bottom:10%;right:-40px;animation-delay:5s}
.bg-deco span:nth-child(3){width:150px;height:150px;background:#ec4899;top:40%;left:20%;animation-delay:10s;opacity:.03}

.hero-inner{
  position:relative;z-index:1;
  max-width:480px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:32px;
}

/* Name "wz" */
.name{
  font-family:'Playfair Display',serif;
  font-size:clamp(72px,14vw,140px);
  font-weight:900;font-style:italic;
  letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,var(--accent) 0%,#8b5cf6 50%,var(--warm) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(30px);
  animation:fadeUp .8s .2s forwards;
  position:relative;
}
.name::after{
  content:'';position:absolute;bottom:8%;left:50%;transform:translateX(-50%);
  width:60%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;animation:fadeIn 1s 1s forwards;
}

/* Tagline */
.tagline{
  font-family:'Dancing Script',cursive;
  font-size:clamp(26px,4.5vw,42px);
  font-weight:700;color:var(--ink);
  opacity:0;transform:translateY(20px);
  animation:fadeUp .8s .4s forwards;
}
.tagline .exclaim{
  display:inline-block;
  animation:wave 2s ease-in-out infinite;
  transform-origin:bottom left;
}

/* Card - Study Entry */
.card-entry{
  margin-top:12px;
  display:flex;align-items:center;gap:16px;
  width:100%;max-width:380px;
  padding:22px 36px;
  background:var(--white);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  opacity:0;transform:translateY(30px);
  animation:fadeUp .8s .6s forwards;
  position:relative;overflow:hidden;
}
.card-entry::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent) 0%,#8b5cf6 100%);
  opacity:0;transition:opacity .4s;z-index:0;
}
.card-entry:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(99,102,241,.2);
  border-color:transparent;
}
.card-entry:hover::before{opacity:1}
.card-entry:hover .card-icon,.card-entry:hover .card-label,.card-entry:hover .card-arrow{color:var(--white)}
.card-entry:hover .card-sub{color:rgba(255,255,255,.8)}
.card-icon,.card-label,.card-arrow,.card-sub{position:relative;z-index:1;transition:color .4s}
.card-icon{font-size:28px}
.card-text{text-align:left}
.card-label{font-size:20px;font-weight:700;letter-spacing:.02em}
.card-sub{font-size:13px;color:var(--muted);margin-top:2px}
.card-arrow{font-size:22px;transition:transform .4s,color .4s}
.card-entry:hover .card-arrow{transform:translateX(8px)}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  opacity:0;animation:fadeIn 1s 1.2s forwards;
  z-index:1;
}
.scroll-hint::after{
  content:'';display:block;width:1px;height:24px;margin:8px auto 0;
  background:linear-gradient(180deg,var(--muted),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}

/* Right: photo */
.split-right{
  background:url('/assets/avatar.jpg') center/cover no-repeat;
  position:relative;
  opacity:0;
  animation:fadeIn 1.2s .3s forwards;
}
.split-right::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(250,250,250,.6) 8%,rgba(250,250,250,.15) 18%,transparent 28%);
}
/* Subtle glow line at boundary */
.split-right::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:2px;z-index:1;
  background:linear-gradient(180deg,transparent 0%,var(--accent) 30%,var(--warm) 70%,transparent 100%);
  opacity:.3;
}

/* ===== Footer ===== */
.footer{
  position:relative;z-index:2;text-align:center;padding:32px 24px;
  font-size:13px;color:var(--muted);background:var(--paper);
}
.footer a{color:var(--accent);text-decoration:none}

/* ===== Animations ===== */
@keyframes fadeUp{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(15deg)}75%{transform:rotate(-10deg)}}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(30px,-40px) scale(1.05)}
  50%{transform:translate(-20px,30px) scale(.95)}
  75%{transform:translate(40px,20px) scale(1.02)}
}

/* ===== Responsive ===== */
@media(max-width:860px){
  .split-hero{grid-template-columns:1fr;grid-template-rows:auto 45vh}
  .split-left{min-height:55vh;padding:32px 20px 80px}
  .split-right{min-height:45vh;background-position:center top}
  .card-entry{flex-direction:column;text-align:center;padding:18px 28px}
  .card-text{text-align:center}
  .scroll-hint{position:relative;bottom:auto;left:auto;transform:none;margin-top:20px}
  .scroll-hint::after{display:none}
}
@media(max-width:640px){
  .name{font-size:80px}
  .card-entry{padding:16px 24px}
}