/*
 Theme Name: IK-IP Journey Animated (Child of Twenty Twenty-Five)
 Template: twentytwentyfive
 Version: 0.3.2
 Description: Animated YOU / IK‑IP / IP triangle with orbiting nodes. Includes logo area (uses WordPress custom logo).
*/
:root{ --ikip-blue:#1e40af; --ikip-blue-600:#2563eb; --ikip-ink:#111827; --ikip-accent:#0b7; --ikip-bg:#f8fafc; }
.ikip-trinity-section{ position:relative; isolation:isolate; }
.ikip-tech-bg{position:absolute; inset:0; background:
  radial-gradient(400px 200px at 10% 10%, rgba(33,150,243,.08), transparent 70%),
  radial-gradient(300px 180px at 90% 20%, rgba(11,119,0,.07), transparent 70%),
  radial-gradient(500px 240px at 50% 90%, rgba(17,24,39,.06), transparent 70%);
  pointer-events:none; z-index:0;}
.ikip-circuit{position:absolute; inset:0; background-image:
  linear-gradient(transparent 24px, rgba(17,24,39,.05) 25px),
  linear-gradient(90deg, transparent 24px, rgba(17,24,39,.05) 25px);
  background-size:25px 25px; opacity:.18; mix-blend:multiply; z-index:0;}
.ikip-header{ position:relative; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 0; }
.ikip-logo{ display:inline-flex; align-items:center; gap:.5rem; }
.ikip-logo img{ height:36px; width:auto; display:block; }
.ikip-site-name{ font-weight:800; color:var(--ikip-ink); }
.ikip-trinity-wrap{position:relative; width:100%; max-width:1100px; margin:1rem auto 2rem; aspect-ratio:16/9;}
@media (max-width: 900px){ .ikip-trinity-wrap{aspect-ratio:auto; padding-bottom:4rem;} }
.ikip-main{position:absolute; height:120px; width:120px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:800; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.08); background:linear-gradient(145deg,#fff,#eef2ff); border:6px solid var(--ikip-blue); color:var(--ikip-blue);}
.ikip-main.ikip-ik{border-color: var(--ikip-ink); color:var(--ikip-ink); background:linear-gradient(145deg,#fff,#f3f4f6);}
.ikip-main.ikip-ip{border-color: var(--ikip-accent); color:var(--ikip-accent); background:linear-gradient(145deg,#fff,#ecfdf5);}
.ikip-main.ikip-you{ left:50%; top:6%; transform:translateX(-50%); }
.ikip-main.ikip-ik{ left:12%; bottom:8%; }
.ikip-main.ikip-ip{ right:12%; bottom:8%; }
@media (max-width: 900px){
  .ikip-main{ height:104px; width:104px; font-size:.95rem; }
  .ikip-main.ikip-you{ left:50%; transform:translateX(-50%); top:6%; }
  .ikip-main.ikip-ik{ left:6%; bottom:8%; }
  .ikip-main.ikip-ip{ right:6%; bottom:8%; }
}
.ikip-orbit{position:absolute; inset:0; pointer-events:none; z-index:2;}
.ikip-node{position:absolute; transform:translate(-50%,-50%) scale(.84); opacity:0; transition:transform .35s ease, opacity .35s ease; background:rgba(255,255,255,.9); backdrop-filter: blur(6px); border-radius:9999px; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 25px rgba(0,0,0,.08); padding:.5rem .75rem; font-size:.82rem; white-space:nowrap; color:var(--ikip-ink);}
.ikip-node:hover{ transform:translate(-50%,-50%) scale(.9); }
.ikip-link{position:absolute; height:2px; background:currentColor; transform-origin: top left; opacity:.45; border-radius:1px;}
.ikip-trinity-wrap.show-you .ikip-orbit[data-for="you"] .ikip-node,
.ikip-trinity-wrap.show-ik .ikip-orbit[data-for="ik"] .ikip-node,
.ikip-trinity-wrap.show-ip .ikip-orbit[data-for="ip"] .ikip-node{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.ikip-trinity-wrap.show-you .ikip-orbit[data-for="you"] .ikip-link,
.ikip-trinity-wrap.show-ik .ikip-orbit[data-for="ik"] .ikip-link,
.ikip-trinity-wrap.show-ip .ikip-orbit[data-for="ip"] .ikip-link{ opacity:.7; }
.ikip-label{ position:absolute; z-index:3; font-weight:800; line-height:1; mix-blend:normal; background:rgba(255,255,255,.55); padding:.25rem .6rem; border-radius:999px; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.ikip-label.partnership{ left:22%; top:32%; color:var(--ikip-blue); }
.ikip-label.value{ right:22%; top:28%; color:var(--ikip-accent); }
.ikip-label.value::after{ content:" \2192"; }
.ikip-label.wonders{ left:50%; bottom:14%; transform:translateX(-50%); color:var(--ikip-ink); }
.ikip-main:focus{ outline:3px solid var(--ikip-blue-600); outline-offset:4px; }
