/*
Theme Name: McCowan-VandeLeest Lab
Theme URI: https://bmccowanlab.com
Author: McCowan-VandeLeest Laboratory of Biobehavioral Complexity
Description: A modern, minimal block theme for the McCowan-VandeLeest Laboratory of Biobehavioral Complexity — built around a social-network (sociogram) visual motif to reflect the lab's research into social complexity, communication, and welfare.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mccowan-lab
*/

/* ---------- base polish not expressible in theme.json ---------- */
::selection{ background:var(--wp--preset--color--gold); color:var(--wp--preset--color--paper); }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--wp--preset--color--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* eyebrow / label utility, used via "Additional CSS class" = eyebrow */
.eyebrow{
  font-family: var(--wp--preset--font-family--plex-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--wp--preset--color--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* ---------- signature element: the sociogram (contained frame) ---------- */
.hero-columns{ display:flex !important; flex-wrap:wrap; gap:60px !important; align-items:center; }
.sociogram-frame{
  position:relative;
  flex:0 0 auto;
  width:420px; height:420px;
  border-radius:50%;
  border:1px solid var(--wp--preset--color--line);
  background:rgba(15,32,25,0.02);
  overflow:hidden;
}
.sociogram{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:150%;
}

/* edges: draw in on load, bold by default */
.sociogram .sg-edges line{
  stroke: var(--wp--preset--color--ink);
  stroke-width:2.5;
  opacity:0.5;
  stroke-dasharray:60;
  stroke-dashoffset:60;
  animation: sg-draw 1.8s ease-out forwards;
  transition:opacity 0.4s ease, stroke 0.4s ease, stroke-width 0.4s ease;
}
.sociogram .sg-edges line.flow{
  stroke:var(--wp--preset--color--gold);
  opacity:0.8;
  stroke-width:3;
  stroke-dasharray:6 10;
  animation: sg-draw 1.8s ease-out forwards, sg-flow 2.2s linear infinite 2s;
}

/* nodes: pop in on load, then hubs breathe hard forever */
.sociogram .node{
  fill:var(--wp--preset--color--muted);
  opacity:0;
  transform-origin:center;
  animation: sg-pop 0.6s ease-out forwards;
  animation-delay:0.6s;
  pointer-events:auto;
  cursor:pointer;
  transition:opacity 0.35s ease, fill 0.35s ease;
}
.sociogram .node-hub{
  fill:var(--wp--preset--color--gold);
  opacity:0;
  transform-origin:center;
  animation: sg-pop 0.7s cubic-bezier(.34,1.56,.64,1) forwards, sg-breathe 2.6s ease-in-out infinite;
  animation-delay:0.9s, 2.3s;
  pointer-events:auto;
  cursor:pointer;
  transition:opacity 0.35s ease, fill 0.35s ease;
  filter:drop-shadow(0 0 10px rgba(224,149,42,0.55));
}
.sociogram .node:hover,
.sociogram .node-hub:hover{
  fill:var(--wp--preset--color--accent) !important;
  opacity:1 !important;
}

/* interactive focus state, toggled via a small inline script on hover */
.sociogram.is-hovering .sg-edges line{ opacity:0.08; animation-play-state:paused; }
.sociogram.is-hovering .sg-edges line.sg-active{
  opacity:1;
  stroke:var(--wp--preset--color--accent);
  stroke-width:3.6;
}
.sociogram.is-hovering .node,
.sociogram.is-hovering .node-hub{ opacity:0.15; }
.sociogram.is-hovering .node.sg-focus,
.sociogram.is-hovering .node-hub.sg-focus{ opacity:1; }

@keyframes sg-draw{ to{ stroke-dashoffset:0; } }
@keyframes sg-pop{ from{ opacity:0; transform:scale(0.2);} to{ opacity:0.95; transform:scale(1);} }
@keyframes sg-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.5); } }
@keyframes sg-flow{ to{ stroke-dashoffset:-64; } }

.sociogram-divider{ width:100%; max-width:220px; margin:0 auto; opacity:0.8; }
.sociogram-divider .sg-edges line{ stroke:var(--wp--preset--color--line); stroke-width:1; animation:none; stroke-dasharray:none; }
.sociogram-divider .node{ fill:var(--wp--preset--color--muted); opacity:0.5; animation:none; }
.sociogram-divider .node-hub{ fill:var(--wp--preset--color--gold); animation:none; opacity:1; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.is-visible > *{
  animation:none;
}

/* ---------- hero ---------- */
.hero-section{
  position:relative;
  overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; flex:1 1 560px; }

@media (max-width:600px){
  .sociogram-frame{ width:min(85vw, 340px); height:min(85vw, 340px); }
}

/* ---------- bio card pattern ---------- */
.bio-card{
  border-top:1px solid var(--wp--preset--color--line);
  padding-top:var(--wp--preset--spacing--20);
}
.bio-role{
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--wp--preset--color--gold-dark);
}

/* ---------- research / people index cards ---------- */
.tile{
  border:1px solid var(--wp--preset--color--line);
  border-radius:6px;
  padding:var(--wp--preset--spacing--20);
  transition:transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s cubic-bezier(.22,.61,.36,1), border-color 0.35s;
  height:100%;
}
.tile:hover{
  transform:translateY(-7px) scale(1.015);
  box-shadow:0 24px 46px -24px rgba(15,32,25,0.5);
  border-color:var(--wp--preset--color--gold);
}

/* ---------- nav ---------- */
.wp-block-navigation{ gap:2.2rem !important; }
.wp-block-navigation a{ text-decoration:none; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--wp--preset--color--line);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}