/* namu.club v2 -- chrome-metallic + nature, broken-grid, retro-futuristic */

:root{
  --chrome-silver:#C0C8D0;
  --chrome-dark:#3A4048;
  --star-gold:#D8B850;
  --branch-green:#5A8848;
  --bark-umber:#6A4A30;
  --sky-pale:#E8ECF0;
  --retro-orange:#D87840;
  --metal-mid:#808890;

  --font-sans:"Space Grotesk", system-ui, sans-serif;
  --font-kor:"Noto Sans KR", "Space Grotesk", sans-serif;
}

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

html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--chrome-dark);
  background:var(--sky-pale);
  line-height:1.75;
  font-size:clamp(14px,1vw,16px);
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 .6em 0;
  color:var(--chrome-dark);
}

p{margin:0 0 1em 0;}

/* ================= STAR CANOPY ================= */
.star-canopy{
  position:fixed;
  inset:0 0 auto 0;
  height:60vh;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 12% 8%, var(--star-gold) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 28% 22%, var(--star-gold) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 41% 6%, var(--star-gold) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 58% 18%, var(--star-gold) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 71% 4%, var(--star-gold) 0 1.6px, transparent 2px),
    radial-gradient(circle at 84% 14%, var(--star-gold) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 92% 26%, var(--star-gold) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 18% 36%, var(--star-gold) 0 1px, transparent 1.4px),
    radial-gradient(circle at 47% 31%, var(--star-gold) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 64% 42%, var(--star-gold) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 38%, var(--star-gold) 0 1.2px, transparent 1.6px);
  opacity:0;
  transition:opacity 1200ms ease-out;
}
.star-canopy.is-on{opacity:.6;}

.star-canopy .extra-star{
  position:absolute;
  width:2px;height:2px;
  border-radius:50%;
  background:var(--star-gold);
  opacity:.55;
  transition:opacity 240ms ease-out, transform 240ms ease-out;
}
.star-canopy .extra-star.is-near{
  opacity:1;
  transform:scale(1.6);
}

/* ================= TRUNK OPENING ================= */
.trunk-opening{
  position:relative;
  min-height:100vh;
  background:linear-gradient(180deg, var(--chrome-silver) 0%, var(--metal-mid) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 6vw 0 6vw;
  overflow:hidden;
  z-index:1;
}

.tree-svg{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,98vw);
  height:88vh;
  pointer-events:none;
}

.tree-trunk{
  fill:var(--bark-umber);
  opacity:0;
  transition:opacity 600ms ease-out 200ms;
}
.tree-svg.is-on .tree-trunk{opacity:.92;}

.tree-stem,
.tree-branch{
  fill:none;
  stroke:var(--chrome-dark);
  stroke-width:2.2;
  stroke-linecap:round;
}
.tree-branch{stroke:var(--branch-green);stroke-width:1.8;}

.tree-stem{
  stroke-dasharray:340;
  stroke-dashoffset:340;
  transition:stroke-dashoffset 800ms ease-out;
}
.tree-svg.is-on .tree-stem{stroke-dashoffset:0;}

.tree-branch{
  stroke-dasharray:240;
  stroke-dashoffset:240;
  transition:stroke-dashoffset 600ms ease-out;
}
.tree-svg.is-on .tree-branch.b1{transition-delay:900ms;stroke-dashoffset:0;}
.tree-svg.is-on .tree-branch.b2{transition-delay:1100ms;stroke-dashoffset:0;}
.tree-svg.is-on .tree-branch.b3{transition-delay:1300ms;stroke-dashoffset:0;}
.tree-svg.is-on .tree-branch.b4{transition-delay:1500ms;stroke-dashoffset:0;}
.tree-svg.is-on .tree-branch.b5{transition-delay:1700ms;stroke-dashoffset:0;}
.tree-svg.is-on .tree-branch.b6{transition-delay:1900ms;stroke-dashoffset:0;}

.tree-leaf{
  fill:var(--branch-green);
  stroke:var(--chrome-dark);
  stroke-width:1;
  opacity:0;
  transform-origin:center;
  transform:scale(.4);
  transition:opacity 360ms ease-out, transform 360ms ease-out;
}
.tree-leaf.crown{fill:var(--branch-green);opacity:0;}
.tree-svg.is-on .tree-leaf{opacity:1;transform:scale(1);}
.tree-svg.is-on .tree-leaf.l1{transition-delay:1500ms;}
.tree-svg.is-on .tree-leaf.l2{transition-delay:1700ms;}
.tree-svg.is-on .tree-leaf.l3{transition-delay:1900ms;}
.tree-svg.is-on .tree-leaf.l4{transition-delay:2100ms;}
.tree-svg.is-on .tree-leaf.l5{transition-delay:2300ms;}
.tree-svg.is-on .tree-leaf.l6{transition-delay:2500ms;}
.tree-svg.is-on .tree-leaf.crown{transition-delay:2200ms;opacity:.85;}

