/* DOPEN · sito agenzia · apertura (2026-11-02, sul modello di Studiora)
   Una schermata con tutto al centro: etichetta, logo «dopen» grandissimo, l'enunciato (h1) e due pulsanti; testi tutti minuscoli
   come il logo (2026-11-02, richiesta di Francesco; gli archi laterali sono stati tolti lo stesso giorno).
   Sotto, il collage di pagine che sale scorrendo (hero.js). Il logo «dopen» col cerchio e' gia' in index.html dentro .bh-w (c'e' anche prima degli script); ?wm= lo cambia (hero.js). */
.bh{position:relative}
.bh-stage{
  position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;
  padding:clamp(24px,6svh,72px) var(--g) clamp(40px,8svh,96px); /* in cima la barra non c'e' (style.css): niente spazio per lei */
}
.bh-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;will-change:transform}
.bh-tag,.bh-h1{text-transform:lowercase}
.bh-tag{color:var(--mute);font-size:15px;letter-spacing:-.005em;margin-bottom:clamp(14px,2.4svh,28px)}
/* logo: a tutta larghezza utile (2026-11-03: «piu' grande»), mai piu' alto di quanto la schermata permette accanto al resto (3,25:1) */
.bh-mark{width:min(100%,1800px,calc((100svh - 290px) * 3.25));min-width:min(100%,300px);color:var(--ink);pointer-events:none}
.bh-w{display:block;font:800 clamp(64px,14vw,220px)/1 var(--sans);letter-spacing:-.045em;white-space:nowrap}
.bh-h1{margin-top:clamp(18px,3svh,36px);max-width:30ch;font-weight:500;font-size:clamp(20px,1.75vw,30px);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
/* maschera di ogni parola larga abbastanza per puntini e gambe (g, y): niente lettere tagliate */
.bh-h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .04em .24em;margin:-.1em -.04em -.24em}
.bh-h1 .wg{white-space:nowrap}
.bh-h1 .wi{display:inline-block}
.bh-h1 .acc,.bh-h1 em{color:var(--acc);font-style:normal}
.js .bh-h1:not(.is-split){opacity:0;animation:bhFail 0s 1.6s forwards}
@keyframes bhFail{to{opacity:1}}
.bh-sub{color:var(--mute);font-size:16px;line-height:1.5;max-width:44ch;text-wrap:pretty}
.bh-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3.6svh,40px)}
.js .bh-tag,.js .bh-cta{opacity:0;animation:bhFail 0s 2.6s forwards}
.bh.is-shown .bh-tag{opacity:1;animation:none}
.bh.is-shown .bh-cta{animation:none}
/* etichetta e titolo lettera per lettera (hero.js divide in .ch): ogni lettera si scrive da sinistra, tutte insieme e insieme
   al logo; --t0 = quando partono (--via), --pen = quanto durano */
@property --scr{syntax:'<percentage>';inherits:false;initial-value:140%}
.is-ink .ch{-webkit-mask:linear-gradient(90deg,#000 calc(var(--scr) - 40%),transparent var(--scr));mask:linear-gradient(90deg,#000 calc(var(--scr) - 40%),transparent var(--scr));
  animation:chScr var(--pen,.85s) linear var(--via,0s) both}
@keyframes chScr{from{--scr:0%}}

/* collage (2026-11-03, sul modello di Studiora): una finestra alta fissa; colonne larga/stretta alternate (2:1) che scorrono
   da sole, le larghe in su e le strette in giu' (hero.js le duplica e le muove). Schede arrotondate: le larghe col sito da computer (pagina intera
   tagliata in alto o schermata 16:10), le strette col sito da telefono. Telefono 2 colonne, tablet 3, computer 5. */
.bh-wall{position:relative;overflow:hidden;padding:0 var(--g)}
.bh-col{position:relative;display:grid;grid-template-columns:2fr 1fr;gap:8px;height:clamp(440px,128vw,640px);overflow:hidden}
.bh-c{display:flex;flex-direction:column;gap:8px;will-change:transform}
.bh-c:nth-child(n+3){display:none}
.bh-i{position:relative;flex:none;overflow:hidden;border-radius:10px;background:var(--bg2)}
.bh-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;backface-visibility:hidden}
.bh-i--w{aspect-ratio:16/10}
.bh-i--t{aspect-ratio:3/4}
.bh-i--l{aspect-ratio:4/5}
.bh-i--x{aspect-ratio:2/3}
.bh-i--p{aspect-ratio:390/844}
/* ellisse nera larga quanto lo schermo: parte sotto il bordo della finestra (nascosta) e sale scorrendo (hero.js),
   coprendo il fondo del collage con una curva verso l'alto, come la «Hero Round BG» di Studiora */
