/* "Inside your body" 3D scroll story (templates/sections/shared/body.php). Uses tokens from main.css. */
.bd{position:relative;height:calc((var(--n) + 1.2) * 85vh)}
.bd-stage{position:sticky;top:0;height:100vh;height:100lvh;display:flex;align-items:center;overflow:hidden}
.bd-grid{width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center;padding-top:5.5rem;padding-bottom:1.5rem}
.bd-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.82rem;color:var(--ink-2);padding-block:.4rem;padding-inline:.5rem .95rem;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.bd-eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(128,217,39,.2)}
.bd-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.02em;margin:1rem 0 .7rem}
html[lang="ar"] .bd-title{font-weight:700;letter-spacing:0;line-height:1.3}
.bd-lead{color:var(--ink-2);font-weight:300;max-width:30rem}
.bd-cards{display:grid;margin-top:2rem}
.bd-card{grid-area:1/1;align-self:start;padding:1.5rem;border-radius:24px;background:var(--surface);border:1px solid var(--line);opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.bd-card.on{opacity:1;transform:none;pointer-events:auto}
.bd-area{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:500;color:var(--ink-2)}
.bd-area b{font-family:var(--mono);font-size:.8rem;padding:.2rem .55rem;border-radius:999px;background:var(--lime);color:var(--forest);font-variant-numeric:tabular-nums}
.bd-card h3{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;margin:.7rem 0 .8rem;letter-spacing:-.02em}
html[lang="ar"] .bd-card h3{font-weight:700;letter-spacing:0}
.bd-card ul{list-style:none;display:grid;gap:.5rem;font-size:.95rem}
.bd-card li{display:flex;gap:.6rem;align-items:flex-start}
.bd-card li::before{content:"";flex:none;width:18px;height:18px;margin-top:.15rem;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312281C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.bd-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:600;border-bottom:2px solid var(--lime);padding-bottom:.1rem;transition:gap .3s}
.bd-link:hover{gap:.7rem}.bd-link svg{width:16px;height:16px}[dir="rtl"] .bd-link svg{transform:scaleX(-1)}
.bd-dots{display:flex;gap:.45rem;margin-top:1.4rem}
.bd-dots button{position:relative;width:34px;height:20px;display:grid;place-items:center}
.bd-dots span{display:block;width:100%;height:4px;border-radius:4px;background:var(--line);background:color-mix(in srgb,var(--ink) 18%,transparent);overflow:hidden;position:relative}
.bd-dots span::after{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .15s linear}
[dir="rtl"] .bd-dots span::after{transform-origin:right}
.bd-dots button.on span::after{--f:1}

.bd-view{position:relative}
.bd-panel{position:relative;height:min(76vh,700px);border-radius:32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 50% 45%,rgba(128,217,39,.16),transparent 70%),linear-gradient(180deg,#0f2318,#12281C 60%,#0c1d13);
  border:1px solid rgba(157,244,41,.18);box-shadow:var(--shadow)}
.bd-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(157,244,41,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(157,244,41,.08) 1px,transparent 1px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.bd-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity 1s ease}
.bd.live .bd-canvas{opacity:1}
.bd-scan{position:absolute;inset-inline:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,rgba(157,244,41,.7),transparent);box-shadow:0 0 18px rgba(157,244,41,.6);opacity:0;pointer-events:none}
.bd.live .bd-scan{animation:bdScan 5.5s cubic-bezier(.45,0,.55,1) infinite;opacity:1}
@keyframes bdScan{0%{transform:translateY(8%);opacity:0}10%{opacity:1}50%{transform:translateY(calc(min(76vh,700px) - 12%))}90%{opacity:1}100%{transform:translateY(8%);opacity:0}}
.bd-tag{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem .4rem .45rem;border-radius:999px;background:rgba(18,40,28,.75);border:1px solid rgba(157,244,41,.35);color:#FCFFF6;font-size:.8rem;font-weight:500;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .4s;pointer-events:none;will-change:transform}
.bd-tag i{width:8px;height:8px;border-radius:50%;background:#9DF429;box-shadow:0 0 10px #9DF429}
.bd.live .bd-tag.show{opacity:1}
.bd-loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;transition:opacity .6s}
.bd-loading svg{width:46px;fill:rgba(157,244,41,.5);animation:bdPulse 1.4s ease-in-out infinite}
.bd.live .bd-loading{opacity:0;pointer-events:none}
@keyframes bdPulse{50%{transform:scale(.88);opacity:.5}}
.bd-note{font-size:.78rem;color:var(--ink-2);margin-top:.7rem;text-align:center}
.bd.fail .bd-loading{display:none}

/* Light theme panel overrides */
:root:not([data-theme="dark"]) .bd-panel{
  background:radial-gradient(60% 50% at 50% 45%,rgba(157,244,41,.16),transparent 70%),linear-gradient(180deg,#fcfff6 0%,#f4fde8 100%);
  border:1px solid rgba(18,40,28,.08);box-shadow:0 30px 60px -40px rgba(18,40,28,.25)
}
:root:not([data-theme="dark"]) .bd-panel::before{
  z-index:0;pointer-events:none;opacity:1;background-image:linear-gradient(rgba(18,40,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,40,28,.05) 1px,transparent 1px)
}
:root:not([data-theme="dark"]) .bd-scan{
  background:linear-gradient(90deg,transparent,rgba(79,154,28,.55),transparent);box-shadow:0 0 12px rgba(128,217,39,.35)
}
:root:not([data-theme="dark"]) .bd-tag{
  background:rgba(252,255,246,.9);color:#12281c;border:1px solid rgba(128,217,39,.55);box-shadow:0 8px 20px -12px rgba(18,40,28,.35)
}
:root:not([data-theme="dark"]) .bd-tag i{
  background:#80d927;box-shadow:0 0 8px rgba(128,217,39,.6)
}
:root:not([data-theme="dark"]) .bd-loading{color:#4d6153}
:root:not([data-theme="dark"]) .bd-loading svg{fill:rgba(79,154,28,.5)}
:root:not([data-theme="dark"]) .bd-note{color:#4d6153}

@media (max-width:860px){
  .bd{height:calc((var(--n) + 1) * 80vh)}
  .bd-stage{align-items:stretch}
  .bd-grid{display:flex;flex-direction:column;align-items:stretch;gap:.7rem;padding-top:5.2rem;padding-bottom:calc(1rem + (100lvh - 100svh) + env(safe-area-inset-bottom,0px));height:100%}
  .bd-copy{display:contents}
  .bd-eyebrow{display:none}
  .bd-title{order:1;font-size:clamp(1.5rem,6.4vw,2rem);margin:0}
  .bd-lead{display:none}
  .bd-view{order:2;flex:1;min-height:0;display:flex;flex-direction:column}
  .bd-panel{height:auto;flex:1;min-height:200px;border-radius:24px}
  .bd-note{display:none}
  .bd-cards{order:3;margin-top:0}
  .bd-card{padding:1rem 1.1rem;border-radius:20px}
  .bd-card h3{font-size:1.15rem;margin:.4rem 0 .5rem}
  .bd-card ul{font-size:.86rem;gap:.3rem}
  .bd-link{margin-top:.6rem;font-size:.9rem}
  .bd-dots{order:4;margin-top:0;justify-content:center}
  @keyframes bdScan{0%{transform:translateY(8%);opacity:0}10%{opacity:1}50%{transform:translateY(38vh)}90%{opacity:1}100%{transform:translateY(8%);opacity:0}}
}
@media (max-width:860px) and (max-height:700px){.bd-card ul li:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.bd-scan{display:none}}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  [data-theme="dark"] .bd-canvas{ filter: drop-shadow(0 0 18px rgba(255,255,255,.3)) drop-shadow(0 0 4px rgba(255,255,255,.25)); }
  :root:not([data-theme="dark"]) .bd-canvas{ filter: drop-shadow(0 14px 24px rgba(18,40,28,.18)) drop-shadow(0 0 8px rgba(128,217,39,.25)); }
}