/* =========================
   1) Theme / Global Defaults
   ========================= */
:root{
  --blue: #0b22ff;
  --bg: #ffffff;
  --text: var(--blue);
  --max: 980px;
  --header-safe: 120px; /* used for anchor offsets */
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}


/* =========================
   2) Header (hidden until stage 5)
   - fixed at top
   - glass background to prevent clash
   ========================= */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  padding: 28px 42px 0;
  z-index: 20;

  /* hidden by default */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition: opacity .5s ease, transform .5s ease;
}

/* Glass layer (only becomes visible at stage 5) */
.site-header::before{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events:none;

  opacity: 0;
  transition: opacity .4s ease;
}

/* Keep header content above the glass layer */
.header-inner,
.header-line{
  position: relative;
  z-index: 1;
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand{
  text-decoration: none;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 40px;
}

.nav{
  display: flex;
  gap: 28px;
}

.nav a{
  text-decoration: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .8px;
}

.header-line{
  margin-top: 14px;
  height: 3px;
  background: var(--blue);
}

/* When stage 5 is active, show the header + glass */
html[data-stage="5"] .site-header{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
html[data-stage="5"] .site-header::before{
  opacity: 1;
}

/* Anchor links (Projects/Contact) should land below the fixed header */
#projects, #contact { scroll-margin-top: var(--header-safe); }


/* =========================
   3) Scrollytelling Layout
   ========================= */
.scrolly{
  position: relative;
}

/* Sticky keeps hero pinned while you scroll through steps */
.sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero{
  width: min(var(--max), 92vw);
  transform: translateY(-2vh);
}


/* =========================
   4) Typography
   ========================= */
.hello-row{
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 26px);
}

/* Hello: appears immediately with a page-load fade */
.hello{
  font-weight: 900;
  font-size: clamp(64px, 9vw, 150px);
  line-height: .95;

  /* page-load fade-in */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
  transition-delay: .15s;
}

/* When JS adds html.is-loaded, show Hello */
html.is-loaded .hello{
  opacity: 1;
  transform: translateY(0);
}

.myname{
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 54px);
  line-height: 1.1;
}

.name{
  margin-top: clamp(10px, 2vh, 18px);
  font-weight: 900;
  font-size: clamp(78px, 10vw, 170px);
  line-height: .95;
}

.tagline{
  margin-top: 18px;
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.25;
  max-width: 52ch;
}

.welcome{
  margin-top: 18px;
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 78px);
  line-height: 1.0;
}


/* =========================
   5) Scroll Steps
   - Each step is 1 viewport tall
   - JS watches which step is visible
   ========================= */
.steps .step{
  height: 100vh;
}


/* =========================
   6) Reveal Logic (cumulative)
   - These start hidden
   - They fade in at certain stages and stay visible afterwards
   ========================= */
.myname, .name, .tagline, .welcome{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

/* Stage 1+: show "My name is" */
html[data-stage="1"] .myname,
html[data-stage="2"] .myname,
html[data-stage="3"] .myname,
html[data-stage="4"] .myname,
html[data-stage="5"] .myname{
  opacity: 1;
  transform: translateY(0);
}

/* Stage 2+: show "HYUNJU" */
html[data-stage="2"] .name,
html[data-stage="3"] .name,
html[data-stage="4"] .name,
html[data-stage="5"] .name{
  opacity: 1;
  transform: translateY(0);
}

/* Stage 3+: show tagline */
html[data-stage="3"] .tagline,
html[data-stage="4"] .tagline,
html[data-stage="5"] .tagline{
  opacity: 1;
  transform: translateY(0);
}

/* Stage 4+: show welcome */
html[data-stage="4"] .welcome,
html[data-stage="5"] .welcome{
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   7) Doodles (fade in at stage 5)
   ========================= */
.doodles{
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: 0;
  transition: opacity .7s ease;
}
html[data-stage="5"] .doodles{ opacity: 1; }

.doodle{
  position: absolute;
  fill: none;
  stroke: var(--blue);
  stroke-width: 6;
  opacity: .16;
  filter: blur(.35px);
}

.doodle.big{
  stroke-width: 10;
  opacity: .12;
  filter: blur(.55px);
}

/* Doodle positioning */
.f1{ width: 90px; left: 6vw; top: 16vh; transform: rotate(-8deg); }
.f2{ width: 80px; right: 7vw; top: 18vh; transform: rotate(12deg); }
.b1{ width: 70vw; left: -12vw; top: 20vh; }
.b2{ width: 55vw; right: -16vw; top: -6vh; }


/* =========================
   8) Content Sections After Intro
   ========================= */
.content{
  padding: 110px 42px 120px;
  max-width: 1100px;
  margin: 0 auto;
}

.content h2{
  color: var(--blue);
  font-size: 36px;
  margin: 0 0 12px;
}

.content p{
  margin: 0;
  font-size: 18px;
}


/* =========================
   9) Small Responsive Tweaks
   ========================= */
@media (max-width: 640px){
  .site-header{ padding: 18px 18px 0; }
  .brand{ font-size: 28px; }
  .nav{ gap: 18px; }
}


/* =========================
   10) Accessibility: Reduced Motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}