/* Shared final art direction across every page. Copy and data stay untouched. */
:root{
  --finish-lime:#c8e653;
  --finish-line:rgba(200,230,83,.28);
  scroll-behavior:smooth;
  scroll-padding-top:126px;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

::selection{background:#c8e653;color:#10150c}
a{text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid #d7f37a;outline-offset:4px}

/* Keep the world visible while giving each page a more deliberate entrance. */
.home-page .home-hero-inner,
.game-concept-page .concept-page > .clips-hero,
.gallery-page .clips-hero,
.checklist-page .checklist-hero,
.impressum-page main{
  animation:finish-arrive .72s cubic-bezier(.2,.72,.22,1) both;
}
.clips-page .clips-main > .clips-section,
.impressum-page main > .clips-section{
  animation:finish-arrive .6s cubic-bezier(.2,.72,.22,1) both;
}
.clips-page .clips-main > .clips-section:nth-of-type(2),
.impressum-page main > .clips-section:nth-of-type(2){animation-delay:.06s}
.impressum-page main > .clips-section:nth-of-type(3){animation-delay:.12s}

/* Clearer, more intentional hover states for the expandable sections. */
.gallery-page .gallery-group,
.clips-page .clip-category,
.checklist-page .checklist-card{
  transition:translate .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.gallery-page .gallery-group:hover,
.clips-page .clip-category:hover,
.checklist-page .checklist-card:hover{translate:0 -2px}
.gallery-page .gallery-group-toggle,
.clips-page .clip-category .gallery-group-toggle{
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.gallery-page .gallery-group:hover .gallery-group-toggle,
.clips-page .clip-category:hover .gallery-group-toggle{
  background:rgba(200,230,83,.24);
  box-shadow:inset 0 0 0 1px rgba(201,232,89,.42),0 0 18px rgba(200,230,83,.14);
}
.gallery-page .gallery-group[open] .gallery-group-toggle,
.clips-page .clip-category[open] .gallery-group-toggle{transform:rotate(180deg)}

/* A soft traveling highlight gives the chapter panels a crafted edge. */
.game-concept-page .concept-page > .clips-hero::after,
.clips-page .clips-main > .clips-hero::after,
.gallery-page .clips-hero::after,
.checklist-page .checklist-hero::after{
  animation:finish-edge 5s ease-in-out infinite alternate;
  transform-origin:left center;
}
.journal-explore span,.gallery-explore span{transition:transform .25s ease}
.journal-explore:hover span,.gallery-explore:hover span{transform:translateY(3px)}

/* Real loading indicator: a slim illuminated rail, followed by a staggered build. */
.section-load-meter{
  position:relative;
  z-index:3;
  width:100%;
  height:0;
  margin:0;
  overflow:hidden;
  opacity:0;
  border-radius:99px;
  background:rgba(211,236,148,.12);
  box-shadow:inset 0 0 0 1px rgba(211,236,148,.08);
  transition:height .22s ease,margin .22s ease,opacity .22s ease;
}
.section-load-meter.is-visible{height:3px;margin:0 0 18px;opacity:1}
.section-load-meter > span{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8da932,#d7f477 72%,#efffb5);
  box-shadow:0 0 12px rgba(200,230,83,.6),0 0 26px rgba(200,230,83,.24);
  transform:scaleX(var(--load-progress,0));
  transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease;
}
.section-load-meter > span::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  animation:meter-glint 1.35s ease-in-out infinite;
}
.section-load-meter > span::after{
  content:"";
  position:absolute;
  top:-4px;
  right:-2px;
  width:9px;
  height:11px;
  border-radius:50%;
  background:#efffb5;
  filter:blur(3px);
  opacity:.9;
  box-shadow:0 0 12px 4px rgba(200,230,83,.5);
}
.section-load-meter.is-complete > span{filter:brightness(1.2)}
.section-load-meter--hero{position:absolute;top:0;right:clamp(22px,3.5vw,54px);left:clamp(22px,3.5vw,54px);width:auto}
.section-load-meter--hero.is-visible{margin:0}
.home-hero-inner.is-waiting-assets .home-hero-copy,
.home-hero-inner.is-waiting-assets .home-hero-visual{
  opacity:0;
  animation:none!important;
}
.home-hero-copy.is-building > *,
.home-story-copy.is-building > *,
.game-concept-page .concept-page > .clips-section.is-building > *{
  animation:concept-line-build .5s cubic-bezier(.2,.72,.22,1) var(--build-delay,0ms) both;
}
.home-hero-visual.is-building img{
  animation:home-visual-build .82s cubic-bezier(.18,.72,.22,1) both;
}
.home-cover-strip{position:relative}
.home-cover-strip .section-load-meter{grid-column:1/-1}
.home-cover-strip.is-waiting-assets img{opacity:0;animation:none!important}
.home-cover-strip img{animation:none}
.gallery-group-body.is-waiting-assets .gallery-card,
.gallery-group-body.is-waiting-assets .clip-card{
  opacity:0;
  transform:translateY(15px) scale(.99);
}
.gallery-group-body.is-building .gallery-card,
.gallery-group-body.is-building .clip-card{
  animation:section-card-build .62s cubic-bezier(.18,.7,.22,1) var(--build-delay,0ms) both;
}
.checklist-body.is-building > *{
  animation:section-card-build .46s cubic-bezier(.18,.7,.22,1) var(--build-delay,0ms) both;
}
.game-concept-page .concept-page > .clips-section.build-pending{opacity:0;transform:translateY(18px)}
.game-concept-page .concept-page > .clips-section.is-built{
  animation:section-card-build .62s cubic-bezier(.18,.7,.22,1) var(--build-delay,0ms) both;
}
.checklist-page .checklist-card.build-pending{opacity:0;transform:translateY(16px)}
.checklist-page .checklist-card.is-built{
  animation:section-card-build .52s cubic-bezier(.18,.7,.22,1) var(--build-delay,0ms) both;
}

/* The home page remains about the actual game; the covers are a neat visual suite. */
.home-story-copy{font-size:clamp(13px,.95vw,14px);line-height:1.66}
.home-cover-strip img{
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,filter .35s ease;
}
.home-cover-strip img:hover{
  transform:translateY(-4px) scale(1.012);
  border-color:rgba(200,230,83,.72);
  box-shadow:0 17px 34px rgba(0,0,0,.72),0 0 24px rgba(200,230,83,.12);
  filter:saturate(1.08);
}

/* Progress: let the melee footage lead and bring the first section into view sooner. */
.checklist-page .checklist-hero{
  min-height:258px;
  padding:clamp(28px,3.2vw,44px) clamp(22px,5vw,70px);
  background-image:
    linear-gradient(90deg,rgba(5,10,8,.96) 0%,rgba(5,10,8,.83) 47%,rgba(5,10,8,.28) 100%),
    url("../images/gallery/dev_04.png");
  background-position:center,center 49%;
  background-size:auto,cover;
}
.checklist-page .checklist-note{margin-top:16px;padding-top:14px;padding-bottom:14px}
.checklist-page .checklist-header{transition:background .22s ease,color .22s ease}
.checklist-page .checklist-card.open .checklist-title::before{color:#d5ef93}

/* Give the legal page the same calm spacing and panel finish as the journal. */
.impressum-page main.wrap{width:min(1040px,100%);max-width:1040px;padding:38px 24px 70px}
.impressum-page main > .clips-hero{padding:38px 0 24px}
.impressum-page main > .clips-section{
  position:relative;
  margin:14px 0 0;
  padding:clamp(22px,3vw,34px);
  border:1px solid rgba(185,212,113,.22);
  border-radius:7px 19px 7px 19px;
  background:linear-gradient(135deg,rgba(20,28,22,.9),rgba(5,9,7,.94));
  box-shadow:0 14px 35px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
  transition:border-color .22s ease,box-shadow .22s ease,translate .22s ease;
  animation:finish-arrive .6s cubic-bezier(.2,.72,.22,1) both;
}
.impressum-page main > .clips-section:hover{translate:0 -2px;border-color:rgba(200,230,83,.46);box-shadow:inset 3px 0 #c8e653,0 16px 38px rgba(0,0,0,.48)}
.impressum-page main > .clips-section .clips-h2{color:#dce9b7;letter-spacing:.14em}
.impressum-page main > .clips-section .clips-note{max-width:760px;color:#c7d0c0;font-size:14px;line-height:1.8}

/* Full-opacity, full-width footer with legible type and a deliberate closing line. */
.footer{
  position:relative;
  isolation:isolate;
  width:100%;
  margin:0;
  padding:46px 24px 34px;
  border-top:1px solid rgba(200,230,83,.5);
  background:#050706;
  box-shadow:0 -18px 52px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.035);
}
.footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent 4%,rgba(200,230,83,.55) 24%,#c8e653 50%,rgba(200,230,83,.55) 76%,transparent 96%);
  box-shadow:0 0 18px rgba(200,230,83,.3);
}
.footer-symbol{opacity:.2;filter:saturate(.95) brightness(.95);}
.footer-meta{color:rgba(200,230,83,.88);font-size:10px;font-weight:700;letter-spacing:.23em;text-shadow:0 2px 8px #000;}
.footer-meta a{color:rgba(232,237,219,.88);transition:color .2s ease,text-shadow .2s ease;}
.footer-meta a:hover{color:#eaffad;text-shadow:0 0 12px rgba(200,230,83,.35);text-decoration:none;}

@keyframes finish-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes section-card-build{from{opacity:0;transform:translateY(15px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes concept-line-build{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-visual-build{from{opacity:.35;transform:scale(1.045);filter:saturate(.68) brightness(.68)}to{opacity:1;transform:scale(1);filter:saturate(1) brightness(1)}}
@keyframes meter-glint{from{transform:translateX(-120%);opacity:0}25%{opacity:.8}to{transform:translateX(420%);opacity:0}}
@keyframes finish-edge{from{opacity:.55;transform:scaleX(.78)}to{opacity:1;transform:scaleX(1)}}

@media(max-width:720px){
  :root{scroll-padding-top:90px}
  .checklist-page .checklist-hero{min-height:0;padding:30px 22px}
  .footer{padding:38px 18px 30px}
  .home-story-copy{line-height:1.58}
  .section-load-meter--hero{right:18px;left:18px}
  .impressum-page main.wrap{padding:24px 16px 48px}
  .impressum-page main > .clips-hero{padding:25px 0 18px}
  .impressum-page main > .clips-section .clips-note{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .home-hero-inner.is-waiting-assets .home-hero-copy,
  .home-hero-inner.is-waiting-assets .home-hero-visual,
  .home-cover-strip.is-waiting-assets img,
  .gallery-group-body.is-waiting-assets .gallery-card,
  .gallery-group-body.is-waiting-assets .clip-card,
  .game-concept-page .concept-page > .clips-section.build-pending,
  .checklist-page .checklist-card.build-pending{opacity:1;transform:none}
}