@font-face{font-family:"Special Gothic Expanded One";src:url(assets/fonts/SpecialGothicExpandedOne.ttf) format("truetype");font-display:swap}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body::-webkit-scrollbar{display:none}:root{
  --bg:#eef0ec; --ink:#1d211f; --muted:#5b625e; --accent:#3f5a4a;
  --glass:rgba(247,248,245,.74); --line:rgba(30,35,32,.12);
  --serif:"Special Gothic Expanded One","Cormorant Garamond","Times New Roman",serif; --sans:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:inherit}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:.6em;letter-spacing:.01em}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;align-items:center;gap:2rem;
  padding:.9rem 1.5rem;background:rgba(104,109,106,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#f4f5f2;opacity:0;transform:translateY(-100%);pointer-events:none}
.nav.on{pointer-events:auto}
.nav nav{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.nav a{text-decoration:none;font-size:.92rem;font-weight:600;letter-spacing:.04em;opacity:.85;transition:opacity .2s}
.nav a:hover{opacity:1}
.lang{display:flex;gap:.35rem;align-items:center;font-size:.8rem;opacity:.9;position:absolute;right:1.5rem}
.lang button{background:none;border:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;opacity:.55;letter-spacing:.06em}
.lang button.active{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* HERO */
.hero{height:200vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.bg{position:absolute;inset:0;background:center/cover no-repeat;transform-origin:50% 45%;will-change:transform}
.veil{position:absolute;inset:0;background:rgba(238,240,236,1);opacity:0;will-change:opacity}
.title{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:700;
  font-size:clamp(2.2rem,9vw,8rem);letter-spacing:.14em;padding-left:.14em;white-space:nowrap;color:#1a1d1b;
  text-shadow:0 0 40px rgba(255,255,255,.7);will-change:transform}
.tagline{position:absolute;left:50%;top:55%;transform:translateX(-50%);font-weight:600;letter-spacing:.5em;text-transform:uppercase;
  font-size:.85rem;color:#2a2f2c;padding-left:.5em;text-shadow:0 0 20px rgba(255,255,255,.8)}
.desc{position:absolute;left:50%;top:50%;width:min(720px,88vw);transform:translate(-50%,-50%);opacity:0;padding:2.2rem 2.4rem;
  border-radius:26px;text-align:center;will-change:opacity,transform}
.desc p{margin-top:.8em;font-size:1.08rem;color:#2a2f2c}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 60px rgba(30,35,32,.18)}

/* SCENES: фон-скриншот с размытыми краями */
.scene{position:relative;padding:20vh 0}
#sceneA{margin-top:-30vh;padding-top:34vh}
#sceneB{margin-top:-8vh}
.scene-bg{position:absolute;inset:0;background:center/cover fixed no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 78%,transparent 100%)}
.scene-bg::after{content:"";position:absolute;inset:0;background:rgba(238,240,236,.28)}
.wrap{position:relative;width:min(1000px,92vw);margin:0 auto 14vh}
.wrap.wide{width:min(1200px,92vw)}
.wrap:last-child{margin-bottom:0}
.island{background:var(--glass);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.65);border-radius:30px;padding:clamp(1.6rem,4vw,3rem);box-shadow:0 24px 70px rgba(30,35,32,.16)}
.island.long{padding-block:clamp(2rem,5vw,4rem)}
.lead{color:var(--muted);font-size:1.1rem;max-width:60ch;margin-bottom:2rem}

.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.role{background:rgba(255,255,255,.65);border:1px solid var(--line);border-radius:20px;padding:1.4rem;transition:transform .25s,box-shadow .25s}
.role:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,35,32,.12)}
.role svg{width:38px;height:38px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.role h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:.3rem}
.role p{font-size:.95rem;color:var(--muted)}

/* ROADMAP */
.timeline{list-style:none;position:relative;margin-top:2rem;padding-left:2.2rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(var(--accent),rgba(63,90,74,.15))}
.timeline li{position:relative;padding:0 0 2.6rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-2.05rem;top:.35rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline li.done::before{background:var(--accent)}
.timeline li.now::before{background:var(--accent);box-shadow:0 0 0 6px rgba(63,90,74,.2)}
.when{font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.timeline h3{font-family:var(--serif);font-size:1.7rem;line-height:1.2}
.timeline p{color:var(--muted);max-width:56ch}

/* GALLERY */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.4rem;margin-top:2.5rem}
.card{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.65);
  border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(30,35,32,.16)}
.card img,.card video{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s}
.card:hover img,.card:hover video{transform:scale(1.04)}
.card .m{overflow:hidden}
.card figcaption{padding:1.1rem 1.3rem 1.3rem}
.card h3{font-family:var(--serif);font-size:1.45rem}
.card p{color:var(--muted);font-size:.95rem}

/* DISCORD */
.discord{padding:16vh 0 14vh;width:min(780px,92vw);margin:0 auto;text-align:center}
.discord .lead{margin-inline:auto}
.btn{display:inline-block;background:var(--ink);color:#f4f5f2;text-decoration:none;font-weight:700;letter-spacing:.06em;
  padding:1rem 2.4rem;border-radius:999px;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--accent)}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:0 1rem 2.5rem}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.card.reveal{transition-delay:calc(var(--i,0)*70ms)}

