/* ================================================================
   sections/about.css
   ─────────────────────────────────────────────────────────────────
   Split-panel About section.
   Layout: two equal columns (1fr 1fr) at full viewport height.
     LEFT  — full-bleed image/GIF panel with overlay + identity strip
     RIGHT — bio text, education timeline, profile photo (circular)
   ================================================================ */


/* ── Section wrapper ─────────────────────────────────────────────
   overflow: hidden clips any decorative bleed from child panels.
   ─────────────────────────────────────────────────────────────── */
.about {
  position: relative;
  overflow: hidden;
}


/* ── Split grid ──────────────────────────────────────────────────
   Two equal columns at full viewport height on desktop.
   Collapses to single column at 1024px (see responsive.css).
   ─────────────────────────────────────────────────────────────── */
.am-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            100vh;
  overflow:              hidden;
}


/* ════════════════════════════════════════════════════════════════
   LEFT PANEL — image / GIF with overlay and identity strip
   ════════════════════════════════════════════════════════════════ */

.am-left-panel {
  position:   relative;
  overflow:   hidden;
  background: #05090f; /* fallback when no image is loaded */
  display:    flex;
  align-items: flex-end; /* identity strip sits at the bottom */
}

/* Dark gradient overlay on top of the image
   — strong at bottom (0.75) to keep white text legible over any photo */
.am-left-panel__overlay {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  background:     linear-gradient(
    to bottom,
    rgba(5,  9, 15, 0.30) 0%,
    rgba(5,  9, 15, 0.10) 40%,
    rgba(5,  9, 15, 0.75) 100%
  );
}

/* Faint vertical rules over the image */
.am-left-panel__ruled {
  position:        absolute;
  inset:           0;
  z-index:         2;
  pointer-events:  none;
  display:         flex;
  justify-content: space-evenly;
}

.am-left-panel__ruled span {
  width:      1px;
  height:     100%;
  background: rgba(255, 255, 255, 0.04);
}

/* ── GIF / Image ──
   Replace the placeholder div in index.html with:
     <img src="images/about/your-animation.gif"
          alt="Chelsea Resada"
          class="am-left-panel__gif" />
   ─────────────────────────────────────────────────────────────── */
.am-left-panel__gif {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
}

/* ── Placeholder (shown when no image) ───────────────────────────
   Dashed gold border with label text centred in the panel.
   Remove from index.html once a real image is added.
   ─────────────────────────────────────────────────────────────── */
.am-left-panel__placeholder {
  position:        absolute;
  inset:           0;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  border:          1px dashed rgba(232, 197, 71, 0.25);
  margin:          24px;
}

.am-left-panel__placeholder-icon {
  font-size: 2.5rem;
  color:     rgba(232, 197, 71, 0.4);
}

.am-left-panel__placeholder-text {
  font-family:    var(--font-display);
  font-size:      0.7rem;
  letter-spacing: 0.2em;
  color:          rgba(232, 197, 71, 0.7);
  text-transform: uppercase;
}

.am-left-panel__placeholder-hint {
  font-family: var(--font-body);
  font-size:   0.75rem;
  color:       rgba(255, 255, 255, 0.3);
  text-align:  center;
  max-width:   200px;
}

/* ── Identity strip ──────────────────────────────────────────────
   Fixed to the bottom of the left panel (z-index 3 = above overlay).
   Contains the eyebrow label, name, and status badge.
   ─────────────────────────────────────────────────────────────── */
.am-left-panel__identity {
  position:  relative;
  z-index:   3;
  padding:   32px 36px;
  width:     100%;
}

.am-left-panel__eyebrow {
  font-family:    var(--font-display);
  font-size:      0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(232, 197, 71, 0.80);
  display:        block;
  margin-bottom:  10px;
}

.am-left-panel__name {
  font-family:   var(--font-serif);
  font-size:     clamp(2rem, 4vw, 3.2rem);
  font-weight:   300;
  line-height:   1.05;
  color:         var(--text-primary);
  margin-bottom: 16px;
}

.am-left-panel__name em {
  font-style: italic;
  color:      var(--accent-secondary);
}

/* "IT Student & Developer" status badge */
.am-left-panel__badge {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     rgba(13, 27, 62, 0.82);
  border:         1px solid rgba(176, 196, 222, 0.3);
  padding:        7px 14px;
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-secondary);
}

