/*
 * 메인 표지 전용 스타일
 * 문구: index.html의 portfolio-cover 구역
 * 공통 글꼴과 브랜드 연두색: style.css의 :root
 */

.portfolio-cover {
  --cover-glow: var(--accent);
  --cover-line: var(--muted-line);
  --cover-type: var(--ink);
  --cover-badge-radius: 22%;
  --cover-badge-size: clamp(70px, 7.5vw, 112px);
  --cover-figma-bg: #101010;
  --cover-photoshop-bg: #001e36;
  --cover-illustrator-bg: #330000;
  --cover-xd-bg: #2b0025;
  --cover-web-bg: var(--surface);
  --cover-github-bg: #181717;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(680px, 100svh, 900px);
  overflow: hidden;
  color: var(--cover-type);
  background: var(--bg);
}

/* 중앙에서 가장 선명하고 바깥으로 부드럽게 사라지는 연두색 */
.portfolio-cover::before {
  content: "";
  position: absolute;
  inset: -9% -5%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 36% 49% at 51% 49%,
    var(--cover-glow) 0%,
    color-mix(in srgb, var(--cover-glow) 72%, transparent) 37%,
    color-mix(in srgb, var(--cover-glow) 27%, transparent) 67%,
    transparent 100%
  );
  animation: cover-glow-in 1.4s cubic-bezier(.2,.7,.2,1) both;
}

.cover-line {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--cover-line);
  opacity: 0.34;
  filter: blur(0.65px);
  pointer-events: none;
}

.cover-line path {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  /* Keep dash distances in the same SVG coordinate system as pathLength.
     The resting state is a solid line, including after animation/reduced motion. */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: cover-line-draw 2.4s 0.15s cubic-bezier(.2,.7,.2,1) backwards;
}

.cover-since,
.cover-title,
.cover-roles,
.cover-year {
  position: absolute;
  z-index: 2;
}

.cover-since {
  top: 29%;
  left: 22%;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.055em;
  animation: cover-copy-in .8s .15s both;
}

.cover-title {
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.05em;
  text-shadow: 7px 7px rgba(255, 255, 255, .7);
  animation: cover-title-in 1s .28s cubic-bezier(.2,.75,.2,1) both;
}

.cover-roles {
  top: 60%;
  right: 19%;
  font-size: clamp(1.2rem, 2.7vw, 2.3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
  animation: cover-copy-in .85s .52s both;
}

.cover-roles span {
  display: inline;
  white-space: nowrap;
}

.cover-year {
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.5;
  animation: cover-opacity-in .75s .68s both;
}

.cover-tools {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 위치와 각도만 조절하면 아이콘 배치를 바꿀 수 있습니다. */
.tool-badge {
  --tool-rotation: 0deg;
  --tool-scale: 0.85;
  --enter-x: 0px;
  --enter-y: 24px;
  --float-duration: 8s;
  --float-x: 2px;
  --float-y: -5px;
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(var(--cover-badge-size) * var(--tool-scale));
  aspect-ratio: 1;
  border-radius: var(--cover-badge-radius);
  transform: translate(-50%, -50%) rotate(var(--tool-rotation));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--ink) 10%, transparent);
  pointer-events: none;
  opacity: 0;
  animation:
    tool-badge-in .72s var(--motion-delay, .2s) cubic-bezier(.16,.8,.24,1) forwards,
    tool-badge-drift var(--float-duration) calc(var(--motion-delay, .2s) + .72s) ease-in-out infinite;
}

.tool-badge img {
  display: block;
  width: 76%;
  height: 76%;
  object-fit: contain;
  animation: none;
}

.tool-figma {
  --float-duration: 7.6s;
  --float-x: 2px;
  --float-y: -5px;
  --tool-rotation: -13deg;
  --tool-scale: 0.9;
  top: 12%;
  left: 54%;
  background: var(--cover-figma-bg);
  filter: blur(1.5px);
  --motion-delay: .2s;
  --enter-x: 0px;
  --enter-y: -34px;
}

.tool-figma img {
  width: 80%;
  height: 80%;
}

.tool-photoshop {
  --float-duration: 8.8s;
  --float-x: -2px;
  --float-y: -6px;
  --tool-rotation: 11deg;
  --tool-scale: 0.9;
  top: 83%;
  left: 44%;
  background: var(--cover-photoshop-bg);
  --motion-delay: .68s;
  --enter-x: 0px;
  --enter-y: 38px;
}

.tool-photoshop img {
  width: 100%;
  height: 100%;
}

.tool-illustrator {
  --float-duration: 6.8s;
  --float-x: -3px;
  --float-y: 4px;
  --tool-rotation: 5deg;
  --tool-scale: 0.66;
  top: 34%;
  left: 81%;
  background: var(--cover-illustrator-bg);
  filter: blur(0.45px);
  --motion-delay: .42s;
  --enter-x: 42px;
  --enter-y: 0px;
}

.tool-illustrator img {
  width: 100%;
  height: 100%;
}

.tool-xd {
  --float-duration: 9.2s;
  --float-x: 2px;
  --float-y: 5px;
  --tool-rotation: -10deg;
  --tool-scale: 0.72;
  top: 63%;
  left: 15%;
  background: var(--cover-xd-bg);
  --motion-delay: .56s;
  --enter-x: -42px;
  --enter-y: 12px;
}