.trunk-titles{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:14vh;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 800ms ease-out 1000ms, transform 800ms ease-out 1000ms;
}
.trunk-opening.is-on .trunk-titles{opacity:1;transform:translateY(0);}

.kor-mark{
  font-family:var(--font-kor);
  font-weight:500;
  display:block;
  font-size:clamp(20px,2vw,28px);
  color:var(--bark-umber);
  letter-spacing:.04em;
  margin-bottom:.3em;
}
.kor-mark.small{font-size:14px;}

.club-name{
  font-size:clamp(40px,7vw,96px);
  letter-spacing:-0.03em;
  line-height:.95;
  margin-bottom:.25em;
  color:var(--chrome-dark);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.trunk-tag{
  font-size:clamp(13px,1.1vw,16px);
  color:var(--chrome-dark);
  opacity:.78;
  margin:0;
  font-style:italic;
}

.scroll-cue{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chrome-dark);
  opacity:.7;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:2;
}
.cue-line{
  width:1px;height:34px;
  background:var(--chrome-dark);
  animation:cuepulse 2.4s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes cuepulse{
  0%,100%{transform:scaleY(.4);opacity:.4;}
  50%{transform:scaleY(1);opacity:.9;}
}

/* ================= BRANCHES (broken grid) ================= */
.branches{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  max-width:1280px;
  margin:0 auto;
  padding:18vh 6vw 14vh 6vw;
  z-index:1;
}

/* invisible central trunk axis */
.branches::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, var(--chrome-dark) 12%, var(--chrome-dark) 88%, transparent 100%);
  opacity:.18;
}

.branch-block{
  position:relative;
  background:var(--sky-pale);
  border:1px solid rgba(58,64,72,.18);
  padding:28px 26px;
  transition:transform 360ms ease-out, box-shadow 360ms ease-out, border-color 360ms ease-out;
  z-index:2;
  opacity:0;
  transform:translateY(14px);
}
.branch-block.is-in{
  opacity:1;
  transform:translateY(0);
}

/* broken grid placements */
.b-pos-1{grid-column:1 / span 5;margin-top:0;}
.b-pos-2{grid-column:8 / span 5;margin-top:60px;}
.b-pos-3{grid-column:2 / span 5;margin-top:36px;}
.b-pos-4{grid-column:7 / span 6;margin-top:24px;}
.b-pos-5{grid-column:3 / span 7;margin-top:48px;margin-bottom:40px;}

.branch-block h2{
  font-size:clamp(20px,2vw,28px);
  margin-bottom:.5em;
  letter-spacing:-.01em;
}
.branch-block p{
  margin:0;
  color:var(--chrome-dark);
}

.branch-label{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--branch-green);
  margin-bottom:14px;
}

/* chrome metallic panels */
.chrome-panel{
  background:linear-gradient(135deg, #DCE2E8 0%, #C0C8D0 40%, #B0B8C0 60%, #C8D0D8 100%);
  border-color:rgba(58,64,72,.32);
  transition:transform 360ms ease-out, box-shadow 360ms ease-out, background-position 600ms ease-out, border-color 360ms ease-out;
  background-size:200% 200%;
  background-position:0% 0%;
}
.chrome-panel:hover{background-position:30% 30%;}

/* gravitational hover -- toward central trunk axis (50%) */
.branch-block[data-branch="west"]:hover{
  transform:translateX(4px) translateY(-2px);
  box-shadow:0 6px 18px rgba(58,64,72,.16);
  border-color:var(--retro-orange);
}
.branch-block[data-branch="east"]:hover{
  transform:translateX(-4px) translateY(-2px);
  box-shadow:0 6px 18px rgba(58,64,72,.16);
  border-color:var(--retro-orange);
}
.branch-block[data-branch="north"]:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(58,64,72,.16);
  border-color:var(--retro-orange);
}

/* Branch connection node (small circle on the trunk side) */
.branch-block::before{
  content:"";
  position:absolute;
  top:32px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--branch-green);
  border:1.5px solid var(--chrome-dark);
  z-index:3;
}
.b-pos-1::before,
.b-pos-3::before,
.b-pos-5::before{right:-4px;}
.b-pos-2::before,
.b-pos-4::before{left:-4px;}

