/* ===========================================================================
   "A name goes in. A site comes out." — the looping build sequence.

   One element (.bb__win) is the whole story: it starts as the brief card,
   grows into a site shell, fills with a hero, splits into three pages, then
   zooms out into an editor window with a styling panel. Every step is driven
   by a single data-phase attribute on .bb, so the CSS below reads top to
   bottom as the sequence itself and JS only ever sets one value.

   Photographs: each .bb-ph is a placeholder that looks deliberate when empty.
   Drop a real image in with   style="--img:url('images/whatever.jpg')".
   =========================================================================== */

.bb-sec{background:var(--navy);color:#fff;overflow:hidden}
.bb-sec .head h2,.bb-sec .head .lede{color:#fff}
.bb-sec .head .lede{color:rgba(255,255,255,.66)}
.bb-sec .eyebrow{color:var(--sky)}

.bb{position:relative;aspect-ratio:16/9;max-height:620px;margin:0 auto;
    border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
    background:
      radial-gradient(120% 90% at 50% 0%,rgba(126,176,232,.13),transparent 62%),
      linear-gradient(160deg,#0C1C34,#070F1E 70%);
    border:1px solid rgba(255,255,255,.09)}

/* a slow drifting sheen so the dark stage is never dead between beats */
.bb::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
            background:radial-gradient(38% 38% at 30% 40%,rgba(30,91,168,.3),transparent 70%);
            animation:bbDrift 19s ease-in-out infinite}
@keyframes bbDrift{0%,100%{transform:translate3d(-6%,-3%,0)}50%{transform:translate3d(8%,5%,0)}}

.bb__scene{position:absolute;inset:0;display:grid;place-items:center;z-index:1}

/* --------------------------------------------------------------- the window */
.bb__win{position:relative;width:40%;height:46%;border-radius:12px;overflow:hidden;
         background:#242A36;border:1px solid rgba(255,255,255,.14);
         box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
         transition:width .85s var(--ease),height .85s var(--ease),
                    background-color .9s var(--ease),border-radius .7s var(--ease),
                    transform .95s var(--ease),opacity .5s linear}
.bb__win>*{position:absolute;inset:0}

/* phase sizes — the single source of truth for the morph */
[data-phase="shell"]    .bb__win,
[data-phase="applying"] .bb__win{width:58%;height:62%}
[data-phase="applying"] .bb__win{background:#D9CFC6}
[data-phase="hero"]     .bb__win{width:58%;height:62%;background:#EFEAE3}
/* The pages phase is the "lean in" beat: the window grows taller than the
   stage and is pushed down so the page tops sit just inside the frame and the
   content runs off the bottom — the same crop the reference uses. 152% tall,
   centred, needs +18% of its own height to bring its top edge back into view. */
[data-phase="pages"]    .bb__win{width:96%;height:152%;background:#F4F2EF;border-radius:10px;
                                 transform:translateY(18%)}
[data-phase="editor"]   .bb__win,
[data-phase="fonts"]    .bb__win{width:72%;height:94%;background:#F4F2EF;transform:none}
[data-phase="out"]      .bb__win{width:46%;height:52%;opacity:0;transform:scale(.94)}

/* ------------------------------------------------------------ 1. the brief */
.bb__ask{display:grid;align-content:center;gap:clamp(10px,1.5vw,18px);
         padding:0 clamp(16px,3.4vw,42px);opacity:0;transition:opacity .35s linear}
[data-phase="ask"] .bb__ask,[data-phase="typing"] .bb__ask{opacity:1;transition-delay:.25s}

.bb__q{font-size:clamp(13px,1.85vw,24px);font-weight:600;letter-spacing:-.025em;color:#fff}
.bb__field{position:relative;height:clamp(28px,4.2vw,52px);border-radius:8px;
           background:#3A4049;display:flex;align-items:center;
           padding:0 clamp(8px,1.1vw,14px);font-size:clamp(10px,1.3vw,16px);
           box-shadow:0 0 0 0 rgba(126,176,232,0);transition:box-shadow .3s}
[data-phase="typing"] .bb__field{box-shadow:0 0 0 2px rgba(126,176,232,.5)}
.bb__typed{color:#fff;white-space:pre}
.bb__hint{color:rgba(255,255,255,.4)}
[data-phase="typing"] .bb__hint{display:none}
.bb__caret{width:1.5px;height:1.1em;background:#fff;margin-left:1px;flex:none;
           animation:bbBlink 1.05s step-end infinite}
@keyframes bbBlink{0%,100%{opacity:1}50%{opacity:0}}

.bb__next{justify-self:end;font-size:clamp(9px,1.15vw,14px);font-weight:500;color:#fff;
          border:1px solid rgba(255,255,255,.46);border-radius:7px;
          padding:clamp(4px,.7vw,9px) clamp(9px,1.5vw,18px);transition:transform .16s,background-color .16s}
.bb__next.press{transform:scale(.93);background:rgba(255,255,255,.17)}

/* ------------------------------------------------- 2. the generated site */
.bb__site{opacity:0;transition:opacity .4s linear}
[data-phase="shell"] .bb__site,[data-phase="applying"] .bb__site,
[data-phase="hero"] .bb__site{opacity:1;transition-delay:.3s}

.bb__nav{position:absolute;top:0;left:0;right:0;height:13%;display:flex;align-items:center;
         justify-content:space-between;padding:0 clamp(10px,1.7vw,22px);
         font-size:clamp(5px,.72vw,9px);color:rgba(255,255,255,.72);
         transition:color .9s var(--ease)}
.bb__nav b{font-weight:600;letter-spacing:.01em}
.bb__nav ul{display:flex;gap:clamp(6px,1vw,13px)}
[data-phase="hero"] .bb__nav{color:#4A423C}

/* the three bouncing dots */
.bb__dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          gap:clamp(3px,.42vw,6px);opacity:0;transition:opacity .3s linear}
[data-phase="shell"] .bb__dots{opacity:1}
.bb__dots i{width:clamp(3px,.45vw,6px);aspect-ratio:1;border-radius:50%;background:#fff;
            animation:bbBounce 1.25s ease-in-out infinite}
.bb__dots i:nth-child(2){animation-delay:.16s}
.bb__dots i:nth-child(3){animation-delay:.32s}
@keyframes bbBounce{0%,100%{transform:translateY(0);opacity:.4}45%{transform:translateY(-38%);opacity:1}}

/* "Your site is almost ready." */
.bb__status{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
            gap:4px;opacity:0;transform:translateY(6px);
            transition:opacity .45s linear,transform .45s var(--ease)}
[data-phase="applying"] .bb__status{opacity:1;transform:none}
.bb__status b{font-size:clamp(9px,1.35vw,17px);font-weight:500;letter-spacing:-.02em;color:#4A423C}
.bb__status span{font-size:clamp(6px,.82vw,10px);color:rgba(74,66,60,.66)}

/* the hero that resolves out of it */
.bb__hero{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
          gap:clamp(8px,1.6vw,22px);padding:16% clamp(12px,2.4vw,32px) 8%;
          opacity:0;transition:opacity .5s linear}
[data-phase="hero"] .bb__hero{opacity:1;transition-delay:.25s}
.bb__hd{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#2F2924;
        font-size:clamp(14px,2.5vw,34px);line-height:1.03;letter-spacing:-.015em}
.bb__hero .bb-ph{height:78%;align-self:center;border-radius:3px}

/* ------------------------------------------------- 3. the three pages */
.bb__pages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,.85vw,12px);
           padding:clamp(5px,.85vw,12px);padding-top:0;opacity:0;
           transition:opacity .5s linear}
[data-phase="pages"] .bb__pages{opacity:1;transition-delay:.15s;
                                  padding-top:clamp(5px,.85vw,12px)}
[data-phase="editor"] .bb__pages,[data-phase="fonts"] .bb__pages{opacity:1;padding-top:7%}
/* in the editor the panel covers the right third, so nudge the pages left */
[data-phase="editor"] .bb__pages,[data-phase="fonts"] .bb__pages{padding-right:30%}

.bb__pg{background:#fff;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;
        transform:translateY(14px);opacity:0;
        transition:transform .7s var(--ease),opacity .5s linear}
[data-phase="pages"] .bb__pg,[data-phase="editor"] .bb__pg,[data-phase="fonts"] .bb__pg{
  transform:none;opacity:1}
.bb__pg:nth-child(1){transition-delay:.05s}
.bb__pg:nth-child(2){transition-delay:.14s}
.bb__pg:nth-child(3){transition-delay:.23s}
.bb__pg--warm{background:#E7E0D7}
.bb__pg--dark{background:#3B342E}

.bb__pgtop{height:9%;display:flex;align-items:center;justify-content:space-between;
           padding:0 6%;font-size:clamp(3px,.42vw,5px);color:rgba(60,52,46,.6);flex:none}
.bb__pg--dark .bb__pgtop{color:rgba(255,255,255,.6)}
.bb__pgbody{flex:1;min-height:0;padding:6%;display:grid;gap:5%;align-content:start}
.bb__ttl{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#2F2924;
         font-size:clamp(6px,1.02vw,14px);line-height:1.1}
.bb__pg--dark .bb__ttl{color:#F2EDE7}
.bb__bar{height:clamp(1.5px,.2vw,2.5px);border-radius:2px;background:rgba(60,52,46,.22)}
.bb__pg--dark .bb__bar{background:rgba(255,255,255,.26)}
.bb__bar--s{width:52%}.bb__bar--m{width:74%}
/* A bare div has no intrinsic height, so every placeholder needs a ratio or it
   collapses and the page preview reads as empty. */
.bb__pgbody>.bb-ph{aspect-ratio:4/3;border-radius:2px}
.bb__pg:nth-child(2) .bb__pgbody>.bb-ph{aspect-ratio:1}
.bb__row{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}
.bb__row .bb-ph{aspect-ratio:1;border-radius:2px}

/* ------------------------------------------------- 4. the editor chrome */
.bb__chrome{height:7%;bottom:auto;display:flex;align-items:center;justify-content:space-between;
            padding:0 1.6%;opacity:0;transition:opacity .4s linear;
            border-bottom:1px solid rgba(60,52,46,.1)}
[data-phase="editor"] .bb__chrome,[data-phase="fonts"] .bb__chrome{opacity:1;transition-delay:.3s}
.bb__chrome .bb__mark{width:clamp(7px,.95vw,13px);aspect-ratio:1;border-radius:4px;
                      background:linear-gradient(135deg,var(--blue),var(--sky))}

/* the styling panel that slides in from the right */
.bb__panel{left:auto;width:29%;background:#fff;border-left:1px solid rgba(60,52,46,.12);
           padding:clamp(7px,1.15vw,16px);display:grid;align-content:start;
           gap:clamp(4px,.62vw,9px);transform:translateX(104%);opacity:0;
           transition:transform .75s var(--ease),opacity .4s linear}
[data-phase="editor"] .bb__panel,[data-phase="fonts"] .bb__panel{transform:none;opacity:1;
                                                                 transition-delay:.25s}
.bb__step{font-size:clamp(4.5px,.6vw,8px);color:rgba(60,52,46,.52);letter-spacing:.01em}
.bb__ptitle{font-size:clamp(6px,.86vw,12px);font-weight:600;color:#2F2924;letter-spacing:-.015em}
.bb__picks{font-size:clamp(4.5px,.58vw,7.5px);color:rgba(60,52,46,.5);margin-top:3%}

.bb__opt{border:1px solid rgba(60,52,46,.14);border-radius:5px;overflow:hidden;
         padding:clamp(4px,.62vw,9px);display:grid;gap:4px;
         transition:border-color .35s,box-shadow .35s,background-color .35s}
.bb__opt.on{border-color:#2F2924;box-shadow:0 0 0 1px #2F2924}
.bb__sw{display:grid;grid-template-columns:repeat(5,1fr);height:clamp(7px,1.05vw,15px);
        border-radius:3px;overflow:hidden}
.bb__sw i{display:block}
.bb__fo b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;
          font-size:clamp(6px,.88vw,12px);color:#2F2924;line-height:1.1}
.bb__fo span{display:block;font-size:clamp(4px,.52vw,7px);color:rgba(60,52,46,.55);margin-top:2px}
/* panel contents swap between the two steps */
.bb__pal,.bb__fnt{display:grid;gap:clamp(4px,.62vw,9px)}
.bb__fnt{display:none}
[data-phase="fonts"] .bb__pal{display:none}
[data-phase="fonts"] .bb__fnt{display:grid}

/* ------------------------------------------------- flying material chips */
.bb__asset{position:absolute;border-radius:5px;overflow:hidden;opacity:0;z-index:2;
           box-shadow:0 26px 54px -22px rgba(0,0,0,.7);
           transition:transform 1.15s var(--ease),opacity .55s linear}
[data-phase="applying"] .bb__asset,[data-phase="hero"] .bb__asset{opacity:1}
[data-phase="pages"] .bb__asset{opacity:0;transition-delay:0s}

/* Sized by width + aspect-ratio. The palette chip keeps its swatches in an
   inner absolutely-positioned row: making the chip itself the flex container
   stopped its own ratio/height from resolving, and it collapsed to a square. */
.bb__asset--l{width:13%;aspect-ratio:3/4;left:5%;top:38%;transform:translate3d(-180%,22%,0) rotate(-9deg)}
.bb__asset--r{width:15%;aspect-ratio:4/3;right:4%;top:28%;transform:translate3d(180%,-18%,0) rotate(7deg)}
.bb__asset--t{width:12%;aspect-ratio:16/7;left:4%;top:9%;transform:translate3d(-90%,-220%,0) rotate(-5deg)}
[data-phase="applying"] .bb__asset--l{transform:translate3d(6%,4%,0) rotate(-3.5deg)}
[data-phase="applying"] .bb__asset--r{transform:translate3d(-6%,-4%,0) rotate(2.5deg)}
[data-phase="applying"] .bb__asset--t{transform:none}
[data-phase="hero"] .bb__asset--l{transform:translate3d(-8%,8%,0) rotate(-2deg)}
[data-phase="hero"] .bb__asset--r{transform:translate3d(8%,-6%,0) rotate(1.5deg)}
[data-phase="hero"] .bb__asset--t{transform:translate3d(-6%,-14%,0)}

/* a chip is an empty box until its photo is told to fill it */
.bb__asset>.bb-ph{position:absolute;inset:0}

/* the palette chip is drawn, not photographed */
.bb__asset--t{background:#fff}
.bb__swrow{position:absolute;inset:11% 8%;display:flex;gap:4%}
.bb__swrow i{flex:1;border-radius:2px}

/* ------------------------------------------------------- image placeholder */
.bb-ph{position:relative;background-color:#CFC6BB;background-image:var(--img);
       background-size:cover;background-position:center;overflow:hidden}
.bb-ph::after{content:"";position:absolute;inset:0;
              background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(120,104,90,.3)),
                         radial-gradient(52% 44% at 50% 62%,rgba(255,255,255,.5),transparent 70%)}
.bb-ph[style*="--img:url"]::after{display:none}   /* real photo: drop the stand-in */

/* ------------------------------------------------------------- the pointer */
.bb__cursor{position:absolute;z-index:6;width:15px;height:21px;left:0;top:0;opacity:0;
            pointer-events:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.5));
            transition:transform .62s cubic-bezier(.33,.9,.36,1),opacity .3s linear}
.bb__cursor svg{width:100%;height:100%;display:block}
[data-phase="ask"] .bb__cursor,[data-phase="typing"] .bb__cursor{opacity:1}

/* ------------------------------------------------------------ the caption */
.bb__cap{margin-top:clamp(14px,1.8vw,22px);text-align:center;font-size:clamp(10px,1.15vw,13px);
         font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.bb__cap span{display:inline-block;transition:opacity .3s linear,transform .3s var(--ease)}
.bb__cap span.sw{opacity:0;transform:translateY(5px)}

/* ------------------------------------------------------------ small screens
   Below 760px the three-page spread and the side panel stop being readable, so
   the stage goes taller and the panel takes the full width under the pages. */
@media(max-width:760px){
  .bb{aspect-ratio:4/3}
  .bb__win{width:66%;height:40%}
  [data-phase="shell"] .bb__win,[data-phase="applying"] .bb__win,
  [data-phase="hero"] .bb__win{width:82%;height:52%}
  [data-phase="pages"] .bb__win{width:92%;height:88%;transform:scale(1.12)}
  [data-phase="editor"] .bb__win,[data-phase="fonts"] .bb__win{width:92%;height:92%}
  [data-phase="editor"] .bb__pages,[data-phase="fonts"] .bb__pages{padding-right:clamp(5px,.85vw,12px)}
  .bb__panel{left:0;width:auto;top:auto;height:34%;border-left:0;
             border-top:1px solid rgba(60,52,46,.12);transform:translateY(104%)}
  .bb__cap{letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce){
  .bb::before,.bb__dots i,.bb__caret{animation:none}
  .bb__win,.bb__asset,.bb__panel,.bb__pg,.bb__cursor,.bb__hero,.bb__status{transition:none}
  .bb__cursor{display:none}
}