/* Sensus Communis | home-enso.css
   Startseite: (1) die drei Saeulen am offenen Kreis (Ensō wie auf der Founding-Colloquium-Seite),
   (2) die zwei Zeichen in der Karte "Mentor & Fellowship Programm".
   Geladen von: index, en (nach home.layers.css, vor site.css). Skript: pillars-enso.js */

/* ===== 1. Drei Saeulen am offenen Kreis =====
   Desktop: der Pinselkreis in der Mitte, oben das Annual Forum, links der Podcast, rechts die
   Papers. Wo der Pinsel eine Saeule erreicht, geht auf dem Kreis eine kleine Sonne auf und der
   Text daneben erscheint. Handy: Kreis mit den drei Sonnen (I, II, III) oben, Karten darunter. */
.pz {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) minmax(0, 1fr);
  grid-template-areas:
    ".    top  ."
    "left enso right";
  column-gap: clamp(28px, 3.4vw, 52px);
  row-gap: 4px;
  align-items: center;
  margin-top: 64px;
}
.pz-enso {
  grid-area: enso;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.pz-enso__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pz-item--top   { grid-area: top; justify-self: center; max-width: 560px; text-align: center; }
.pz-item--left  { grid-area: left; text-align: right; }
.pz-item--right { grid-area: right; text-align: left; }

/* Desktop: freier Text am Kreis statt Glaskarten */
@media (min-width: 980px) {
  .pz .pillar.pz-item {
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .pz .pillar.pz-item:hover,
  .pz .pillar.pz-item:focus-within { background: none !important; box-shadow: none !important; }
  .pz .pillar-num { margin-bottom: 14px; }
  .pz .pillar h3 { min-height: 0; }
  .pz .pillar .pillar-sub { margin-bottom: 14px; }
  .pz .pillar p { margin-bottom: 22px; font-size: 16.5px; line-height: 1.6; }
  .pz-item--top p { max-width: 520px; margin-left: auto; margin-right: auto; }
  .pz-item--top { padding-bottom: 6px !important; }
  .pz .pillar .pillar-cta { margin-top: 0; min-width: 240px; }
  .pz-item--left  .pillar-cta { align-self: flex-end; }
  .pz-item--top   .pillar-cta { align-self: center; }
  .pz-item--right .pillar-cta { align-self: flex-start; }
  .pz-pt b { display: none; }
}

/* Handy und schmale Fenster: Kreis oben, die drei Karten darunter (I, II, III) */
@media (max-width: 979px) {
  .pz {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "enso" "top" "left" "right";
    row-gap: 18px;
    margin-top: 40px;
  }
  .pz-enso { width: min(84vw, 360px); justify-self: center; margin-bottom: 18px; }
  .pz-item--top, .pz-item--left, .pz-item--right { text-align: left; justify-self: stretch; max-width: none; }
  .pz .pillar.pz-item {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.02) 70%),
      rgb(var(--c-paper-rgb) / .70) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.85) !important;
    padding: 36px 26px 30px !important;
  }
  .pz-pt b {
    position: absolute; top: 50%; translate: 0 -50%;
    font: 700 12px/1 "Manrope", sans-serif; letter-spacing: .08em; color: #B92C08;
  }
  .pz-pt--left b  { right: calc(100% + 8px); }
  .pz-pt--right b { left: calc(100% + 8px); }
  .pz-pt--top b   { top: auto; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; }
}

/* Sonnenpunkte auf dem Kreis (wie Founding Colloquium und Tradition) */
.pz-pt { position: absolute; translate: -50% -50%; z-index: 2; }
.pz-sun {
  --dot: 22px;
  position: relative; display: block; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: radial-gradient(circle, #FFF4DC 0 10%, #FFB463 22%, #EE7A2C 38%, #FBF6EE 41% 57%, transparent 60%);
  box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 14px rgba(226,178,240,.6);
}
.pz-sun::before, .pz-sun::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0;
}
.pz-sun::before {
  width: calc(var(--dot) * 3.3); height: calc(var(--dot) * 3.3); margin: calc(var(--dot) * -1.65) 0 0 calc(var(--dot) * -1.65);
  background: radial-gradient(circle, rgba(255,246,222,1) 0%, rgba(255,206,128,.95) 12%, rgba(255,150,72,.7) 26%, rgba(236,102,48,.34) 44%, transparent 68%);
}
.pz-sun::after {
  width: calc(var(--dot) * 3.9); height: calc(var(--dot) * 3.9); margin: calc(var(--dot) * -1.95) 0 0 calc(var(--dot) * -1.95);
  background: repeating-conic-gradient(from 8deg, rgba(255,160,90,.6) 0deg, rgba(255,160,90,0) 8deg, rgba(255,160,90,0) 22deg, rgba(255,160,90,.6) 30deg);
  filter: blur(1.6px);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
  mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
}
.pz-done .pz-sun, .pz-static .pz-sun { animation: pzBreath 7s ease-in-out infinite; }
.pz-pt--top .pz-sun { animation-delay: -2.3s; }
.pz-pt--right .pz-sun { animation-delay: -4.6s; }
.pz-off .pz-sun { animation: none !important; }
@keyframes pzBreath {
  0%, 100% { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 10px rgba(226,178,240,.45); }
  50%      { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 22px rgba(226,178,240,.85); }
}

