/* Immersive layer for the studio site. Loaded after site.css.
   Part 1 is plain layout that also works with no script. Part 2 (.fx, .gl) is enhancement only:
   .fx is set by fx.js when GSAP is present and the visitor has not asked for reduced motion;
   .gl is set when the WebGL background is running. Without them the page is the calm static version. */

/* ---------- part 1: layout ---------- */
body{position:relative}
.hero,.sec,.end{position:relative;z-index:1}
.hero{z-index:2}
.sec:not(.dark){background:var(--bone)}

/* headline in three lines */
.ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}.ln>span{display:block}

/* the three services on the first screen */
.tri{border-top:1px solid var(--brule)}
.tri a{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--brule);text-decoration:none;transition:padding .35s var(--e)}
.tri b{font-size:clamp(24px,2.5vw,36px);font-weight:600;letter-spacing:-.028em;line-height:1.1}
.tri span{grid-column:1;color:var(--b82);font-size:16px}
.tri i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:14px;color:var(--lilac);letter-spacing:.02em;white-space:nowrap}
@media(hover:hover){.tri a:hover{padding-left:12px}}

/* compact header after the first screen (wide screens; phones have the bottom bar) */
.mini{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad);background:rgba(42,16,51,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(-105%);transition:transform .45s var(--e)}
.mini.on{transform:none}.mini img{display:block;height:34px;width:auto}.mini .btn{min-height:40px;padding:0 16px;font-size:15px}
@media(max-width:920px){.mini{display:none}}

/* act 1: websites */
.sites{padding-bottom:var(--sec)}
.reel{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.dm .shot{--h:clamp(300px,34vw,460px);height:var(--h);flex:none}
.dm .shot img{transition:none}.dm:hover .shot img,.dm:focus-visible .shot img{transform:none}
.pg{display:block;position:relative;transition:transform 7s cubic-bezier(.3,0,.3,1)}
.dm:hover .pg,.dm:focus-visible .pg{transform:translateY(calc(-100% + var(--h)))}
.born{display:none;position:absolute;left:12.8%;top:15%;width:0;height:0}
.born i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2px solid var(--coral);animation:ring 1.8s ease-out infinite}
.born i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--coral)}
.born em{position:absolute;left:24px;top:-14px;white-space:nowrap;font:500 13px/28px var(--mono);font-style:normal;background:var(--plum);color:var(--bone);padding:0 12px;border-radius:99px}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,90,67,.55)}100%{box-shadow:0 0 0 18px rgba(255,90,67,0)}}
.sites .facts{margin-top:clamp(36px,4.4vw,64px)}
.free{margin-top:18px;color:var(--ink2);font-size:16.5px}.free a{color:var(--ink);text-underline-offset:4px}
.dark .free{color:var(--b82)}.dark .free a{color:var(--bone)}
@media(max-width:920px){.track{grid-template-columns:1fr}}

/* offers in three groups */
.of .grp{display:block;padding:clamp(28px,3.2vw,48px) 0 12px;border-top:0;font:500 14px/1 var(--mono);color:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.of .grp:first-child{padding-top:0}.of .grp+li{border-top:1px solid var(--ink)}

/* ---------- part 2: enhancement ---------- */
html.fx{scroll-behavior:auto}
/* intro: hidden until the script shows it; a timer in <head> removes .fxp if the script never runs */
.fxp .ln>span{transform:translateY(108%)}
.fxp .lede,.fxp .tri li,.fxp .cfg{opacity:0}

/* living background behind the dark scenes */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:none;pointer-events:none}
.gl #gl{display:block}
.gl .hero,.gl .story,.gl .end{background:transparent}

/* the thread */
#thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;overflow:visible}
#thread path{fill:none;stroke:var(--coral);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#thread .d{fill:var(--coral)}#thread .h{fill:rgba(255,90,67,.24)}
.btn.arrived{animation:arrived 1.3s var(--e)}
@keyframes arrived{0%{box-shadow:0 0 0 0 rgba(255,90,67,.75)}100%{box-shadow:0 0 0 30px rgba(255,90,67,0)}}

@media(min-width:921px){
 /* websites: a pinned reel that moves sideways as you scroll */
 .fx #sites{padding-top:58px}
 .fx .reelwrap{height:300vh}
 .fx .reelpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
 .fx .reelpin .hd{margin-bottom:clamp(18px,3vh,40px)}
 .fx .reel{max-width:none;margin:0;padding:0}
 .fx .track{display:flex;width:max-content;gap:clamp(20px,2.4vw,36px);padding:0 var(--pad);will-change:transform}
 .fx .dm{width:min(64vw,1000px);flex:none}.fx .dm:hover{transform:none}
 .fx .dm .shot{--h:min(54vh,580px)}
 .fx .pg{transition:none;will-change:transform}.fx .dm:hover .pg,.fx .dm:focus-visible .pg{transform:none}
 .fx .born{display:block}
 /* the product window has depth */
 .fx .stage{perspective:1400px}
 .fx .stage .app{transform-style:preserve-3d;will-change:transform}
 .fx .cph.on{transform:translateZ(46px) rotate(2deg)}
 .fx .ch.on::after{background:var(--plum);box-shadow:0 0 0 1px var(--coral)}
 /* the timeline draws itself */
 .fx .days{border-top-color:transparent;position:relative}
 .fx .days::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(var(--k,0));transform-origin:left}
 .fx .days li::before{transform:scale(var(--d,0));transition:transform .5s var(--e)}
}
/* by hand: the list crosses itself out */
.fx .long li{position:relative}
.fx .long li::after{content:"";position:absolute;left:44px;right:0;top:50%;height:1.5px;background:var(--coral);transform:scaleX(var(--k,0));transform-origin:left}
.fx .fin h2{transform-origin:left center}