/* Heynut Common Styles
   공통 변수, 리셋, 내비게이션, 푸터, 스크롤 애니메이션 */

:root {
  --bg: #12100E;
  --surface: #1A1714;
  --elevated: #23201B;
  --border: #332E27;
  --muted: #6B6358;
  --secondary: #9C9080;
  --primary: #E0D6C8;
  --cream: #FAF0DC;
  --white: #FAF0DC;
  --amber: #D4883A;
  --shell: #8B6F47;
  --leaf: #5B8C3E;
  --amber-soft: rgba(212,136,58,0.08);
  --amber-mid: rgba(212,136,58,0.15);
  --amber-glow: rgba(212,136,58,0.06);
  --leaf-soft: rgba(91,140,62,0.10);
  --serif: 'Fraunces', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}

/* Nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;background:rgba(18,16,14,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.nav-logo span{font-family:var(--serif);font-size:20px;font-weight:400}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{color:var(--secondary);text-decoration:none;font-size:14px;font-weight:400;transition:color 0.2s}
.nav-links a:hover{color:var(--cream)}
.nav-links a.nav-cta{display:inline-flex;padding:9px 24px;border-radius:10px;background:var(--amber);color:#000;font-weight:600;font-size:13px;text-decoration:none;border:none;transition:all 0.2s}
.nav-links a.nav-cta:hover{opacity:0.9;color:#000}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 48px}

/* Footer */
footer{padding:48px 0;border-top:1px solid var(--border)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-left{display:flex;align-items:center;gap:10px}
.footer-left span{font-family:var(--serif);font-size:16px}
.footer-links{display:flex;gap:28px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:13px;transition:color 0.2s}
.footer-links a:hover{color:var(--cream)}
.footer-right{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* Scroll Down Pill */
.scroll-next{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:98;display:flex;align-items:center;gap:8px;padding:10px 24px;border-radius:100px;background:rgba(26,23,20,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--secondary);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all 0.3s;letter-spacing:0.3px}
.scroll-next:hover{color:var(--cream);border-color:var(--amber);background:rgba(26,23,20,0.95)}
.scroll-next svg{transition:transform 0.3s}
.scroll-next:hover svg{transform:translateY(2px)}
.scroll-next.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(16px)}

/* Scroll Animations */
.no-js .reveal,.no-js .reveal-left,.no-js .reveal-right,.no-js .reveal-scale{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-stagger .reveal:nth-child(1){transition-delay:0ms}
.reveal-stagger .reveal:nth-child(2){transition-delay:80ms}
.reveal-stagger .reveal:nth-child(3){transition-delay:160ms}
.reveal-stagger .reveal:nth-child(4){transition-delay:240ms}
.reveal-stagger .reveal:nth-child(5){transition-delay:320ms}
.reveal-stagger .reveal:nth-child(6){transition-delay:400ms}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);will-change:opacity,transform}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);will-change:opacity,transform}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);will-change:opacity,transform}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--amber);z-index:101;transform-origin:left;transform:scaleX(0);will-change:transform}

/* Section Dots */
.section-dots{position:fixed;right:24px;left:auto;top:50%;transform:translateY(-50%);z-index:99;display:flex;flex-direction:column;gap:12px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;padding:0}
.section-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background 0.3s,transform 0.3s;cursor:pointer;border:none;padding:0}
.section-dot.active{background:var(--amber);transform:scale(1.4)}

/* Responsive — Common */
@media(prefers-reduced-motion:reduce){.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none}.hero-glow{will-change:auto}.scroll-progress{display:none}}
@media(max-width:768px){
  .container{padding:0 24px}
  .nav-inner{padding:0 24px}
  .footer-inner{flex-direction:column;gap:24px;text-align:center}
  .nav-links .nav-link-text{display:none}
  .section-dots{display:none}
  .scroll-next{bottom:24px;padding:8px 20px;font-size:10px}
  .reveal{transform:translateY(24px)}
  .reveal-left,.reveal-right{opacity:0;transform:translateY(24px)}
}