@media (max-width:760px){
  .nav{gap:.6rem;padding:.7rem 3.2rem .7rem .8rem;justify-content:flex-start}
  .nav nav{gap:.9rem;justify-content:flex-start}
  .nav a{font-size:.78rem}
  .lang{right:.7rem}
  .scene-bg{background-attachment:scroll}
  .grid{grid-template-columns:1fr}
  .title{letter-spacing:.08em}
  .desc{padding:1.5rem}
}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}html{scroll-behavior:auto}}


.timeline ul{list-style:none;margin-top:.8rem;display:grid;gap:.7rem}.timeline ul li{padding:0;position:static}.timeline ul li::before{display:none}.timeline ul b{display:block;font-weight:700}.timeline ul span{color:var(--muted);font-size:.95rem}

/* gallery heading + dark bottom */
.dark{--ink:#eef0ec;--muted:#a9b0ab;--glass:rgba(20,24,22,.72);--line:rgba(255,255,255,.12);color:var(--ink)}
.dark .island,.dark .card{border-color:rgba(255,255,255,.1);box-shadow:0 24px 70px rgba(0,0,0,.4)}
.dark .btn{background:#eef0ec;color:#141816}.dark .btn:hover{background:#c9d6cd}
#sceneB{padding-top:36vh;background:linear-gradient(to bottom,transparent 0,transparent 35%,#101311 92%)}
#sceneB .scene-bg::after{background:rgba(0,0,0,.08)}
#sceneB .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 70%,transparent 100%)}
.gal-head{text-align:center;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.gal-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.2em}
.gal-head p{font-size:1rem;opacity:.92}
.grid{grid-template-columns:repeat(2,1fr);margin-top:1.8rem}
.discord.dark,.foot.dark{background:#101311;width:auto;max-width:none;margin:0}
.discord.dark{padding:10vh 4vw 14vh}
.discord.dark .island{width:min(780px,100%);margin:0 auto}
.foot.dark{padding:0 1rem 2.5rem;color:var(--muted)}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

/* v4: seamless backgrounds, parallax, light gallery */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35vh;background:linear-gradient(to bottom,rgba(238,240,236,0),var(--bg));z-index:5;pointer-events:none}
.scene-bg{inset:-10vh 0;background-attachment:scroll;will-change:transform}
#sceneA{margin-top:10vh;padding-top:24vh}
#sceneA .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40vh);mask-image:linear-gradient(to bottom,transparent 0,#000 40vh)}
#sceneB{margin-top:-30vh;padding-top:44vh;padding-bottom:24vh;background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 45vh),#101311 100%)}
#sceneB .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40vh,#000 calc(100% - 45vh),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 40vh,#000 calc(100% - 45vh),transparent 100%)}

/* v5 */
.hero{height:175vh}
.hero::after{display:none}
.scene-bg{inset:-25vh -5vw;z-index:0}
.wrap,.discord.dark{z-index:2}
.discord.dark{position:relative}
#sceneA{margin-top:-5vh;padding-top:14vh;padding-bottom:0}
#sceneA .wrap:last-child{margin-bottom:0}
#sceneA .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30vh);mask-image:linear-gradient(to bottom,transparent 0,#000 30vh)}
#sceneB{margin-top:20vh;padding-top:26vh;padding-bottom:20vh}
#sceneB .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30vh,#000 calc(100% - 70vh),transparent calc(100% - 25vh));mask-image:linear-gradient(to bottom,transparent 0,#000 30vh,#000 calc(100% - 70vh),transparent calc(100% - 25vh))}

/* v6: masked wrapper + parallax picture inside */
.scene-bg{inset:0 -5vw;overflow:hidden;will-change:auto;transform:none!important}
#bgSeek{top:-30vh}
#bgGallery{top:-30vh}
.scene-bg .pic{position:absolute;left:0;right:0;top:0;height:130vh;background-size:cover;background-position:center;will-change:transform}
#sceneA{margin-top:0}
#sceneB{margin-top:0;padding-top:14vh;padding-bottom:16vh;background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 40vh),#101311 100%)}
#sceneB .scene-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30vh,#000 calc(100% - 40vh),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30vh,#000 calc(100% - 40vh),transparent 100%)}


/* v7: gothic headings, soft description */
h2,.timeline h3,.role h3,.card h3{font-weight:400;letter-spacing:.01em}
h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2}
.role h3,.card h3{font-size:1.1rem;line-height:1.3}
.timeline h3{font-size:1.25rem;line-height:1.3}
.gal-head h2{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.title{font-weight:400;font-size:clamp(1.8rem,6.6vw,6rem);letter-spacing:.05em;padding-left:.05em}
.desc{opacity:0;transform:translate(-50%,calc(-50% + 44px));transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);will-change:auto}
.desc.show{opacity:1;transform:translate(-50%,-50%)}