.wdm-watch-section {
position: relative;
width: 100%;
height: 280vh;
background: #F5F5F7;
overflow: visible;
} .wdm-watch-sticky {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background:#f5f5f7;
} #wdm-watch-scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: grab;
touch-action: none;
z-index: 5;
}
#wdm-watch-scene:active {
cursor: grabbing;
}
#wdm-watch-scene canvas {
display: block;
width: 100% !important;
height: 100% !important;
outline: none;
} .wdm-watch-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%
);
z-index: 30;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #111;
pointer-events: none;
transition:
opacity 0.6s ease,
visibility 0.6s ease;
}
.wdm-watch-loader.is-hidden {
opacity: 0;
visibility: hidden;
} .wdm-watch-quote-wrap {
position: absolute; top: 15%;
left: 7%; width: min(
520px,
36vw
);
z-index: 20;
pointer-events: none;
} .wdm-watch-quote {
position: relative;
display: inline;
margin: 0;
padding: 0;
font-family:
"Times New Roman",
Times,
serif; font-size: clamp(
38px,
3.1vw,
62px
);
font-weight: 700;
font-style: italic;
line-height: 1.08;
letter-spacing: -0.025em;
color: #171717;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
} .wdm-watch-quote::after {
content: "";
display: inline-block;
width: 2px;
height: 0.82em;
margin-left: 4px;
vertical-align: -0.06em;
background: #171717;
opacity: 0;
} .wdm-watch-quote.is-typing::after {
opacity: 1;
animation:
wdm-watch-typewriter-cursor
0.72s
steps(1)
infinite;
} .wdm-watch-quote.is-finished::after {
opacity: 0;
animation: none;
} @keyframes wdm-watch-typewriter-cursor {
0%,
45% {
opacity: 1;
}
46%,
100% {
opacity: 0;
}
} .wdm-watch-signature {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
z-index: 20;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.17em;
text-transform: uppercase;
color:
rgba(
20,
20,
20,
0.55
);
pointer-events: none;
white-space: nowrap;
} .wdm-watch-hint {
display: none !important;
} @media (max-width: 1024px) {
.wdm-watch-section {
height: 260vh;
}
.wdm-watch-quote-wrap {
top: 11%;
left: 5%;
width: 42vw;
}
.wdm-watch-quote {
font-size: clamp(
32px,
4.2vw,
48px
);
line-height: 1.06;
}
} @media (max-width: 767px) {
.wdm-watch-section {
height: 240vh;
}
.wdm-watch-quote-wrap {
top: 6%;
left: 7%;
width: 86%;
}
.wdm-watch-quote {
font-size: clamp(
30px,
8vw,
42px
);
line-height: 1.04;
}
.wdm-watch-signature {
bottom: 18px;
width: 92%;
text-align: center;
white-space: normal;
font-size: 9px;
letter-spacing: 0.11em;
}
}