/* PERETZ home first screen "Wormhole" (3D): client objects unfold into their worlds, services fly through the tunnel.
   Everything is scoped under #h3d and prefixed h3d- so the site styles and these styles never touch each other. */
#h3d{
  --h3d-ink:#0b0a09; --h3d-ivory:#efe8dc; --h3d-ivory-2:rgba(239,232,220,.72); --h3d-ivory-3:rgba(239,232,220,.44);
  --h3d-line-soft:rgba(239,232,220,.09); --h3d-red:#e0282d;
  --h3d-sans:'SF Pro Display',-apple-system,'Helvetica Neue',Arial,sans-serif; --h3d-serif:'Cormorant','Cormorant Garamond',Georgia,serif;
  --h3d-gut:max(20px,4.2vw); --h3d-ease:cubic-bezier(.19,1,.22,1); --h3d-fill:cubic-bezier(.45,.05,.2,1); --h3d-top:80px;
  /* soft sheen in our reds, the way the Schoeffel buttons fill */
  --h3d-sheen:linear-gradient(90deg,rgba(214,74,60,.28) 0%,rgba(190,46,36,0) 30%,rgba(110,22,17,.3) 60%,rgba(190,46,36,0) 82%,rgba(214,74,60,.28) 100%); --h3d-brand:#be2e24;
  position:relative;height:1650vh;background:var(--h3d-ink);color:var(--h3d-ivory);font-family:var(--h3d-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased
}
#h3d *{box-sizing:border-box}
#h3d p,#h3d h1{margin:0;padding:0;text-transform:none;letter-spacing:normal}
#h3d a{color:inherit}
/* the stage runs under the site header: header and starry sky read as one */
#h3d{margin-top:calc(-1 * var(--h3d-top))}
#h3d .h3d-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#h3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#h3d .h3d-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(11,10,9,.7) 100%)}
#h3d .h3d-eyebrow{margin:0 0 28px;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--h3d-ivory-3)}