.bh-dome{position:absolute;left:50%;bottom:0;z-index:2;width:100vw;height:15.6vw;min-height:90px;margin-left:-50vw;border-radius:50%;
  background:var(--bg);transform:translateY(38%);will-change:transform;pointer-events:none} /* senza movimento resta ferma qui; niente translate: lo riscrive GSAP */

@media (max-width:599px){
  .bh-mark{width:100%}
  .bh-cta{width:100%;max-width:360px}
  .bh-cta .btn{flex:1 1 100%}
}
@media (min-width:600px){
  .bh-col{grid-template-columns:2fr 1fr 2fr;height:clamp(520px,80vw,760px)}
  .bh-c:nth-child(3){display:flex}
}
@media (min-width:900px){
  .bh-col{grid-template-columns:2fr 1fr 2fr 1fr 2fr;gap:12px;height:min(59vw,1000px)}
  .bh-c{gap:12px}
  .bh-c:nth-child(n){display:flex}
  .bh-i{border-radius:12px}
}

/* movimento ridotto: tutto visibile */
@media (prefers-reduced-motion:reduce){
  .js .bh-h1:not(.is-split),.js .bh-tag,.js .bh-cta{opacity:1;animation:none}
  .is-ink .ch{animation:none;-webkit-mask:none;mask:none}
}

/* ---------- marchio: tre trattamenti in prova (?wm=1|2|3, vedi hero.js) ----------
   Ogni variante e' un tracciato col viewBox tagliato sull'inchiostro, largo quanto la riga utile:
   tocca i due margini al pixel. --mh = altezza reale del marchio, serve al fermo e allo spazio dell'enunciato. */
.bh[data-wm] .bh-w{font-size:0;line-height:0;margin-left:0;text-box:normal;transform:none}
.bh[data-wm="1"]{--mh:calc((100cqi - 2 * var(--g)) * .31345)}
.bh[data-wm="2"]{--mh:calc((100cqi - 2 * var(--g)) * .21485)}
.bh[data-wm="3"]{--mh:calc((100cqi - 2 * var(--g)) * .22722)}
.wm{display:block;width:100%;height:auto}
.wm path,.wm rect{fill:var(--ink)}

/* 1 · d|open: il logo a tutta larghezza; le lettere salgono dalla loro maschera, la barra lampeggia e resta */
.wm1{overflow:hidden}
.wm1 .wm-bar{fill:var(--acc)}
.wm1 .wm-g,.wm1 .wm-bar{transform-box:view-box}
.wm-play .wm1 .wm-g{animation:wmRise 1.25s cubic-bezier(.16,1,.3,1) both}
.wm-play .wm1 .wm-g:nth-of-type(2){animation-delay:.16s}
.wm-play .wm1 .wm-g:nth-of-type(3){animation-delay:.22s}
.wm-play .wm1 .wm-g:nth-of-type(4){animation-delay:.28s}
.wm-play .wm1 .wm-g:nth-of-type(5){animation-delay:.34s}
.wm-play .wm1 .wm-g:first-child{animation-delay:.1s}
.wm-play .wm1 .wm-bar{transform-origin:50% 100%;animation:wmBar .7s cubic-bezier(.16,1,.3,1) .05s both,wmBlink 1.1s steps(1,end) 1.1s 3}
@keyframes wmRise{from{transform:translateY(102%)}to{transform:none}}
@keyframes wmBar{from{transform:scaleY(0)}to{transform:none}}
@keyframes wmBlink{50%{opacity:0}}