/* Animated teal pulse dot — signals "active/available" */
.am-left-panel__badge-dot {
  width:      7px;
  height:     7px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 8px var(--color-teal);
  animation:  badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Corner bracket ornaments ─────────────────────────────────── */
.am-left-panel__corner {
  position:       absolute;
  width:          20px;
  height:         20px;
  pointer-events: none;
  z-index:        4;
}

.am-left-panel__corner--tl { top: 20px;    left:  20px;  border-top:    1.5px solid rgba(232, 197, 71, 0.5); border-left:  1.5px solid rgba(232, 197, 71, 0.5); }
.am-left-panel__corner--tr { top: 20px;    right: 20px;  border-top:    1.5px solid rgba(232, 197, 71, 0.5); border-right: 1.5px solid rgba(232, 197, 71, 0.5); }
.am-left-panel__corner--bl { bottom: 20px; left:  20px;  border-bottom: 1.5px solid rgba(232, 197, 71, 0.5); border-left:  1.5px solid rgba(232, 197, 71, 0.5); }
.am-left-panel__corner--br { bottom: 20px; right: 20px;  border-bottom: 1.5px solid rgba(232, 197, 71, 0.5); border-right: 1.5px solid rgba(232, 197, 71, 0.5); }


/* ════════════════════════════════════════════════════════════════
   RIGHT PANEL — bio, profile photo, education timeline
   ════════════════════════════════════════════════════════════════ */

.am-right-panel {
  position:   relative;
  overflow:   hidden;
  background: var(--bg-section-alt);
  padding:    72px 56px;
}

/* Grain texture (same technique as hero grain) */
.am-right-panel__grain {
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  opacity:          0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:  180px 180px;
}

/* Subtle atmospheric glow orbs in the right panel */
.am-right-panel__atmo {
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
  filter:         blur(70px);
  z-index:        0;
}

.am-right-panel__atmo--rose {
  top:        -10%;
  right:      -10%;
  width:      45%;
  height:     45%;
  background: radial-gradient(circle, rgba(107, 143, 194, 0.12) 0%, transparent 70%);
}

.am-right-panel__atmo--cool {
  bottom:     -10%;
  left:       -5%;
  width:      35%;
  height:     35%;
  background: radial-gradient(circle, rgba(232, 197, 71, 0.06) 0%, transparent 70%);
}

/* Faint vertical ruled lines */
.am-right-panel__ruled {
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  display:         flex;
  justify-content: space-evenly;
  z-index:         0;
}

.am-right-panel__ruled span {
  width:      1px;
  height:     100%;
  background: rgba(176, 196, 222, 0.04);
}

/* Content sits above decorative layers */
.am-right-panel__inner {
  position: relative;
  z-index:  2;
}

/* ── "Who I Am" eyebrow with flanking gradient rules ── */
.am-right-eyebrow {
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-bottom: 28px;
}

.am-right-eyebrow__line {
  display:    block;
  flex:       1;
  max-width:  50px;
  height:     1px;
  background: linear-gradient(90deg, var(--accent-primary), transparent);
}

.am-right-eyebrow__text {
  font-family:    var(--font-display);
  font-size:      0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* ── Heading row ─────────────────────────────────────────────────
   Flex row: heading text (flex: 1) + profile photo (fixed size).
   flex-wrap: wrap allows the photo to drop below on narrow panels.
   ─────────────────────────────────────────────────────────────── */
.am-right-heading {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   flex-start;
  gap:           20px;
  margin-bottom: 20px;
}

.am-right-heading__main {
  font-family: var(--font-serif);
  font-size:   clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color:       var(--text-primary);
  line-height: 1.15;
  flex:        1;
  min-width:   180px;
}

/* Gold gradient text on <em> within the heading */
.am-right-heading__main em {
  font-style:              italic;
  background:              linear-gradient(120deg, rgba(232, 197, 71, 0.95), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* ── Profile Photo — circular with animated gold ring halo ───────
   Structure:
     .am-right-heading__pfp-wrap   ← ::before = spinning conic ring
                                   ← ::after  = gap between ring and photo
       img.am-right-heading__pfp   ← the actual circular photo

   HOW TO ADD YOUR PHOTO
   ─────────────────────
   In index.html, replace the placeholder <div> inside
   .am-right-heading__pfp-wrap with:

     <img src="images/about/profile.jpg"
          alt="Chelsea Resada profile photo"
          class="am-right-heading__pfp" />
   ─────────────────────────────────────────────────────────────── */
.am-right-heading__pfp-wrap {
  position:    relative;
  flex-shrink: 0;
  width:       160px;
  height:      160px;
}

/* Conic gradient ring that rotates slowly behind the photo */
.am-right-heading__pfp-wrap::before {
  content:       '';
  position:      absolute;
  inset:         -4px; /* slightly larger than the photo */
  border-radius: 50%;
  background:    conic-gradient(
    rgba(232, 197,  71, 0.8)   0deg,
    rgba(107, 143, 194, 0.4) 120deg,
    rgba(232, 197,  71, 0.6) 240deg,
    rgba(232, 197,  71, 0.8) 360deg
  );
  animation: pfpRingRotate 8s linear infinite;
  z-index:   0;
}

/* Gap layer — matches panel background, creates separation between ring and photo */
.am-right-heading__pfp-wrap::after {
  content:       '';
  position:      absolute;
  inset:         -1px;
  border-radius: 50%;
  background:    var(--bg-section-alt);
  z-index:       1;
}

@keyframes pfpRingRotate {
  to { transform: rotate(360deg); }
}

/* Actual photo — sits above the ring (z-index: 2) */
.am-right-heading__pfp {
  width:           160px;
  height:          160px;
  border-radius:   50%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
  position:        relative;
  z-index:         2;
  border:          2.5px solid rgba(232, 197, 71, 0.5);
  box-shadow:      0 6px 32px rgba(0, 0, 0, 0.45);
}

/* Placeholder shown when no photo is provided */
.am-right-heading__pfp-placeholder {
  width:           160px;
  height:          160px;
  border-radius:   50%;
  background:      linear-gradient(135deg, rgba(17, 29, 58, 0.9), rgba(30, 50, 90, 0.9));
  border:          2px dashed rgba(232, 197, 71, 0.3);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  position:        relative;
  z-index:         2;
}

.am-right-heading__pfp-placeholder span:first-child {
  font-size: 2rem;
  color:     rgba(232, 197, 71, 0.4);
}

.am-right-heading__pfp-placeholder span:last-child {
  font-family:    var(--font-display);
  font-size:      0.5rem;
  letter-spacing: 0.12em;
  color:          rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  text-align:     center;
}

/* Full-width gold gradient rule below the heading row */
.am-right-heading__rule {
  width:      100%;
  height:     1px;
  flex-basis: 100%; /* forces it onto its own row in the flex wrap */
  background: linear-gradient(90deg, rgba(232, 197, 71, 0.6), transparent);
}

/* ── Bio paragraphs ── */
.am-right-bio {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  32px;
}

.am-right-bio__lead {
  font-family: var(--font-body);
  font-size:   0.95rem;
  line-height: 1.7;
  color:       rgba(232, 238, 248, 0.85);
}

.am-right-bio__body {
  font-family: var(--font-body);
  font-size:   0.88rem;
  line-height: 1.7;
  color:       rgba(232, 238, 248, 0.55);
}

/* ── Education timeline ───────────────────────────────────────── */
.am-right-edu {
  margin-bottom: 32px;
}

.am-right-edu__label {
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(232, 197, 71, 0.75);
  display:        block;
  margin-bottom:  18px;
}

/* Each education entry is a flex row: dot | beam | text */
.am-right-edu__item {
  display:        flex;
  gap:            18px;
  padding-bottom: 24px;
  position:       relative;
}

/* Vertical beam connecting dots — only on non-last items */
.am-right-edu__item:not(:last-child) .am-right-edu__beam {
  position:   absolute;
  left:       6px; /* centres on the 13px dot */
  top:        14px;
  bottom:     0;
  width:      1px;
  background: linear-gradient(to bottom, rgba(176, 196, 222, 0.3), transparent);
}

/* Timeline dot — small circle with inner filled dot */
.am-right-edu__dot {
  flex-shrink:   0;
  margin-top:    4px;
  width:         13px;
  height:        13px;
  border-radius: 50%;
  border:        1px solid var(--accent-secondary);
  display:       grid;
  place-items:   center;
  position:      relative;
  z-index:       1; /* sits above the beam line */
}

.am-right-edu__dot span {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--accent-primary);
}

/* Text column for each education entry */
.am-right-edu__text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.am-right-edu__year {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--accent-primary);
}

.am-right-edu__degree {
  font-family:  var(--font-serif);
  font-size:    1rem;
  color:        var(--text-primary);
  font-weight:  400;
}

.am-right-edu__school {
  font-size: 0.84rem;
  color:     var(--text-secondary);
}

.am-right-edu__honors {
  font-size:  0.78rem;
  color:      var(--text-muted);
  font-style: italic;
}