/* bundle-intro — built by dev/site/build-bundles.php from: site/intro */
.intro { display: none; }
html.intro-on .intro { display: block; }
.intro {
--it: calc(var(--intro-t, 0) * 1s);
--door-h: min(80vh, 660px);
--door-w: calc(var(--door-h) * .4007);
position: fixed;
inset: 0;
z-index: 1000;
overflow: hidden;
color: var(--dt-cream);
background:
radial-gradient(ellipse 55% 60% at 50% 50%, rgba(62, 46, 108, .95), rgba(28, 21, 53, 0) 72%),
var(--dt-indigo-950);
animation: intro-end .4s cubic-bezier(.4, 0, .6, 1) calc(1.1s - var(--it)) forwards;
}
.intro__glow {
position: absolute;
left: 50%;
top: 50%;
width: min(760px, 120vw);
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(207, 173, 103, .22), rgba(207, 173, 103, 0) 60%);
animation: glow-in .9s ease-out calc(0s - var(--it)) both;
pointer-events: none;
}
.intro__girih {
position: absolute;
inset: 0;
background: url("../../img/theme/girih-gold.svg") center / 336px 291.3px;
opacity: .4;
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 120px, rgba(0, 0, 0, .55) 220px, #000 460px);
mask-image: radial-gradient(circle at 50% 50%, transparent 0 120px, rgba(0, 0, 0, .55) 220px, #000 460px);
clip-path: circle(80% at 50% 50%);
animation: girih-draw .75s cubic-bezier(.3, .6, .3, 1) calc(0s - var(--it)) both;
}
.intro__frame {
position: absolute;
left: 50%;
top: 50%;
height: var(--door-h);
width: auto;
aspect-ratio: 234 / 584;
max-width: none;
transform: translate(-50%, -50%);
overflow: visible;
fill: rgba(207, 173, 103, .045);
stroke: var(--dt-gold);
stroke-width: 1.3;
}
.intro__frame path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: door-draw .75s cubic-bezier(.45, .1, .25, 1) calc(.05s - var(--it)) both; }
.intro__frame .intro__frame-in { fill: none; stroke-width: .7; opacity: .55; animation-delay: calc(.2s - var(--it)); }
.intro__core {
position: absolute;
z-index: 2;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 4px;
pointer-events: none;
animation: core-lift .4s cubic-bezier(.4, 0, .6, 1) calc(1.1s - var(--it)) forwards;
}
.intro__mark {
position: relative;
width: min(190px, 44vw, calc(var(--door-w) * .56));
}
.intro__zoom picture { display: block; }
.intro__zoom { position: relative; display: block; animation: mark-in .6s var(--spring) calc(.1s - var(--it)) both; }
.intro__emblem { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45)); }
.intro__halo {
position: absolute;
inset: -24%;
background: var(--dt-gold);
-webkit-mask: url("../../img/theme/star-12.svg") center / contain no-repeat;
mask: url("../../img/theme/star-12.svg") center / contain no-repeat;
opacity: .85;
animation:
halo-in .5s ease-out calc(.18s - var(--it)) both,
spin 9s linear calc(0s - var(--it)) infinite;
}
.intro__halo--ring {
inset: -14%;
background: none;
-webkit-mask: none;
mask: none;
border: 1px dashed rgba(207, 173, 103, .7);
border-radius: 50%;
opacity: .9;
animation:
halo-in .5s ease-out calc(.26s - var(--it)) both,
spin-rev 14s linear calc(0s - var(--it)) infinite;
}
.intro__name {
margin: 34px 0 0;
font-family: var(--font-display);
font-size: min(clamp(2.1rem, 1.4rem + 3vw, 3.2rem), calc(var(--door-w) * .19));
font-weight: 700;
line-height: 1.3;
color: var(--dt-gold);
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
clip-path: inset(0 0 0 0);
animation: reveal-rtl .45s cubic-bezier(.5, 0, .2, 1) calc(.4s - var(--it)) both;
}
.intro__slogan-pic { display: block; }
.intro__slogan {
display: block;
width: min(270px, 66vw, calc(var(--door-w) * .74));
height: auto;
margin-top: 2px;
animation: fade-up .4s var(--ease) calc(.55s - var(--it)) both;
}
@keyframes intro-end { to { opacity: 0; visibility: hidden; } }
@keyframes core-lift { to { transform: scale(1.06); } }
@keyframes glow-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes girih-draw { from { clip-path: circle(0% at 50% 50%); opacity: 0; } 30% { opacity: .4; } }
@keyframes door-draw { from { stroke-dashoffset: 1; } }
@keyframes mark-in { from { opacity: 0; transform: scale(.55); } }
@keyframes halo-in { from { opacity: 0; transform: scale(.7); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes reveal-rtl { from { clip-path: inset(0 0 0 100%); } }
@media (prefers-reduced-motion: reduce) {
html.intro-on .intro * { animation: none !important; }
html.intro-on .intro { animation: intro-fade 1.2s ease-in calc(0s - var(--it)) forwards !important; }
@keyframes intro-fade { 0%, 45% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}
html.intro-on .intro.is-leaving { animation: intro-end .18s ease-in forwards !important; }
.intro.is-open { pointer-events: none; }
html.intro-freeze .intro, html.intro-freeze .intro * { animation-play-state: paused !important; }