@font-face{
    font-family:'Platypi';
    src:url('./assets/Platypi-Italic.ttf') format('truetype');
    font-style:italic;
    font-weight:400 700;
    font-display:swap;
  }
  @font-face{
    font-family:'Poppins';
    src:url('./assets/Poppins-Regular.ttf') format('truetype');
    font-style:normal;
    font-weight:400;
    font-display:swap;
  }
  :root{
    --bg-navy: #060a1f;
    --bg-navy-2: #0d1440;
    --bg-glow: #1e2a6e;
    --accent-blue: #4a8bff;
    --accent-pink: #ff4fa3;
    --text-dim: rgba(255,255,255,0.55);
    --mx: 50%;
    --my: 45%;
  }
  /* The section fills whatever container it is placed in. Without an explicit
     size here, #stage's height:100% would resolve against nothing and the whole
     scene would collapse to zero height. */
  .charm-hve{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
    background:#04060f;
    overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  #stage{position:relative;width:100%;height:100%;}

  #bgGradient{
    position:absolute;inset:0;z-index:0;
    background-image:var(--asset-gradient);
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  .atmo{
    position:absolute;
    width:56vw;height:56vw;
    border-radius:50%;
    filter:blur(90px);
    opacity:0.13;
    z-index:0;
    pointer-events:none;
    will-change:transform;
  }
  .atmo.blue{
    left:6%;top:12%;
    background:radial-gradient(circle, #4a7bff 0%, rgba(74,123,255,0) 70%);
    animation:atmoDriftA 46s ease-in-out infinite alternate;
  }
  .atmo.pink{
    right:4%;top:24%;
    background:radial-gradient(circle, #ff5fb0 0%, rgba(255,95,176,0) 70%);
    animation:atmoDriftB 58s ease-in-out infinite alternate;
  }
  @keyframes atmoDriftA{
    from{transform:translate(0,0) scale(1);}
    to{transform:translate(4vw,-3vw) scale(1.08);}
  }
  @keyframes atmoDriftB{
    from{transform:translate(0,0) scale(1.05);}
    to{transform:translate(-3vw,2vw) scale(1);}
  }
  @media (prefers-reduced-motion: reduce){
    .atmo{animation:none;}
    .deco-star{animation:none;}
  }

  #cloud{
    position:absolute;
    left:-4%;
    bottom:-6%;
    width:46vw;
    max-width:760px;
    min-width:340px;
    z-index:1;
    pointer-events:none;
    opacity:.95;
  }
  #cloud img{display:block;width:100%;height:auto;}

  .deco-star{
    position:absolute;
    z-index:1;
    pointer-events:none;
    animation:twinkle 5.5s ease-in-out infinite;
  }
  .deco-star img{display:block;width:100%;height:auto;}
  @media (max-width: 900px){
    /* the headings occupy roughly 28–46% on phones, so keep stars out of that band */
    .deco-star.s1{left:auto !important; right:6% !important; top:20% !important; width:46px !important;}
    .deco-star.s2{left:8% !important;  top:60% !important; width:34px !important;}
    .deco-star.s3{left:26% !important; top:72% !important; width:24px !important;}
    .deco-star.s4{left:auto !important; right:16% !important; top:12% !important; width:26px !important;}
    .deco-star.s5{display:none;}
  }
  @keyframes twinkle{
    0%,100%{opacity:.55;transform:scale(.92);}
    50%{opacity:1;transform:scale(1.06);}
  }

  canvas{display:block;width:100%;height:100%;position:relative;z-index:2;touch-action:none;-webkit-tap-highlight-color:transparent;}
  svg#connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;}
  svg#connectors path{fill:none;stroke:rgba(255,255,255,0.28);stroke-width:1;transition:opacity .25s ease;}

  .eyebrow{
    position:absolute;
    top:7%;
    left:6%;
    transform:none;
    color:#ffffff;
    font-family:'Platypi',"Iowan Old Style",Georgia,serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(24px, 2.6vw, 58px);
    line-height:1.08;
    letter-spacing:0;
    text-transform:none;
    text-align:left;
    /* Generous, so the forced line break is the only break: the first line
       always fits and the headline stays two lines at every width. Clearance
       from the nodes is handled by fitHeadline() in brain-scene.js, which
       shrinks the font rather than letting it wrap to three lines. */
    max-width:46%;
    pointer-events:none;
    z-index:4;
  }
  @media (max-width: 900px){
    .eyebrow{
      top:5%;
      left:8%;
      max-width:78%;
      font-size:clamp(30px, 8.6vw, 46px);
    }
  }

  .bubble{
    position:absolute;
    width:520px;
    transform:translate(-50%,-100%);
    margin-top:-14px;
    pointer-events:none;
    z-index:6;
  }
  .bubble.show{transform:translate(-50%,-100%) translateY(-8px);}

  /* the artwork itself unrolls horizontally from the centre */
  .bubble .scroll-body{
    position:relative;
    width:100%;
    aspect-ratio:632 / 313;
    background-image:var(--asset-scroll);
    background-size:100% 100%;
    background-repeat:no-repeat;
    filter:drop-shadow(0 16px 34px rgba(45,20,80,0.42));
    transform:scaleX(0.03);
    opacity:0;
    transition:transform .34s cubic-bezier(.22,.9,.3,1), opacity .16s ease;
    will-change:transform;
  }
  .bubble.show .scroll-body{
    transform:scaleX(1);
    opacity:1;
  }

  /* text is revealed once the scroll is mostly open, and hidden first on close */
  .bubble .scroll-inner{
    position:absolute;
    left:13%;
    right:13%;
    top:21%;
    bottom:19%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    color:#2f2a24;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    opacity:0;
    transition:opacity .16s ease;
  }
  .bubble.show .scroll-inner{
    opacity:1;
    transition:opacity .22s ease .2s;
  }
  .bubble .title{
    font-family:'Platypi',"Iowan Old Style",Georgia,serif;
    font-style:italic;
    font-size:31px;
    font-weight:600;
    line-height:1.1;
    letter-spacing:0;
    text-transform:capitalize;
    color:#7c4dff;
    margin-bottom:8px;
  }
  .bubble .title .dot{display:none;}
  .bubble .desc{
    font-size:15px;
    line-height:1.35;
    color:#2b2620;
  }
  @media (max-width: 900px){
    .bubble{width:min(400px, 92vw);}
    .bubble .title{font-size:22px;margin-bottom:5px;}
    .bubble .desc{font-size:11.5px;line-height:1.32;}
  }
  @media (prefers-reduced-motion: reduce){
    .bubble .scroll-body{transition:opacity .16s ease;transform:scaleX(1);}
    .bubble .scroll-inner{transition:opacity .16s ease;}
  }

  .hint{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);color:rgba(70,40,110,0.6);font-family:'Poppins',sans-serif;font-size:12px;text-align:center;pointer-events:none;z-index:3;}
  .loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-dim);font-size:13px;pointer-events:none;z-index:3;}

  .side-tag{position:absolute;top:43%;transform:translateY(-50%);display:flex;align-items:center;gap:16px;pointer-events:none;z-index:3;}
  .side-tag.left{left:5%;flex-direction:row-reverse;}
  .side-tag.right{right:5%;flex-direction:row;}
  .side-tag .tag-dot{width:14px;height:14px;border-radius:50%;flex:none;}
  .side-tag.left .tag-dot{background:#47D1FF;box-shadow:0 0 14px rgba(71,209,255,0.85);}
  .side-tag.right .tag-dot{background:#FF6DD6;box-shadow:0 0 14px rgba(255,109,214,0.85);}
  .side-tag .tag-text{
    font-family:'Platypi',"Iowan Old Style",Georgia,serif;
    font-style:italic;
    font-size:clamp(22px, 2.3vw, 38px);
    font-weight:600;
    line-height:1.16;
    letter-spacing:.005em;
  }
  .side-tag.left .tag-text{text-align:right;color:#47D1FF;text-shadow:0 0 26px rgba(71,209,255,0.45);}
  .side-tag.right .tag-text{text-align:left;color:#FF6DD6;text-shadow:0 0 26px rgba(255,109,214,0.45);}
  @media (max-width: 900px){
    /* NB: .side-tag.left/.right (two classes) outrank a bare .side-tag rule,
       so the stacking must be declared on those same selectors to take effect. */
    .side-tag.left,
    .side-tag.right{
      top:46%;
      transform:translateY(-100%);
      flex-direction:column-reverse;
      gap:14px;
    }
    .side-tag.left{left:7%;right:auto;align-items:flex-start;}
    .side-tag.right{right:7%;left:auto;align-items:flex-end;}
    .side-tag .tag-text{font-size:clamp(20px, 6.2vw, 30px);}
    .side-tag .tag-dot{width:16px;height:16px;}
    .side-tag.left .tag-text{text-align:left;}
    .side-tag.right .tag-text{text-align:right;}
  }


  /* ---- podium ---- */
  #podium{
    position:absolute;
    left:50%;
    top:79%;
    transform:translate(-50%,-50%);
    width:360px;
    z-index:2;
    pointer-events:none;
  }
  #podium img{
    display:block;
    width:100%;
    height:auto;
  }
  #podium .halo{
    position:absolute;
    left:50%;top:26%;
    width:70%;height:90px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center, rgba(236,190,255,0.22) 0%, rgba(190,140,245,0.08) 48%, rgba(160,120,230,0) 76%);
    filter:blur(14px);
    pointer-events:none;
  }
  @media (max-width: 900px){
    #podium{width:215px;top:78%;}
  }