.surface{
      --glow-1:rgba(122,223,255,.1);
      --glow-2:rgba(147,164,255,.09);
      --texture-top:radial-gradient(1000px 580px at 12% 8%, rgba(255,255,255,.04), transparent 56%);
      --texture-pattern:linear-gradient(90deg, rgba(122,223,255,.022), transparent 18%, transparent 82%, rgba(122,223,255,.022));
      --eyebrow-dot:rgba(228,236,255,.76);
      --eyebrow-shadow-1:rgba(228,236,255,.08);
      --eyebrow-shadow-2:rgba(228,236,255,.22);
      --cut-accent:rgba(228,236,255,.32);
      --surface-door-progress:0;
      --surface-page-angle:-92deg;
      --surface-text-fade-start:.04;
      --surface-text-fade-mult:1.74;
      --surface-mol-fade-start:.18;
      --surface-mol-fade-mult:1.7;
      --surface-level-gap:clamp(70px, 11vh, 148px);
      --surface-orbit-front-x:0px;
      --surface-orbit-front-y:0px;
      --surface-orbit-mol-x:0px;
      --surface-orbit-mol-y:0px;
      --surface-speed-burst:0;
      perspective:1500px;
      perspective-origin:8% 50%;
    }

    #surface.layer{
      min-height:100svh;
      padding-bottom:0;
    }

    #surface .section-wrap.surface-stage{
      min-height:max(520px, calc(100svh - var(--header-h)));
      display:flex;
      align-items:center;
      overflow:visible;
      position:relative;
    }

    #surface .surface-rotor{
      position:relative;
      width:100%;
      min-height:max(520px, calc(100svh - var(--header-h)));
      transform-style:preserve-3d;
      transform:none;
    }

    #surface .surface-face{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      backface-visibility:hidden;
    }

    #surface .surface-face-front{
      justify-content:flex-start;
      transform-origin:0% 50%;
      transform-style:preserve-3d;
      transform:
        translateX(calc(var(--surface-door-progress) * -1.2vw + var(--surface-orbit-front-x) + var(--surface-speed-burst) * -5.2vw))
        rotateY(calc(var(--surface-door-progress) * var(--surface-page-angle)));
      z-index:2;
    }

    #surface .surface-face-front::after{
      content:none;
    }

    #surface .surface-scroll-arrow{
      position:absolute;
      left:50%;
      bottom:clamp(24px, 20svh, 160px);
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:4px;
      width:48px;
      height:74px;
      text-decoration:none;
      transform:translateX(-50%);
      opacity:.84;
      transition:opacity .2s ease, transform .24s ease;
    }

    #surface .surface-scroll-arrow-glyph{
      display:block;
      width:17px;
      height:17px;
      border-right:2px solid rgba(226,240,255,.32);
      border-bottom:2px solid rgba(226,240,255,.32);
      transform:rotate(45deg);
      filter:drop-shadow(0 0 4px rgba(116,220,255,0));
      opacity:.14;
    }

    #surface .surface-scroll-arrow-glyph:nth-child(1){
      animation:surfaceScrollChevronA 2.2s linear infinite;
    }

    #surface .surface-scroll-arrow-glyph:nth-child(2){
      animation:surfaceScrollChevronB 2.2s linear infinite;
    }

    #surface .surface-scroll-arrow:hover{
      opacity:1;
      transform:translateX(-50%) translateY(2px);
    }

    #surface .surface-scroll-arrow:focus-visible{
      outline:2px solid rgba(122,223,255,.5);
      outline-offset:4px;
      border-radius:999px;
      opacity:1;
    }

    @keyframes surfaceScrollChevronA{
      0%{
        transform:translateY(0) rotate(45deg);
        opacity:0;
        border-color:rgba(226,240,255,.2);
        filter:drop-shadow(0 0 4px rgba(116,220,255,0));
      }
      18%{
        opacity:1;
        border-color:rgba(242,250,255,.76);
        filter:drop-shadow(0 0 8px rgba(116,220,255,.22));
      }
      34%{
        transform:translateY(4px) rotate(45deg);
        opacity:.22;
        border-color:rgba(226,240,255,.28);
        filter:drop-shadow(0 0 4px rgba(116,220,255,.06));
      }
      100%{
        opacity:0;
        border-color:rgba(226,240,255,.2);
        filter:drop-shadow(0 0 4px rgba(116,220,255,0));
      }
    }

    @keyframes surfaceScrollChevronB{
      0%{
        transform:translateY(-4px) rotate(45deg);
        opacity:0;
        border-color:rgba(226,240,255,.2);
        filter:drop-shadow(0 0 4px rgba(116,220,255,0));
      }
      32%{
        opacity:0;
      }
      50%{
        opacity:1;
        border-color:rgba(242,250,255,.76);
        filter:drop-shadow(0 0 8px rgba(116,220,255,.22));
      }
      66%{
        transform:translateY(4px) rotate(45deg);
        opacity:.22;
        border-color:rgba(226,240,255,.28);
        filter:drop-shadow(0 0 4px rgba(116,220,255,.06));
      }
      100%{
        transform:translateY(8px) rotate(45deg);
        opacity:0;
        border-color:rgba(226,240,255,.2);
        filter:drop-shadow(0 0 4px rgba(116,220,255,0));
      }
    }

    #surface .surface-face-molecules{
      justify-content:flex-end;
      transform:
        translateX(calc((1 - var(--surface-door-progress)) * 8.5vw + var(--surface-orbit-mol-x) + var(--surface-speed-burst) * 4.6vw));
      opacity:clamp(0, calc((var(--surface-door-progress) - var(--surface-mol-fade-start)) * var(--surface-mol-fade-mult)), 1);
      pointer-events:auto;
      z-index:1;
    }

    #surface .surface-face-front .content{
      margin-top:clamp(-72px, -9vh, -28px);
    }

    #surface .surface-molecule-field{
      position:relative;
      width:min(660px, 50vw);
      height:min(440px, 58vh);
      transform:
        translateX(calc((1 - var(--surface-door-progress)) * 3.2vw + var(--surface-speed-burst) * 2.4vw));
      opacity:clamp(0, calc((var(--surface-door-progress) - .08) * 1.65), .98);
      filter:blur(calc((1 - clamp(0, calc((var(--surface-door-progress) - var(--surface-mol-fade-start)) * var(--surface-mol-fade-mult)), 1)) * 1.2px));
      pointer-events:auto;
    }

    .surface-molecule-structure{
      position:absolute;
      width:clamp(240px, 24vw, 360px);
      height:clamp(124px, 13.5vw, 198px);
      --entry-shift-x:0px;
      --entry-rot:0deg;
      filter:drop-shadow(0 10px 22px rgba(10,26,44,.45));
      animation:surfaceMolDrift var(--drift, 8.2s) ease-in-out infinite;
      animation-delay:var(--delay, 0s);
      transform-origin:center center;
      will-change:transform, opacity;
    }

    .surface-molecule-canvas{
      width:100%;
      height:100%;
      display:block;
      pointer-events:auto;
    }

    .surface-molecule-structure:nth-child(1){
      left:8px;
      top:32px;
      --drift:7.2s;
      --delay:-1.4s;
      --dx:18px;
      --dy:-10px;
    }

    .surface-molecule-structure:nth-child(2){
      right:6px;
      top:18%;
      --drift:7.8s;
      --delay:-3.2s;
      --dx:-12px;
      --dy:12px;
    }

    .surface-molecule-structure:nth-child(3){
      left:20%;
      bottom:18px;
      --drift:7.4s;
      --delay:-2.1s;
      --dx:11px;
      --dy:10px;
    }

    @keyframes surfaceMolDrift{
      0%, 100%{
        transform:translate3d(var(--entry-shift-x), 0, 0) rotateZ(var(--entry-rot)) scale(1);
        opacity:.84;
      }
      50%{
        transform:translate3d(calc(var(--entry-shift-x) + var(--dx)), var(--dy), 0) rotateZ(var(--entry-rot)) scale(1.035);
        opacity:1;
      }
    }

    #surface.layer.is-visible .surface-face-front .content{
      transform-origin:left center;
      transform:
        translate3d(calc(var(--surface-door-progress) * -5.8vw + var(--surface-speed-burst) * -2.6vw), 0, 0)
        rotateZ(calc(var(--surface-door-progress) * -0.75deg))
        scale(calc(1 - var(--surface-door-progress) * .025));
      opacity:clamp(0, calc(1 - (var(--surface-door-progress) - var(--surface-text-fade-start)) * var(--surface-text-fade-mult)), 1);
      filter:blur(calc(clamp(0, calc((var(--surface-door-progress) - var(--surface-text-fade-start)) * var(--surface-text-fade-mult)), 1) * 1.15px));
    }