/* 2 · contorno sottile che si riempie scorrendo; il punto e' l'unico accento */
.wm2,.wm3{position:relative}
.wm2>svg,.wm3>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wm2 .wm-line path{fill:none;stroke:var(--ink);stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-opacity:.92}
.wm2 .wm-dot path{fill:var(--acc);stroke:none}
.wm-fw{position:absolute;left:0;right:0;top:-4%;bottom:-4%;overflow:hidden;will-change:transform}
.wm-fi{position:absolute;left:0;width:100%;top:3.7037%;height:92.5926%;will-change:transform}
.wm-fi svg{display:block;width:100%;height:100%;overflow:visible}
.wm-play .wm2 .wm-line{animation:wmFade 1.4s ease .15s both}
.wm-play .wm2 .wm-line .wm-dot{animation:wmDot .9s cubic-bezier(.16,1,.3,1) .7s both;transform-box:fill-box;transform-origin:50% 50%}
@keyframes wmFade{from{opacity:0}}
@keyframes wmDot{from{transform:scale(0)}}

/* 3 · D | OPEN: si aprono su una fessura magenta (solo transform e clip-path) */
.wm3{overflow:visible}
.wm-l,.wm-r{will-change:transform}
.wm-slit{position:absolute;top:-10.07%;bottom:-10.07%;background:var(--acc);clip-path:inset(0 var(--a) 0 var(--a))}
.bh[data-wm="3"] .bh-mark{overflow-x:clip}
.wm-play .wm3 .wm-slit{animation:wmSlit 1s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes wmSlit{from{clip-path:inset(50% var(--a) 50% var(--a))}}

@media (prefers-reduced-motion:reduce){
  .wm-play .wm1 .wm-g,.wm-play .wm1 .wm-bar,.wm-play .wm2 .wm-line,.wm-play .wm3 .wm-slit{animation:none}
}

/* landing piu pulita: niente sottotitolo (richiesta del proprietario) */
.bh-sub{display:none}

/* ---------- apertura: cerchio che si disegna e punto magenta nella fessura, poi la pagina ----------
   Solo CSS: finisce da sola anche se il JS non parte. hero.js ritarda il titolo di PRE secondi. */
#pre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);pointer-events:none;
  animation:preOut .55s cubic-bezier(.65,0,.35,1) 1.95s forwards}
#pre svg{width:clamp(64px,8vw,104px);height:auto;overflow:visible;animation:preZoom .55s cubic-bezier(.65,0,.35,1) 1.95s forwards}
.pre-ring{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:101;
  animation:preDraw 1.25s cubic-bezier(.65,0,.35,1) .05s forwards}
.pre-dot{fill:var(--acc);animation:preDot .5s cubic-bezier(.34,1.56,.64,1) 1.3s both}
@keyframes preDraw{to{stroke-dashoffset:0}}
/* il punto cresce cambiando il raggio, non con scale(): uno scale da 0 lo fa rasterizzare minuscolo e poi lo stira (sgranato) */
@keyframes preDot{from{r:0}}
@keyframes preZoom{to{transform:scale(.86);opacity:0}}
@keyframes preOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#pre{display:none}}
/* porta «press to dopen» (2026-11-02): finche' non si preme c'e' solo la scritta, al centro; premendo la scritta sparisce
   e il cerchio compare (togliendo .is-wait in index.html tutte le animazioni partono da zero, col suono di suono.js).
   Il logo dentro la scritta ha la riga di base al 74% della sua altezza: vertical-align lo rimette in riga col testo. */
#pre.is-wait{pointer-events:auto;cursor:pointer;animation:none}
#pre.is-wait svg{opacity:0;animation:none}
#pre.is-wait .pre-ring,#pre.is-wait .pre-dot{animation:none}
.pre-go{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap;
  padding:16px 22px;background:none;border:0;font:500 clamp(18px,1.6vw,22px)/1 var(--sans);letter-spacing:-.015em;color:var(--mute);cursor:pointer;
  animation:preHint .9s cubic-bezier(.16,1,.3,1) .3s both}
