/* =============================================================
   ABOUT  ·  scroll-scrub morph sequence
   Initial → Introduction → Skills → Expertise  (one continuous scrub)
   Driven by window.AboutMorph.set(0..1) from main.js (apTrigger).
   ============================================================= */

/* The wrapper becomes a fixed full-viewport stage while About is the
   active scroll state. Children are absolutely positioned layers that
   crossfade; the 3D model slides side-to-side continuously. */
.about-yellow-content {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
}

.next-section.about-section { position: relative; overflow: hidden; }
/* The 1920x1080 stage is scale-to-fit at EVERY size, so small screens show the
   exact same composition as desktop, just smaller.
   --am-scale is set from JS (CSS can't divide a length into a unitless number). */
.about-yellow-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: var(--am-stage-h, 1080px);
  transform: translate(-50%, -50%) scale(var(--am-scale, 1));
  transform-origin: center center;
  container-type: size;
  container-name: about-stage;
}

/* ---- inner frame so every layer shares the same safe margins ---- */
.am-frame {
  --pad-x: clamp(30px, 5cqw, 90px);
  --pad-y: clamp(28px, 5cqh, 64px);
}
.am-dirty-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  mix-blend-mode: color-burn;
  opacity: calc(0.3 * var(--grain-mult, 1));
  pointer-events: none;
}

/* ===========================================================
   3D MODEL  ·  black silhouette that slides + gently sways
   =========================================================== */
.am-model-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translate3d(var(--mx, 0px), 0, 0);
  pointer-events: none;
}
.am-model { }

.about-section.anim-in .am-model {
  animation: amModelPop 0.78s cubic-bezier(.4,.05,.35,1) both;
}
@keyframes amModelPop {
  0%   { opacity: 0; transform: scale(.5); }
  55%  { opacity: 1; transform: scale(1.08); }
  78%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .about-section.anim-in .am-model { animation: none; } }

.am-model {
  width: min(54cqw, 720px);
  height: 94%;
  margin-bottom: -1.5%;
  display: block;
  background: transparent;
  pointer-events: none;
  opacity: 1;
}

/* model-viewer internals — kill all default chrome */
.am-model::part(default-progress-bar) { display: none; }

/* ===========================================================
   LAYERS  ·  crossfade keyframe layouts
   =========================================================== */
.am-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
}
.am-layer > * { position: absolute; }

/* shared text styling */
.am-para {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 1.15cqw, 18px);
  line-height: 1.65;
  color: var(--ink);
  width: min(42ch, 38cqw);
}
.am-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4cqh, 18px);
}
.am-list li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 1.05cqw, 17px);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}

/* per-item stagger reveal (driven by --r 0..1 from JS, applied instantly).
   Scales up from 60% as it fades so items pop in rather than just fade. */
[data-stagger] {
  opacity: var(--r, 0);
  transform: translateY(calc((1 - var(--r, 0)) * 10px)) scale(calc(0.6 + 0.4 * var(--r, 0)));
}

