/*
  Living Family Tree · shared stylesheet.
  Used by /family-tree/ (standalone page) and by / (homepage embed under hero).
  All rules prefixed .ft-* / .hb-* / .no-js .ft-fallback / #ft* — no leaks.
  No global body/html rules — the host page controls its own layout.
  Locked visual matches commit 8a7cef1 · 2026-07-26.
*/

:root{
  --ft-cream:#FDFBF5; --ft-ink:#2D2419;
  --ft-wax:#6B1F2E; --ft-wax-deep:#4A0E1B; --ft-wax-warm:#8A2A3C;
  --ft-gold:#B08D57; --ft-gold-halo:#F5D488; --ft-gold-warm:#FFF3C9;
  --ft-moss:#5A6B4F; --ft-line:#E5DFD1; --ft-muted:#6B6355;
  --hb-cycle: 4.5s;
}

/* Standalone-page shell (only /family-tree/ uses this) */
.ft-page-shell{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:16px;
  background:var(--ft-cream);
  color:var(--ft-ink);
  font-family:"Cormorant Garamond","Baskerville","Georgia",serif;
}
.ft-page-shell .ft-page-main{ width:100%; max-width:1376px; }

/* Homepage embed section */
.ft-home{
  background:var(--ft-cream);
  color:var(--ft-ink);
  padding:56px 20px 40px;
  font-family:"Cormorant Garamond","Baskerville","Georgia",serif;
}
.ft-home-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 30px;
}
.ft-home-kicker{
  font-family:"Inter","Helvetica Neue",sans-serif;
  color:var(--ft-moss); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  margin:0 0 10px;
}
.ft-home-title{
  font-size:36px; color:var(--ft-wax); font-weight:600;
  margin:0 0 14px; letter-spacing:.3px; line-height:1.1;
}
.ft-home-verse{
  font-size:19px; font-style:italic; color:var(--ft-ink);
  margin:0 0 4px; line-height:1.4;
}
.ft-home-citation{
  font-family:"Inter","Helvetica Neue",sans-serif;
  color:var(--ft-muted); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  margin:0;
}

/* Skip-link (standalone) */
.lk-skip{ position:absolute; left:-1000px; top:-1000px; }
.lk-skip:focus{
  position:static; display:inline-block; margin:8px;
  background:var(--ft-wax); color:#fff; padding:6px 12px; border-radius:4px;
}

/* Tree stage */
.ft-stage{
  position:relative; width:100%; max-width:1376px; margin:0 auto;
  aspect-ratio: 1376 / 768;
  overflow:hidden; border-radius:2px;
}
.ft-tree{
  display:block; width:100%; height:100%; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}

