/* ===== block 10 (body) ===== */

.legal-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(6px);
}

.legal-box{
  width:min(720px,92vw);
  max-height:80vh;
  overflow:auto;
  background:#010f0b;
  border:1px solid rgba(0,199,163,.25);
  padding:18px;
  color:#cdece4;
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  line-height:1.6;
  border-radius:6px;
}

.legal-close{
  position:sticky;
  top:0;
  float:right;
  background:transparent;
  border:none;
  color:#00c7a3;
  font-size:18px;
  cursor:pointer;
}

/* ===== block 13 (body) ===== */

/* Geöffnete Menüpunkte bekommen einen vollständig opaken Hintergrund
   in Page-bg-Farbe, damit die Lesbarkeit garantiert ist — auch über
   sehr hellen Bild-Meshes. Die ganze Box (Summary + Body) liegt auf
   diesem soliden Untergrund. */
.tree details[open]{
  background: #021a13 !important;
  box-shadow:
    0 0 0 1px rgba(0, 199, 163, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.50);
  padding: 10px 16px !important;
}
.tree details[open] .details-body{
  background: #021a13;
}
.tree details[open] summary{
  background: #021a13;
}

/* ===== block 16 id="ts-shop" ===== */

/* A single concrete offer, sized to the screen — the node assembles as a point
   cloud (crown DNA) on the left, the offer on the right; detail lives in popups
   so there is almost nothing to scroll. Stacks + scrolls only on narrow screens. */
.ts-ov#ovOrder{background:#021a13}
.ts-ov#ovOrder .ts-ov-scroll{display:flex;align-items:center;justify-content:center}
.ts-ov#ovOrder .order-wrap{max-width:none;margin:0;padding:0;text-align:left}

.shop2{display:flex;align-items:center;gap:clamp(20px,4vw,64px);
  width:100%;max-width:1060px;margin:0 auto;padding:64px 32px 40px;box-sizing:border-box}