/* ---- section titles (groovy display face) ---- */
.am-title {
  margin: 0;
  font-family: "MebiyesDemo", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 6.4cqw, 104px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ===========================================================
   ICON TILES  ·  dark squares with white motif
   =========================================================== */
.am-icon {
  width: clamp(78px, 8.5cqw, 132px);
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 0;
  background: #1c1a18;
  background-size: cover;
  background-position: center;
  flex: none;
  position: relative;
  overflow: hidden;
}
.am-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* active (in-section) state gets the cyan keyline from the screenshots */
.am-icon.is-active {
  outline: 2.5px solid var(--accent-soft);
  outline-offset: 6px;
}

/* ===========================================================
   CONNECTOR LINES (initial state)
   =========================================================== */
.am-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.am-line {
  fill: none;
  stroke: #231f20;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.am-line-dot { fill: #231f20; }

/* ===========================================================
   LAYER 0 · INITIAL   (3 icons + lines, model centered)
   =========================================================== */
.am-about-title { top: 6%; left: var(--pad-x); position: relative; color: var(--ink); }
.am-about-title::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--accent);
  -webkit-text-stroke: clamp(8px, 0.9vw, 13px) var(--accent);
          text-stroke: clamp(8px, 0.9vw, 13px) var(--accent);
  -webkit-text-fill-color: var(--accent);
}
.am-nav-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.am-nav-group--daisy  { top: 26%;  left: var(--pad-x); }
.am-nav-group--head   { top: 52%;  right: var(--pad-x); flex-direction: row-reverse; }
.am-nav-group--branch { top: 78%;  left: var(--pad-x); }
.am-nav-group .am-icon {
  border: none;
  box-sizing: border-box;
  background: url("../assets/img/icon-frame.png") center/100% 100% no-repeat;
  padding: 0;
  position: relative;
}
.am-nav-group .am-icon img {
  position: relative;
  background: none;
  padding: 9% 11% 17% 9%;
  box-sizing: border-box;
}
.am-nav-group--daisy .am-icon,
.am-nav-group--branch .am-icon { border-right: none; }
.am-nav-group--head .am-icon { border-left: none; }
.am-nav-label {
  font-family: "MebiyesDemo", Arial, sans-serif;
  font-size: clamp(28px, 3.2cqw, 46px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  border: 1.5px solid #1c1a18;
  height: clamp(78px, 8.5cqw, 132px);
  display: flex;
  align-items: center;
  padding: 0 0.8em;
  line-height: 1;
  box-sizing: border-box;
}

/* clickable shortcut tiles → jump straight to a sub-section */
.am-nav-icon {
  padding: 0;
  border: none;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.am-nav-icon:hover,
.am-nav-icon:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.am-nav-icon:active { transform: scale(0.98); }

/* the whole group (tile + label) is one hit target and highlights together */
.am-nav-group { cursor: pointer; }
.am-nav-label { transition: color .28s cubic-bezier(.22,1,.36,1), background-color .28s cubic-bezier(.22,1,.36,1); }
.am-nav-group:hover .am-nav-icon,
.am-nav-group:focus-within .am-nav-icon,
.am-nav-group:hover .am-nav-label,
.am-nav-group:focus-within .am-nav-label {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===========================================================
   LAYER 1 · INTRODUCTION   (left content, model right)
   =========================================================== */
.am-intro-head { display:none; }
.am-card {
  position: absolute;
  border: 1.5px solid #1c1a18;
  box-sizing: border-box;
  background: var(--yellow);
  width: min(50cqw, 640px);
  min-height: auto;
  display: flex;
  flex-direction: column;
}
.am-card--intro, .am-card--expertise { top: var(--pad-y); left: var(--pad-x); }
.am-card--skills { top: 30%; right: var(--pad-x); width: min(34cqw, 460px); min-height: auto; }
.am-card-head {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1.5px solid #1c1a18;
}
.am-card-head .am-title {
  font-size: clamp(30px, 3.4cqw, 52px);
  padding: 0 0.6em;
  white-space: nowrap;
}
.am-card-head .am-icon {
  width: clamp(78px, 8.5cqh, 132px);
  height: clamp(78px, 8.5cqh, 132px);
  aspect-ratio: 1/1;
  background: url("../assets/img/icon-frame.png") center/100% 100% no-repeat;
  border: none !important;
  box-sizing: border-box;
  flex: none;
}
.am-card-head .am-icon img { width:100%; height:100%; background: none; object-fit: contain; display:block; padding: 9% 11% 17% 9%; box-sizing: border-box; }
.am-card-head .am-icon.is-active { outline: none; }
.am-card-body { padding: clamp(18px, 2.2cqw, 34px); position: relative; flex: 1; display: flex; flex-direction: column; }
.am-card-swatch {
  display: block;
  width: clamp(160px, 16cqw, 260px);
  height: clamp(50px, 5cqw, 80px);
  border: 1.5px solid #1c1a18;
  margin-top: clamp(18px, 2cqw, 30px);
}
.am-card-swatch--exp { display: flex; align-items: stretch; overflow: hidden; box-sizing: border-box; }
.am-card-swatch--exp img { width: 50%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.am-card-swatch--exp img:first-child { object-position: 62% center; }
.am-card-swatch--exp img:last-child  { object-position: 38% center; }
.am-card-footrow { display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-top: auto; }
.am-intro-para { position: static; width: auto; margin-bottom: clamp(14px, 2cqh, 24px); }
.am-intro-list { position: static; }
.am-skills-para { position: static; width: auto; text-align: left; margin-bottom: clamp(14px, 2cqh, 24px); }
.am-tools { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1cqw, 18px); margin-top: auto; }
.am-exp-para { position: static; width: auto; margin-bottom: clamp(14px, 2cqh, 24px); }
.am-exp-cats { position: static; display: flex; flex-direction: column; gap: clamp(18px, 2.4cqh, 30px); margin-top: auto; }

/* ===========================================================
   LAYER 2 · SKILLS   (right content, model left)
   =========================================================== */

.am-tool {
  width: clamp(58px, 5cqw, 82px);
  aspect-ratio: 1 / 1;
  border-radius: 22%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.am-tool svg { width: 100%; height: 100%; display: block; }

/* ===========================================================
   LAYER 3 · EXPERTISE   (left content, model right)
   =========================================================== */


/* category rows: label — rail+knob — sub-skills.  Click a label to activate. */
.am-cat-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2cqw, 18px);
}
.am-cat-label {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 1.05cqw, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.am-cat-row:not(.am-cat-row--active) .am-cat-label { font-weight: 400; opacity: 0.5; }
.am-cat-row:not(.am-cat-row--active) .am-cat-label:hover { opacity: 1; }
.am-cat-row--active .am-cat-label { font-weight: 700; opacity: 1; }

/* only the active row reveals its rail + details */
.am-cat-row:not(.am-cat-row--active) .am-rail,
.am-cat-row:not(.am-cat-row--active) .am-sublist { display: none; }

.am-rail {
  position: relative;
  width: clamp(150px, 16cqw, 240px);
  height: 1em;
  flex: none;
}
.am-rail-line {
  position: absolute;
  left: 0; right: 0;
  top: 0.5em;
  height: 1.5px;
  background: #231f20;
}
.am-rail-knob {
  position: absolute;
  left: 48%;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #231f20;
  transform: translate(-50%, -50%);
}
.am-sublist {
  position: static;
  margin-top: -0.25em;
}

/* click-to-activate flourish: the line draws out, the knob pops, details rise in */
.am-cat-row.is-switching .am-rail-line {
  transform-origin: left center;
  animation: amLineGrow 0.5s cubic-bezier(.76, 0, .24, 1) both;
}
.am-cat-row.is-switching .am-rail-knob {
  animation: amKnobIn 0.4s cubic-bezier(.2, .7, .2, 1) 0.18s both;
}
.am-cat-row.is-switching .am-sublist li {
  animation: amSubIn 0.42s cubic-bezier(.2, .7, .2, 1) both;
}
.am-cat-row.is-switching .am-sublist li:nth-child(1) { animation-delay: 0.20s; }
.am-cat-row.is-switching .am-sublist li:nth-child(2) { animation-delay: 0.26s; }
.am-cat-row.is-switching .am-sublist li:nth-child(3) { animation-delay: 0.32s; }
.am-cat-row.is-switching .am-sublist li:nth-child(4) { animation-delay: 0.38s; }
.am-cat-row.is-switching .am-sublist li:nth-child(5) { animation-delay: 0.44s; }

@keyframes amLineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes amKnobIn {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(.94); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes amSubIn {
  0%   { opacity: 0; transform: scale(.55); }
  58%  { opacity: 1; transform: scale(1.1); }
  80%  { transform: scale(.96); }
  100% { opacity: 1; transform: none; }
}

/* keep everything legible on short/!16:9 viewports */
/* ===========================================================
   PORTRAIT / MOBILE  ·  the absolute landscape choreography
   collapses on narrow screens, so re-flow each crossfade layer
   into a single centred, scrollable column and push the model
   back to a faint full-bleed backdrop.
   =========================================================== */
/* ===========================================================
   PORTRAIT / NARROW  ·  scaling the whole 1920x1080 stage down
   makes the copy unreadable, so tall screens instead stack:
   text column on top, 3D model anchored along the bottom.
   =========================================================== */
/* ===========================================================
   PORTRAIT  ·  same authored sizing, stacked instead of side-by-side.
   JS grows the virtual stage vertically and adds .am-portrait; the card
   goes to the top of that stage, the 3D model to the bottom.
   =========================================================== */
html.am-portrait .am-card {
  --am-card-zoom: 1.65;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 9% !important;
  /* the authored card is sized for a 1920-wide landscape stage — on portrait
     it reads far too small, so scale the whole card (border + type together).
     The base width is divided by the zoom so the scaled result still fits. */
  transform: translateX(-50%) scale(var(--am-card-zoom));
  transform-origin: top center;
  width: calc(92% / var(--am-card-zoom)) !important;
  height: auto !important;
}
html.am-portrait .am-model-wrap {
  top: auto !important;
  bottom: 0 !important;
  height: 44% !important;
  align-items: flex-end;
  transform: none !important;
}
html.am-portrait .am-model { width: min(72%, 900px); height: 100%; margin-bottom: 0; }
html.am-portrait .am-layer--initial .am-about-title { top: 3%; }
html.am-portrait .am-nav-group--daisy  { top: 20%; }
html.am-portrait .am-nav-group--head   { top: 36%; }
html.am-portrait .am-nav-group--branch { top: 52%; }
html.am-portrait .am-lines { display: none; }

@media (max-aspect-ratio: 9/10) { .am-nothing-x { color: inherit; } }
@media (max-width: 0px) {
  .about-yellow-content {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: 100vh;
    transform: none;
  }

  /* model sits in the lower band, full strength, behind the text */
  .am-model-wrap {
    top: auto;
    bottom: 0;
    height: 42vh;
    align-items: flex-end;
    transform: none;
  }
  .am-model { width: 80vw; height: 100%; margin-bottom: 0; }

  /* each crossfade layer becomes a top-aligned column above the model */
  .am-layer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(14px, 3vw, 22px);
    padding: clamp(88px, 13vh, 130px) clamp(20px, 6vw, 40px) 44vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .am-layer > * {
    position: static !important;
    inset: auto !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .am-title { white-space: normal; font-size: clamp(38px, 11vw, 72px); line-height: .92; }
  .am-para { width: 100% !important; font-size: clamp(15px, 3.9vw, 19px); line-height: 1.55; }
  .am-list { gap: clamp(8px, 2vw, 13px); }
  .am-list li, .am-cat-label { font-size: clamp(13px, 3.4vw, 16px); }

  /* cards reflow into the column */
  .am-card { position: static !important; width: 100% !important; max-width: 620px; margin: 0 auto; }
  .am-card-head .am-title { font-size: clamp(26px, 7.5vw, 44px); padding: 0 .45em; }
  .am-card-head .am-icon { width: clamp(62px, 17vw, 96px); height: clamp(62px, 17vw, 96px); }
  .am-card-body { padding: clamp(16px, 4.5vw, 26px); }
  .am-card-footrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  .am-card-swatch { width: 100%; max-width: 280px; height: clamp(44px, 12vw, 70px); }

  .am-tools { grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2.6vw, 16px); }
  .am-tool { width: 100% !important; }

  /* expertise: the rail can't fit — stack label over its sub-skills */
  .am-exp-cats { gap: clamp(12px, 3vw, 18px); }
  .am-cat-row { flex-direction: column; align-items: flex-start; gap: clamp(5px, 1.5vw, 9px); }
  .am-rail { display: none !important; }
  .am-sublist { margin-top: 0; }

  /* landing layer: three nav tiles centred in a wrapped row, lines dropped */
  .am-layer--initial { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  .am-lines { display: none !important; }
  .am-layer--initial .am-about-title { flex: 0 0 100%; }
  .am-nav-group { position: static !important; flex-direction: column !important; gap: 8px; width: auto !important; }
  .am-nav-group .am-icon, .am-icon { width: clamp(72px, 21vw, 118px) !important; }
  .am-nav-label { font-size: clamp(13px, 3.4vw, 16px); height: auto; padding: .3em .6em; }
}

/* (superseded reflow block, kept disabled) */
@media (max-width: 0px) {
  .am-model-wrap { opacity: 0.12; }
  .am-model { width: 92vw; height: 82%; }

  /* each crossfade layer becomes a stacked column */
  .am-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 3.4vw, 24px);
    padding: clamp(96px, 17vh, 140px) clamp(22px, 7vw, 38px) clamp(44px, 9vh, 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .am-layer > * {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .am-title {
    white-space: normal;
    font-size: clamp(40px, 13vw, 66px);
    line-height: 0.92;
  }
  .am-para {
    width: 100% !important;
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.55;
  }
  .am-list { gap: clamp(8px, 2vw, 13px); }
  .am-list li { font-size: clamp(13px, 3.6vw, 16px); }

  .am-intro-head,
  .am-skills-head {
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 4vw, 22px);
    width: auto !important;
  }
  .am-intro-head .am-icon,
  .am-skills-head .am-icon { width: clamp(64px, 18vw, 92px); }

  /* tools grid sized to the column */
  .am-tools {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 3vw, 16px);
  }
  .am-tool { width: 100% !important; }

  /* expertise: rail can't fit — stack label over sub-skills */
  .am-exp-cats { gap: clamp(12px, 3vw, 18px); }
  .am-cat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(5px, 1.5vw, 9px);
  }
  .am-cat-label { font-size: clamp(14px, 4.2vw, 18px); }
  .am-rail { display: none !important; }

  /* initial layer: centre the three icons in a wrapped row, drop the lines */
  .am-layer--initial {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 7vw, 40px);
  }
  .am-lines { display: none !important; }
  .am-icon { width: clamp(72px, 22vw, 120px) !important; }
  .am-nav-group { position: static !important; flex-direction: column !important; gap: 8px; }
  .am-nav-label { font-size: clamp(13px, 3.6vw, 16px); padding: 0.2em 0.5em; }

  /* cards lose their absolute landscape placement and become the column */
  .am-card {
    position: static !important;
    width: 100% !important;
    max-width: 640px;
    margin: 0 auto;
  }
  .am-card-head { flex-wrap: nowrap; }
  .am-card-head .am-title { font-size: clamp(26px, 8vw, 44px); padding: 0 0.4em; }
  .am-card-head .am-icon { width: clamp(62px, 17vw, 92px); height: clamp(62px, 17vw, 92px); }
  .am-card-body { padding: clamp(16px, 5vw, 26px); }
  .am-card-footrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  .am-card-swatch { width: 100%; max-width: 260px; height: clamp(44px, 13vw, 70px); }
  .am-tool { width: 100% !important; }
  .am-sublist { margin-top: 0; }
}

/* roomier portrait tablets: keep the column but let it breathe */
@media (max-width: 0px) {
  .am-layer { padding: clamp(110px, 14vh, 170px) clamp(40px, 8vw, 90px) clamp(60px, 8vh, 90px); }
  .am-title { font-size: clamp(52px, 9vw, 84px); }
  .am-para { font-size: clamp(17px, 2.2vw, 21px); }
  .am-list li, .am-cat-label { font-size: clamp(15px, 1.9vw, 18px); }
  .am-card { max-width: 780px; }
  .am-card-head .am-title { font-size: clamp(34px, 5.4vw, 56px); }
  .am-card-head .am-icon { width: clamp(86px, 11vw, 120px); height: clamp(86px, 11vw, 120px); }
  .am-icon { width: clamp(92px, 13vw, 140px) !important; }
  .am-nav-label { font-size: clamp(17px, 2.4vw, 24px); }
}