/* Branch connection line (curved, drawn via pseudo with bg gradient) */
.branch-block::after{
  content:"";
  position:absolute;
  top:32px;
  height:1.5px;
  background:linear-gradient(90deg, var(--branch-green) 0%, var(--branch-green) 70%, transparent 100%);
  opacity:.5;
  transition:height 300ms ease-out, opacity 300ms ease-out;
  pointer-events:none;
}
.b-pos-1::after,
.b-pos-3::after,
.b-pos-5::after{
  right:0;
  width:120px;
  transform:translateX(100%);
  background:linear-gradient(90deg, var(--branch-green) 0%, var(--branch-green) 30%, transparent 100%);
  background:linear-gradient(90deg, transparent 0%, var(--branch-green) 60%, var(--branch-green) 100%);
}
.b-pos-2::after,
.b-pos-4::after{
  left:0;
  width:120px;
  transform:translateX(-100%);
  background:linear-gradient(90deg, var(--branch-green) 0%, var(--branch-green) 40%, transparent 100%);
}
.branch-block:hover::after{height:2.5px;opacity:.9;}

/* ================= MEMBERSHIP ================= */
.membership{
  position:relative;
  background:linear-gradient(180deg, var(--sky-pale) 0%, #DDE2E8 100%);
  padding:14vh 6vw 16vh 6vw;
  z-index:1;
}
.membership-head{
  max-width:600px;
  margin:0 auto 60px auto;
  text-align:center;
}
.membership-head h2{
  font-size:clamp(28px,3.4vw,44px);
  margin-bottom:.4em;
}
.membership-head p{font-size:clamp(14px,1.1vw,16px);color:var(--chrome-dark);opacity:.78;}

.membership-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}

.m-card{
  position:relative;
  padding:34px 26px 28px 26px;
  background:#fff;
}
/* Border-animate: 4 sides drawn from top-left clockwise */
.m-card::before,
.m-card::after,
.m-card > .border-top,
.m-card > .border-left{
  content:"";
  position:absolute;
  background:var(--retro-orange);
  transition:transform 600ms ease-out;
}
.m-card::before{ /* top */
  top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left center;
}
.m-card::after{ /* right */
  top:0;right:0;width:2px;height:100%;
  transform:scaleY(0);transform-origin:top center;
  transition-delay:0ms;
}

.m-card.is-in::before{transform:scaleX(1);}
.m-card.is-in::after{transform:scaleY(1);transition-delay:600ms;}

/* Bottom + left as box-shadow trick */
.m-card{
  --bottom-scale:0;
  --left-scale:0;
}
.m-card.is-in{
  --bottom-scale:1;
  --left-scale:1;
}
.m-card .border-bottom,
.m-card .border-left-line{
  position:absolute;
  background:var(--retro-orange);
  transition:transform 600ms ease-out;
}
.m-card .border-bottom{
  bottom:0;right:0;height:2px;width:100%;
  transform:scaleX(var(--bottom-scale));transform-origin:right center;
  transition-delay:1200ms;
}
.m-card .border-left-line{
  bottom:0;left:0;width:2px;height:100%;
  transform:scaleY(var(--left-scale));transform-origin:bottom center;
  transition-delay:1800ms;
}

.m-num{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--branch-green);
  display:block;
  margin-bottom:18px;
}
.m-card h3{
  font-size:clamp(18px,1.6vw,22px);
  margin-bottom:.4em;
}
.m-card p{margin:0;color:var(--chrome-dark);}

.m-card:hover h3{color:var(--retro-orange);}

/* ================= GROVE FOOTER ================= */
.grove-footer{
  position:relative;
  background:linear-gradient(180deg, #B8C0C8 0%, var(--metal-mid) 100%);
  padding:80px 6vw 60px 6vw;
  text-align:center;
  z-index:1;
}
.footer-trunk{
  position:absolute;
  top:0;left:50%;
  width:8px;height:60px;
  background:var(--bark-umber);
  transform:translateX(-50%);
  border-radius:0 0 4px 4px;
}
.footer-content{position:relative;}
.footer-name{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:700;
  letter-spacing:-.01em;
  margin:8px 0 14px 0;
  color:var(--chrome-dark);
}
.footer-line{
  margin:0;
  font-size:14px;
  color:var(--chrome-dark);
  opacity:.78;
}
.footer-line.muted{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.06em;
  opacity:.55;
  text-transform:uppercase;
}

/* ================= RESPONSIVE ================= */
@media (max-width:780px){
  .branches{grid-template-columns:repeat(6,1fr);gap:20px;padding-top:14vh;}
  .b-pos-1{grid-column:1 / span 6;margin-top:0;}
  .b-pos-2{grid-column:1 / span 6;margin-top:0;}
  .b-pos-3{grid-column:1 / span 6;margin-top:0;}
  .b-pos-4{grid-column:1 / span 6;margin-top:0;}
  .b-pos-5{grid-column:1 / span 6;margin-top:0;}
  .branch-block::before,
  .branch-block::after{display:none;}
  .branches::before{display:none;}
  .tree-svg{height:70vh;}
  .trunk-titles{margin-bottom:18vh;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}