/* Life through the wood */
.ft-life{
  position:absolute; inset:0;
  background: url("/assets/img/family-tree/tree.jpg") center / contain no-repeat;
  filter: brightness(1.55) saturate(1.55) contrast(0.92) hue-rotate(-14deg);
  mix-blend-mode: soft-light;
  pointer-events:none;
  z-index:1;
  will-change: opacity, mask-image;
  -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 3%, transparent 10%);
          mask-image: radial-gradient(circle at 50% 82%, #000 3%, transparent 10%);
  animation: hb-life var(--hb-cycle) cubic-bezier(.35,.05,.35,1) infinite;
}
@keyframes hb-life{
  0%   { opacity:0;
         -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 3%,  transparent 10%);
                 mask-image: radial-gradient(circle at 50% 82%, #000 3%,  transparent 10%); }
  10%  { opacity:.9;
         -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 10%, transparent 22%);
                 mask-image: radial-gradient(circle at 50% 82%, #000 10%, transparent 22%); }
  45%  { opacity:1;
         -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 55%, transparent 78%);
                 mask-image: radial-gradient(circle at 50% 82%, #000 55%, transparent 78%); }
  70%  { opacity:.7;
         -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 95%, transparent 130%);
                 mask-image: radial-gradient(circle at 50% 82%, #000 95%, transparent 130%); }
  100% { opacity:0;
         -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 150%, transparent 180%);
                 mask-image: radial-gradient(circle at 50% 82%, #000 150%, transparent 180%); }
}

/* Bible heart */
.ft-heart-bible{
  position:absolute;
  left:50%; top:82%;
  width:260px; height:170px;
  margin-left:-130px; margin-top:-85px;
  background: radial-gradient(ellipse at center,
    rgba(255,243,201,.95) 0%,
    rgba(245,212,136,.55) 38%,
    rgba(212,165,116,.15) 68%,
    transparent 82%);
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;
  transform-origin:center;
  animation: hb-heart var(--hb-cycle) ease-in-out infinite;
}
@keyframes hb-heart{
  0%,100%{ opacity:.45; transform:scale(.94); }
  12%   { opacity:1;    transform:scale(1.12); }
  35%   { opacity:.75;  transform:scale(1);    }
  60%   { opacity:.55;  transform:scale(.98);  }
}

/* Halos on each cross */
.ft-halo{
  position:absolute;
  width:120px; height:120px;
  margin-left:-60px; margin-top:-60px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,243,201,.9)  0%,
    rgba(245,212,136,.55) 32%,
    rgba(212,165,116,.2)  60%,
    transparent 78%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transform-origin:center;
  animation: hb-halo var(--hb-cycle) ease-out infinite;
  animation-delay: var(--d, 1.6s);
}
@keyframes hb-halo{
  0%,   82%, 100% { opacity:0;   transform:scale(.7); }
  4%             { opacity:.95;  transform:scale(1);   }
  14%            { opacity:.4;   transform:scale(1.12);}
  22%            { opacity:0;    transform:scale(1.22);}
}

/* Crown halo */
.ft-halo-top{
  position:absolute;
  left:50%; top:10%;
  width:280px; height:280px;
  margin-left:-140px; margin-top:-140px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,243,201,1)   0%,
    rgba(245,212,136,.7)  25%,
    rgba(245,212,136,.3)  55%,
    transparent 78%);
  filter: blur(12px);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;
  opacity:.14;
  transform-origin:center;
  animation: hb-crown var(--hb-cycle) ease-out infinite;
}
@keyframes hb-crown{
  0%,100% { opacity:.14; transform:scale(1);   }
  55%     { opacity:.95; transform:scale(1.06);}
  75%     { opacity:.45; transform:scale(1.12);}
}

/* Burgundy cross markers */
.ft-cross{
  position:absolute;
  width:56px; height:56px;
  margin-left:-28px; margin-top:-28px;
  background:transparent; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
  z-index:2;
}
.ft-cross:focus{ outline:none; }
.ft-cross:focus-visible .ft-cross-svg{
  filter:
    drop-shadow(0 0 6px var(--ft-gold-halo))
    drop-shadow(0 0 14px rgba(245,212,136,.7))
    drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.ft-cross-svg{
  width:34px; height:34px; transition:filter .3s ease, transform .3s ease;
  filter:
    drop-shadow(0 0 3px rgba(107,31,46,.55))
    drop-shadow(0 1px 3px rgba(0,0,0,.45));
  animation: ft-breathe 4.5s ease-in-out infinite;
}
@keyframes ft-breathe{
  0%,100%{ transform:scale(1);
    filter: drop-shadow(0 0 3px rgba(107,31,46,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.45));
  }
  50%    { transform:scale(1.08);
    filter: drop-shadow(0 0 8px rgba(245,212,136,.8)) drop-shadow(0 0 14px rgba(107,31,46,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.45));
  }
}
.ft-cross:hover .ft-cross-svg,
.ft-cross:focus-visible .ft-cross-svg{
  animation-duration:1.6s;
  transform:scale(1.22);
}
.ft-cross:hover, .ft-cross:focus-visible{ z-index:5; }
.ft-cross:active .ft-cross-svg{ transform:scale(1.36); }

/* Tooltip */
.ft-tip{
  position:absolute; left:50%; top:100%;
  transform:translate(-50%, 8px);
  background:var(--ft-cream);
  border:1px solid var(--ft-line);
  border-radius:6px;
  padding:9px 15px;
  min-width:130px; text-align:center;
  box-shadow: 0 6px 18px rgba(45,36,25,.18), 0 2px 4px rgba(45,36,25,.08);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
  z-index:6;
}
.ft-tip::before{
  content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--ft-cream);
  border-left:1px solid var(--ft-line); border-top:1px solid var(--ft-line);
}
.ft-tip .ft-tip-name{
  display:block;
  font-family:"Cormorant Garamond","Baskerville",serif;
  color:var(--ft-wax); font-size:17px; font-weight:600; line-height:1.15;
}
.ft-tip .ft-tip-wing{
  display:block; margin-top:3px;
  font-family:"Inter","Helvetica Neue",sans-serif;
  color:var(--ft-moss); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
}
.ft-cross:hover .ft-tip,
.ft-cross:focus-visible .ft-tip{
  opacity:1; transform:translate(-50%, 12px);
}

/* Caption */
.ft-caption{
  max-width:640px; margin:22px auto 0; text-align:center;
  color:var(--ft-muted); font-size:15px; line-height:1.5;
}
.ft-caption strong{ color:var(--ft-wax); font-weight:600; }

/* Cinematic click-veil */
.ft-veil{
  position:fixed;
  top:0; left:0;
  width:24px; height:24px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(245,212,136,1) 0%,
                            rgba(253,251,245,1) 45%,
                            rgba(253,251,245,1) 100%);
  transform:translate(-50%, -50%) scale(0);
  transform-origin:center;
  pointer-events:none;
  z-index:99;
  transition:transform .95s cubic-bezier(.22,.8,.25,1),
             opacity .35s ease .8s;
  box-shadow: 0 0 40px 20px rgba(245,212,136,.5);
  opacity:1;
}
.ft-veil.is-open{ transform:translate(-50%, -50%) scale(120); }
.ft-veil-title{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%, calc(-50% + 40px));
  z-index:100;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease .45s, transform .6s ease .45s;
  text-align:center;
  font-family:"Cormorant Garamond","Baskerville",serif;
}
.ft-veil-title.is-visible{ opacity:1; transform:translate(-50%, -50%); }
.ft-veil-title .vt-wing{
  display:block;
  font-family:"Inter","Helvetica Neue",sans-serif;
  color:var(--ft-moss);
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:8px;
}
.ft-veil-title .vt-name{
  display:block;
  color:var(--ft-wax);
  font-size:42px; font-weight:600; letter-spacing:1px;
}

