/* Pirate Treasure loading screen (loading-screen-v2, approved 23 Sep 2026): Colorful Play's layout and motion
   on the supplied rope-and-plank card. Logo, three feature cards, a slim loading bar with CLICK TO CONTINUE
   underneath it. Card pictures: loading-screen-v2/assets (built by work/loading-screen-v2/compose.py). */
.opening-screen{position:fixed;inset:0;z-index:1000;overflow:auto;overscroll-behavior:contain;color:#fff;font-family:PirateUI,Arial,sans-serif;
  background:linear-gradient(#03223733,#0322370d 35%,#03223726 70%,#032237a6),url('assets/pirate-harbour-background-v1/background-soft.png') center/cover #062b41}
.opening-screen[hidden]{display:none}
.ls.loaded{cursor:pointer}
.ls-content{--card-width:min(25vw,calc((100svh - 270px)*.66),380px);min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,3vh,34px) 15px clamp(14px,3vh,34px)}

.ls-brand{position:relative;flex-shrink:0;width:clamp(200px,19vw,340px);margin:0 auto clamp(12px,3vh,32px);filter:drop-shadow(0 .25vw 0 #0b1a26) drop-shadow(0 .5vw .8vw #02182580)}
.ls-brand img{position:relative;display:block;width:100%;height:auto}

/* The card: frame image, picture in the top of the parchment, caption below it.
   Parchment spans x 16.4%-84.0%, y 14.7%-85.8% of the frame. */
.ls-cards{display:flex;gap:clamp(18px,3vw,54px);justify-content:center}
.ls-card{position:relative;flex-shrink:0;width:var(--card-width);aspect-ratio:2000/2678;container-type:inline-size;filter:drop-shadow(0 12px 8px #02182566)}
.ls-card img{user-select:none;pointer-events:none}
.ls-frame{position:absolute;inset:0;width:100%;height:100%}
.ls-hero{position:absolute;left:17%;width:66%;top:16%;height:36%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 1.2cqw .8cqw #5a341466)}
.ls-caption{position:absolute;left:19%;right:19%;top:54.5%;bottom:18.5%;margin:0;display:grid;place-items:center;text-align:center;text-wrap:balance;
  font:900 7.6cqw/1.12 var(--font-display,PirateDisplay),Arial,sans-serif;color:#4a2410;letter-spacing:.005em}
.ls-caption em{font-style:normal;color:#c4161c}
.ls-caption .ls-big{display:block;font-size:1.55em;line-height:1.05;margin:.06em 0;transform-origin:50% 55%}

/* Footer: the loading bar, and CLICK TO CONTINUE underneath it. Both rows are reserved from the start so
   nothing moves when loading finishes. */
.ls-footer{position:relative;display:grid;justify-items:center;align-items:center;grid-template-rows:14px 48px auto;row-gap:10px;margin-top:clamp(12px,2.8vh,30px)}
.ls-bar{width:min(26vw,380px);min-width:220px;height:14px;border-radius:99px;background:#0b0d10d9;box-shadow:0 0 0 3px #0b0d10,0 4px 10px #0006;overflow:hidden}
.ls-bar span{display:block;height:100%;width:0;border-radius:99px;background:#fff;transition:width .35s ease-out}
.opening-continue{display:block;margin:0;border:0;padding:6px 18px;background:transparent;color:#fff;cursor:pointer;
  font:900 clamp(18px,1.9vw,28px)/1.15 var(--font-display,PirateDisplay),Arial,sans-serif;paint-order:stroke fill;-webkit-text-stroke:2px #152234;text-shadow:0 3px 0 #152234;min-height:44px;touch-action:manipulation}
.opening-continue[hidden]{display:none}
.opening-continue:focus-visible{outline:2px solid #ffe3a3;outline-offset:4px;border-radius:5px}
.ls-tap{display:none}
.opening-status{margin:0;min-height:0;font:500 13px/18px var(--font-ui,PirateUI),Arial,sans-serif;color:#e3e9ef;text-align:center}
.opening-status:empty{display:none}
#opening-retry{font:700 14px var(--font-ui,PirateUI),Arial,sans-serif;color:#fff;background:#16181c;border:2px solid #fff;border-radius:99px;padding:8px 18px;cursor:pointer}
#opening-retry[hidden]{display:none}

/* Motion copied from Colorful Play's splashScreen / pressToContinue Spine rigs (Olympus Reign),
   work/loading-screen-v2/reference/NOTES.md. Their card is 755 units tall: float +-5 = .66%, entrance rise 30 = 4%.
   Entrance: logo and bar pop 0 > 1.2 (.167 s) > 1 (.333 s); cards pop 0 > 1.2 (.267 s) > 1 (.433 s) while
   rising and fading in, .067 s apart; each card's picture pops with it (so it overshoots more).
   Held (first keyframe showing) until the screen's own images have decoded, so nothing pops in empty. */
.ls .ls-brand,.ls .ls-bar{animation:ls-logo-in .333s both}
.ls .ls-card{--in:0s;animation:ls-card-in .433s var(--in) both,ls-float 3.433s calc(var(--in) + .433s) infinite,ls-card-breathe 3.433s calc(var(--in) + .433s) infinite}
.ls .ls-card:nth-child(2){--in:.067s}
.ls .ls-card:nth-child(3){--in:.133s}
.ls .ls-hero{animation:ls-card-in .433s var(--in) both,ls-item-breathe 3.433s .767s infinite}
.ls .ls-big{animation:ls-amount-in .634s .133s both,ls-amount-breathe 3.433s .767s infinite}
.ls:not(.ls-go) :is(.ls-brand,.ls-bar,.ls-card,.ls-hero,.ls-big){animation-play-state:paused}
/* Their PRESS TO CONTINUE rises one text-height while popping 0 > 1.05 > 1 (.3 s) and then holds still. */
.ls .opening-continue:not([hidden]){animation:ls-cta-in .3s both}

@keyframes ls-logo-in{0%{transform:scale(.001);opacity:0}50%{transform:scale(1.2)}70%{opacity:1}100%{transform:none;opacity:1}}
@keyframes ls-card-in{0%{transform:translateY(4%) scale(.001);opacity:0;animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  61.6%{transform:translateY(.8%) scale(1.2);animation-timing-function:cubic-bezier(.4,0,.5,1)}77%{opacity:1}100%{transform:none;opacity:1}}
@keyframes ls-amount-in{0%{transform:scale(.001);opacity:0}58%{transform:scale(1.2);opacity:1}100%{transform:none;opacity:1}}
@keyframes ls-cta-in{0%{transform:translateY(100%) scale(.001);opacity:0}44%{opacity:1}66.7%{transform:scale(1.05)}100%{transform:none;opacity:1}}
/* Idle, one 3.433 s cycle: the card bobs as a sine (up first) and breathes at the half cycle. */
@keyframes ls-float{0%{translate:0 0;animation-timing-function:cubic-bezier(.61,1,.88,1)}
  25.3%{translate:0 -.66%;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  74.8%{translate:0 .66%;animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{translate:0 0}}
@keyframes ls-card-breathe{0%,100%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}50%{scale:1.01 1.02;animation-timing-function:cubic-bezier(.37,0,.63,1)}}
@keyframes ls-item-breathe{0%,100%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}50%{scale:1.05 1.06;animation-timing-function:cubic-bezier(.37,0,.63,1)}}
@keyframes ls-amount-breathe{0%,100%{scale:1 1;animation-timing-function:cubic-bezier(.37,0,.63,1)}50%{scale:1.05 1.08;animation-timing-function:cubic-bezier(.37,0,.63,1)}}
@keyframes ls-phone-in{0%{transform:scale(.001);opacity:0}54.5%{transform:scale(1.1)}90.7%{opacity:1}100%{transform:none;opacity:1}}
.ls-dots{display:none}

/* Short landscape screens (phones on their side): smaller logo and footer so the cards stay readable. */
@media(min-width:761px) and (max-height:560px){
  .ls-content{--card-width:min(25vw,calc((100svh - 150px)*.747));padding:8px 12px}
  .ls-brand{width:clamp(110px,15vw,170px);margin-bottom:6px}
  .ls-footer{grid-template-rows:10px 34px auto;row-gap:4px;margin-top:6px}
  .ls-bar{height:10px}
  .opening-continue{font-size:17px;min-height:32px;padding:3px 14px}
}

/* Phone: one card at a time. Like theirs, the row slides sideways every 2.67 s after a small wind-up
   (opening-screen.mjs); the first card pops 0 > 1.1 > 1. */
@media(max-width:760px){
  .opening-screen{overflow-x:hidden}
  .ls-content{--card-width:min(80vw,380px,calc((100svh - 320px)*.747));justify-content:flex-start;padding:max(12px,env(safe-area-inset-top)) 12px calc(122px + env(safe-area-inset-bottom))}
  /* Phone logo: smaller, with equal space above it, between it and the card, and below the dots. */
  .ls-brand{width:min(56vw,240px);margin:auto auto 0;filter:drop-shadow(0 3px 0 #0b1a26) drop-shadow(0 5px 8px #02182580)}
  .ls-cards{gap:calc(100vw - var(--card-width));margin-top:auto}
  .ls .ls-card{--in:0s;animation:ls-phone-in .367s both,ls-float 3.433s .367s infinite,ls-card-breathe 3.433s .367s infinite}
  .ls .ls-hero{animation:ls-item-breathe 3.433s .767s infinite}
  .ls .ls-big{animation:ls-amount-breathe 3.433s .767s infinite}
  .ls-dots{display:flex;gap:9px;justify-content:center;margin:14px 0 auto}
  .ls-dots i{width:9px;height:9px;border-radius:50%;background:#ffffff66;box-shadow:0 1px 2px #0008;transition:background .3s}
  .ls-dots i.on{background:#fff}
  .ls-footer{position:fixed;left:0;right:0;bottom:0;margin:0;row-gap:8px;padding:18px 12px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#032237b3 40%)}
  .ls-bar{width:72vw;min-width:0}
  .ls-click{display:none}.ls-tap{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .ls .ls-brand,.ls .ls-bar,.ls .ls-card,.ls .ls-hero,.ls .ls-big,.ls .opening-continue:not([hidden]){animation:none}
  .ls-bar span{transition:none}
}