html.cine { overflow: hidden; }
html.cine body { overflow: hidden; }
html.cine .mo-cine,
html.cine-out .mo-cine {
display: grid;
position: fixed;
inset: 0;
z-index: 240;
place-items: center;
background: var(--mo-deep, #05060b);
overflow: hidden;
contain: strict;
}
html.cine:not(.cine-run) .mo-cine,
html.cine:not(.cine-run) .mo-cine::before,
html.cine:not(.cine-run) .mo-cine * {
animation-play-state: paused !important;
}
html.cine .mo-cine::before,
html.cine-out .mo-cine::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: min(180vw, 1500px); aspect-ratio: 1;
transform: translate(-50%, -22%);
background: radial-gradient(circle at 50% 50%,
rgba(var(--mo-warm, 255,138,61), .20) 0%,
rgba(var(--mo-hot, 255,71,126), .10) 34%,
transparent 66%);
opacity: 0;
animation: mo-bloom 2.4s cubic-bezier(.22,.7,.28,1) .2s forwards;
will-change: opacity, transform;
}
@keyframes mo-bloom {
from { opacity: 0; transform: translate(-50%, -6%) scale(.72); }
to   { opacity: 1; transform: translate(-50%, -22%) scale(1); }
}
.mo-cine-wrap { position: relative; display: grid; place-items: center; width: min(86vw, 760px); }
.mo-cine-lockup {
--mo-mark-h: clamp(132px, 17vw, 212px);
position: relative;
display: grid;
justify-items: center;
gap: clamp(20px, 2.6vw, 34px);
transform-origin: 50% 50%;
}
.mo-cine-mark { width: var(--mo-mark-h); height: auto; overflow: visible; }
img.mo-cine-mark { object-fit: contain; }
.mo-cine-horizon {
position: absolute;
left: 50%;
width: 100vw;            
margin-left: -50vw;
top: calc(var(--mo-mark-h) * var(--mo-horizon, 0.711));
height: 1px;
background: linear-gradient(90deg,
transparent 0%, rgba(var(--mo-lit, 255,193,69), .40) 26%, rgba(var(--mo-lit, 255,193,69), .18) 44%,
rgba(var(--mo-lit, 255,193,69), .18) 56%, rgba(var(--mo-lit, 255,193,69), .40) 74%, transparent 100%);
transform: scaleX(0);
animation: mo-horizon 1.15s cubic-bezier(.16,.84,.28,1) .15s forwards;
}
@keyframes mo-horizon { to { transform: scaleX(1); } }
.mo-cine-mark [data-cine-draw] {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: mo-draw var(--mo-draw-dur, 1.6s) cubic-bezier(.42,.02,.22,1) var(--mo-draw-delay, .55s) forwards;
filter: drop-shadow(0 0 10px rgba(var(--mo-lit, 255,193,69), .28));
}
@keyframes mo-draw { to { stroke-dashoffset: 0; } }
.mo-cine-mark [data-cine-fill] {
fill-opacity: 0;
animation: mo-fill var(--mo-fill-dur, .85s) cubic-bezier(.3,.6,.3,1) var(--mo-fill-delay, 1.9s) forwards;
}
@keyframes mo-fill { to { fill-opacity: 1; } }
.mo-cine-mark [data-cine-draw][data-cine-fill] {
animation:
mo-draw var(--mo-draw-dur, 1.6s) cubic-bezier(.42,.02,.22,1) var(--mo-draw-delay, .55s) forwards,
mo-fill var(--mo-fill-dur, .85s) cubic-bezier(.3,.6,.3,1) var(--mo-fill-delay, 1.9s) forwards;
}
.mo-cine-mark [data-cine-rise] {
transform: translateY(22px) scale(.86);
opacity: 0;
animation: mo-rise var(--mo-rise-dur, 1.5s) cubic-bezier(.18,.72,.24,1) var(--mo-rise-delay, 1.15s) forwards;
}
@keyframes mo-rise {
0%   { transform: translateY(22px) scale(.86); opacity: 0; }
22%  { opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
img.mo-cine-mark {
clip-path: inset(0 0 100% 0);
transform: translateY(16px) scale(.97);
opacity: 0;
animation: mo-raster var(--mo-raster-dur, 1.9s) cubic-bezier(.18,.78,.24,1) var(--mo-raster-delay, .55s) forwards;
filter: drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
@keyframes mo-raster {
0%   { clip-path: inset(0 0 100% 0); transform: translateY(16px) scale(.97); opacity: 0; }
14%  { opacity: 1; }
100% { clip-path: inset(0 0 -6% 0);  transform: translateY(0) scale(1);     opacity: 1; }
}
.mo-cine-word {
margin-top: calc(var(--mo-mark-h) * var(--mo-word-lift, -0.17));
font-family: var(--mo-display, var(--font-display, Georgia, serif));
font-weight: 500;
font-size: clamp(19px, 3.1vw, 38px);
line-height: 1.1;
color: var(--mo-ink, #f4f1ea);
clip-path: inset(0 -100% 0 -100%);
padding: .12em .06em;
display: grid;
justify-items: center;
}
.mo-cine-word span::before { content: attr(data-word); }
.mo-cine-word span {
display: block;
width: max-content;
letter-spacing: .34em;
text-indent: .34em;
opacity: 0;
transform: translateY(108%);
will-change: transform, letter-spacing;
}
html.cine .mo-cine-word span,
html.cine-out .mo-cine-word span {
background-image:
linear-gradient(100deg,
transparent 40%, #fff7e2 47%, var(--mo-accent-soft, #ffe7a6) 50%, #fff7e2 53%, transparent 60%),
linear-gradient(var(--mo-ink, #f4f1ea), var(--mo-ink, #f4f1ea));
background-size: 320% 100%, 100% 100%;
background-position: 120% 50%, 0 0;
background-repeat: no-repeat, no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation:
mo-word 1.25s cubic-bezier(.16,.84,.24,1) 1.95s forwards,
mo-sheen-pass 1.15s cubic-bezier(.32,.1,.24,1) 2.45s forwards;
}
@keyframes mo-sheen-pass {
from { background-position: 120% 50%, 0 0; }
to   { background-position: -60% 50%, 0 0; }
}
@keyframes mo-word {
0%   { opacity: 0; transform: translateY(108%); letter-spacing: .34em; text-indent: .34em; }
30%  { opacity: 1; }
100% { opacity: 1; transform: translateY(0);    letter-spacing: .055em; text-indent: .055em; }
}
html.cine-out { overflow: hidden; }
html.cine-out .mo-cine {
opacity: 0;
transition: opacity .7s cubic-bezier(.4,0,.5,1) .2s;
}
html.cine-out .mo-cine-lockup {
transform: translate(var(--cfx, -34vw), var(--cfy, -38vh)) scale(var(--cfs, .2));
transition: transform .88s cubic-bezier(.62,.03,.2,1);
}
html.cine-out .mo-cine-horizon { opacity: 0; transition: opacity .3s linear; }
html.cine-out .mo-cine::before { opacity: 0; transition: opacity .4s linear; }
html.cine-cut { overflow: hidden; }
html.cine-cut .mo-cine {
display: grid; position: fixed; inset: 0; z-index: 240; place-items: center;
background: var(--mo-deep, #05060b);
opacity: 0;
transition: opacity .26s linear;
}
html.cine-out [data-cine-settle],
html.cine-cut [data-cine-settle] {
animation: mo-settle 1.5s cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes mo-settle {
from { transform: translateY(16px); }
to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.mo-cine { display: none !important; }
}
.mo-cine-wrap::after {
content: "";
position: absolute;
left: 50%;
bottom: clamp(-64px, -7vh, -40px);
width: min(180px, 42vw);
height: 2px;
transform: translateX(-50%);
border-radius: 2px;
background: rgba(231, 201, 143, .13);
opacity: 0;
transition: opacity .5s ease .4s;
pointer-events: none;
}
html.cine .mo-cine-wrap::after { opacity: 1; }
html.cine-run .mo-cine-wrap::after,
html.cine-out .mo-cine-wrap::after { opacity: 0; transition: opacity .2s ease; }
.mo-cine-wrap::before {
content: "";
position: absolute;
left: 50%;
bottom: clamp(-64px, -7vh, -40px);
width: min(180px, 42vw);
height: 2px;
margin-left: calc(min(180px, 42vw) / -2);
border-radius: 2px;
transform-origin: 0 50%;
transform: scaleX(var(--cine-p, 0));
background: var(--mo-accent-grad, linear-gradient(90deg, #ff8a3d, #ffc145));
box-shadow: 0 0 12px rgba(255, 193, 69, .45);
opacity: 0;
transition: opacity .5s ease .4s, transform .28s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
z-index: 1;
}
html.cine .mo-cine-wrap::before { opacity: 1; }
html.cine-run .mo-cine-wrap::before,
html.cine-out .mo-cine-wrap::before { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
.mo-cine-wrap::before { transition: opacity .5s ease .4s; }
}