/* Hidden by default. The CSS deadline also reveals the page if JS fails after activation. */
.titan-intro {
    --intro-ready: 1;
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 65% 15%, #0b1925, #050b10 65%, #03070a);
    animation: intro-reveal 1.85s linear forwards;
}
/* Reuse the source without downloading separate decorative images. */
.intro-blueprint, .intro-camera-photo { position: absolute; inset-block: 0; z-index: -2; background-image: url('../images/titan-loading-reference.png'); background-repeat: no-repeat; pointer-events: none; }
.intro-blueprint { left: 0; width: 27%; background-size: auto 100%; background-position: left center; mask-image: linear-gradient(90deg, #000 55%, transparent); opacity: .7; }
.intro-camera-photo { right: 0; width: 30%; background-size: auto 100%; background-position: right top; mask-image: linear-gradient(90deg, transparent, #000 30%); }
.intro-content { position: relative; text-align: center; width: min(710px, 64vw); transform: translateY(30px); }
.intro-logo { display: flex; justify-content: center; align-items: center; }
.intro-logo .brand-logo { width: 100%; height: auto; max-height: 160px; object-fit: contain; }
/* Source viewport: x=416, y=379, width=714, height=137. */
.intro-reference-logo { position: relative; display: block; width: 100%; aspect-ratio: 714 / 137; overflow: hidden; }
.intro-reference-logo img { position: absolute; width: 222.13%; height: 724.09%; max-width: none; left: -58.26%; top: -276.64%; }
.intro-tagline { margin: 25px 0 61px; color: #d1d3d7; font-size: clamp(10px, 1.2vw, 18px); font-weight: 400; letter-spacing: clamp(3px, .65vw, 10px); padding-left: .65vw; }
.intro-progress { height: 7px; width: 69%; margin: 0 auto; border: 1px solid #71809166; border-radius: 10px; background: #a3b6c21a; overflow: hidden; }
.intro-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(0deg, #c89520, #ffda72); box-shadow: 0 0 12px #eaba4570; transform-origin: left; animation: intro-progress 1.5s ease-out both; }
.intro-label { color: #aeb5bc; font-size: 10px; letter-spacing: 5px; margin: 22px 0 0; }
.intro-reticle { position: absolute; z-index: -1; width: 48vw; height: 48vw; right: -5vw; top: -13vw; border: 1px dashed #bd8d2938; border-radius: 50%; pointer-events: none; }
.intro-reticle::before { content: ''; position: absolute; width: 170%; height: 1px; background: #bd8d2926; right: 30%; top: 47%; transform: rotate(-11deg); transform-origin: right; }
.intro-frame { position: absolute; inset: 4.3% 2.5% 7%; opacity: .85; background: linear-gradient(#e7be4e,#e7be4e) top left/46px 1px,linear-gradient(#e7be4e,#e7be4e) top left/1px 46px,linear-gradient(#e7be4e,#e7be4e) top right/46px 1px,linear-gradient(#e7be4e,#e7be4e) top right/1px 46px,linear-gradient(#e7be4e,#e7be4e) bottom left/46px 1px,linear-gradient(#e7be4e,#e7be4e) bottom left/1px 46px,linear-gradient(#e7be4e,#e7be4e) bottom right/46px 1px,linear-gradient(#e7be4e,#e7be4e) bottom right/1px 46px; background-repeat: no-repeat; pointer-events: none; }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-reveal { 0%, 81% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 600px) {
    .intro-content { width: 84vw; transform: none; }
    .intro-tagline { font-size: 9px; letter-spacing: 3px; margin: 22px 0 44px; }
    .intro-progress { width: 76%; height: 5px; }
    .intro-label { font-size: 8px; letter-spacing: 4px; }
    .intro-camera-photo { width: 55%; height: 36%; background-size: auto 100%; mask-image: linear-gradient(0deg, transparent, #000 40%); opacity: .7; }
    .intro-blueprint { width: 50%; opacity: .4; }
    .intro-reticle { width: 85vw; height: 85vw; right: -28vw; top: -20vw; }
    .intro-frame { inset: 24px 18px 84px; background-size: 26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px; }
}
@media (max-height: 450px) and (min-width: 601px) {
    .intro-content { width: min(450px, 60vw); transform: translateY(-10px); }
    .intro-tagline { margin: 14px 0 24px; }
    .intro-label { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .titan-intro { display: none !important; animation: none; }
    .intro-progress span { animation: none; }
}
/* Blend the temporary logo crop into the scene until the transparent logo is supplied. */
.intro-reference-logo { mix-blend-mode: lighten; }
@media (max-width: 600px) {
    .intro-camera-photo { width: 40%; height: 44%; }
}