/* Loading screen, title attract scene and hangar. Loaded after style.css. */

/* ---------- Boot / loading ---------- */
.asset-loading{gap:16px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#123344 0%,#0a1c27 38%,#07131b 70%)}
.asset-loading:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(221,228,211,.022) 4px),repeating-linear-gradient(90deg,transparent 0 91px,rgba(221,228,211,.035) 92px)}
.asset-loading>*{position:relative}
.boot-emblem{width:108px;height:108px;margin-bottom:4px}
.boot-emblem i{position:absolute;display:block}
.boot-ring{inset:15px;border:1px solid rgba(243,187,112,.62);border-radius:50%;animation:boot-spin 7s linear infinite}
.boot-ring:before{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.boot-ring.outer{inset:0;border:1px dashed rgba(122,216,205,.34);animation-duration:16s;animation-direction:reverse}
.boot-ring.outer:before{display:none}
.boot-sweep{inset:4px;border-radius:50%;background:conic-gradient(from 0deg,rgba(122,216,205,.36),rgba(122,216,205,0) 80deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 0 22%,#000 23%);mask:radial-gradient(circle,transparent 0 22%,#000 23%);animation:boot-spin 2.4s linear infinite}
.boot-diamond{left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid var(--gold);transform:rotate(45deg);box-shadow:0 0 18px rgba(243,187,112,.35),inset 0 0 10px rgba(243,187,112,.25);animation:boot-pulse 1.8s ease-in-out infinite}
.boot-diamond:before,.boot-diamond:after{content:"";position:absolute;left:50%;top:50%;background:var(--gold);transform:translate(-50%,-50%)}
.boot-diamond:before{width:1px;height:44px}
.boot-diamond:after{width:44px;height:1px}
.loading-mark{color:var(--white);font-family:Arial Black,Arial,Helvetica,sans-serif;line-height:.85;text-shadow:0 10px 30px rgba(0,8,14,.6)}
.loading-mark b{color:var(--gold);font-weight:900}
.asset-loading strong{font-size:11px;letter-spacing:.32em;color:var(--gold)}
.asset-loading progress{-webkit-appearance:none;appearance:none;width:248px;height:3px;border:0;background:rgba(176,220,211,.14);overflow:hidden}
.asset-loading progress::-webkit-progress-bar{background:rgba(176,220,211,.14)}
.asset-loading progress::-webkit-progress-value{background:linear-gradient(90deg,#b97c3e,var(--gold) 60%,#ffe4b8);box-shadow:0 0 12px rgba(243,187,112,.7);transition:width .35s ease-out}
.asset-loading progress::-moz-progress-bar{background:linear-gradient(90deg,#b97c3e,var(--gold) 60%,#ffe4b8)}
.boot-log{list-style:none;margin:4px 0 0;padding:0;min-width:248px;display:flex;flex-direction:column;gap:7px;color:#7fa3a5;font-size:8px;font-weight:800;letter-spacing:.24em}
.boot-log li{display:flex;justify-content:space-between;gap:16px;opacity:0;animation:boot-line .35s ease-out forwards}
.boot-log li:before{content:"▸";color:var(--cyan);margin-right:-8px}
.boot-log li:after{content:"OK";color:var(--cyan);opacity:0;margin-left:auto;animation:boot-line .25s ease-out forwards}
.boot-log li:nth-child(1){animation-delay:.15s}.boot-log li:nth-child(1):after{animation-delay:.55s}
.boot-log li:nth-child(2){animation-delay:.6s}.boot-log li:nth-child(2):after{animation-delay:1.05s}
.boot-log li:nth-child(3){animation-delay:1.1s}.boot-log li:nth-child(3):after{animation-delay:1.7s}
.boot-meta{position:absolute!important;bottom:22px;left:0;right:0;text-align:center;color:#4c6c72;font-size:8px;font-weight:800;letter-spacing:.32em}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-pulse{0%,100%{box-shadow:0 0 12px rgba(243,187,112,.25),inset 0 0 8px rgba(243,187,112,.15)}50%{box-shadow:0 0 26px rgba(243,187,112,.55),inset 0 0 14px rgba(243,187,112,.35)}}
@keyframes boot-line{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

.asset-warning{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:rgba(32,46,55,.96);border-top:1px solid rgba(243,187,112,.5);letter-spacing:.04em;backdrop-filter:blur(8px)}
.asset-warning b{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:11px}
.asset-warning button{padding:6px 12px;border:1px solid rgba(243,187,112,.6);color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.16em;text-decoration:none}
.asset-warning button:hover{background:rgba(243,187,112,.14)}

/* ---------- Title: attract scene ---------- */
.title-atmosphere{background:#07131b;overflow:hidden}
#titleScene{position:absolute;inset:0;width:100%;height:100%;display:block}
.title-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,19,.8) 0%,rgba(4,12,19,.6) 30%,rgba(4,12,19,.18) 52%,rgba(4,12,19,0) 66%)}
/* Vignette lives in CSS so the compositor draws it, not the canvas. */
.title-atmosphere:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 80% at 60% 50%,rgba(2,8,14,0) 45%,rgba(2,8,14,.5) 100%),linear-gradient(180deg,rgba(3,12,18,0) 82%,rgba(3,12,18,.45) 100%)}
.title-atmosphere .title-grid{opacity:.55}
/* Anamorphic glare across the rising sun; matches the canvas sun position. */
.title-flare{position:absolute;left:var(--title-sun-x,78.5%);top:var(--title-sun-y,30.2%);width:min(56vw,820px);height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(255,214,160,.12) 30%,rgba(255,236,206,.55) 50%,rgba(255,214,160,.12) 70%,transparent);mix-blend-mode:screen;animation:flare-breathe 7s ease-in-out infinite}
.title-flare:after{content:"";position:absolute;left:50%;top:50%;width:26%;height:16px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,224,180,.28),transparent 70%)}
@keyframes flare-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scaleX(.86)}50%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}}