/* the headline hangs in the tunnel; the script flies it toward the viewer */
#h3d .h3d-intro{position:absolute;left:50%;top:34%;z-index:3;width:min(1120px,90vw);text-align:center;transform:translate(-50%,-50%);transform-origin:50% 50%}
#h3d .h3d-intro h1{font-family:var(--h3d-serif);font-weight:500;font-size:clamp(44px,6vw,104px);line-height:.96;letter-spacing:-.012em;color:var(--h3d-ivory);text-wrap:balance;text-shadow:0 12px 60px rgba(0,0,0,.6)}
#h3d .h3d-pre{display:block;margin-bottom:.22em;font-size:.46em;font-style:italic;font-weight:400;color:var(--h3d-ivory-2);letter-spacing:0}
#h3d .h3d-mark{position:relative;font-style:italic;white-space:nowrap}
#h3d .h3d-mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.34em;overflow:visible}
#h3d .h3d-mark path{fill:none;stroke:var(--h3d-red);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--h3d-ease) 1.4s}
#h3d.is-ready .h3d-mark path{stroke-dashoffset:0}
/* the headline is the largest paint of the page: visible from the first frame, it only rises into place */
#h3d .h3d-intro>*,#h3d .h3d-lede>*{animation:h3dRise 1.4s var(--h3d-ease) both}
#h3d .h3d-intro h1{animation-delay:.1s}#h3d .h3d-lede>*{animation-delay:.35s}
@keyframes h3dRise{from{transform:translateY(24px)}to{transform:none}}
#h3d .h3d-mark path{animation:h3dDraw 1.2s var(--h3d-ease) 1.1s both}
@keyframes h3dDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#h3d .h3d-lede{position:absolute;left:var(--h3d-gut);bottom:clamp(30px,6vh,70px);z-index:3;max-width:min(30em,60vw)}
#h3d .h3d-sub{color:var(--h3d-ivory-2);font-size:clamp(15px,1.2vw,18px);line-height:1.6}
#h3d .h3d-hint{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--h3d-ivory-3);transition-delay:.5s}
#h3d .h3d-hint span{width:56px;height:1px;background:var(--h3d-ivory-3);transform-origin:left;animation:h3dHint 2.4s var(--h3d-ease) infinite}
@keyframes h3dHint{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* services flying through the tunnel */
#h3d .h3d-svcs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#h3d .h3d-svc{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;width:12em;margin-left:-6em;text-align:center;opacity:0;visibility:hidden;transform-origin:50% 50%;text-decoration:none;color:var(--h3d-ivory);font-size:84px}
#h3d .h3d-svc small{font:400 13px/1 var(--h3d-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--h3d-red);margin-bottom:18px}
#h3d .h3d-svc strong{font-family:var(--h3d-serif);font-weight:400;font-style:italic;font-size:1em;line-height:.95;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 10px 50px rgba(0,0,0,.65)}
#h3d .h3d-svc em{font:400 14px/1.4 var(--h3d-sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--h3d-ivory-2);margin-top:18px}
#h3d .h3d-svc.is-live{pointer-events:auto}
#h3d .h3d-svc:hover strong{color:var(--h3d-red)}

/* the world we stand next to */
#h3d .h3d-cap{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,60px);z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}
#h3d .h3d-cap.is-on{opacity:1}
#h3d .h3d-cap-no{font-family:var(--h3d-serif);font-style:italic;color:var(--h3d-red);font-size:20px;margin-bottom:6px}
/* the project name in the site's own type; on hover a soft red gradient flows through it */
#h3d .h3d-cap-name{font-family:var(--h3d-sans);font-weight:400;text-transform:uppercase;font-size:clamp(44px,6.2vw,118px);line-height:.95;letter-spacing:-.015em;text-decoration:none;pointer-events:auto;color:transparent;background-image:linear-gradient(90deg,#c8392d 0%,#be2e24 12%,#9a241c 24%,#be2e24 34%,var(--h3d-ivory) 62%,var(--h3d-ivory) 100%);background-size:280% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 10px 40px rgba(0,0,0,.55))}
#h3d .h3d-cap-name:hover{background-position:0 0}
#h3d .h3d-cap-meta{margin-top:14px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--h3d-ivory-2)}
#h3d .h3d-cap-no,#h3d .h3d-cap-name,#h3d .h3d-cap-meta{transition:opacity .45s,transform .7s var(--h3d-ease),background-position 2.2s var(--h3d-fill)}
#h3d .h3d-cap.is-swap .h3d-cap-no,#h3d .h3d-cap.is-swap .h3d-cap-name,#h3d .h3d-cap.is-swap .h3d-cap-meta{opacity:0;transform:translateY(16px)}
#h3d .h3d-progress{position:absolute;right:var(--h3d-gut);top:50%;width:1px;height:28vh;transform:translateY(-50%);background:var(--h3d-line-soft);z-index:3}
#h3d .h3d-progress i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--h3d-red)}
#h3d .h3d-outro{position:absolute;left:var(--h3d-gut);right:var(--h3d-gut);bottom:clamp(40px,10vh,110px);z-index:3;max-width:900px;opacity:0;transform:translateY(30px);transition:opacity .8s,transform 1s var(--h3d-ease);pointer-events:none}
#h3d .h3d-outro.is-on{opacity:1;transform:none;pointer-events:auto}
#h3d .h3d-outro-line{margin:0 0 30px;font-family:var(--h3d-serif);font-size:clamp(36px,4.4vw,72px);line-height:1.02;color:var(--h3d-ivory)}
#h3d .h3d-link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--h3d-ease)}
#h3d .h3d-link::after{content:"  →"}
#h3d .h3d-link:hover{background-size:0 1px;background-position:100% 100%}

/* the label that follows the pointer over the 3D worlds */
#h3d .h3d-label{position:absolute;left:0;top:0;z-index:4;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:1px solid rgba(239,232,220,.85);background:rgba(11,10,9,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;font:400 10px/1 var(--h3d-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--h3d-ivory);pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .3s,transform .5s var(--h3d-ease)}
#h3d .h3d-label.is-on{opacity:1;transform:scale(1)}

/* without WebGL or with reduced motion: a plain list of the worlds */
#h3d .h3d-fallback{display:none}
#h3d.no-gl{height:auto}
#h3d.no-gl .h3d-stage{position:relative;top:auto;height:auto;overflow:visible;padding:120px 0 40px}
#h3d.no-gl canvas,#h3d.no-gl .h3d-vignette,#h3d.no-gl .h3d-cap,#h3d.no-gl .h3d-progress,#h3d.no-gl .h3d-outro,#h3d.no-gl .h3d-svcs,#h3d.no-gl .h3d-label{display:none}
#h3d.no-gl .h3d-intro{position:relative;left:auto;top:auto;transform:none;width:auto;text-align:left;padding:0 var(--h3d-gut) 28px}
#h3d.no-gl .h3d-lede{position:relative;left:auto;bottom:auto;padding:0 var(--h3d-gut) 40px;max-width:none}
#h3d.no-gl .h3d-intro>*,#h3d.no-gl .h3d-lede>*{opacity:1;transform:none}
#h3d.no-gl .h3d-hint{display:none}
#h3d.no-gl .h3d-fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0 var(--h3d-gut) 60px;list-style:none}
#h3d .h3d-fallback a{position:relative;display:block;text-decoration:none}
#h3d .h3d-fallback img{width:100%;aspect-ratio:4/3;object-fit:cover}
#h3d .h3d-fallback span{position:absolute;left:16px;bottom:12px;font-family:var(--h3d-serif);font-size:30px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}

@media (max-width:760px){
  #h3d{height:1300vh;--h3d-top:52px}
  #h3d .h3d-intro{top:30%}
  #h3d .h3d-intro h1{font-size:42px}
  #h3d .h3d-lede{max-width:none;right:var(--h3d-gut)}
  #h3d .h3d-sub{font-size:15px}
  #h3d .h3d-svc{font-size:54px}
  #h3d .h3d-svc small{font-size:11px}
  #h3d .h3d-svc em{font-size:12px}
  #h3d .h3d-cap-name{font-size:44px}
  #h3d .h3d-progress{display:none}
  #h3d.no-gl .h3d-fallback{grid-template-columns:minmax(0,1fr)}
}

/* while the 3D screen is under it, the site header turns black: ink background, light top-bar text and icons
   (only the top bar is recoloured; the mobile menu overlay keeps its own colours) */
#header{transition:background-color .35s}
html.h3d-dark #header{background-color:transparent!important;background-image:linear-gradient(rgba(11,10,9,.55),rgba(11,10,9,0))!important}
html.h3d-dark #header .logo path[fill="#2D2D2D"]{fill:#efe8dc}
html.h3d-dark #header .mobile-right-group,html.h3d-dark #header .mobile-right-group *,html.h3d-dark #header .open-nav,html.h3d-dark #header .open-nav *{color:#efe8dc}
@media screen and (min-width:1200px){
  html.h3d-dark #header .nav-list .nav-item,html.h3d-dark #header .nav-list .nav-item *:not(.counter),
  html.h3d-dark #header .lang .lang-item:not(.active),html.h3d-dark #header .portal-login,html.h3d-dark #header .portal-login *,
  html.h3d-dark #header .header-search-toggle,html.h3d-dark #header .header-search-toggle *{color:#efe8dc}
}

/* no light strip between the header and the black screen when the page is pulled down fast or bounces at the top */
#h3d::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:400px;background:#0b0a09;pointer-events:none}
html.h3d-dark{background-color:#0b0a09}
/* skip the tunnel, straight to the next block */
#h3d .h3d-skip{overflow:hidden;isolation:isolate;position:absolute;top:calc(var(--h3d-top) + 22px);right:var(--h3d-gut);z-index:4;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid rgba(239,232,220,.4);border-radius:999px;background:rgba(11,10,9,.35);color:var(--h3d-ivory);font:400 11px/1 var(--h3d-sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color 1.2s var(--h3d-fill),opacity .4s,transform .6s var(--h3d-ease)}
#h3d .h3d-skip span{display:inline-block;transition:transform .5s var(--h3d-ease)}
#h3d .h3d-skip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background-image:var(--h3d-sheen),linear-gradient(100deg,#a8281f,#be2e24 50%,#ad2a20);background-size:200% auto,100% 100%;background-position:100% center,0 0;transition:opacity 1.6s var(--h3d-fill),background-position 2.4s var(--h3d-fill)}
#h3d .h3d-skip:hover{border-color:rgba(224,40,45,.0)}
#h3d .h3d-skip:hover::before{opacity:1;background-position:0 center,0 0}
#h3d .h3d-skip:hover span{transform:translateY(3px)}
#h3d .h3d-skip.is-off{opacity:0;pointer-events:none;transform:translateY(-8px)}
#h3d.no-gl .h3d-skip{display:none}
@media (max-width:760px){#h3d .h3d-skip{top:calc(var(--h3d-top) + 14px);padding:9px 14px;font-size:10px}}

#h3d .h3d-fallback-svcs{display:none}
#h3d.no-gl .h3d-fallback-svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px 40px;margin:0;padding:0 var(--h3d-gut) 80px;list-style:none}
#h3d .h3d-fallback-svcs a{font-family:var(--h3d-serif);font-size:26px;font-style:italic;text-decoration:none;color:var(--h3d-ivory)}
#h3d .h3d-fallback-svcs span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--h3d-ivory-3)}

/* bold key phrases in the first-screen copy */
#h3d .h3d-sub strong{font-weight:600;color:var(--h3d-ivory)}
#h3d .h3d-outro-line strong{font-weight:500;font-style:italic}
#h3d .h3d-link{transition:background-size .6s var(--h3d-ease),color 1.2s var(--h3d-fill)}
#h3d .h3d-link:hover{color:var(--h3d-brand)}

/* the flight into a world (test mode /?fly=1): a veil of its picture covers the hand-off to the page */
#h3d .h3d-veil{position:fixed;inset:0;z-index:300;background:#0b0a09 center/cover no-repeat;opacity:0;pointer-events:none;transition:opacity .35s ease}
#h3d .h3d-veil.is-on{opacity:1}
html.h3d-flying #h3d .h3d-cap,html.h3d-flying #h3d .h3d-svcs,html.h3d-flying #h3d .h3d-skip,html.h3d-flying #h3d .h3d-progress{opacity:0;transition:opacity .4s}
html.h3d-dark #header .peretz-eq{color:#efe8dc}