/* ==========================================================
   GURACHI.COM — FIELD NOTES / RELATIONAL MOTIFS
   Restores the Phase Four developed-note motif system.
   Applies only to .note-motif / .nm-* components.
   ========================================================== */

.note-motif-wrap{
  margin:0;
  --nm-ease:cubic-bezier(.22,.61,.36,1);
}

.note-motif{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1;
  border:1px solid var(--stone-2);
  padding:0;
  background:var(--paper-2);
  color:var(--relational);
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  appearance:none;
}
.note-motif:focus-visible{
  outline:1px solid var(--vermilion);
  outline-offset:4px;
}
.note-motif svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.nm-orbit{
  fill:none;
  stroke:var(--relational);
  stroke-width:.7;
  stroke-dasharray:2 4;
  opacity:.62;
}
.nm-centre-field{
  fill:var(--vermilion);
  opacity:.025;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .9s ease,transform .9s var(--nm-ease);
}
.nm-centre-ring{
  fill:none;
  stroke:var(--vermilion);
  stroke-width:.8;
  opacity:.15;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .8s ease,transform .8s var(--nm-ease);
}
.nm-centre{
  fill:var(--vermilion);
  opacity:.52;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .7s ease,transform .8s var(--nm-ease);
}
.nm-person{
  fill:var(--relational);
  opacity:.72;
  transform-box:fill-box;
  transform-origin:center;
  transition:fill .5s ease,opacity .5s ease,transform 1.4s var(--nm-ease);
}
.nm-body{
  fill:none;
  stroke:var(--relational);
  stroke-width:1;
  stroke-linecap:round;
  opacity:.58;
  transition:stroke .5s ease,opacity .5s ease;
}
.nm-left-group,.nm-right-group{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform 1.45s var(--nm-ease);
}
.nm-path{
  fill:none;
  stroke:var(--vermilion);
  stroke-width:1.05;
  stroke-linecap:round;
  stroke-dasharray:1.45 6.55;
  opacity:.08;
  transition:opacity .65s ease;
}
.nm-path-return{
  opacity:0;
  pointer-events:none;
}
.nm-dot{
  fill:var(--vermilion);
  opacity:0;
  transition:opacity .35s ease;
}

.note-motif-reading{
  min-height:100px;
  padding:22px 6px 4px;
  text-align:center;
}
.note-motif-label{margin-bottom:11px}
.note-motif-text{
  max-width:390px;
  margin:0 auto;
  color:var(--soft);
  font-size:15px;
  line-height:1.32;
  font-style:italic;
}

/* ---------- PRELUDE / ACKNOWLEDGEMENT ---------- */
.note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-left-group{
  animation:nmHesitantApproach 2.2s var(--nm-ease) both;
}
.note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-right-group{
  animation:nmOtherNotice 2.2s .82s var(--nm-ease) both;
}
.note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-dot:nth-of-type(1){animation:nmDotNotice .55s .72s ease both}
.note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-dot:nth-of-type(2){animation:nmDotNotice .55s .9s ease both}
.note-motif[data-state="pre"] .nm-centre{
  animation:nmCentreNotice .78s 1.18s ease both;
}
.note-motif[data-state="pre"] .nm-centre-field{opacity:.05}
.note-motif[data-state="pre"] .nm-path:not(.nm-path-return){opacity:.22}

.note-motif[data-state="pre"][data-motif="composite-memory"] .nm-node-1{transform:translateY(7px)}
.note-motif[data-state="pre"][data-motif="composite-memory"] .nm-node-2{transform:translateX(-7px)}
.note-motif[data-state="pre"][data-motif="composite-memory"] .nm-node-3{transform:translateY(-7px)}
.note-motif[data-state="pre"][data-motif="composite-memory"] .nm-node-4{transform:translateX(7px)}

/* ---------- ATTENDING / PROXIMITY ---------- */
.note-motif[data-state="attending"] .nm-centre-field{opacity:.065}
.note-motif[data-state="attending"] .nm-centre-ring{opacity:.34;transform:scale(1.035)}
.note-motif[data-state="attending"] .nm-centre{opacity:.8;transform:scale(1.08)}
.note-motif[data-state="attending"] .nm-path:not(.nm-path-return){opacity:.30}
.note-motif[data-state="attending"] .nm-dot{opacity:.48}

.note-motif[data-state="attending"][data-motif="conditional-trust"] .nm-left-group{transform:translateX(12px)}
.note-motif[data-state="attending"][data-motif="conditional-trust"] .nm-right-group{transform:translateX(-5px)}
.note-motif[data-state="attending"][data-motif="conditional-trust"] .nm-left-group .nm-person,
.note-motif[data-state="attending"][data-motif="conditional-trust"] .nm-left-group .nm-body{
  fill:var(--vermilion);stroke:var(--vermilion);opacity:.8;
}
.note-motif[data-state="attending"][data-motif="composite-memory"] .nm-node-1{transform:translateY(10px)}
.note-motif[data-state="attending"][data-motif="composite-memory"] .nm-node-2{transform:translateX(-10px)}
.note-motif[data-state="attending"][data-motif="composite-memory"] .nm-node-3{transform:translateY(-10px)}
.note-motif[data-state="attending"][data-motif="composite-memory"] .nm-node-4{transform:translateX(10px)}

