/* One photographic object, with independent front/back lid surfaces at a fixed hinge. */
.vloa-time{--time-header:80px;position:relative;isolation:isolate;background:#000}
.vloa-time .time-stage{position:relative;height:900px;overflow:hidden;isolation:isolate;background:#000}
.vloa-time .time-halo{display:none}
.vloa-time .time-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vloa-time .time-intro{position:absolute;z-index:1;left:7.5%;top:28%;width:55%;transform:translateY(-50%);font-size:clamp(2rem,3.8vw,5rem);font-weight:400;line-height:1.16;letter-spacing:-.045em;color:#e6ece7}
.vloa-time .time-intro>span{display:block;white-space:nowrap}
.vloa-time .time-intro>span+span{margin-top:6px}
.vloa-time .time-intro em{font-family:"VLOA Campaign",Georgia,serif;font-style:italic;font-size:1.67em;font-weight:400;line-height:1;letter-spacing:-.04em;color:var(--accent);white-space:nowrap}
.vloa-time .time-watch{position:absolute;z-index:3;left:71%;top:38%;width:min(50vw,58svh,840px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%);perspective:1800px;perspective-origin:46.3% 57%;pointer-events:none}
.vloa-time .pocket-assembly{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:46.3% 57%;transform:rotateX(10deg) rotateY(-14deg) rotateZ(-12deg)}
.vloa-time .pocket-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateZ(0);filter:brightness(.85) saturate(.77)}
.vloa-time .pocket-dial-shade,.vloa-time .pocket-dial-light{position:absolute;left:14.5%;top:25.5%;width:63.5%;aspect-ratio:1;border-radius:50%;transform:translateZ(1px);pointer-events:none}
.vloa-time .pocket-dial-shade{background:linear-gradient(170deg,#07050166,#030200b5);opacity:.1}
.vloa-time .pocket-dial-light{background:linear-gradient(135deg,transparent 40%,#ebdfb523 51%,transparent 64%),radial-gradient(ellipse at 5% 22%,#0c937920,transparent 55%);opacity:.5}
.vloa-time .pocket-lid{position:absolute;left:10.65%;top:21.7%;width:71.3%;aspect-ratio:1;transform-origin:50% 100%;transform-style:preserve-3d;transform:translateZ(4px) rotateX(-124deg)}
.vloa-time .pocket-lid-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#976022;box-shadow:0 0 0 1px #8e602c,inset 0 0 3px #f4d199;transform:translateZ(2px)}
.vloa-time .pocket-lid-face img{position:absolute;max-width:none;object-fit:fill;filter:brightness(.83) saturate(.75)}
.vloa-time .pocket-lid-front img{width:111.4%;height:111.4%;left:-5.7%;top:-4.9%}
.vloa-time .pocket-lid-back{transform:rotateX(180deg) translateZ(2px);background:#866020}
.vloa-time .pocket-lid-back img{width:107.2%;height:107.2%;left:-3.6%;top:-3.5%;filter:brightness(.8) saturate(.72)}
.vloa-time .pocket-lid-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--reflection-angle,135deg),transparent 15%,#f6e7b926 36%,#fff7db42 42%,transparent 54%,#1209024f 88%);opacity:var(--reflection-opacity,.4)}
.vloa-time .pocket-lid-back::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#fff0bd12,transparent 42%,#15100655);pointer-events:none}
.vloa-time .time-seu,.vloa-time .time-tempo{position:absolute;white-space:nowrap;line-height:.96;font-weight:400;margin:0;left:10%}
.vloa-time .time-seu{z-index:2;top:46%;font-size:clamp(4.5rem,7.9vw,10rem);letter-spacing:-.06em;color:#e6ece7}
.vloa-time .time-tempo{z-index:4;top:60%;font-family:"VLOA Campaign",Georgia,serif;font-style:italic;font-size:clamp(7rem,13.4vw,17rem);letter-spacing:-.04em;color:var(--accent);padding-right:.12em}
.vloa-time.time-motion{height:calc(240svh - var(--time-header))}
.vloa-time.time-motion .time-stage{position:sticky;top:var(--time-header);height:calc(100svh - var(--time-header));min-height:450px}
.vloa-time.time-motion .time-intro{top:37%;will-change:clip-path}
.vloa-time.time-motion .time-watch{visibility:hidden}
.vloa-time.time-motion .time-watch,.vloa-time.time-motion .pocket-assembly,.vloa-time.time-motion .pocket-lid{will-change:transform}
.vloa-time.time-motion .time-seu{top:35%;clip-path:inset(0 100% 0 0);will-change:clip-path}
.vloa-time.time-motion .time-tempo{top:48%;clip-path:inset(0 100% 0 0);will-change:clip-path}
@media(max-width:1000px) and (min-width:601px){
 .vloa-time .time-intro{left:6%;width:55%;font-size:3.8vw}
 .vloa-time .time-watch{left:72%;width:min(57vw,58svh)}
 .vloa-time .time-seu{left:7%;font-size:9vw}
 .vloa-time .time-tempo{left:7%;font-size:15.5vw}
}
@media(max-width:600px){
 .vloa-time{--time-header:70px}
 .vloa-time .time-stage{height:800px}
 .vloa-time .time-intro{left:24px;top:13%;width:calc(100% - 48px);font-size:clamp(1.1rem,6.5vw,2.4rem);line-height:1.18;letter-spacing:-.04em}
 .vloa-time .time-intro>span+span{margin-top:5px}
 .vloa-time .time-intro em{font-size:1.67em}
 .vloa-time .time-watch{left:52%;top:51%;width:min(100vw,500px);perspective:1500px}
 .vloa-time .pocket-assembly{transform:rotateX(8deg) rotateY(-8deg) rotateZ(-5deg)}
 .vloa-time .time-seu{left:24px;top:22%;font-size:clamp(2.8rem,13vw,4.7rem)}
 .vloa-time .time-tempo{left:24px;top:30%;font-size:clamp(4.8rem,24vw,8.5rem)}
 .vloa-time.time-motion{height:calc(250svh - var(--time-header))}
 .vloa-time.time-motion .time-stage{min-height:550px}
 .vloa-time.time-motion .time-intro{top:18%}
 .vloa-time.time-motion .time-seu{top:11%}
 .vloa-time.time-motion .time-tempo{top:21%}
}
@media(max-width:360px){.vloa-time .time-intro{left:20px;width:calc(100% - 40px)}.vloa-time .time-seu,.vloa-time .time-tempo{left:20px}}
@media(max-height:600px) and (min-width:601px){
 .vloa-time.time-motion .time-stage{min-height:300px}
 .vloa-time .time-watch{width:min(44vw,54svh);top:38%}
 .vloa-time .time-intro{font-size:3.8vw}
 .vloa-time .time-seu{font-size:8svh}
 .vloa-time .time-tempo{font-size:21svh}
}
/* Keep the first paint clean while the deferred scroll controller is loading. */
@media(prefers-reduced-motion:no-preference){.vloa-time:not(.time-motion) .time-watch,.vloa-time:not(.time-motion) .time-seu,.vloa-time:not(.time-motion) .time-tempo{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.vloa-time .time-stage{position:relative}.vloa-time .time-intro,.vloa-time .time-watch,.vloa-time .pocket-assembly,.vloa-time .pocket-lid,.vloa-time .time-seu,.vloa-time .time-tempo{will-change:auto}}