@charset "UTF-8";
/* CSS Document */



html{
  background: var(--bg);
  overflow:hidden;
}


.scroll-shell{
  margin-top:var(--nav-height);

  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}


.section{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-height:calc(100vh - var(--nav-height));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 20px;
  position:relative;
  overflow:hidden;
}


/* YouTube BG */
.video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.video-bg .yt-holder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.video-bg .yt-holder iframe{
  position:absolute;
  top:50%;
  left:50%;
  border:0;
  width:100vw;
  height:56.25vw;          /* 100vw * 9/16 */
  min-width:177.7778vh;    /* 100vh * 16/9 */
  min-height:100vh;

  transform: translate(-50%, -50%) translateZ(0) scale(1.06);
  transform-origin:center;

  filter:saturate(0.95) brightness(0.55) contrast(1.05);
}
.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 720px at 50% 30%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(900px 560px at 25% 70%, rgba(243,112,33,0.10), transparent 60%),
    linear-gradient(180deg, rgba(5,5,9,0.15) 0%, rgba(5,5,9,0.72) 72%, rgba(5,5,9,0.90) 100%);
}



/* section-inner 등장 애니메이션 */
.section-inner{
  position:relative;
  z-index:2;
  width: min(800px, 92vw);
  text-align: center;
  border-radius:16px;
  padding:26px 22px;

  opacity:0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .55s ease, transform .65s cubic-bezier(.18,.95,.22,1);
  will-change: transform, opacity;
}
.section.is-active .section-inner{
  opacity:1;
  transform: translate3d(0, 0, 0);
}

.section h2{
  margin:0 0 8px;
  font-size:3em;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.section p{
  margin:0;
  color:rgba(232,234,240,0.72);
  line-height:1.7;
  font-size:14px;
}

/* typing caret */
.section p.is-typing::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1em;
  margin-left:6px;
  transform: translateY(2px);
  background: rgba(255,255,255,0.72);
  animation: caretBlink .9s steps(1,end) infinite;
}
@keyframes caretBlink{
  0%, 49% { opacity:1; }
  50%, 100% { opacity:0; }
}

/* 섹션별 배경 */
.section-one{ background: transparent !important; --p:0; }
.section-two{
  background:
    radial-gradient(1200px 720px at 50% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 560px at 25% 70%, rgba(243,112,33,0.12), transparent 60%),
    linear-gradient(180deg, #070711 0%, #050509 70%, #050509 100%);
  --p:0;
}
.section-three{ background: transparent; }
.section-four{ background: transparent !important; }

.section::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0.28;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.08) 0, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06) 0, transparent 50%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,0.05) 0, transparent 55%);
  mix-blend-mode:screen;
  z-index:1;
}

/* FLOW BG */
.flow-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  will-change: transform;
  transform: translate3d(0, calc(var(--p) * 0.10), 0);
}
.flow-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(240,245,255,0.08) 0%, rgba(10,10,14,0) 62%),
    radial-gradient(900px 500px at 50% 120%, rgba(180,120,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(6,6,10,0.0) 0%, rgba(6,6,10,0.40) 65%, rgba(6,6,10,0.70) 100%);
}
.flow-bg svg{
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  opacity:0.95;

  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;

  will-change: transform;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgba(255,255,255,0.06));
}
.flow-bg svg *{ vector-effect: non-scaling-stroke; }
.flow-bg svg path{
  fill: rgba(255,255,255,0.10);
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
.flow-bg .pentahedron{ stroke: rgba(62,130,247,0.50); }
.flow-bg .point{      stroke: rgba(162,175,194,0.50); }
.flow-bg .rhombus{    stroke: rgba(45,169,79,0.50); }
.flow-bg .x{          stroke: rgba(253,189,0,0.50); }
.flow-bg .circle{     stroke: rgba(237,65,45,0.50); }
.flow-bg svg [data-glass-hi="1"]{ mix-blend-mode: screen; }

.flow-frag{
  position:absolute;
  width:6px;height:6px;
  border-radius:2px;
  background: rgba(255,255,255,0.85);
  box-shadow:0 10px 18px rgba(0,0,0,0.28);
  opacity:1;
  transform:translate3d(var(--x,0px), var(--y,0px), 0);
  animation: fragOut var(--dur, 520ms) cubic-bezier(.2,.9,.2,1) forwards;
  will-change: transform, opacity;
}
@keyframes fragOut{
  to{
    transform:translate3d(calc(var(--x,0px) + var(--dx, 0px)),
                         calc(var(--y,0px) + var(--dy, 0px)), 0)
              rotate(var(--rot, 0deg))
              scale(var(--sc, .75));
    opacity:0;
  }
}

/* Section 3 perspective bg */
.sec3-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.sec3-bg{
  position:absolute;
  inset:0;
  transform: translate3d(0,0,0) scale(1.10);
  will-change: transform;

  background:
    linear-gradient(180deg, rgba(5,5,9,0.10) 0%, rgba(5,5,9,0.65) 75%, rgba(5,5,9,0.88) 100%),
    url("../images/sec3_bg.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  filter:saturate(0.95) brightness(0.58) contrast(1.08);
}
.sec3-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 560px at 20% 30%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(243,112,33,0.10), transparent 62%),
    radial-gradient(900px 540px at 50% 110%, rgba(120,160,255,0.10), transparent 60%);
  opacity:0.95;
  pointer-events:none;
}

/* TOP BUTTON */
.top-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1400;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(12,12,18,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:rgba(255,255,255,0.92);
  font-weight:650;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;

  opacity:0;
  pointer-events:none;
  transform: translate3d(0, 10px, 0);
  transition: opacity .6s ease, transform .6s cubic-bezier(.18,.95,.22,1), border-color .3s ease;
}
.top-btn .dot{
  width:8px;height:8px;border-radius:99px;
  background:rgba(255,255,255,0.78);
  box-shadow:0 0 16px rgba(255,255,255,0.18);    display: none;
}
.top-btn.show{
  opacity:1;
  pointer-events:auto;
  transform: translate3d(0, 0, 0);
}
.top-btn:hover{ border-color: rgba(255,255,255,0.26); }
.top-btn:active{ transform: translate3d(0, 1px, 0); }
@media(max-width:600px){
#sec3 h2{font-size: 1.5em;}
}
/* Reduced motion 확장 */
@media (prefers-reduced-motion: reduce){
  .scroll-shell{ scroll-behavior:auto; }
  .section-inner{ opacity:1 !important; transform:none !important; }
  .section p.is-typing::after{ display:none !important; }
  .top-btn{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .sec3-bg{ transform:none !important; }
	
}