.tool-xd img {
  width: 100%;
  height: 100%;
}

.tool-html {
  --float-duration: 8.2s;
  --float-x: -2px;
  --float-y: -4px;
  --tool-rotation: -19deg;
  --tool-scale: 0.78;
  top: 70%;
  left: 88%;
  background: var(--cover-web-bg);
  filter: blur(2px);
  --motion-delay: .8s;
  --enter-x: 42px;
  --enter-y: 30px;
}

.tool-css {
  --float-duration: 7.2s;
  --float-x: 3px;
  --float-y: -6px;
  --tool-rotation: 12deg;
  --tool-scale: 1;
  top: 27%;
  left: 10%;
  background: var(--cover-web-bg);
  --motion-delay: .32s;
  --enter-x: -42px;
  --enter-y: -12px;
}

.tool-github {
  --float-duration: 8.6s;
  --float-x: -2px;
  --float-y: -5px;
  --tool-rotation: 9deg;
  --tool-scale: 0.74;
  top: 17%;
  left: 30%;
  background: var(--cover-github-bg);
  --motion-delay: .48s;
  --enter-x: -18px;
  --enter-y: -28px;
}

.tool-github img {
  width: 66%;
  height: 66%;
}

@keyframes cover-glow-in {
  from { transform: scale(.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes cover-line-draw {
  from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}

@keyframes cover-copy-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes cover-opacity-in {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes cover-title-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 32px)) scale(.96); filter: blur(10px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

/* Drift moves the entire li via translate; entrance owns transform.
   Keeping separate properties preserves the badge angle and avoids a jump. */
@keyframes tool-badge-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: var(--float-x) var(--float-y); }
}

@keyframes tool-badge-in {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y))) rotate(var(--tool-rotation));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--tool-rotation));
  }
}

.tool-html img,
.tool-css img {
  width: 62%;
  height: 62%;
}

.cover-work-link {
  position: absolute;
  bottom: 29px;
  left: max(56px, calc((100% - var(--max)) / 2));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.cover-work-link:hover {
  color: var(--green);
}

.cover-work-link span {
  font-size: 1.125rem;
}

/* 태블릿: 모든 아이콘과 문구를 화면 안에 유지합니다. */
@media (min-width: 761px) and (max-width: 1000px) {
  .portfolio-cover {
    --cover-badge-size: 76px;
    height: 680px;
  }

  .cover-since { left: 20%; }
  .cover-title { font-size: 13.6vw; }
  .cover-roles { right: 14%; }
  .tool-css { left: 15%; }
  .tool-xd { left: 15%; }
  .tool-illustrator { left: 83%; }
  .tool-html { left: 83%; }
}

/* 모바일: 타이틀 주변으로 도구 아이콘을 재배치합니다. */
@media (max-width: 760px) {
  .portfolio-cover {
    --cover-badge-size: clamp(54px, 12vw, 76px);
    height: clamp(600px, 100svh, 760px);
  }

  .portfolio-cover::before {
    inset: -4% -34%;
    background: radial-gradient(
      ellipse 39% 42% at 50% 47%,
      var(--cover-glow) 0%,
      color-mix(in srgb, var(--cover-glow) 67%, transparent) 40%,
      color-mix(in srgb, var(--cover-glow) 20%, transparent) 72%,
      transparent 100%
    );
  }

  .cover-line {
    left: -42%;
    width: 170%;
    opacity: 0.26;
  }

  .cover-since {
    top: 30%;
    left: 9%;
    font-size: 1rem;
  }

  .cover-title {
    top: 43%;
    font-size: clamp(3.6rem, 16.8vw, 7rem);
    letter-spacing: -0.06em;
  }

  .cover-roles {
    top: 59%;
    right: 9%;
    font-size: clamp(1.3rem, 5vw, 2rem);
    line-height: 1.25;
  }

  .cover-roles span {
    white-space: normal;
  }

  .cover-year {
    left: auto;
    right: 9%;
    bottom: 36px;
    transform: none;
    font-size: 1rem;
  }

  .tool-figma { top: 16%; left: 46%; }
  .tool-illustrator { top: 26%; left: 82%; }
  .tool-css { top: 44%; left: 15%; }
  .tool-xd { top: 66%; left: 15%; }
  .tool-photoshop { top: 77%; left: 40%; }
  .tool-html { top: 80%; left: 78%; }
  .tool-github { top: 19%; left: 17%; }

  .cover-work-link {
    bottom: 26px;
    left: 9%;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-cover::before,
  .cover-line path,
  .cover-since,
  .cover-title,
  .cover-roles,
  .cover-year,
  .tool-badge {
    animation: none;
  }

  .tool-badge { opacity: 1; translate: none; }
  .cover-line path { stroke-dashoffset: 0; }
}

@media print {
  .portfolio-cover {
    height: 270px;
    break-inside: avoid;
  }

  .portfolio-cover::before,
  .cover-tools,
  .cover-line,
  .cover-work-link { display: none; }
  .cover-since { top: 5%; left: 0; font-size: 1rem; }
  .cover-title { top: 40%; left: 0; transform: translateY(-50%); font-size: 5rem; }
  .cover-roles { top: 65%; right: 0; font-size: 1.5rem; }
  .cover-year { left: 0; bottom: 0; transform: none; font-size: 1rem; }
}