/* ---------- PARTICIPATION ---------- */
.note-motif[data-state="participating"] .nm-person,
.note-motif[data-state="participating"] .nm-body{
  fill:var(--vermilion);stroke:var(--vermilion);opacity:.9;
}
.note-motif[data-state="participating"] .nm-path:not(.nm-path-return){
  opacity:.68;
  animation:nmPathInward 1.35s linear infinite;
}
.note-motif[data-state="participating"] .nm-centre-field{opacity:.13;transform:scale(1.04)}
.note-motif[data-state="participating"] .nm-centre-ring{opacity:.55;transform:scale(1.09)}
.note-motif[data-state="participating"] .nm-centre{opacity:1;transform:scale(1.28)}
.note-motif[data-state="participating"] .nm-dot{animation:nmDotsIn .3s ease forwards}
.note-motif[data-state="participating"] .nm-dot:nth-of-type(1){animation-delay:.12s}
.note-motif[data-state="participating"] .nm-dot:nth-of-type(2){animation-delay:.32s}
.note-motif[data-state="participating"] .nm-dot:nth-of-type(3){animation-delay:.7s}
.note-motif[data-state="participating"] .nm-dot:nth-of-type(4){animation-delay:.9s}

.note-motif[data-state="participating"][data-motif="conditional-trust"] .nm-left-group{transform:translateX(23px)}
.note-motif[data-state="participating"][data-motif="conditional-trust"] .nm-right-group{transform:translateX(-17px)}
.note-motif[data-state="participating"][data-motif="composite-memory"] .nm-node-1{transform:translateY(18px)}
.note-motif[data-state="participating"][data-motif="composite-memory"] .nm-node-2{transform:translateX(-18px)}
.note-motif[data-state="participating"][data-motif="composite-memory"] .nm-node-3{transform:translateY(-18px)}
.note-motif[data-state="participating"][data-motif="composite-memory"] .nm-node-4{transform:translateX(18px)}

/* ---------- RESOLUTION / MUTUAL RECALIBRATION ---------- */
.note-motif[data-state="resolved"] .nm-person,
.note-motif[data-state="resolved"] .nm-body{
  fill:var(--vermilion);stroke:var(--vermilion);opacity:.78;
}
.note-motif[data-state="resolved"] .nm-centre-field{opacity:.09;transform:scale(1.02)}
.note-motif[data-state="resolved"] .nm-centre-ring{opacity:.39;transform:scale(1.04)}
.note-motif[data-state="resolved"] .nm-centre{opacity:.96;transform:scale(1.16)}
.note-motif[data-state="resolved"] .nm-dot{opacity:.65}
.note-motif[data-state="resolved"] .nm-path:not(.nm-path-return){
  opacity:.46;
  animation:nmMutualForward 3.2s linear infinite;
}
.note-motif[data-state="resolved"] .nm-path-return{
  opacity:.28;
  animation:nmMutualReturn 3.2s linear infinite;
  animation-delay:-1.6s;
}
.note-motif[data-state="resolved"][data-motif="conditional-trust"] .nm-left-group{transform:translateX(20px)}
.note-motif[data-state="resolved"][data-motif="conditional-trust"] .nm-right-group{transform:translateX(-14px)}
.note-motif[data-state="resolved"][data-motif="composite-memory"] .nm-node-1{transform:translateY(15px)}
.note-motif[data-state="resolved"][data-motif="composite-memory"] .nm-node-2{transform:translateX(-15px)}
.note-motif[data-state="resolved"][data-motif="composite-memory"] .nm-node-3{transform:translateY(-15px)}
.note-motif[data-state="resolved"][data-motif="composite-memory"] .nm-node-4{transform:translateX(15px)}

@keyframes nmHesitantApproach{
  0%{transform:translateX(0)}
  34%{transform:translateX(9px)}
  58%{transform:translateX(6px)}
  100%{transform:translateX(12px)}
}
@keyframes nmOtherNotice{
  0%,35%{transform:translateX(0)}
  100%{transform:translateX(-4px)}
}
@keyframes nmDotNotice{
  0%{opacity:0}
  48%{opacity:.88}
  100%{opacity:.42}
}
@keyframes nmCentreNotice{
  0%{opacity:.52;transform:scale(1)}
  52%{opacity:.96;transform:scale(1.18)}
  100%{opacity:.7;transform:scale(1.04)}
}
@keyframes nmPathInward{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-12}
}
@keyframes nmDotsIn{
  from{opacity:0}
  to{opacity:.86}
}
@keyframes nmMutualForward{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-16}
}
@keyframes nmMutualReturn{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:16}
}

@media(max-width:900px){
  .note-motif{width:min(100%,460px)}
  .note-motif-reading{width:min(100%,460px)}
}
@media(max-width:560px){
  .note-motif-reading{min-height:112px;padding-inline:10px}
  .note-motif-text{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .note-motif *{animation:none!important;transition-duration:.01ms!important}
  .note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-left-group{transform:translateX(12px)}
  .note-motif[data-state="pre"][data-motif="conditional-trust"] .nm-right-group{transform:translateX(-4px)}
}