.pre-go[hidden]{display:none}
.pre-go img{display:inline-block;height:1.15em;width:auto;vertical-align:-.296em;margin-left:-.13em}
.pre-go:focus-visible{outline:0}
@media (hover:hover){.pre-go{transition:color .3s}#pre.is-wait:hover .pre-go{color:var(--ink)}}
@keyframes preHint{from{opacity:0;transform:translateY(8px)}}
#pre.is-gate:not(.is-wait) .pre-go{opacity:0;transition:opacity .2s}

/* ---------- marchio predefinito: il logo «dopen», la o e' il cerchio aperto col punto magenta (come l'apertura) ---------- */
.bh[data-wm="o"]{--mh:calc((100cqi - 2 * var(--g)) * .30785)}
.wmo{overflow:visible}
.wmo .o-ring{fill:none;stroke:var(--ink);stroke-width:210;stroke-linecap:round;stroke-dasharray:87 100}
.wmo .o-dot{fill:var(--acc)}
.wmo .wm-g{transform-box:view-box}
.wm-play .wmo .wm-g{animation:wmRise 1.25s cubic-bezier(.16,1,.3,1) both}
.wm-play .wmo .wm-g:nth-of-type(2){animation-delay:.08s}
.wm-play .wmo .wm-g:nth-of-type(3){animation-delay:.14s}
.wm-play .wmo .wm-g:nth-of-type(4){animation-delay:.2s}
.wm-play .wmo .o-ring{stroke-dashoffset:87;animation:preDraw 1s cubic-bezier(.65,0,.35,1) .05s forwards}
.wm-play .wmo .o-dot{animation:preDot .45s cubic-bezier(.34,1.56,.64,1) .8s both}
.wmo{clip-path:inset(-20% -5% 0 -5%)}
@media (prefers-reduced-motion:reduce){.wm-play .wmo .wm-g,.wm-play .wmo .o-ring,.wm-play .wmo .o-dot{animation:none;transform:none;stroke-dashoffset:0}}
.bh[data-wm="O"]{--mh:calc((100cqi - 2 * var(--g)) * .23992)}
.wmO .o-ring{stroke-width:300}

/* ---------- logo «dopen» (assets/logo-dopen.svg) come marchio grande: tutte le lettere si scrivono insieme ----------
   Ogni lettera ha una maschera (index.html, <defs>): un tratto bianco sulla linea centrale del glifo (pance in senso orario,
   come il cerchio, poi le aste) che si disegna e scopre il glifo vero. Tutti i tratti, «o» compresa, partono dopo --via
   (il velo d'apertura) e durano --pen: partono e finiscono insieme, come le lettere di etichetta e titolo (hero.js).
   Alla fine .mk-all copre tutto: resta il logo esatto. Senza .wm-play (niente script, movimento ridotto) il logo e' fermo. */
.wml{overflow:visible;clip-path:inset(-20% -5% 0 -5%)}
.wml .o-ring{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round;stroke-dasharray:100 110}   /* 110 e 101: da nascosta nemmeno il puntino della punta tonda */
.wml .o-dot{fill:var(--acc)}
.wml .mk-all{fill:#fff}
.wml .mk{fill:none;stroke:#fff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 110}
.wm-play .wml .mk{animation:wmInk var(--pen,.85s) linear var(--via,0s) both}
.wm-play .wml .mk-all{animation:wmAll 0s calc(var(--via,0s) + var(--pen,.85s)) both}
@keyframes wmInk{from{stroke-dashoffset:101}}
@keyframes wmAll{from{opacity:0}}
.wm-play .wml .o-ring{stroke-dashoffset:101;animation:preDraw var(--pen,.85s) linear var(--via,0s) forwards}
.wm-play .wml .o-dot{animation:preDot .45s cubic-bezier(.34,1.56,.64,1) calc(var(--via,0s) + var(--pen,.85s)) both}
@media (prefers-reduced-motion:reduce){.wm-play .wml .mk,.wm-play .wml .mk-all,.wm-play .wml .o-ring,.wm-play .wml .o-dot{animation:none;stroke-dashoffset:0}}