/* AEROPOCALYPSE: ONLINE splash — dark, sharp corners, phone-first */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:"Arial Narrow",Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;background:#000;touch-action:none;cursor:pointer;overflow:hidden}
#poster,#water,#trailer{position:absolute;inset:0;width:100%;height:100%;display:block}
#poster{object-fit:cover;z-index:1}
#water{z-index:2}
#trailer{object-fit:cover;z-index:3;opacity:0;pointer-events:none;background:#000}
body.no-water #water{display:none}
body.water-on #poster{visibility:hidden}
#hint{position:absolute;left:0;right:0;bottom:calc(4.5vh + env(safe-area-inset-bottom));z-index:4;
  text-align:center;color:#ffb877;font-size:15px;font-weight:700;letter-spacing:.55em;text-indent:.55em;
  text-shadow:0 0 14px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.9);pointer-events:none;
  animation:hintPulse 2.2s ease-in-out infinite;transition:opacity .35s linear}
#hint.gone{opacity:0;animation:none}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}
#controls{position:absolute;left:0;right:0;bottom:calc(7vh + env(safe-area-inset-bottom));z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
#controls.show{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .45s ease,transform .45s ease}
#enterBtn{display:block;min-width:min(78vw,340px);text-align:center;text-decoration:none;
  padding:20px 34px;background:rgba(0,0,0,.72);border:2px solid #ff7a1a;color:#ffc46b;
  font-size:26px;font-weight:900;letter-spacing:.4em;text-indent:.4em;border-radius:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 0 26px rgba(255,122,26,.28),inset 0 0 18px rgba(255,122,26,.12);
  cursor:pointer}
#enterBtn:active{background:rgba(66,26,0,.88);color:#ffe3b3}
#replayBtn{background:rgba(0,0,0,.55);border:1px solid rgba(255,150,80,.55);color:#ffb877;
  font-size:13px;font-weight:700;letter-spacing:.32em;text-indent:.32em;padding:10px 18px;
  border-radius:0;cursor:pointer;font-family:inherit}
#replayBtn:active{background:rgba(66,26,0,.75)}
/* V2 countdown ring: slim gold progress ring for the 10 s water-play
   phase. Tasteful, no numbers. Hidden until the first touch. */
#ring{position:absolute;left:50%;bottom:calc(15vh + env(safe-area-inset-bottom));z-index:4;
  width:62px;height:62px;margin-left:-31px;pointer-events:none;
  opacity:0;transition:opacity .45s linear}
#ring.on{opacity:.95}
#ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
#ring .bgc{fill:rgba(0,0,0,.35);stroke:rgba(255,122,26,.25);stroke-width:3}
#ring .fgc{fill:none;stroke:#ffc46b;stroke-width:3;stroke-linecap:butt;
  stroke-dasharray:169.7;stroke-dashoffset:169.7;
  filter:drop-shadow(0 0 6px rgba(255,122,26,.55))}
#ring::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;background:#ffc46b;box-shadow:0 0 8px rgba(255,122,26,.8)}
/* V3: the app icon rises as the surface at the end of the 5 s build,
   then the plane smashes through it — the icon is a 6x6 grid of shard
   tiles over the icon art; on the smash the tiles fly and the jet in
   the art surges forward while the trailer rises beneath. */
#iconBust{position:absolute;left:50%;top:50%;z-index:6;
  width:min(74vmin,520px);height:min(74vmin,520px);
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 0 60px rgba(255,122,26,.45),0 0 130px rgba(40,200,255,.28),
    inset 0 0 0 2px rgba(255,196,107,.5);
  transition:opacity .3s linear,transform .55s cubic-bezier(.2,1.35,.35,1),visibility 0s linear .3s}
#iconBust.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);
  transition:opacity .3s linear,transform .55s cubic-bezier(.2,1.35,.35,1)}
#iconBust.breaking{box-shadow:0 0 110px rgba(255,150,50,.8),0 0 190px rgba(40,200,255,.45),
    inset 0 0 0 2px rgba(255,227,179,.85)}
#iconImg{position:absolute;inset:0;width:100%;height:100%;display:block}
#shardLayer{position:absolute;inset:0}
.shard{position:absolute;background-repeat:no-repeat;pointer-events:none;
  will-change:transform,opacity;
  transition:transform .8s cubic-bezier(.15,.6,.3,1),opacity .8s ease-in}
#flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,240,214,.95) 0%,
    rgba(255,170,70,.55) 32%,rgba(255,122,26,0) 68%)}
#flash.go{animation:flashPop .55s ease-out}
@keyframes flashPop{0%{opacity:0}14%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  #hint{animation:none;opacity:.9}
  #controls{transition:none}
  #ring{transition:none}
  #iconBust{transition:none}
  #flash.go{animation:none}
}