.sec7 *{box-sizing:border-box}.sec7{height:741vh;position:relative}.sec7 .stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.sec7 .fw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sec7 .sea,
.sec7 #swell,
.sec7 .land,
.sec7 .road,
.sec7 .edge,
.sec7 #shadows,
.sec7 #marks,
.sec7 #props,
.sec7 .cloud{opacity:var(--out,1)}
.sec7 .sky{position:absolute;inset:0;
background:
linear-gradient(112deg,#fff 0%,#d4e7ff 15%,#a3ccff 36%,#7cb7ff 55%,#60a8ff 73%,#4f9fff 88%,#4a9cff 100%)}
@property --sun-a{syntax:'<color>';inherits:false;initial-value:rgba(255,255,255,.98)}@property --sun-b{syntax:'<color>';inherits:false;initial-value:rgba(255,255,255,0)}.sec7 .sun{position:absolute;left:0;right:0;top:-100%;height:200%;
pointer-events:none;will-change:transform;
--sun-a:rgba(255,255,255,.98); --sun-b:rgba(255,255,255,0);
background:radial-gradient(760px 620px at 11% 48%, var(--sun-a), var(--sun-b) 60%);
transition:transform 1.1s ease-out, opacity .5s linear,
--sun-a .6s linear, --sun-b .6s linear}
:root[data-mode="night"] .sec7 .sun{transform:translateY(var(--sun-set,70vh));opacity:0;
--sun-a:rgba(255,146,42,.95); --sun-b:rgba(255,86,20,0);
transition:transform 4.8s cubic-bezier(.35,0,.65,1),
--sun-a 1.9s linear .35s, --sun-b 1.9s linear .35s,
opacity 1s ease-in 2s}
@media (prefers-reduced-motion: reduce){.sec7 .sun,
:root[data-mode="night"] .sec7 .sun{transform:none;transition:opacity .35s linear}
}
.sec7 .sea{position:absolute;left:0;right:0;
background:
radial-gradient(150% 260% at 6% -10%, rgba(120,205,255,.30), rgba(120,205,255,0) 55%),
linear-gradient(180deg,#00287d 0%,rgba(0,45,131,.90) 21%,rgba(0,51,140,.78) 30%,
rgba(1,61,152,.60) 40%,rgba(2,73,168,.37) 50%,rgba(3,87,188,.10) 62%,
rgba(4,93,195,0) 71%),
linear-gradient(90deg,#004ca2 0%,#045dc3 100%)}.sec7 .land{position:absolute;left:0;
background:
radial-gradient(140% 220% at 6% -14%, rgba(170,245,150,.30), rgba(170,245,150,0) 55%),
linear-gradient(180deg,#005c31 0%,#00693a 30%,#0a763c 62%,#188540 85%,#2a9d45 100%)}.sec7 .road,
.sec7 .edge,
.sec7 .dash{position:absolute;left:0;top:0}.sec7 .road{background:
radial-gradient(150% 240% at 6% -12%, rgba(255,255,255,.34), rgba(255,255,255,0) 60%),
linear-gradient(180deg,#4b4b4b 0%,#3b3b3b 42%,#2e2e2e 100%)}
.sec7 .edge{background:#fff}.sec7 .edge.gold{background:#ffda00}.sec7 .dash{background:#fff}
.sec7 .sky::after,
.sec7 .sea::after,
.sec7 .land::after,
.sec7 .road::after{
content:'';position:absolute;inset:0;opacity:0;transition:opacity 1.4s linear;
pointer-events:none;will-change:opacity}
:root[data-mode="night"] .sec7 .sea::after{opacity:1;transition:opacity 2.9s linear 2.2s}:root[data-mode="night"] .sec7 .sky::after{opacity:1;transition:opacity 2.9s linear 2.4s}:root[data-mode="night"] .sec7 .land::after{opacity:1;transition:opacity 2.7s linear 3.0s}:root[data-mode="night"] .sec7 .road::after{opacity:1;transition:opacity 2.9s linear 3.7s}.sec7 .sky::after{background:linear-gradient(180deg,#02060f 0%,#050d1e 34%,#081833 62%,#0d2447 84%,#12305a 100%)}
@media (max-width:900px) and (pointer:coarse){.sec7 .sky::before{content:'';position:absolute;left:0;right:0;top:0;height:21vh;
background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 100%)}
}
.sec7 .sea::after{background:
radial-gradient(78% 150% at 8% -12%, rgba(150,190,255,.34), rgba(150,190,255,0) 46%),
linear-gradient(180deg,#08182f 0%,#061225 46%,#040c1a 100%)}.sec7 .land::after{background:
radial-gradient(140% 220% at 9% -14%, rgba(150,195,255,.20), rgba(150,195,255,0) 52%),
linear-gradient(180deg,#0d1e34 0%,#0a1728 46%,#071120 100%)}.sec7 .road::after{background:
radial-gradient(150% 240% at 9% -12%, rgba(160,200,255,.14), rgba(160,200,255,0) 55%),
linear-gradient(180deg,#0b1220 0%,#070c17 46%,#05080f 100%)}
.sec7 .stars{position:absolute;opacity:0;transition:opacity .6s linear;
pointer-events:none;will-change:opacity}.sec7 .stars{inset:0;background-image:
radial-gradient(1.5px 1.5px at 18% 22%,rgba(255,255,255,.95),transparent),
radial-gradient(1.1px 1.1px at 62% 9%,rgba(255,255,255,.75),transparent),
radial-gradient(1.3px 1.3px at 84% 41%,rgba(255,255,255,.85),transparent),
radial-gradient(1px 1px at 37% 58%,rgba(210,230,255,.7),transparent),
radial-gradient(1.6px 1.6px at 8% 74%,rgba(255,255,255,.6),transparent),
radial-gradient(1.1px 1.1px at 71% 66%,rgba(220,235,255,.65),transparent);
background-size:340px 240px,340px 240px,470px 330px,470px 330px,610px 410px,610px 410px}
.sec7 .moon{position:absolute;left:6.5%;top:5%;width:clamp(130px,19vh,290px);
aspect-ratio:1;opacity:0;pointer-events:none;
will-change:transform,opacity;transform:translateX(-125%);
transition:opacity .5s linear,
transform 1.1s cubic-bezier(.39,.575,.565,1)}.sec7 .moon .orb{position:absolute;inset:0;display:grid;place-items:center;
transform:translateY(-125%);
transition:transform 1.1s cubic-bezier(.47,0,.745,.715);
background:radial-gradient(closest-side,rgba(178,208,255,.20),rgba(140,180,255,0) 76%)}.sec7 .moon img{display:block;width:54%;height:auto}:root[data-mode="night"] .sec7 .stars{opacity:1;transition:opacity 2.6s linear 2.6s}:root[data-mode="night"] .sec7 .moon{opacity:1;transform:none;
transition:opacity 1.4s linear 1.6s,
transform 2.2s cubic-bezier(.39,.575,.565,1) 1s}:root[data-mode="night"] .sec7 .moon .orb{transform:none;
transition:transform 3.5s cubic-bezier(.47,0,.745,.715) 1.6s}
@media (prefers-reduced-motion: reduce){.sec7 .moon,
:root[data-mode="night"] .sec7 .moon{transform:none;transition:opacity .35s linear}.sec7 .moon .orb,
:root[data-mode="night"] .sec7 .moon .orb{transform:none;transition:none}
}
.sec7 .edge,
.sec7 .dash{transition:background-color .9s linear}:root[data-mode="night"] .sec7 .edge,
:root[data-mode="night"] .sec7 .dash{
background:#8195b4;transition:background-color 2.9s linear 3.7s}:root[data-mode="night"] .sec7 .edge.gold{background:#8a6a26}
.sec7 .thing{position:absolute;left:0;top:0;transform-origin:50% 100%}.sec7 .thing img{display:block;height:100%;width:auto}
.sec7 .palm img,
.sec7 .lamp img:not(.light),
.sec7 .wave img,
.sec7 .pole,
.sec7 .truss,
.sec7 .sign img{
transition:filter .9s linear}:root[data-mode="night"] .sec7 .palm img,
:root[data-mode="night"] .sec7 .lamp img:not(.light),
:root[data-mode="night"] .sec7 .wave img,
:root[data-mode="night"] .sec7 .pole,
:root[data-mode="night"] .sec7 .truss,
:root[data-mode="night"] .sec7 .sign img{
transition:filter 1.8s linear 1.5s}
:root[data-mode="night"] .sec7 .cloud img{
filter:brightness(.4) sepia(1) saturate(6) hue-rotate(200deg) brightness(.45)}:root[data-mode="night"] .sec7 .palm img{filter:brightness(.30) saturate(.62) hue-rotate(116deg)}
:root[data-mode="night"] .sec7 .wave img{filter:brightness(.68) saturate(.55) hue-rotate(0deg)}
:root[data-mode="night"] .sec7 .lamp img:not(.light){filter:brightness(.34) saturate(.70) hue-rotate(184deg)}:root[data-mode="night"] .sec7 .pole,
:root[data-mode="night"] .sec7 .truss{
filter:brightness(.40) saturate(.80) hue-rotate(184deg)}
.sec7 .sign{isolation:isolate}.sec7 .sign img{filter:drop-shadow(0 14px 20px rgba(0,0,0,.22))}
.sec7 .sign img.bill,
.sec7 .sign img.bill-n{filter:none}.sec7 .sign .night-art{position:absolute;inset:0;height:100%;width:100%;
opacity:0;transition:opacity .9s linear}:root[data-mode="night"] .sec7 .sign .night-art{opacity:1;
transition:opacity 1.8s linear 1.5s}:root[data-mode="night"] .sec7 .sign img{filter:drop-shadow(0 0 11px rgba(255,186,74,.28))}:root[data-mode="night"] .sec7 .sign img.bill,
:root[data-mode="night"] .sec7 .sign img.bill-n{filter:none}
.sec7 .lamp::after,
.sec7 .lamp::before{content:'';position:absolute;pointer-events:none;
opacity:0;transition:opacity .8s linear}:root[data-mode="night"] .sec7 .lamp::after,
:root[data-mode="night"] .sec7 .lamp::before,
:root[data-mode="night"] .sec7 .lamp .light{transition:opacity 1.4s linear 1.9s}.sec7 .lamp::after{width:185%;aspect-ratio:1;left:33.3%;top:4.4%;transform:translate(-50%,-50%);
background:radial-gradient(closest-side,rgba(255,222,158,.98),
rgba(255,182,74,.42) 30%,rgba(255,164,40,0) 70%)}
.sec7 .lamp .light{position:absolute;width:572.6%;height:125%;left:-513.5%;top:-9.6%;
max-width:none;pointer-events:none;opacity:0;transition:opacity .8s linear}.sec7 .a-lamp-l .light{left:40.9%;transform:scaleX(-1)}:root[data-mode="night"] .sec7 .lamp .light{opacity:1}
.sec7 .pole{background:linear-gradient(90deg,#6f757d 0%,#9aa1a9 9%,#f4f7fa 36%,
#e2e8ed 52%,#cdd4db 66%,#9aa1a9 87%,#6d737b 100%);
border-radius:50% 50% 0 0 / 6% 6% 0 0}
.sec7 .truss{background-repeat:repeat-x;background-position:center;background-size:auto 100%}
.sec7 .shadow{transform-origin:50% 100%}
.sec7 .shadow-derived{filter:brightness(0) blur(1.5px);opacity:.26}
.sec7 .foot{position:absolute;left:0;top:0;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,
rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 72%)}.sec7 .shadow img{display:block;height:100%;width:100%}
.sec7 .cloud{position:absolute;left:0;top:0}
.sec7 .hello{position:fixed;left:0;right:0;top:var(--hello-y,50vh);z-index:4;
text-align:center;pointer-events:none;white-space:nowrap;
font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
font-weight:900;letter-spacing:-.045em;line-height:1;text-transform:uppercase;
font-size:clamp(30px,5.2vw,104px);color:#fff;
text-shadow:0 6px 26px rgba(0,40,90,.45);
opacity:var(--hello,1);
translate:0 -50%}
.sec7 .cloud img{transition:filter .9s linear, opacity .9s linear}
:root[data-mode="night"] .sec7 .cloud img{
transition:filter 1.1s linear 2.6s, opacity 1.4s linear 2.6s}:root[data-mode="night"] .sec7 .cloud.thin img{opacity:0}.sec7 .cloud img{display:block;width:100%;height:auto}
.sec7 .wave{position:absolute;left:0;top:0}.sec7 .wave img{display:block;width:100%;height:100%}
:root[data-mode="night"] .sec7 .mode-switch .to-night{display:none}:root[data-mode="night"] .sec7 .mode-switch .to-day{display:block}