/* =============================================================
   vision.css — "My Vision" Vertical Scroll Section
   Five slides stacked vertically, scroll-triggered reveals.
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────
   Normal flow section — same padding convention as .hero__body
   ─────────────────────────────────────────────────────────── */
.vision-scroll {
  width:      100%;
  background: #100915;
  padding:    120px 96px 140px 235px;
  overflow:   visible;
  position:   relative;
}

/* ── Vertical track ──────────────────────────────────────────
   Slides stacked with generous breathing room between them.
   ─────────────────────────────────────────────────────────── */
.vision-scroll__track {
  display:        flex;
  flex-direction: column;
  gap:            280px;
  width:          100%;
  position:       relative;
  z-index:        1;
}

/* ── Shared slide base ───────────────────────────────────────
   Each slide is a full-width flex column by default.
   ─────────────────────────────────────────────────────────── */
.vision-slide {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  position:       relative;
  width:          100%;
}

/* ── Typography ──────────────────────────────────────────────
   Matches Figma tokens: Geist Mono / Geist / Work Sans
   ─────────────────────────────────────────────────────────── */
.vision-slide__label {
  font-family:    var(--font-mono);
  font-size:      20px;
  font-weight:    500;
  line-height:    32px;
  letter-spacing: 0;
  color:          #c97fff;
}

.vision-slide__heading {
  font-family:    var(--font-headings);
  font-size:      40px;
  font-weight:    600;
  line-height:    48px;
  letter-spacing: -0.5px;
  color:          var(--white);
}

