/* ══════════════════════════════════════════════════════
   ABOUT PAGE — about.css
   Extends style.css + sky.css for the sunrise-sky variant.
   All section containers transparent — canvas sky shows through.
══════════════════════════════════════════════════════ */

/* ── 1. Nuclear transparent reset ── */
.about-page,
.about-hero,
.about-hero-inner,
.about-section,
.about-section-inner,
.story-bio,
.story-mosaic,
.skills-grid,
.experience-table {
  background:           transparent !important;
  backdrop-filter:      none        !important;
  -webkit-backdrop-filter: none     !important;
  border:               none        !important;
  box-shadow:           none        !important;
}

/* ── 2. Page layout ── */
.about-page {
  display: block;
  position: relative;
}


/* ════════════════════════════════════════
   3. ABOUT HERO
════════════════════════════════════════ */
.about-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height, 72px) + 80px) var(--gutter, 48px) 80px;
}

.about-hero-inner {
  max-width: 860px;
  margin: 0 auto;
}

.about-hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  color: #0A0512;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-accent {
  font-style: italic;
  color: #E040FB;               /* magenta accent — matches homepage */
}

/* Social pill links */
.about-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.social-pill {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #0A0512;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(10, 5, 18, 0.12);
  border-radius: 100px;
  padding: 9px 22px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.01em;
}

.social-pill:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(10, 5, 18, 0.10);
}


/* ════════════════════════════════════════
   4. CONTENT SECTIONS — shared
════════════════════════════════════════ */
.about-section {
  padding: 80px var(--gutter, 80px);
}

.about-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.about-section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: #0A0512;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 40px;
  text-align: center;
}


/* ════════════════════════════════════════
   5. MY STORY
════════════════════════════════════════ */

/* Photo mosaic */
.story-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 180px;
  gap: 10px;
  margin-bottom: 48px;
  border-radius: 16px;
  overflow: hidden;
}

.mosaic-cell {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* ── Photos: fill cell, b&w at rest → full colour on hover ── */
.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.40s ease, transform 0.40s ease;
}

.mosaic-cell:hover img {
  filter: grayscale(0%);
  transform: scale(1.04);             /* gentle zoom-in on colour reveal */
}

.mosaic-a { grid-column: span 2; }
.mosaic-b { grid-column: span 1; }
.mosaic-c { grid-column: span 1; }
.mosaic-d { grid-column: span 1; grid-row: 2; }
.mosaic-e { grid-column: span 1; grid-row: 2; }
.mosaic-f { grid-column: span 1; grid-row: 2; }
.mosaic-g { grid-column: span 1; grid-row: 2; }
.mosaic-h { grid-column: span 1; grid-row: 1 / span 2; }

.about-dark-cell {
  background: linear-gradient(135deg, #2A1830 0%, #1A1028 100%) !important;
}

.mosaic-tag {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  background: rgba(0,0,0,0.30);
  border-radius: 4px;
  padding: 3px 7px;
}

/* Bio text */
.story-bio {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.story-bio p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: #0A0512;
  margin-bottom: 20px;
  text-align: center;
}

.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0A0512;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(10, 5, 18, 0.12);
  border-radius: 100px;           /* pill shape */
  padding: 9px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.story-cta:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(10, 5, 18, 0.10);
  color: #0A0512;
}