/* No-JS fallback (standalone only shows it) */
.ft-fallback{
  display:none;
  max-width:900px; margin:32px auto 0;
  background:#fff; border:1px solid var(--ft-line); border-radius:6px;
  padding:20px 24px;
}
.ft-fallback h2{
  font-family:"Cormorant Garamond","Baskerville",serif;
  color:var(--ft-wax); margin:0 0 10px; font-size:22px;
}
.ft-fallback ol{ padding-left:22px; margin:0; }
.ft-fallback li{ margin:6px 0; font-size:16px; color:var(--ft-ink); }
.ft-fallback a{ color:var(--ft-wax); text-decoration:none; border-bottom:1px solid var(--ft-gold); }
.no-js .ft-fallback{ display:block; }

/* Mobile */
@media (max-width:720px){
  .ft-home{ padding:40px 14px 30px; }
  .ft-home-title{ font-size:28px; }
  .ft-home-verse{ font-size:17px; }
  .ft-cross{ width:68px; height:68px; margin-left:-34px; margin-top:-34px; }
  .ft-cross-svg{ width:28px; height:28px; }
  .ft-halo{ width:90px; height:90px; margin-left:-45px; margin-top:-45px; }
  .ft-halo-top{ width:200px; height:200px; margin-left:-100px; margin-top:-100px; }
  .ft-tip{ top:auto; bottom:100%; transform:translate(-50%, -8px); }
  .ft-tip::before{
    top:auto; bottom:-6px;
    border-left:0; border-top:0;
    border-right:1px solid var(--ft-line); border-bottom:1px solid var(--ft-line);
  }
  .ft-cross:hover .ft-tip,
  .ft-cross:focus-visible .ft-tip{ transform:translate(-50%, -12px); }
  .ft-veil-title .vt-name{ font-size:30px; }
}

@media (prefers-reduced-motion: reduce){
  .ft-cross-svg,
  .ft-life, .ft-heart-bible, .ft-halo, .ft-halo-top{
    animation:none !important;
  }
  .ft-life{
    opacity:.4;
    -webkit-mask-image: radial-gradient(circle at 50% 82%, #000 70%, transparent 100%);
            mask-image: radial-gradient(circle at 50% 82%, #000 70%, transparent 100%);
  }
  .ft-heart-bible{ opacity:.5; }
  .ft-halo-top{ opacity:.35; }
  .ft-veil{ transition:transform .35s linear, opacity .2s ease .3s; }
  .ft-veil-title{ transition:opacity .2s ease, transform .2s ease; }
}