.vision-purple { color: #c97fff; }

.vision-slide__body {
  font-family: var(--font-text);
  font-size:   16px;
  font-weight: 400;
  line-height: 24px;
  color:       #fafafa;
}

/* ═══════════════════════════════════════════════════════════
   SLIDE 1 — My Vision  (text block left | pen-tool animation right)
   ═══════════════════════════════════════════════════════════ */
.vision-slide--1 {
  display:               grid;
  /* THREE text blocks in a single row:
        col 1 — My Vision (Design that actually works)
        col 2 — Empathy, hard work, passion to create
        col 3 — Continuous learning
     Each column gets the same fractional width and aligns to the
     start of the cross-axis so the headings sit on the same
     horizontal line. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   56px;
  align-items:           start;
  max-width:             none;
}

/* Each block is a flex column — label on top, heading next, then
   body paragraphs. `min-width: 0` lets long words wrap inside the
   1fr column instead of forcing horizontal overflow. */
.vision-slide__col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  min-width:      0;
  max-width:      440px;
}

/* Col 3 (Continuous learning) has no label. To keep its heading
   on the same horizontal line as the headings in cols 1 and 2,
   we pad the top by exactly the height a label would occupy:
   label line-height 32px + the column's 16px flex gap = 48px. */
.vision-slide__col--no-label {
  padding-top: 48px;
}

.vision-slide--1__text {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  max-width:      500px;
}

.vision-slide__icon {
  width:         64px;
  height:        64px;
  margin-bottom: 8px;
}

/* ─── Pen-tool animation ─────────────────────────────────────
   Three bezier shapes drawn in sequence, each followed by a
   simulated Ctrl+Z that undoes it before the next one starts.
   15s total loop: 0-33% shape 1, 33-66% shape 2, 66-100% shape 3.
   ─────────────────────────────────────────────────────────── */
.design-pen {
  position:      relative;
  width:         100%;
  max-width:     420px;
  aspect-ratio:  4 / 3;
  background:    transparent;
  border:        none;
  overflow:      visible;
  /* Centered inside its 420px grid column so it lines up visually
     with the centered graphics on slides 02 and 03. */
  justify-self:  center;
}

.design-pen__canvas {
  display: block;
  width:   100%;
  height:  100%;
}

/* Shape group — only one visible at a time */
.design-pen__shape {
  opacity: 0;
  animation: design-pen-visible-1 15s linear infinite;
}
.design-pen__shape--2 { animation-name: design-pen-visible-2; }
.design-pen__shape--3 { animation-name: design-pen-visible-3; }

@keyframes design-pen-visible-1 {
  0%, 30%   { opacity: 1; }
  31%, 100% { opacity: 0; }
}
@keyframes design-pen-visible-2 {
  0%, 33%   { opacity: 0; }
  34%, 63%  { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes design-pen-visible-3 {
  0%, 66%   { opacity: 0; }
  67%, 96%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Path — drawn via stroke-dashoffset (uses pathLength="1") */
.design-pen__path {
  fill:              none;
  stroke:            #c97fff;
  stroke-width:      2.5;
  stroke-linecap:    round;
  stroke-linejoin:   round;
  stroke-dasharray:  1;
  stroke-dashoffset: 1;
  animation: design-pen-draw-1 15s ease-out infinite;
}
.design-pen__shape--2 .design-pen__path { animation-name: design-pen-draw-2; }
.design-pen__shape--3 .design-pen__path { animation-name: design-pen-draw-3; }

@keyframes design-pen-draw-1 {
  0%   { stroke-dashoffset: 1; }
  13%  { stroke-dashoffset: 0; }
  22%  { stroke-dashoffset: 0; }
  26%  { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 1; }
}
@keyframes design-pen-draw-2 {
  0%, 33% { stroke-dashoffset: 1; }
  46%     { stroke-dashoffset: 0; }
  55%     { stroke-dashoffset: 0; }
  59%     { stroke-dashoffset: 1; }
  100%    { stroke-dashoffset: 1; }
}
@keyframes design-pen-draw-3 {
  0%, 66% { stroke-dashoffset: 1; }
  79%     { stroke-dashoffset: 0; }
  88%     { stroke-dashoffset: 0; }
  92%     { stroke-dashoffset: 1; }
  100%    { stroke-dashoffset: 1; }
}

/* Control-point handle dashed lines */
.design-pen__handle-line {
  stroke:           #c97fff;
  stroke-width:     1;
  stroke-dasharray: 3 3;
  opacity:          0;
  animation: design-pen-handles-1 15s linear infinite;
}
.design-pen__shape--2 .design-pen__handle-line { animation-name: design-pen-handles-2; }
.design-pen__shape--3 .design-pen__handle-line { animation-name: design-pen-handles-3; }

/* Handle dot (bezier control point) */
.design-pen__handle-dot {
  fill:         #fafafa;
  stroke:       #c97fff;
  stroke-width: 1.5;
  opacity:      0;
  animation: design-pen-handles-1 15s linear infinite;
}
.design-pen__shape--2 .design-pen__handle-dot { animation-name: design-pen-handles-2; }
.design-pen__shape--3 .design-pen__handle-dot { animation-name: design-pen-handles-3; }

@keyframes design-pen-handles-1 {
  0%, 12%   { opacity: 0; }
  15%, 22%  { opacity: 0.55; }
  25%, 100% { opacity: 0; }
}
@keyframes design-pen-handles-2 {
  0%, 45%   { opacity: 0; }
  48%, 55%  { opacity: 0.55; }
  58%, 100% { opacity: 0; }
}
@keyframes design-pen-handles-3 {
  0%, 78%   { opacity: 0; }
  81%, 88%  { opacity: 0.55; }
  91%, 100% { opacity: 0; }
}

/* On-path anchor squares */
.design-pen__anchor {
  fill:         #1f0231;
  stroke:       #c97fff;
  stroke-width: 1.5;
  opacity:      0;
  animation: design-pen-anchors-1 15s linear infinite;
}
.design-pen__shape--2 .design-pen__anchor { animation-name: design-pen-anchors-2; }
.design-pen__shape--3 .design-pen__anchor { animation-name: design-pen-anchors-3; }

@keyframes design-pen-anchors-1 {
  0%, 5%    { opacity: 0; }
  10%, 22%  { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes design-pen-anchors-2 {
  0%, 38%   { opacity: 0; }
  43%, 55%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes design-pen-anchors-3 {
  0%, 71%   { opacity: 0; }
  76%, 88%  { opacity: 1; }
  91%, 100% { opacity: 0; }
}

/* Respect reduced motion: freeze on the first shape fully drawn */
@media (prefers-reduced-motion: reduce) {
  .design-pen__shape,
  .design-pen__path,
  .design-pen__handle-line,
  .design-pen__handle-dot,
  .design-pen__anchor { animation: none; }
  .design-pen__shape { opacity: 0; }
  .design-pen__shape--1 { opacity: 1; }
  .design-pen__shape--1 .design-pen__path { stroke-dashoffset: 0; }
  .design-pen__shape--1 .design-pen__handle-line,
  .design-pen__shape--1 .design-pen__handle-dot { opacity: 0.55; }
  .design-pen__shape--1 .design-pen__anchor { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SLIDE 2 — My Background  (text left | circles right)
   ═══════════════════════════════════════════════════════════ */
.vision-slide--2 {
  display:               grid;
  /* Desktop layout: animation on the LEFT, text on the RIGHT.
     The 600px column hosts the concentric-rings graphic; the
     1fr column hosts the text block. Each child is pinned to
     its column below so changing the template order doesn't
     break auto-placement. */
  grid-template-columns: 600px 1fr;
  gap:                   80px;
  align-items:           center;
}

/* `grid-row: 1` on both forces them into the same row. Without
   it, grid auto-flow walks the source order: text-left (first in
   DOM) lands at row 1 col 2, then circle-wrap (second in DOM)
   with grid-column: 1 is treated as "row 1 col 1 already passed"
   and gets wrapped down to row 2. */
.vision-slide--2 .vision-slide__circle-wrap { grid-column: 1; grid-row: 1; }
.vision-slide--2 .vision-slide__text-left   { grid-column: 2; grid-row: 1; }

/* Left text column */
.vision-slide__text-left {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  max-width:      500px;
}

/* Circle graphic container */
.vision-slide__circle-wrap {
  position:     relative;
  width:        580px;
  height:       520px;
  flex-shrink:  0;
  /* Center the 580px graphic inside its 600px grid column so it
     aligns with the centered graphics on slides 01 and 03. */
  justify-self: center;
}

/* 495×495 circle, centered inside the wrap */
.vision-circle {
  position:  absolute;
  left:      50%;
  top:       50%;
  transform: translate(-50%, -50%);
  width:     495px;
  height:    495px;
}

/* Ring base */
.vision-circle__ring {
  position:      absolute;
  border-radius: 50%;
}

/* Outer ring — slow CW rotation */
.vision-circle__ring--outer {
  left: 0; top: 0;
  width: 495px; height: 495px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent         0deg,
    rgba(143,0,216,.05) 60deg,
    rgba(185,85,255,.1) 120deg,
    rgba(143,0,216,.04) 200deg,
    transparent         260deg,
    rgba(143,0,216,.07) 320deg,
    transparent         360deg
  );
  border: 1px solid rgba(143, 0, 216, 0.18);
}

/* Middle ring — slow CCW rotation */
.vision-circle__ring--mid {
  left: 76px; top: 76px;
  width: 343px; height: 343px;
  background: conic-gradient(
    from 90deg at 50% 50%,
    transparent          0deg,
    rgba(185,85,255,.08) 80deg,
    rgba(143,0,216,.12)  160deg,
    transparent          220deg,
    rgba(185,85,255,.06) 300deg,
    transparent          360deg
  );
  border: 1px solid rgba(185, 85, 255, 0.25);
}

/* Inner ring — scale pulse */
.vision-circle__ring--inner {
  left: 140px; top: 140px;
  width: 215px; height: 215px;
  background: radial-gradient(circle at 50% 50%,
    rgba(201,127,255,.24) 0%,
    rgba(143,  0,216,.18) 50%,
    transparent           100%
  );
  border: 1px solid rgba(201, 127, 255, 0.38);
  box-shadow:
    0 0 52px rgba(143,  0, 216, 0.36),
    0 0 96px rgba(143,  0, 216, 0.12),
    inset 0 0 28px rgba(201, 127, 255, 0.10);
}

/* Center text label */
.vision-circle__center {
  position:    absolute;
  left:        50%;
  top:         50%;
  transform:   translate(-50%, -50%);
  text-align:  center;
  font-family: var(--font-text);
  font-size:   20px;
  font-weight: 600;
  line-height: 32px;
  color:       #eaeaea;
  white-space: nowrap;
  z-index:     10;
  pointer-events: none;
}

/* ── Floating skill tags ─────────────────────────────────────
   Absolutely positioned around the 580×520 wrap.
   GSAP adds gentle float animations.
   ─────────────────────────────────────────────────────────── */
.vision-tag {
  position:        absolute;
  height:          46px;
  padding:         0 16px;
  display:         flex;
  align-items:     center;
  background:      rgba(10, 10, 10, 0.88);
  border:          1px solid rgba(46, 46, 46, 0.9);
  border-radius:   64px;
  font-family:     var(--font-text);
  font-size:       15px;
  font-weight:     600;
  line-height:     24px;
  color:           #ededed;
  white-space:     nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:      0 2px 12px rgba(0,0,0,.4);
}

.vision-tag--app-web    { left: 150px; top:   6px; }
.vision-tag--ui         { left: 312px; top:  46px; }
.vision-tag--industrial { left: 458px; top: 130px; }
.vision-tag--ux         { left:  76px; top: 116px; }
.vision-tag--seo        { left: 412px; top: 218px; }
.vision-tag--graphic-d  { left: -28px; top: 218px; }
.vision-tag--cro        { left: 130px; top: 334px; }
.vision-tag--3d         { left: 336px; top: 360px; }
.vision-tag--branding   { left: 248px; top: 462px; }

/* ═══════════════════════════════════════════════════════════
   SLIDE 3 — My Flow  (text left | chart right)
   ═══════════════════════════════════════════════════════════ */
.vision-slide--3 {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   80px;
  align-items:           center;
}

/* SVG chart */
.vision-flow {
  position:     relative;
  width:        399px;
  height:       255px;
  overflow:     visible;
  /* Centered inside its 420px grid column so it aligns with the
     centered graphics on slides 01 and 02. */
  justify-self: center;
}

.vision-flow__svg {
  width:    100%;
  height:   100%;
  overflow: visible;
}

/* Floating pill labels on the chart */
.vision-flow__label {
  position:    absolute;
  height:      32px;
  padding:     0 14px;
  display:     inline-flex;
  align-items: center;
  border-radius: 64px;
  font-family: var(--font-text);
  font-size:   14px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  pointer-events: none;
}

.vision-flow__label--start {
  background: rgba(204, 204, 204, 0.27);
  color:      #f5e8fc;
  left:       -4px;
  top:        134px;
}

.vision-flow__label--end {
  background: #b855ff;
  color:      #f5e8fc;
  right:      -24px;
  top:        -42px;
}

/* Text column inside slide 3 */
.vision-slide__text-col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  max-width:      500px;
}

/* ═══════════════════════════════════════════════════════════
   SLIDE 4 — Business Mind (main block left | AI-native aside right)
   ═══════════════════════════════════════════════════════════ */
.vision-slide--4 {
  display:               grid;
  /* Wider right column to host both the AI-native text and the
     Claude Code terminal window side-by-side. */
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap:                   72px;
  align-items:           start;
  max-width:             none;
}

.vision-slide--4__main {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  max-width:      440px;
}

.vision-slide--4__aside {
  /* Two sub-columns inside the aside: text on the left, the
     animated Claude window on the right. The 56px margin keeps
     the right-side h3 baseline-aligned with the left h2. */
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap:                   40px;
  align-items:           start;
  margin-top:            56px;
}

.vision-slide--4__aside-text {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  max-width:      440px;
  min-width:      0;
}

.vision-slide--4__aside .vision-slide__heading {
  margin: 0;
}

/* ── Claude Code window ─────────────────────────────────────
   Mac-style terminal frame in the portfolio's purple/dark
   language. Uses --purple-border + --bg-main tones so it
   blends naturally with the rest of the vision section. */
.vision-claude {
  width:           100%;
  background:      linear-gradient(180deg,
                     rgba(14, 9, 17, 0.92) 0%,
                     rgba(10, 5, 17, 0.92) 100%);
  border:          1px solid rgba(143, 0, 216, 0.28);
  border-radius:   12px;
  overflow:        hidden;
  box-shadow:      0 24px 56px rgba(0, 0, 0, 0.45),
                   0 0 0 1px rgba(143, 0, 216, 0.06) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vision-claude__chrome {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        12px 16px;
  background:     rgba(143, 0, 216, 0.08);
  border-bottom:  1px solid rgba(143, 0, 216, 0.18);
}

.vision-claude__dot {
  width:        10px;
  height:       10px;
  border-radius: 50%;
  flex-shrink:  0;
}
.vision-claude__dot--red    { background: #FF5F57; }
.vision-claude__dot--yellow { background: #FEBC2E; }
.vision-claude__dot--green  { background: #28C840; }

.vision-claude__title {
  margin-left:    auto;
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color:          rgba(232, 198, 253, 0.55);
}

.vision-claude__body {
  padding:    20px 18px 24px;
  min-height: 264px;
  font-family: var(--font-mono);
  font-size:   12.5px;
  font-weight: 400;
  line-height: 22px;
  color:       #d9c8ee;
}

.vision-claude__lines {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.vision-claude__line {
  white-space: pre-wrap;
  word-break:  break-word;
}

.vision-claude__line--prompt::before {
  content: '';                /* the literal "> " is in the script */
}
.vision-claude__line--prompt    { color: #ffffff;            font-weight: 500; }
.vision-claude__line--thinking  { color: rgba(170, 172, 241, 0.72); font-style: italic; }
.vision-claude__line--output    { color: rgba(232, 198, 253, 0.78); }
.vision-claude__line--edit      { color: #C7C9F4; }
.vision-claude__line--success   { color: #7CE0A4; }

/* Blinking caret follows whichever line is currently last
   (i.e. the line being typed). Pure CSS — JS only appends. */
.vision-claude__line:last-child::after {
  content:        '';
  display:        inline-block;
  width:          6px;
  height:         14px;
  margin-left:    2px;
  vertical-align: -2px;
  background:     #c97fff;
  animation:      vision-claude-blink 0.85s step-end infinite;
}

@keyframes vision-claude-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-claude__line:last-child::after { animation: none; opacity: 0.6; }
}

.vision-slide__body--accent {
  font-style: italic;
  color:      #e6c8ff;
}

.vision-tags-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

.vision-pill {
  height:      32px;
  padding:     0 14px;
  display:     inline-flex;
  align-items: center;
  background:  rgba(143, 0, 216, 0.26);
  border-radius: 64px;
  font-family: var(--font-text);
  font-size:   15px;
  font-weight: 500;
  line-height: 24px;
  color:       #c97fff;
  white-space: nowrap;
  transition:  background 0.25s ease;
}
.vision-pill:hover { background: rgba(143, 0, 216, 0.4); }

/* ═══════════════════════════════════════════════════════════
   SLIDE 5 — My Values  (two columns side by side)
   ═══════════════════════════════════════════════════════════ */
.vision-slide--5 {
  display:               grid;
  /* Mirrors slide 4's `minmax(0, 440px) minmax(0, 1fr)` + 72px
     gap so the right-side block ("Continuous learning") lines
     up vertically with slide 4's right-side block
     ("High productivity, AI-native designer"). */
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap:                   72px;
  align-items:           start;
}

.vision-slide__value-block {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  max-width:      500px;
}

/* The two Slide-5 headings have unequal line counts ("Empathy,
   hard work, passion to create" wraps to 2 lines; "Continuous
   learning" is 1). Reserve two lines of vertical space on both
   so the descriptions below line up on the same baseline.
   `2lh` scales automatically with the heading's line-height
   so the lock also works at the mobile breakpoint where the
   heading shrinks to 28/36. */
.vision-slide--5 .vision-slide__heading {
  min-height: 96px;   /* fallback: 2 × 48px line-height */
  min-height: 2lh;
}

/* Slide 5 label spans both columns */
.vision-slide--5 > .vision-slide__label {
  grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════
   MID DESKTOP  ≤ 1280px
   The slide grid stays main + aside, but the aside collapses
   to a single column so the Claude window doesn't get crushed
   into a too-narrow strip beside the text.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .vision-slide--4__aside {
    grid-template-columns: 1fr;
    gap:                   24px;
  }
  .vision-claude {
    max-width: 460px;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET  ≤ 940px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .vision-scroll {
    padding: 80px 40px;
  }

  .vision-scroll__track { gap: 192px; }

  .vision-slide--1 {
    grid-template-columns: 1fr;
    gap:                   40px;
  }
  /* When the 3 columns stack vertically, the title-alignment
     padding on Col 3 isn't needed anymore. */
  .vision-slide__col--no-label { padding-top: 0; }
  .vision-slide__col           { max-width: 520px; }
  .design-pen { justify-self: start; max-width: 520px; }

  .vision-slide--4 {
    grid-template-columns: 1fr;
    gap:                   40px;
  }
  .vision-slide--4__aside {
    margin-top:            0;
    grid-template-columns: 1fr;     /* stack text + claude window */
    max-width:             520px;
  }
  .vision-claude { max-width: 460px; }

  .vision-slide--2,
  .vision-slide--3,
  .vision-slide--5 {
    display:        flex;
    flex-direction: column;
    gap:            48px;
  }

  .vision-slide__circle-wrap {
    width:     100%;
    max-width: 520px;
    height:    440px;
  }

  .vision-flow { width: 100%; max-width: 399px; }

}

/* ═══════════════════════════════════════════════════════════
   PHONE  ≤ 640px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .vision-scroll       { padding: 60px 20px; }
  .vision-scroll__track { gap: 144px; }

  .vision-slide__heading { font-size: 28px; line-height: 36px; }
  .vision-slide__label   { font-size: 16px; line-height: 28px; }

  .vision-slide__circle-wrap { height: 360px; }

  .vision-tag {
    height:    38px;
    font-size: 13px;
    padding:   0 12px;
  }

  .vision-tag--industrial { left: auto; right: -10px; top: 110px; }
  .vision-tag--app-web    { left: 60px; top: 2px; font-size: 12px; }
}