.shop2-visual{flex:1 1 52%;position:relative;min-width:0}
.shop2-visual canvas{display:block;width:100%;height:min(62vh,520px);touch-action:none;
  /* soft fade on ALL FOUR edges (not a circle) so the cloud never shows a hard clip
     on any side — incl. the top, where the upward-biased scatter overflows */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
.shop2-info{flex:1 1 42%;max-width:440px;color:#cdece4}
.shop2 .order-kick{color:rgba(0,199,163,.6);margin-bottom:12px}
.shop2-title{font-family:'DM Sans',sans-serif;font-size:clamp(24px,3vw,33px);font-weight:600;color:#fff;line-height:1.12;letter-spacing:.3px}
.shop2-tag{font-size:13px;line-height:1.6;color:rgba(205,236,228,.62);margin:12px 0 22px;max-width:400px}
.shop2-price{display:flex;align-items:baseline;gap:14px;margin-bottom:7px}
.shop2-price .now{font-size:clamp(30px,4vw,40px);font-weight:600;color:#89f3dd;letter-spacing:.5px;text-shadow:0 0 26px rgba(0,199,163,.4)}
.shop2-price .was{font-size:13px;color:rgba(205,236,228,.4);text-decoration:line-through}
.shop2-meta{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(205,236,228,.5);line-height:1.85;margin-bottom:24px}

.shop-cta{display:inline-block;text-decoration:none;margin:0 0 20px;
  background:rgba(0,199,163,.12);border:1px solid rgba(0,199,163,.4);border-radius:999px;
  padding:14px 40px;color:#fff;font-family:ui-monospace,Menlo,monospace;font-weight:500;font-size:11px;
  letter-spacing:3px;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
.shop-cta:hover{background:rgba(0,199,163,.22);border-color:#89f3dd;box-shadow:0 0 34px rgba(0,199,163,.25)}

/* read-more chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(0,199,163,.06);border:1px solid rgba(0,199,163,.22);border-radius:999px;
  padding:8px 15px;color:rgba(205,236,228,.85);font-family:ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:1.3px;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{background:rgba(0,199,163,.16);border-color:#89f3dd;color:#fff}

/* popups (specs + reserve) */
.shop-pop{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;
  background:rgba(1,12,9,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px}
.shop-pop.show{display:flex}
.sp-box{position:relative;width:100%;max-width:440px;max-height:84vh;overflow-y:auto;
  background:#04231a;border:1px solid rgba(0,199,163,.28);border-radius:14px;padding:32px 28px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);transform:translateY(12px) scale(.98);opacity:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
.shop-pop.show .sp-box{transform:none;opacity:1}
.sp-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:1px solid rgba(0,199,163,.3);
  background:transparent;color:#89f3dd;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;transition:border-color .2s,color .2s}
.sp-close:hover{border-color:#89f3dd;color:#fff}
.sp-title{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:#89f3dd;margin-bottom:16px;padding-right:26px}
.sp-body{font-size:13px;line-height:1.62;color:rgba(205,236,228,.82)}
.sp-body p{margin:0 0 10px}
.sp-body ul{list-style:none;margin:0;padding:0}
.sp-body li{position:relative;padding-left:16px;margin-bottom:11px}
.sp-body li:last-child{margin-bottom:0}
.sp-body li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:rgba(0,199,163,.7)}
.sp-body strong{color:#e8fff6;font-weight:600}
#reservePop .order-price{margin-bottom:18px}

/* narrow / portrait: stack and allow scroll */
@media(max-width:760px){
  .ts-ov#ovOrder .ts-ov-scroll{display:block}
  .shop2{flex-direction:column;gap:6px;padding:60px 22px 40px;text-align:center}
  .shop2-visual{width:100%;flex:none}
  .shop2-visual canvas{height:36vh}
  .shop2-info{flex:none;max-width:100%}
  .shop2-tag{margin-left:auto;margin-right:auto}
  .shop2-price{justify-content:center}
  .chips{justify-content:center}
}

/* ===== block 17 id="ts-transition" ===== */

/* Soft cross-dissolve between the homepage tree and the ORDER panel — the tree
   fades out while ORDER fades (+ gently scales) in, matched durations both ways. */
body.shop-open #mainContent{ opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.ts-ov#ovOrder{ opacity:0;
  transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.16,1,.3,1) !important; }
.ts-ov#ovOrder.show{ opacity:1; }

/* ===== block 22 id="ts-minimal" ===== */

  /* remove decorative glows & shadows + make the price smaller / quieter */
  .shop2-price{ gap:10px; margin-bottom:5px; }
  .shop2-price .now{ text-shadow:none; font-size:clamp(20px,2.4vw,25px); font-weight:600; letter-spacing:.3px; }
  .shop2-price .was{ font-size:12px; }
  .shop-cta:hover{ box-shadow:none; }
  .ab-row .ab-dot{ box-shadow:none; background:rgba(205,236,228,.45); width:5px; height:5px; }
  .ts-ov-close:hover{ box-shadow:none; }

  /* neutralise the monospace accent labels so they read as quiet captions */
  .order-kick,.shop2 .order-kick{ color:rgba(205,236,228,.38); letter-spacing:2px; }
  .about-head .s{ color:rgba(205,236,228,.38); letter-spacing:2px; }
  .shop2-meta{ color:rgba(205,236,228,.4); letter-spacing:1.2px; }
  .sp-title{ color:rgba(205,236,228,.6); letter-spacing:2px; }
  .ab-title{ color:rgba(205,236,228,.62); letter-spacing:1.6px; }

  /* flatten the ABOUT cards — no fill, no box, just text on the timeline */
  .ab-row .ab-card{ background:transparent; border:none; padding:2px 2px; }
  .about-scene::before{ background:linear-gradient(to bottom,transparent,rgba(205,236,228,.12) 8%,rgba(205,236,228,.12) 92%,transparent); }
  .ab-row .ab-lead{ background:rgba(205,236,228,.16); }
  .ab-row{ margin-bottom:40px; }

  /* chips: flat, single hair-line border */
  .chip{ background:transparent; border:1px solid rgba(205,236,228,.16); color:rgba(205,236,228,.62); }
  .chip:hover{ background:rgba(205,236,228,.06); border-color:rgba(205,236,228,.42); color:#fff; }

  /* price note & reserve button: strip the boxed fills */
  .order-price{ background:transparent; border:none; padding:0; }
  .shop-cta{ background:transparent; border:1px solid rgba(205,236,228,.3); }
  .shop-cta:hover{ background:rgba(205,236,228,.07); border-color:#fff; }

  /* form fields: quieter borders */
  .order-field input,.order-field textarea,.order-field select{ background:transparent; }

  /* a little more breathing room in the section headers */
  .about-head{ margin-bottom:52px; }
  .shop2-tag{ margin-bottom:26px; }

  /* ORDER — punch-line title + smaller product sub-heading + arguments */
  .shop2-title-sub{ display:block; font-size:.5em; font-weight:400; letter-spacing:.2px;
    color:rgba(205,236,228,.5); margin-top:6px; line-height:1.3; }
  .shop2-sub{ font-size:clamp(14px,1.5vw,17px); font-weight:600; letter-spacing:.3px;
    color:rgba(205,236,228,.72); margin:9px 0 12px; }
  /* Real light: captured ⇄ powered — the last word tips 180° on a loop */
  .rl-line{ font-family:'DM Sans',sans-serif; font-size:clamp(16px,1.9vw,21px); font-weight:600;
    letter-spacing:.3px; color:rgba(205,236,228,.9); margin:0 0 22px; }
  .rl-word{ display:inline-block; width:9.5ch; text-align:left;
    font-family:ui-monospace,Menlo,monospace; font-size:.9em;
    color:#89f3dd; text-shadow:0 0 18px rgba(0,199,163,.3); }
  .rl-word .rl-scr{ opacity:.45; }
  /* DETAILS — collapse the full spec list behind one clean toggle */
  .details-drop{ margin:0 0 22px; }
  .details-drop > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color:rgba(205,236,228,.82); padding:6px 0; transition:color .2s; }
  .details-drop > summary::-webkit-details-marker{ display:none; }
  .details-drop > summary::after{ content:"+"; font-size:13px; opacity:.75; }
  .details-drop[open] > summary::after{ content:"\2013"; }
  .details-drop > summary:hover{ color:#89f3dd; }
  .details-drop .shop2-args{ margin:8px 0 0; }
  .shop2-args i{ font-style:italic; color:#89f3dd; }
  .shop2-args{ list-style:none; margin:2px 0 22px; padding:0; max-width:420px;
    display:flex; flex-direction:column; gap:13px; }
  /* Motif Sensor — minimal inline dropdown */
  .motif-more{ margin-top:8px; }
  .motif-more > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
    font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
    color:rgba(0,199,163,.75); transition:color .2s; }
  .motif-more > summary::-webkit-details-marker{ display:none; }
  .motif-more > summary::after{ content:"+"; font-size:12px; opacity:.8; }
  .motif-more[open] > summary::after{ content:"\2013"; }
  .motif-more > summary:hover{ color:#89f3dd; }
  .motif-body{ margin-top:9px; padding-left:12px; border-left:1px solid rgba(0,199,163,.28);
    font-size:12px; line-height:1.6; color:rgba(205,236,228,.66); }
  .shop2-args li{ position:relative; padding-left:16px; font-size:12.5px;
    line-height:1.55; color:rgba(205,236,228,.6); }
  .shop2-args li::before{ content:""; position:absolute; left:0; top:7px;
    width:5px; height:5px; border-radius:50%; background:rgba(0,199,163,.55); }
  .shop2-args b{ color:#e8fff6; font-weight:600; }
  @media(max-width:760px){
    .shop2-args{ margin-left:auto; margin-right:auto; text-align:left; }
  }

  /* PSYCH focus — fade the crown out over 3s while the mood vote is open,
     and back in over 3s on close, so the eye rests on the PSYCH panel.
     Only the crown canvas fades; the living Cortex mesh (hero canvas) stays. */
  #terra_canvas{ transition:opacity 3s ease !important; }
  body.psych-focus #terra_canvas{ opacity:0 !important; }

  /* mobile only — narrow the stem menu so the bracket borders hug the
     5-letter labels and match the crown width above */
  @media(max-width:640px){
    .tree details.act,
    .tree details.act[open]{
      max-width:82px!important;
      padding-left:6px!important;
      padding-right:6px!important;
    }
  }

/* ===== block 24 id="ts-3d" ===== */

  /* Perspective camera lives INSIDE #mainContent so no fixed overlay inherits it
     as a containing block. Rotation is rotateY-only → getBoundingClientRect .top/.bottom
     stay invariant. Depth is via translateZ inside the preserve-3d group. */
  #scene{ perspective:1400px; perspective-origin:50% 42%; }
  #treeGroup{ transform-style:preserve-3d; transform:rotateY(0deg); will-change:transform; }
  /* Roots stay full-width (no receding frame); the root-network canvas turns with
     the tree (rotateY driven by JS), the section bg + partner labels stay static. */
  /* Roots: fade the background from the current bg (top, unchanged) down to a near-black
     green ONLY across the roots — the very bottom of the page reads almost black. */
  #treeGroup > .roots-section{
    transform-style:preserve-3d;
    background:linear-gradient(to bottom, var(--bg) 0%, #021710 20%, #01100b 45%, #010a07 70%, #000603 100%);
  }
  /* Partners removed — roots are a pure 3D network; drop the PARTNERS watermark. */
  #rootNodes{ display:none; }
  #rootsSection .roots-title{ display:none; }
  /* Footer strip removed — legal links live as labels at the root tips. */
  .footer{ display:none; }
  #rootLegal{ position:absolute; inset:0; z-index:11; pointer-events:none; }
  #rootLegal .rleg{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
    font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:rgba(0,199,163,.55); text-decoration:none; opacity:0; pointer-events:auto; cursor:pointer;
    transition:color .25s; text-shadow:0 0 8px rgba(0,199,163,.28); will-change:left,top,transform,opacity; }
  #rootLegal .rleg:hover{ color:#89f3dd; }
  /* Urknall is rendered in-canvas (the crown's own particles burst from a central point);
     reduced-motion is handled in JS by snapping bangP to 1 (no burst, tree shown instantly). */
  /* Pull the stem/menu closer up into the crown (smaller gap, tree reads as one). */
  #treeGroup .tree-wrap{ margin-top:-21vw; }
  @media(max-width:640px){ #treeGroup .tree-wrap{ margin-top:-18vw; } }
  /* Stem: refined light axis — crisper bright core + soft glow (first pass). */
  #treeGroup .tree-stem{
    width:1.5px;
    background:linear-gradient(to bottom,
      rgba(0,199,163,0) 0%, rgba(0,199,163,.22) 16%,
      rgba(120,255,220,.5) 55%, rgba(0,199,163,.4) 100%);
    box-shadow:0 0 7px rgba(0,199,163,.3);
  }
  /* Guardrails: honour reduced-motion (flatten + no camera move); soften depth on phones. */
  @media (prefers-reduced-motion: reduce){ #scene{ perspective:none; } #treeGroup{ transform:none !important; } }
  @media (max-width:640px){ #scene{ perspective:2200px; perspective-origin:50% 38%; } }