/* Zeichnen und Aufgehen (nur mit JavaScript) */
.pz-armed .pz-enso__m { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pz-armed .pz-pt { opacity: 0; transform: scale(.3); }
.pz-armed .pz-pt b { opacity: 0; }
.pz-armed .pz-item { opacity: 0; transform: translate3d(0, 14px, 0); }
.pz-in .pz-enso__m { stroke-dashoffset: 0; transition: stroke-dashoffset 1.9s cubic-bezier(.36,.12,.32,1) .05s; }   /* Tempo wie der Enso der Colloquium-Seite */
.pz-in .pz-pt { opacity: 1; transform: none; transition: opacity .3s ease var(--d), transform .7s cubic-bezier(.34,1.56,.64,1) var(--d); }
.pz-in .pz-pt b { opacity: 1; transition: opacity .5s ease calc(var(--d) + .3s); }
.pz-in .pz-sun::before { animation: pzSunRise 2.2s cubic-bezier(.16,1,.3,1) var(--d) 1 both; }
.pz-in .pz-sun::after  { animation: pzRays 2.4s cubic-bezier(.16,1,.3,1) calc(var(--d) + .03s) 1 both; }
.pz-in .pz-item {
  opacity: 1; transform: none;
  transition: opacity .9s ease calc(var(--d) + .15s), transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--d) + .15s);
}
@media (max-width: 979px) {
  /* Handy: Karten liegen unter dem Kreis und erscheinen nacheinander, sobald der Kreis gezogen ist */
  .pz-in .pz-item--top   { transition-delay: .4s; }
  .pz-in .pz-item--left  { transition-delay: .52s; }
  .pz-in .pz-item--right { transition-delay: .64s; }
}
@keyframes pzSunRise { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: .95; transform: scale(1.05); } 100% { opacity: .4; transform: scale(.72); } }
@keyframes pzRays { 0% { opacity: 0; transform: scale(.55) rotate(0deg); } 35% { opacity: .9; transform: scale(1) rotate(5deg); } 100% { opacity: 0; transform: scale(1.08) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .pz *, .pz-sun, .pz-sun::before, .pz-sun::after { animation: none !important; transition: none !important; }
}

/* ===== Aquarell der Nachtseiten auf dem Nachtblau des Abschnitts "Tradition" (Nov. 2026) =====
   Liegt ueber dem Nachtblau (.lineage::before) und unter Sternen, Kometen und Inhalt; blendet
   unter dem Horizontbogen weich ein. */
.flow .lineage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 129px; bottom: 0; z-index: 0; pointer-events: none;
  background: url(../img/zg-aquarell.webp) center top / max(100vw, 1100px) auto repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 320px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 320px), transparent 100%);
}
@media (max-width: 720px) { .flow .lineage::after { top: 90px; } }
.flow .lineage > .lineage-block { position: relative; z-index: 1; }

/* ===== Probe Nov. 2026: Tag-Aquarell auf den Lavendel-Flaechen der Startseite =====
   Wie auf Papers (img/aquarell-tag.webp): zarte Lasuren in Weiss, Lavendel, Rose, Pfirsich.
   Nur im Lavendel nach dem Startbild und oben im Fluss (Saeulen am Enso, Simone-Weil-Zitat);
   zum Orange hin blendet es aus. Liegt ueber dem Verlauf und unter allen Inhalten. */
.sea-masthead { isolation: isolate; }
.sea-masthead::after,
.flow::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  background: url(../img/aquarell-tag.webp) center top / max(100vw, 1100px) auto repeat;
}
.sea-masthead::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 46%);
          mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 46%);
}
.flow { position: relative; isolation: isolate; }
.flow::after {
  height: 30%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 72%, transparent 100%),
                      radial-gradient(circle at var(--aqx, -999px) var(--aqy, -999px), transparent calc(var(--aqr, 0px) * .9), #000 calc(var(--aqr, 0px) * 1.45));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 72%, transparent 100%),
                      radial-gradient(circle at var(--aqx, -999px) var(--aqy, -999px), transparent calc(var(--aqr, 0px) * .9), #000 calc(var(--aqr, 0px) * 1.45));
          mask-composite: intersect;
}
/* rund um den Enso der drei Saeulen bleibt die Flaeche frei (pillars-enso.js setzt --aqx/--aqy/--aqr) */

/* ===== Nov. 2026: Aquarell der Nachtseiten auch in den beiden blauen Klappkarten der Startseite
   (Zeitgeist, Mentor & Fellowship Programm). Liegt als eigene Ebene zwischen Glanzkante und
   Nachtblau; nur hier, die Karten auf den blauen Unterseiten liegen schon auf dem Aquarell. */
.formats .fa-temple .fa-temple-card.sc-glass-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 60%),
    url(../img/zg-aquarell.webp) var(--aqp, 50% 0) / 1100px auto repeat,
    linear-gradient(168deg, rgba(30,52,140,.95) 0%, rgba(16,33,98,.96) 48%, rgba(9,20,66,.97) 100%) !important;
}
.formats .fa-temple .fa-entab.sc-glass-card { --aqp: 50% -183px; }
.formats .fa-temple .fa-base.sc-glass-card { --aqp: 76% 58%; }