@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('./assets/fonts/bodoni-italic.ttf')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/bodoni-regular.ttf')}

*{box-sizing:border-box}html{background:#e9e4d9}body{margin:0;color:#283b39;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body.intro{height:100svh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none}body.journey{height:880vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:10px}button:disabled{cursor:default}#scene{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#backdrop,#halo,#trail,#mist{display:none}
header,footer{position:fixed;left:4vw;right:4vw;z-index:5;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2.4px}header{top:34px;pointer-events:none}footer{bottom:28px}footer button{font-size:9px;letter-spacing:1.4px;padding:10px 0}#footer-hint{font-size:9px;letter-spacing:2px;opacity:.6}body.intro header,body.intro footer{visibility:hidden}main{position:relative;z-index:3;pointer-events:none}
#entrance{position:fixed;inset:0;text-align:center;padding-top:5.5vh}.begin-wrap{width:100%}#entrance .eyebrow,.begin-dot{display:none}#begin{pointer-events:auto;font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(64px,6.2vw,112px);letter-spacing:-.05em;line-height:1.12;padding:0 25px 12px;transition:opacity .6s,color .4s;touch-action:none} #begin{opacity:.74;color:#46594f}#begin:disabled{opacity:.32}body[data-stage=confirming] #begin{opacity:.35}#begin:hover{color:#54645b}.gesture-guide{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);margin:0;opacity:.55;transition:opacity .65s}.gesture-guide svg{width:220px;height:155px;overflow:visible}.gesture-guide path{fill:none;stroke:#6c7d72;stroke-opacity:.5;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.gesture-guide circle{fill:#6c7d72;opacity:.4}.gesture-guide:after{content:'';position:absolute;inset:0;filter:blur(8px);opacity:.1}body[data-stage=confirming] .gesture-guide,body[data-stage=entering] .gesture-guide{opacity:0}
#hint{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.load-error #hint{clip:auto;width:auto;height:auto;position:fixed;left:15%;right:15%;top:60%;font-size:13px;white-space:normal}
#story,#finale{position:fixed;inset:0;opacity:0;visibility:hidden}#story-left,#story-right{position:absolute;top:40%;width:26%}#story-left{left:6vw}#story-right{right:5vw;top:48%;text-align:right}.eyebrow{font-size:9px;letter-spacing:3px;line-height:1.6;margin:0 0 26px;opacity:.55}h1,h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:clamp(38px,4.5vw,78px);line-height:1.02;letter-spacing:-.045em;margin:0}#finale{padding-left:9vw;padding-top:28vh}#finale h2{font-size:clamp(52px,6.7vw,112px)}.actions{margin-top:40px;display:flex;flex-direction:column;align-items:start;gap:18px;pointer-events:auto}.actions button{font-size:19px;border-bottom:1px solid #a6ada7;padding:0 0 12px;min-width:230px;text-align:left}.actions button span{float:right}.actions button+button{font-size:13px;border:0;opacity:.65}.placeholder{font-size:10px;opacity:.45;margin-top:18px;max-width:250px;line-height:1.5}#credits{position:fixed;z-index:10;bottom:80px;right:4vw;max-width:370px;background:#1b282b;color:#eee9dd;padding:20px;font-size:11px;line-height:1.8}#credits a{color:inherit}#line-progress{position:fixed;bottom:0;left:0;height:1px;background:#b4a17a;z-index:12;transform-origin:left;transform:scaleX(0);width:100%}
@media(max-width:700px){header{top:24px;font-size:7px;letter-spacing:1px}header span:first-child{max-width:135px}footer{bottom:20px}#footer-hint{font-size:7px;letter-spacing:1px}#entrance{padding-top:5vh}#begin{font-size:15vw;padding-bottom:12px}.gesture-guide{top:43%}.gesture-guide svg{width:155px;height:120px}.eyebrow{font-size:8px;letter-spacing:2px}#story-left,#story-right{width:80%;left:8vw;right:auto;text-align:left;top:18%}#story-right{top:18%;bottom:auto}h1,h2{font-size:38px}#finale{padding:19vh 8vw 0}#finale h2{font-size:14vw}.actions{margin-top:26px}.actions button{font-size:17px}.placeholder{max-width:180px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Shared opening clock: a strong first demonstration settles into the film. */
html{background:#193e43}
#begin{filter:drop-shadow(0 0 12px rgba(239,235,220,.6))}
#begin:hover{opacity:1}
body.intro #begin{cursor:none}
body[data-stage=arriving] #begin{opacity:var(--opening-title-opacity,0);color:var(--opening-title-color,#eae5da);transition:none}
/* A broad, tall gesture fills the opening; the viewport wrapper prevents overflow. */
.gesture-guide{left:0;top:0;width:100vw;height:100svh;transform:none;overflow:hidden;opacity:0;transition:opacity .22s}
.gesture-guide svg{display:block;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(1660px,92vw);height:118svh;overflow:visible}
.gesture-guide path{stroke-dasharray:1;stroke-dashoffset:0}
.gesture-guide .guide-under{stroke:#fffbea;stroke-width:14;stroke-opacity:calc(.22 + .50 * var(--guide-emphasis,0));filter:blur(1.3px)}
.gesture-guide .guide-base{stroke:#729083;stroke-width:7;stroke-opacity:.31;filter:blur(.25px)}
.gesture-guide .guide-trace{stroke:#315f56;stroke-width:6;stroke-opacity:calc(.39 + .56 * var(--guide-emphasis,0));filter:blur(.35px);animation:none}
.gesture-guide .guide-start-ring{fill:none;stroke:#739082;stroke-width:1;opacity:.27}
.gesture-guide .guide-start{fill:#718c7b;opacity:.5}
.gesture-guide .guide-cursor{fill:#fffbed;stroke:#a1b2a0;stroke-width:.4;filter:drop-shadow(0 0 2px #fff5dd);r:3.3px;animation:none}
body[data-stage=arriving] .guide-start-ring,body[data-stage=arriving] .guide-start{opacity:0}
@media(max-width:700px){
 #entrance{padding-top:5.5svh}
 #begin{font-size:clamp(48px,15vw,76px)}
 .gesture-guide svg{left:50%;top:51%;width:116vw;height:100svh}
}
@media(prefers-reduced-motion:reduce){.guide-cursor{display:none}}

/* Visible guide is composited inside the same material as the film and hand. */
.gesture-guide svg{opacity:0}

/* Reconstruction copy passes through the petrol space. */
#story-last{position:absolute;left:6vw;top:45%;width:27%;opacity:0}#story-right{top:43%}#story-left,#story-right,#story-last{will-change:transform,opacity}
@media(max-width:700px){#story-left,#story-right,#story-last{left:7vw;top:13%;width:86%;text-align:left}#story h1,#story h2{font-size:36px}body.journey{height:930svh}}

/* Semantic copy is retained; its visible counterpart is etched into the 3D panes. */
#story{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}