/* Logo: specular light sweep across the lettering. */
.title-content h1{text-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,9,16,.5))}
.title-year,.title-name{background-image:linear-gradient(100deg,#f4f0e4 0 41%,#ffd9a0 45%,#fff7e6 50%,#ffd9a0 55%,#f4f0e4 59% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:logo-sweep 9s cubic-bezier(.45,0,.3,1) 2.4s infinite}
.title-year span,.title-name em{background-image:linear-gradient(100deg,var(--gold) 0 41%,#ffe7c2 46%,#fffaf0 50%,#ffe7c2 54%,var(--gold) 59% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:logo-sweep 9s cubic-bezier(.45,0,.3,1) 2.48s infinite}
@keyframes logo-sweep{0%{background-position:100% 0}16%,100%{background-position:0 0}}

/* First load: staged reveal. Returning to the title: a short settle. */
.title-screen.is-first #titleScene{animation:scene-in 2.2s ease-out both}
.title-screen.is-first .title-scrim{animation:scrim-in 1.6s ease-out both}
.title-screen.is-first .chapter-line{animation:title-rise .7s cubic-bezier(.2,.8,.2,1) .25s both}
.title-screen.is-first .chapter-line i{animation:rule-grow .9s cubic-bezier(.2,.8,.2,1) .45s both}
.title-screen.is-first .title-pre{animation:title-rise .7s cubic-bezier(.2,.8,.2,1) .45s both}
.title-screen.is-first .title-year{animation:year-in 1.15s cubic-bezier(.16,.84,.24,1) .55s both,logo-sweep 9s cubic-bezier(.45,0,.3,1) 1.9s infinite}
.title-screen.is-first .title-year span{animation:logo-sweep 9s cubic-bezier(.45,0,.3,1) 1.98s infinite}
.title-screen.is-first .title-name{animation:name-in 1.1s cubic-bezier(.16,.84,.24,1) .95s both,logo-sweep 9s cubic-bezier(.45,0,.3,1) 2.3s infinite}
.title-screen.is-first .title-name em{animation:logo-sweep 9s cubic-bezier(.45,0,.3,1) 2.38s infinite}
.title-screen.is-first .title-deck{animation:title-rise .8s cubic-bezier(.2,.8,.2,1) 1.45s both}
.title-screen.is-first .title-actions{animation:title-rise .8s cubic-bezier(.2,.8,.2,1) 1.65s both}
.title-screen.is-first .title-foot{animation:foot-in .8s ease-out 1.9s both}
.title-screen:not(.is-first) .title-content>*{animation:title-settle .5s cubic-bezier(.2,.8,.2,1) backwards}
.title-screen:not(.is-first) .title-content>:nth-child(2){animation-delay:.04s}
.title-screen:not(.is-first) .title-content>:nth-child(3){animation-delay:.08s}
.title-screen:not(.is-first) .title-content>:nth-child(4){animation-delay:.12s}
.title-screen:not(.is-first) .title-content>:nth-child(5){animation-delay:.16s}
@keyframes scene-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@keyframes title-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes title-settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rule-grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes year-in{from{opacity:0;transform:translateY(.1em) scale(1.06);filter:blur(14px);letter-spacing:.02em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:-.11em}}
@keyframes name-in{from{opacity:0;transform:translateX(-.18em);filter:blur(10px);letter-spacing:.04em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:-.075em}}
@keyframes foot-in{from{opacity:0}to{opacity:1}}

/* Call to action. */
#enterHangarButton{position:relative;overflow:hidden;isolation:isolate}
#enterHangarButton:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:32%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,250,236,.7),transparent);transform:translateX(0) skewX(-18deg);animation:cta-sheen 6s ease-in-out 3.4s infinite}
@keyframes cta-sheen{0%{transform:translateX(0) skewX(-18deg)}17%,100%{transform:translateX(560%) skewX(-18deg)}}
.key-hint{animation:hint-breathe 2.4s ease-in-out infinite}
.key-hint kbd{animation:hint-key 2.4s ease-in-out infinite}
@keyframes hint-breathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes hint-key{0%,100%{border-color:#729497;color:var(--paper);box-shadow:none}50%{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(243,187,112,.42)}}
@media (pointer:coarse){.title-actions .key-hint{display:none}}

/* Short desktop and landscape phones: keep the call to action on the first screen. */
@media (max-height:960px) and (min-width:741px){
 .title-content{min-height:calc(100svh - 112px);padding-top:clamp(18px,4vh,40px);padding-bottom:72px}
 .chapter-line{margin-bottom:clamp(10px,2.4vh,26px)}
 .title-year{font-size:min(16vw,26vh)}
 .title-name{font-size:min(9.3vw,15vh);margin-top:1.6vh}
 .title-deck{margin:2.6vh 0 2.4vh;font-size:clamp(14px,2.2vh,18px);max-width:400px}
}
@media (max-height:560px) and (min-width:741px){
 .title-pre,.title-deck{display:none}
 .title-actions{margin-top:clamp(14px,4vh,26px)}
 .title-foot{min-height:38px}
 .title-content{padding-bottom:52px}
}
@media (max-height:430px) and (min-width:741px){
 .chapter-line{display:none}
 .title-year{font-size:min(16vw,24vh)}
 .title-name{font-size:min(9.3vw,13vh)}
 .title-actions .action-button{min-height:52px;padding:9px 16px}
 .title-foot{display:none}
 .title-content{padding-top:14px;padding-bottom:16px;min-height:0}
}

/* Phones in portrait: aircraft fly the upper half, copy sits over the darkened sea. */
@media (max-width:740px){
 .title-scrim{background:linear-gradient(180deg,rgba(4,12,19,0) 0,rgba(4,12,19,0) calc(var(--title-free,36%) - 30px),rgba(4,12,19,.6) calc(var(--title-free,36%) + 90px),rgba(4,12,19,.86) 100%)}
 .title-flare{left:var(--title-sun-x,74%);top:var(--title-sun-y,8%);width:62vw;opacity:.6}
 .title-content{padding-bottom:62px}
 .title-deck{margin:16px 0 20px}
}

/* ---------- Hangar ---------- */
.hangar-ambience{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hangar-ambience span{position:absolute;display:block}
.deck-haze{width:72vw;height:62vh;left:-12vw;top:8vh;border-radius:50%;background:radial-gradient(ellipse at center,rgba(122,216,205,.075),transparent 66%);animation:haze-drift 40s ease-in-out infinite alternate}
.deck-haze.second{left:auto;top:auto;right:-16vw;bottom:-8vh;background:radial-gradient(ellipse at center,rgba(243,187,112,.06),transparent 66%);animation-duration:54s;animation-direction:alternate-reverse}
.deck-lights{left:0;right:0;top:0;height:3px;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(243,187,112,.42) 44px 50px)}
.deck-lights:after{content:"";position:absolute;inset:-5px 0;background:radial-gradient(ellipse at center,rgba(255,220,170,.95),transparent 70%) no-repeat;background-size:16% 100%;background-position:-20% 0;-webkit-mask:repeating-linear-gradient(90deg,transparent 0 44px,#000 44px 50px);mask:repeating-linear-gradient(90deg,transparent 0 44px,#000 44px 50px);animation:deck-chase 5s linear infinite}
.deck-beam{inset:0;background:linear-gradient(112deg,transparent 34%,rgba(196,232,226,.045) 46%,rgba(196,232,226,.02) 52%,transparent 62%);animation:beam-breathe 11s ease-in-out infinite}
@keyframes haze-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,4vh,0) scale(1.12)}}
@keyframes deck-chase{from{background-position:-20% 0}to{background-position:120% 0}}
@keyframes beam-breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* Entry choreography; backwards fill so hover and selection styles stay in charge afterwards. */
.hangar-heading{animation:title-settle .5s cubic-bezier(.2,.8,.2,1) backwards}
.ship-list .ship-card{animation:card-in .5s cubic-bezier(.2,.8,.2,1) backwards}
.ship-list .ship-card:nth-child(2){animation-delay:.06s}
.ship-list .ship-card:nth-child(3){animation-delay:.12s}
.ship-detail{animation:detail-in .6s cubic-bezier(.2,.8,.2,1) .08s backwards}
@keyframes card-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes detail-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.ship-card.selected:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(243,187,112,.11) 50%,transparent 65%);background-size:260% 100%;animation:card-sheen 4.5s ease-in-out infinite}
@keyframes card-sheen{0%{background-position:100% 0}40%,100%{background-position:0 0}}
.ship-detail .blueprint{box-shadow:inset 0 0 60px rgba(4,16,24,.55)}

/* Selection swap: name, copy and meters re-enter with the blueprint scan. */
.ship-detail.is-swapping .ship-title-row strong{animation:swap-name .5s cubic-bezier(.2,.8,.2,1) backwards}
.ship-detail.is-swapping .ship-title-row span,.ship-detail.is-swapping .ship-detail-top span:last-child{animation:swap-fade .4s ease-out backwards}
.ship-detail.is-swapping #shipDescription{animation:swap-fade .5s ease-out .12s backwards}
.ship-detail.is-swapping .ship-metrics i{animation:meter-fill .75s cubic-bezier(.2,.8,.2,1) .12s backwards}
.ship-detail.is-swapping .ship-metrics div:nth-child(2) i{animation-delay:.2s}
.ship-detail.is-swapping .ship-metrics div:nth-child(3) i{animation-delay:.28s}
@keyframes swap-name{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes swap-fade{from{opacity:0}to{opacity:1}}
@keyframes meter-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- Reduced effects (option) and reduced motion (system) ---------- */
/* Id-qualified so they outrank the first-load reveal rules. */
#titleScreen.fx-reduced .title-flare,#titleScreen.fx-reduced #enterHangarButton:after,#titleScreen.fx-reduced .key-hint,#titleScreen.fx-reduced .key-hint kbd,
#titleScreen.fx-reduced .title-year,#titleScreen.fx-reduced .title-name,#titleScreen.fx-reduced .title-year span,#titleScreen.fx-reduced .title-name em,
#hangarScreen.fx-reduced .deck-haze,#hangarScreen.fx-reduced .deck-lights:after,#hangarScreen.fx-reduced .deck-beam,#hangarScreen.fx-reduced .ship-card.selected:after{animation:none}
#titleScreen.fx-reduced.is-first .title-content>*,#titleScreen.fx-reduced.is-first #titleScene{animation:title-settle .6s ease-out backwards}
#titleScreen.fx-reduced.is-first .chapter-line i{animation:none}
@media (prefers-reduced-motion:reduce){
 .boot-ring,.boot-sweep,.boot-diamond,.title-flare,#enterHangarButton:after,.key-hint,.key-hint kbd,
 .title-year,.title-name,.title-year span,.title-name em,.title-screen.is-first .title-year,.title-screen.is-first .title-name,
 .title-screen.is-first .title-year span,.title-screen.is-first .title-name em,
 .deck-haze,.deck-lights:after,.deck-beam,.ship-card.selected:after{animation:none}
}