/* ════════════════════════════════════════
   6. SKILLS GRID — 3-col horizontal layout
      (icon + magenta name side by side)
════════════════════════════════════════ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 260px));
  justify-content: center;
  row-gap: 44px;
  column-gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}

.skill-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

.skill-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;          /* iOS-style rounded square */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.skill-icon span {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.skill-icon svg {
  display: block;
}

/* Real logo images — transparent by default, white tile opt-in */
.skill-logo-icon {
  background: transparent !important;
  padding: 10px;
  box-sizing: border-box;
}

/* Use on logos with transparent backgrounds that need a white canvas */
.skill-logo-white {
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 10px;
}

.skill-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── Per-logo scale corrections for baked-in PNG whitespace ──
   Parent .skill-icon has overflow:hidden so excess
   transparent border is clipped cleanly.                    */

/* Claude: large internal transparent padding */
.skill-logo-icon img[alt="Claude"] {
  transform: scale(1.75);
}

/* Webflow: 1.75 × 1.5 = 2.625 */
.skill-logo-icon img[alt="Webflow"] {
  transform: scale(2.625);
}

/* Figma: 1.44 × 1.2 = 1.728 */
.skill-logo-icon img[alt="Figma"] {
  transform: scale(1.728);
}

/* Illustrator: 1.2 × 1.2 = 1.44, multiply to dissolve white bg */
.skill-logo-icon img[alt="Illustrator"] {
  transform: scale(1.44);
  mix-blend-mode: multiply;
}

/* InDesign: 1.92 × 1.3 = 2.496 */
.skill-logo-icon img[alt="InDesign"] {
  transform: scale(2.496);
}

/* Kie API: 1.0 × 1.5 = 1.5 */
.skill-logo-icon img[alt="Kie API"] {
  transform: scale(1.5);
}

/* Photoshop: 1.725 × 1.05 = 1.81125 */
.skill-logo-icon img[alt="Photoshop"] {
  transform: scale(1.81125);
}

/* Procreate: 1.25 × 1.15 = 1.4375 */
.skill-logo-icon img[alt="Procreate"] {
  transform: scale(1.4375);
}

.skill-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #D946A8;               /* vivid magenta matching the reference */
  line-height: 1.3;
}

@media (max-width: 700px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (max-width: 460px) {
  .skills-grid { grid-template-columns: 1fr; }
}

/* 50px gap specifically under the "Technical Skills" title */
#skills .about-section-title {
  margin-bottom: 50px;
}


/* 50px gap specifically under the "Brief Experience" title */
#experience .about-section-title {
  margin-bottom: 75px;
}

/* 50px gap specifically under the "My Story" title */
#story .about-section-title {
  margin-bottom: 50px;
}

/* ════════════════════════════════════════
   7. EXPERIENCE TABLE
════════════════════════════════════════ */
.experience-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.4vw, 15px);
  font-style: normal;
  color: #D946A8;                       /* magenta — matches reference */
  margin: -24px 0 48px;
  text-align: center;
  letter-spacing: 0.01em;
}

.experience-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exp-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* company-left │ pill-center │ date-right */
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(10, 5, 18, 0.10);
  background: transparent !important;
}

.exp-row:first-child { border-top: 1px solid rgba(10, 5, 18, 0.10); }

.exp-company {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  color: #111111;
  letter-spacing: 0.02em;
  text-align: left;
}

.exp-role-pill {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #111111;                       /* dark text on transparent pill */
  background: transparent;
  border: 1.5px solid rgba(10, 5, 18, 0.45);
  border-radius: 100px;
  padding: 7px 18px;
  white-space: nowrap;
  justify-self: center;
}

.exp-date {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 400;
  color: #111111;
  white-space: nowrap;
  text-align: right;
  justify-self: end;
}


/* ════════════════════════════════════════
   8. Reveal animations
════════════════════════════════════════ */
.reveal-item,
.reveal-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-item.is-visible,
.reveal-card.is-visible {
  opacity: 1;
  transform: none;
}
.delay-1 { transition-delay: 0.14s; }
.delay-2 { transition-delay: 0.28s; }


/* ════════════════════════════════════════
   9. Nav active state
════════════════════════════════════════ */
.nav-link--active {
  font-weight: 700 !important;
  opacity: 1 !important;
}


/* ════════════════════════════════════════
   10. Responsive
════════════════════════════════════════ */
@media (max-width: 860px) {
  .story-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .mosaic-a, .mosaic-b, .mosaic-c,
  .mosaic-d, .mosaic-e, .mosaic-f,
  .mosaic-g, .mosaic-h {
    grid-column: auto;
    grid-row: auto;
  }
  .exp-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .story-mosaic { grid-template-columns: 1fr; }
  .skills-grid  { grid-template-columns: repeat(3, 1fr); }
  .about-hero   { padding-top: calc(var(--nav-height, 72px) + 48px); }
}

/* ── 11. Footer (inherits from style.css + sky.css) ── */